@sendbird/uikit-react-native/lib/module/components/ReactionAddons/MessageReactionAddon.js

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

import React from 'react';
import { Pressable } from 'react-native';
import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
import { getReactionCount } from '@sendbird/uikit-utils';
import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
import { useReaction, useSendbirdChat } from '../../hooks/useContext';
import ReactionRoundedButton from './ReactionRoundedButton';
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.createElement(Pressable, {
      key: reaction.key,
      onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
      onLongPress: () => onOpenReactionUserList(index),
      delayLongPress: DEFAULT_LONG_PRESS_DELAY
    }, ({
      pressed
    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton, {
      source: getIconSource(reaction.key),
      count: 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.createElement(Pressable, {
      key: REACTION_MORE_KEY,
      onPress: onOpenReactionList
    }, ({
      pressed
    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
      pressed: pressed
    })));
  }
  return buttons;
};
const MessageReactionAddon = ({
  channel,
  message,
  reactionAddonType = 'default'
}) => {
  var _message$reactions;
  const {
    colors
  } = useUIKitTheme();
  const {
    sdk,
    emojiManager
  } = useSendbirdChat();
  const {
    openReactionList,
    openReactionUserList
  } = useReaction();
  const forceUpdate = useForceUpdate();
  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.createElement(Pressable, {
    style: [containerStyle, {
      backgroundColor: colors.background,
      borderColor: colors.ui.reaction.rounded.enabled.background
    }]
  }, reactionButtons);
};
const styles = 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
  }
});
export default MessageReactionAddon;
//# sourceMappingURL=MessageReactionAddon.js.map