@sendbird/uikit-react-native/lib/commonjs/components/ReactionAddons/BottomSheetReactionAddon.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
var _uikitTools = require("@sendbird/uikit-tools");
var _uikitUtils = require("@sendbird/uikit-utils");
var _constants = require("../../constants");
var _useContext = require("../../hooks/useContext");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const EmojiReactionPressable = ({
  url,
  reacted,
  selectedBackground,
  enabledBackground,
  onPress
}) => {
  const [pressed, setPressed] = (0, _react.useState)(false);
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    onPress: onPress,
    onPressIn: () => setPressed(true),
    onPressOut: () => setPressed(false),
    style: [styles.button, {
      backgroundColor: reacted || pressed ? selectedBackground : enabledBackground
    }]
  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
    source: {
      uri: url
    },
    style: styles.emoji
  }));
};
const EmojiMorePressable = ({
  selectedBackground,
  enabledBackground,
  iconColor,
  onPress
}) => {
  const [pressed, setPressed] = (0, _react.useState)(false);
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    onPress: onPress,
    onPressIn: () => setPressed(true),
    onPressOut: () => setPressed(false),
    style: [styles.button, {
      backgroundColor: pressed ? selectedBackground : enabledBackground
    }]
  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
    icon: 'emoji-more',
    style: styles.emoji,
    color: iconColor
  }));
};
const BottomSheetReactionAddon = ({
  onClose,
  message,
  channel
}) => {
  const {
    emojiManager,
    currentUser,
    sdk
  } = (0, _useContext.useSendbirdChat)();
  const {
    updateReactionFocusedItem,
    openReactionList
  } = (0, _useContext.useReaction)();
  const {
    colors
  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
  const safeArea = (0, _uikitUtils.useSafeAreaPadding)(['left', 'right']);
  (0, _uikitTools.useGroupChannelHandler)(sdk, {
    async onReactionUpdated(eventChannel, event) {
      if ((channel === null || channel === void 0 ? void 0 : channel.url) === eventChannel.url && event.messageId === (message === null || message === void 0 ? void 0 : message.messageId)) {
        const msg = await sdk.message.getMessage({
          includeReactions: true,
          messageId: message.messageId,
          channelUrl: message.channelUrl,
          channelType: message.channelType
        });
        if (msg) updateReactionFocusedItem({
          message: msg
        });
      }
    }
  });
  const emojiAll = emojiManager.allEmoji.slice(0, 5);
  const color = colors.ui.reaction.default;
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.container, {
      marginStart: safeArea.paddingStart,
      marginEnd: safeArea.paddingEnd
    }]
  }, emojiAll.map(({
    key,
    url
  }) => {
    var _message$reactions;
    const reactionUserIds = (message === null || message === void 0 || (_message$reactions = message.reactions) === null || _message$reactions === void 0 || (_message$reactions = _message$reactions.find(it => it.key === key)) === null || _message$reactions === void 0 ? void 0 : _message$reactions.userIds) ?? [];
    const currentUserIdx = reactionUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? _constants.UNKNOWN_USER_ID);
    const reacted = currentUserIdx > -1;
    const onPress = async () => {
      const action = (message, key) => {
        return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);
      };
      await action(message, key).catch(error => {
        _uikitUtils.Logger.warn('Failed to reaction', error);
      }).finally(() => {
        onClose();
      });
    };
    return /*#__PURE__*/_react.default.createElement(EmojiReactionPressable, {
      key: key,
      url: url,
      reacted: reacted,
      selectedBackground: color.selected.background,
      enabledBackground: color.enabled.background,
      onPress: onPress
    });
  }), /*#__PURE__*/_react.default.createElement(EmojiMorePressable, {
    selectedBackground: color.selected.background,
    enabledBackground: color.enabled.background,
    iconColor: colors.onBackground03,
    onPress: async () => {
      await onClose();
      openReactionList({
        channel,
        message
      });
    }
  }));
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
  container: {
    paddingTop: 12,
    paddingBottom: 16,
    paddingHorizontal: 18,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  button: {
    width: 44,
    height: 44,
    padding: 4,
    borderRadius: 8
  },
  emoji: {
    width: '100%',
    height: '100%'
  }
});
var _default = exports.default = BottomSheetReactionAddon;
//# sourceMappingURL=BottomSheetReactionAddon.js.map