@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, { useState } 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 ReactionPressable = ({
  reaction,
  channel,
  message,
  source,
  onOpenReactionUserList,
  index,
  style
}) => {
  const [pressed, setPressed] = useState(false);
  return /*#__PURE__*/React.createElement(Pressable, {
    onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
    onLongPress: () => onOpenReactionUserList(index),
    delayLongPress: DEFAULT_LONG_PRESS_DELAY,
    onPressIn: () => setPressed(true),
    onPressOut: () => setPressed(false)
  }, /*#__PURE__*/React.createElement(ReactionRoundedButton, {
    source: source,
    count: getReactionCount(reaction),
    reacted: pressed || reaction.hasCurrentUserReacted,
    style: style
  }));
};
const ReactionMorePressable = ({
  onPress
}) => {
  const [pressed, setPressed] = useState(false);
  return /*#__PURE__*/React.createElement(Pressable, {
    onPress: onPress,
    onPressIn: () => setPressed(true),
    onPressOut: () => setPressed(false)
  }, /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
    pressed: pressed
  }));
};
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(ReactionPressable, {
      key: reaction.key,
      reaction: reaction,
      channel: channel,
      message: message,
      source: getIconSource(reaction.key),
      onOpenReactionUserList: onOpenReactionUserList,
      index: index,
      style: reactionAddonType === 'default' ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom] : [styles.marginEnd, styles.marginBottom]
    });
  });
  if (buttons.length < emojiLimit) {
    buttons.push(/*#__PURE__*/React.createElement(ReactionMorePressable, {
      key: REACTION_MORE_KEY,
      onPress: onOpenReactionList
    }));
  }
  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