@gathertown/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 _uikitChatHooks = require("@gathertown/uikit-chat-hooks");
var _uikitReactNativeFoundation = require("@gathertown/uikit-react-native-foundation");
var _uikitUtils = require("@gathertown/uikit-utils");
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _constants = require("../../constants");
var _useContext = require("../../hooks/useContext");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const BottomSheetReactionAddon = _ref => {
  let {
    onClose,
    message,
    channel
  } = _ref;
  const {
    emojiManager,
    currentUser,
    sdk
  } = (0, _useContext.useSendbirdChat)();
  const {
    updateReactionFocusedItem,
    openReactionList
  } = (0, _useContext.useReaction)();
  const {
    colors
  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
  const handlerId = (0, _uikitUtils.useUniqHandlerId)('BottomSheetReactionAddon');
  const {
    left,
    right
  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
  const ctx = (0, _react.useContext)(_uikitReactNativeFoundation.CustomComponentContext);
  (0, _uikitChatHooks.useChannelHandler)(sdk, handlerId, {
    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;
  const onPress = (0, _react.useCallback)((key, reacted) => {
    if (!reacted) channel.deleteReaction(message, key);else channel.addReaction(message, key);
    onClose();
  }, [channel, onClose]);
  if (ctx !== null && ctx !== void 0 && ctx.renderEmojiSelector) {
    return ctx.renderEmojiSelector({
      emojis: emojiManager.allEmoji,
      message,
      onPress
    });
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.container, {
      marginRight: right,
      marginLeft: left
    }]
  }, emojiAll.map(_ref2 => {
    var _message$reactions, _message$reactions$fi;
    let {
      key,
      url
    } = _ref2;
    const reactionUserIds = (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.find(it => it.key === key)) === null || _message$reactions$fi === void 0 ? void 0 : _message$reactions$fi.userIds) ?? [];
    const currentUserIdx = reactionUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? _constants.UNKNOWN_USER_ID);
    const reacted = currentUserIdx > -1;
    return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
      key: key,
      onPress: () => onPress(key, !reacted),
      style: _ref3 => {
        let {
          pressed
        } = _ref3;
        return [styles.button, {
          backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
        }];
      }
    }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
      source: {
        uri: url
      },
      style: styles.emoji
    }));
  }), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    onPress: async () => {
      await onClose();
      openReactionList({
        channel,
        message
      });
    },
    style: _ref4 => {
      let {
        pressed
      } = _ref4;
      return [styles.button, {
        backgroundColor: pressed ? color.selected.background : color.enabled.background
      }];
    }
  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
    icon: 'emoji-more',
    style: styles.emoji,
    color: colors.onBackground03
  })));
};
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 = BottomSheetReactionAddon;
exports.default = _default;
//# sourceMappingURL=BottomSheetReactionAddon.js.map