@sendbird/uikit-react-native/lib/commonjs/components/ReactionAddons/MessageReactionAddon.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 = _interopRequireDefault(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");
var _ReactionRoundedButton = _interopRequireDefault(require("./ReactionRoundedButton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const NUM_COL = 4;
const REACTION_MORE_KEY = 'reaction-more-button';
const createOnPressReaction = (reaction, channel, message, reacted) => {
  return () => {
    if (reacted) {
      return channel.deleteReaction(message, reaction.key);
    } else {
      return channel.addReaction(message, reaction.key);
    }
  };
};
const createReactionButtons = (channel, message, getIconSource, emojiLimit, onOpenReactionList, onOpenReactionUserList, reactionAddonType) => {
  const reactions = message.reactions ?? [];
  const buttons = reactions.map((reaction, index) => {
    const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;
    const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;
    return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
      key: reaction.key,
      onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
      onLongPress: () => onOpenReactionUserList(index),
      delayLongPress: _constants.DEFAULT_LONG_PRESS_DELAY
    }, ({
      pressed
    }) => /*#__PURE__*/_react.default.createElement(_ReactionRoundedButton.default, {
      source: getIconSource(reaction.key),
      count: (0, _uikitUtils.getReactionCount)(reaction),
      reacted: pressed || reaction.hasCurrentUserReacted,
      style: reactionAddonType === 'default' ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom] : [styles.marginEnd, styles.marginBottom]
    }));
  });
  if (buttons.length < emojiLimit) {
    buttons.push(/*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
      key: REACTION_MORE_KEY,
      onPress: onOpenReactionList
    }, ({
      pressed
    }) => /*#__PURE__*/_react.default.createElement(_ReactionRoundedButton.default.More, {
      pressed: pressed
    })));
  }
  return buttons;
};
const MessageReactionAddon = ({
  channel,
  message,
  reactionAddonType = 'default'
}) => {
  var _message$reactions;
  const {
    colors
  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
  const {
    sdk,
    emojiManager
  } = (0, _useContext.useSendbirdChat)();
  const {
    openReactionList,
    openReactionUserList
  } = (0, _useContext.useReaction)();
  const forceUpdate = (0, _uikitTools.useForceUpdate)();
  (0, _uikitTools.useGroupChannelHandler)(sdk, {
    async onReactionUpdated(_, event) {
      if (event.messageId === message.messageId) {
        message.applyReactionEvent(event);
        forceUpdate();
      }
    }
  });
  if (reactionAddonType === 'default' && !((_message$reactions = message.reactions) !== null && _message$reactions !== void 0 && _message$reactions.length)) return null;
  const reactionButtons = createReactionButtons(channel, message, reactionKey => {
    const emoji = emojiManager.allEmojiMap[reactionKey];
    return emojiManager.getEmojiIconSource(emoji);
  }, emojiManager.allEmoji.length, () => openReactionList({
    channel,
    message
  }), focusIndex => openReactionUserList({
    channel,
    message,
    focusIndex
  }), reactionAddonType);
  const containerStyle = reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    style: [containerStyle, {
      backgroundColor: colors.background,
      borderColor: colors.ui.reaction.rounded.enabled.background
    }]
  }, reactionButtons);
};
const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
  reactionContainer: {
    alignItems: 'stretch',
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 8,
    borderRadius: 16,
    borderWidth: 1
  },
  reactionThreadParentMessageContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  marginEnd: {
    marginEnd: 4.5
  },
  marginBottom: {
    marginBottom: 4
  }
});
var _default = exports.default = MessageReactionAddon;
//# sourceMappingURL=MessageReactionAddon.js.map