@sendbird/uikit-react-native 3.12.2 → 3.12.3

package/lib/commonjs/components/ReactionAddons/BottomSheetReactionAddon.js

@@ -4,14 +4,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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,
@@ -70,38 +112,26 @@ const BottomSheetReactionAddon = ({
         onClose();
       });
     };
-    return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    return /*#__PURE__*/_react.default.createElement(EmojiReactionPressable, {
       key: key,
-      onPress: onPress,
-      style: ({
-        pressed
-      }) => [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, {
+      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
       });
-    },
-    style: ({
-      pressed
-    }) => [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: {

package/lib/commonjs/components/ReactionAddons/BottomSheetReactionAddon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitReactNativeFoundation","_uikitTools","_uikitUtils","_constants","_useContext","e","__esModule","default","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","useSendbirdChat","updateReactionFocusedItem","openReactionList","useReaction","colors","useUIKitTheme","safeArea","useSafeAreaPadding","useGroupChannelHandler","onReactionUpdated","eventChannel","event","url","messageId","msg","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","createElement","View","style","styles","container","marginStart","paddingStart","marginEnd","paddingEnd","map","key","_message$reactions","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","UNKNOWN_USER_ID","reacted","onPress","action","deleteReaction","addReaction","catch","error","Logger","warn","finally","Pressable","pressed","button","backgroundColor","selected","background","enabled","Image","source","uri","emoji","Icon","icon","onBackground03","createStyleSheet","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius","_default","exports"],"sources":["BottomSheetReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useSafeAreaPadding } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\n\ntype Props = {\n  onClose: () => Promise<void>;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n};\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const safeArea = useSafeAreaPadding(['left', 'right']);\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(eventChannel, event) {\n      if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {\n        const msg = (await sdk.message.getMessage({\n          includeReactions: true,\n          messageId: message.messageId,\n          channelUrl: message.channelUrl,\n          channelType: message.channelType,\n        })) as null | BaseMessage;\n        if (msg) updateReactionFocusedItem({ message: msg });\n      }\n    },\n  });\n\n  const emojiAll = emojiManager.allEmoji.slice(0, 5);\n  const color = colors.ui.reaction.default;\n\n  return (\n    <View style={[styles.container, { marginStart: safeArea.paddingStart, marginEnd: safeArea.paddingEnd }]}>\n      {emojiAll.map(({ key, url }) => {\n        const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n        const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n        const reacted = currentUserIdx > -1;\n\n        const onPress = async () => {\n          const action = (message: BaseMessage, key: string) => {\n            return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);\n          };\n\n          await action(message, key)\n            .catch((error) => {\n              Logger.warn('Failed to reaction', error);\n            })\n            .finally(() => {\n              onClose();\n            });\n        };\n\n        return (\n          <Pressable\n            key={key}\n            onPress={onPress}\n            style={({ pressed }) => [\n              styles.button,\n              { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n            ]}\n          >\n            <Image source={{ uri: url }} style={styles.emoji} />\n          </Pressable>\n        );\n      })}\n\n      <Pressable\n        onPress={async () => {\n          await onClose();\n          openReactionList({ channel, message });\n        }}\n        style={({ pressed }) => [\n          styles.button,\n          { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n        ]}\n      >\n        <Icon icon={'emoji-more'} style={styles.emoji} color={colors.onBackground03} />\n      </Pressable>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 12,\n    paddingBottom: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default BottomSheetReactionAddon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitReactNativeFoundation","_uikitTools","_uikitUtils","_constants","_useContext","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiReactionPressable","url","reacted","selectedBackground","enabledBackground","onPress","pressed","setPressed","useState","createElement","Pressable","onPressIn","onPressOut","style","styles","button","backgroundColor","Image","source","uri","emoji","EmojiMorePressable","iconColor","Icon","icon","color","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","useSendbirdChat","updateReactionFocusedItem","openReactionList","useReaction","colors","useUIKitTheme","safeArea","useSafeAreaPadding","useGroupChannelHandler","onReactionUpdated","eventChannel","event","messageId","msg","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","ui","reaction","View","container","marginStart","paddingStart","marginEnd","paddingEnd","map","key","_message$reactions","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","UNKNOWN_USER_ID","action","deleteReaction","addReaction","catch","error","Logger","warn","finally","selected","background","enabled","onBackground03","createStyleSheet","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius","_default","exports"],"sources":["BottomSheetReactionAddon.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\n\ntype Props = {\n  onClose: () => Promise<void>;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n};\n\nconst EmojiReactionPressable = ({\n  url,\n  reacted,\n  selectedBackground,\n  enabledBackground,\n  onPress,\n}: {\n  url: string;\n  reacted: boolean;\n  selectedBackground: string;\n  enabledBackground: string;\n  onPress: () => void;\n}) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable\n      onPress={onPress}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n    </Pressable>\n  );\n};\n\nconst EmojiMorePressable = ({\n  selectedBackground,\n  enabledBackground,\n  iconColor,\n  onPress,\n}: {\n  selectedBackground: string;\n  enabledBackground: string;\n  iconColor: string;\n  onPress: () => void;\n}) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable\n      onPress={onPress}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[styles.button, { backgroundColor: pressed ? selectedBackground : enabledBackground }]}\n    >\n      <Icon icon={'emoji-more'} style={styles.emoji} color={iconColor} />\n    </Pressable>\n  );\n};\n\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const safeArea = useSafeAreaPadding(['left', 'right']);\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(eventChannel, event) {\n      if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {\n        const msg = (await sdk.message.getMessage({\n          includeReactions: true,\n          messageId: message.messageId,\n          channelUrl: message.channelUrl,\n          channelType: message.channelType,\n        })) as null | BaseMessage;\n        if (msg) updateReactionFocusedItem({ message: msg });\n      }\n    },\n  });\n\n  const emojiAll = emojiManager.allEmoji.slice(0, 5);\n  const color = colors.ui.reaction.default;\n\n  return (\n    <View style={[styles.container, { marginStart: safeArea.paddingStart, marginEnd: safeArea.paddingEnd }]}>\n      {emojiAll.map(({ key, url }) => {\n        const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n        const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n        const reacted = currentUserIdx > -1;\n\n        const onPress = async () => {\n          const action = (message: BaseMessage, key: string) => {\n            return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);\n          };\n\n          await action(message, key)\n            .catch((error) => {\n              Logger.warn('Failed to reaction', error);\n            })\n            .finally(() => {\n              onClose();\n            });\n        };\n\n        return (\n          <EmojiReactionPressable\n            key={key}\n            url={url}\n            reacted={reacted}\n            selectedBackground={color.selected.background}\n            enabledBackground={color.enabled.background}\n            onPress={onPress}\n          />\n        );\n      })}\n\n      <EmojiMorePressable\n        selectedBackground={color.selected.background}\n        enabledBackground={color.enabled.background}\n        iconColor={colors.onBackground03}\n        onPress={async () => {\n          await onClose();\n          openReactionList({ channel, message });\n        }}\n      />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 12,\n    paddingBottom: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default BottomSheetReactionAddon;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/ReactionAddons/MessageReactionAddon.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
 var _uikitTools = require("@sendbird/uikit-tools");
@@ -13,6 +13,7 @@ var _constants = require("../../constants");
 var _useContext = require("../../hooks/useContext");
 var _ReactionRoundedButton = _interopRequireDefault(require("./ReactionRoundedButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 NUM_COL = 4;
 const REACTION_MORE_KEY = 'reaction-more-button';
 const createOnPressReaction = (reaction, channel, message, reacted) => {
@@ -24,34 +25,62 @@ const createOnPressReaction = (reaction, channel, message, reacted) => {
     }
   };
 };
+const ReactionPressable = ({
+  reaction,
+  channel,
+  message,
+  source,
+  onOpenReactionUserList,
+  index,
+  style
+}) => {
+  const [pressed, setPressed] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
+    onLongPress: () => onOpenReactionUserList(index),
+    delayLongPress: _constants.DEFAULT_LONG_PRESS_DELAY,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false)
+  }, /*#__PURE__*/_react.default.createElement(_ReactionRoundedButton.default, {
+    source: source,
+    count: (0, _uikitUtils.getReactionCount)(reaction),
+    reacted: pressed || reaction.hasCurrentUserReacted,
+    style: style
+  }));
+};
+const ReactionMorePressable = ({
+  onPress
+}) => {
+  const [pressed, setPressed] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: onPress,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false)
+  }, /*#__PURE__*/_react.default.createElement(_ReactionRoundedButton.default.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.default.createElement(_reactNative.Pressable, {
+    return /*#__PURE__*/_react.default.createElement(ReactionPressable, {
       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, {
+      reaction: reaction,
+      channel: channel,
+      message: message,
       source: getIconSource(reaction.key),
-      count: (0, _uikitUtils.getReactionCount)(reaction),
-      reacted: pressed || reaction.hasCurrentUserReacted,
+      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.default.createElement(_reactNative.Pressable, {
+    buttons.push(/*#__PURE__*/_react.default.createElement(ReactionMorePressable, {
       key: REACTION_MORE_KEY,
       onPress: onOpenReactionList
-    }, ({
-      pressed
-    }) => /*#__PURE__*/_react.default.createElement(_ReactionRoundedButton.default.More, {
-      pressed: pressed
-    })));
+    }));
   }
   return buttons;
 };

package/lib/commonjs/components/ReactionAddons/MessageReactionAddon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitReactNativeFoundation","_uikitTools","_uikitUtils","_constants","_useContext","_ReactionRoundedButton","e","__esModule","default","NUM_COL","REACTION_MORE_KEY","createOnPressReaction","reaction","channel","message","reacted","deleteReaction","key","addReaction","createReactionButtons","getIconSource","emojiLimit","onOpenReactionList","onOpenReactionUserList","reactionAddonType","reactions","buttons","map","index","isNotLastOfRow","isNotLastOfCol","length","createElement","Pressable","onPress","hasCurrentUserReacted","onLongPress","delayLongPress","DEFAULT_LONG_PRESS_DELAY","pressed","source","count","getReactionCount","style","styles","marginEnd","marginBottom","push","More","MessageReactionAddon","_message$reactions","colors","useUIKitTheme","sdk","emojiManager","useSendbirdChat","openReactionList","openReactionUserList","useReaction","forceUpdate","useForceUpdate","useGroupChannelHandler","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","reactionKey","emoji","allEmojiMap","getEmojiIconSource","allEmoji","focusIndex","containerStyle","reactionContainer","reactionThreadParentMessageContainer","backgroundColor","background","borderColor","ui","rounded","enabled","createStyleSheet","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth","_default","exports"],"sources":["MessageReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { ImageProps, Pressable } from 'react-native';\n\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';\nimport { getReactionCount } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\nimport ReactionRoundedButton from './ReactionRoundedButton';\n\nconst NUM_COL = 4;\nconst REACTION_MORE_KEY = 'reaction-more-button';\nexport type ReactionAddonType = 'default' | 'thread_parent_message';\n\nconst createOnPressReaction = (\n  reaction: SendbirdReaction,\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  reacted: boolean,\n) => {\n  return () => {\n    if (reacted) {\n      return channel.deleteReaction(message, reaction.key);\n    } else {\n      return channel.addReaction(message, reaction.key);\n    }\n  };\n};\n\nconst createReactionButtons = (\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  getIconSource: (reactionKey: string) => ImageProps['source'],\n  emojiLimit: number,\n  onOpenReactionList: () => void,\n  onOpenReactionUserList: (focusIndex: number) => void,\n  reactionAddonType?: ReactionAddonType,\n) => {\n  const reactions = message.reactions ?? [];\n  const buttons = reactions.map((reaction, index) => {\n    const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;\n    const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;\n    return (\n      <Pressable\n        key={reaction.key}\n        onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}\n        onLongPress={() => onOpenReactionUserList(index)}\n        delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      >\n        {({ pressed }) => (\n          <ReactionRoundedButton\n            source={getIconSource(reaction.key)}\n            count={getReactionCount(reaction)}\n            reacted={pressed || reaction.hasCurrentUserReacted}\n            style={\n              reactionAddonType === 'default'\n                ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]\n                : [styles.marginEnd, styles.marginBottom]\n            }\n          />\n        )}\n      </Pressable>\n    );\n  });\n  if (buttons.length < emojiLimit) {\n    buttons.push(\n      <Pressable key={REACTION_MORE_KEY} onPress={onOpenReactionList}>\n        {({ pressed }) => <ReactionRoundedButton.More pressed={pressed} />}\n      </Pressable>,\n    );\n  }\n\n  return buttons;\n};\n\nconst MessageReactionAddon = ({\n  channel,\n  message,\n  reactionAddonType = 'default',\n}: {\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n  reactionAddonType?: ReactionAddonType;\n}) => {\n  const { colors } = useUIKitTheme();\n  const { sdk, emojiManager } = useSendbirdChat();\n  const { openReactionList, openReactionUserList } = useReaction();\n  const forceUpdate = useForceUpdate();\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(_, event) {\n      if (event.messageId === message.messageId) {\n        message.applyReactionEvent(event);\n        forceUpdate();\n      }\n    },\n  });\n\n  if (reactionAddonType === 'default' && !message.reactions?.length) return null;\n\n  const reactionButtons = createReactionButtons(\n    channel,\n    message,\n    (reactionKey) => {\n      const emoji = emojiManager.allEmojiMap[reactionKey];\n      return emojiManager.getEmojiIconSource(emoji);\n    },\n    emojiManager.allEmoji.length,\n    () => openReactionList({ channel, message }),\n    (focusIndex) => openReactionUserList({ channel, message, focusIndex }),\n    reactionAddonType,\n  );\n\n  const containerStyle =\n    reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;\n\n  return (\n    <Pressable\n      style={[\n        containerStyle,\n        { backgroundColor: colors.background, borderColor: colors.ui.reaction.rounded.enabled.background },\n      ]}\n    >\n      {reactionButtons}\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    padding: 8,\n    borderRadius: 16,\n    borderWidth: 1,\n  },\n  reactionThreadParentMessageContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  marginEnd: {\n    marginEnd: 4.5,\n  },\n  marginBottom: {\n    marginBottom: 4,\n  },\n});\n\nexport default MessageReactionAddon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitReactNativeFoundation","_uikitTools","_uikitUtils","_constants","_useContext","_ReactionRoundedButton","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NUM_COL","REACTION_MORE_KEY","createOnPressReaction","reaction","channel","message","reacted","deleteReaction","key","addReaction","ReactionPressable","source","onOpenReactionUserList","index","style","pressed","setPressed","useState","createElement","Pressable","onPress","hasCurrentUserReacted","onLongPress","delayLongPress","DEFAULT_LONG_PRESS_DELAY","onPressIn","onPressOut","count","getReactionCount","ReactionMorePressable","More","createReactionButtons","getIconSource","emojiLimit","onOpenReactionList","reactionAddonType","reactions","buttons","map","isNotLastOfRow","isNotLastOfCol","length","styles","marginEnd","marginBottom","push","MessageReactionAddon","_message$reactions","colors","useUIKitTheme","sdk","emojiManager","useSendbirdChat","openReactionList","openReactionUserList","useReaction","forceUpdate","useForceUpdate","useGroupChannelHandler","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","reactionKey","emoji","allEmojiMap","getEmojiIconSource","allEmoji","focusIndex","containerStyle","reactionContainer","reactionThreadParentMessageContainer","backgroundColor","background","borderColor","ui","rounded","enabled","createStyleSheet","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth","_default","exports"],"sources":["MessageReactionAddon.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ImageProps, Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';\nimport { getReactionCount } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\nimport ReactionRoundedButton from './ReactionRoundedButton';\n\nconst NUM_COL = 4;\nconst REACTION_MORE_KEY = 'reaction-more-button';\nexport type ReactionAddonType = 'default' | 'thread_parent_message';\n\nconst createOnPressReaction = (\n  reaction: SendbirdReaction,\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  reacted: boolean,\n) => {\n  return () => {\n    if (reacted) {\n      return channel.deleteReaction(message, reaction.key);\n    } else {\n      return channel.addReaction(message, reaction.key);\n    }\n  };\n};\n\nconst ReactionPressable = ({\n  reaction,\n  channel,\n  message,\n  source,\n  onOpenReactionUserList,\n  index,\n  style,\n}: {\n  reaction: SendbirdReaction;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n  source: ImageProps['source'];\n  onOpenReactionUserList: (focusIndex: number) => void;\n  index: number;\n  style: StyleProp<ViewStyle>;\n}) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable\n      onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}\n      onLongPress={() => onOpenReactionUserList(index)}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n    >\n      <ReactionRoundedButton\n        source={source}\n        count={getReactionCount(reaction)}\n        reacted={pressed || reaction.hasCurrentUserReacted}\n        style={style}\n      />\n    </Pressable>\n  );\n};\n\nconst ReactionMorePressable = ({ onPress }: { onPress: () => void }) => {\n  const [pressed, setPressed] = useState(false);\n  return (\n    <Pressable onPress={onPress} onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)}>\n      <ReactionRoundedButton.More pressed={pressed} />\n    </Pressable>\n  );\n};\n\nconst createReactionButtons = (\n  channel: SendbirdBaseChannel,\n  message: SendbirdBaseMessage,\n  getIconSource: (reactionKey: string) => ImageProps['source'],\n  emojiLimit: number,\n  onOpenReactionList: () => void,\n  onOpenReactionUserList: (focusIndex: number) => void,\n  reactionAddonType?: ReactionAddonType,\n) => {\n  const reactions = message.reactions ?? [];\n  const buttons = reactions.map((reaction, index) => {\n    const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;\n    const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;\n    return (\n      <ReactionPressable\n        key={reaction.key}\n        reaction={reaction}\n        channel={channel}\n        message={message}\n        source={getIconSource(reaction.key)}\n        onOpenReactionUserList={onOpenReactionUserList}\n        index={index}\n        style={\n          reactionAddonType === 'default'\n            ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]\n            : [styles.marginEnd, styles.marginBottom]\n        }\n      />\n    );\n  });\n  if (buttons.length < emojiLimit) {\n    buttons.push(<ReactionMorePressable key={REACTION_MORE_KEY} onPress={onOpenReactionList} />);\n  }\n\n  return buttons;\n};\n\nconst MessageReactionAddon = ({\n  channel,\n  message,\n  reactionAddonType = 'default',\n}: {\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n  reactionAddonType?: ReactionAddonType;\n}) => {\n  const { colors } = useUIKitTheme();\n  const { sdk, emojiManager } = useSendbirdChat();\n  const { openReactionList, openReactionUserList } = useReaction();\n  const forceUpdate = useForceUpdate();\n\n  useGroupChannelHandler(sdk, {\n    async onReactionUpdated(_, event) {\n      if (event.messageId === message.messageId) {\n        message.applyReactionEvent(event);\n        forceUpdate();\n      }\n    },\n  });\n\n  if (reactionAddonType === 'default' && !message.reactions?.length) return null;\n\n  const reactionButtons = createReactionButtons(\n    channel,\n    message,\n    (reactionKey) => {\n      const emoji = emojiManager.allEmojiMap[reactionKey];\n      return emojiManager.getEmojiIconSource(emoji);\n    },\n    emojiManager.allEmoji.length,\n    () => openReactionList({ channel, message }),\n    (focusIndex) => openReactionUserList({ channel, message, focusIndex }),\n    reactionAddonType,\n  );\n\n  const containerStyle =\n    reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;\n\n  return (\n    <Pressable\n      style={[\n        containerStyle,\n        { backgroundColor: colors.background, borderColor: colors.ui.reaction.rounded.enabled.background },\n      ]}\n    >\n      {reactionButtons}\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    padding: 8,\n    borderRadius: 16,\n    borderWidth: 1,\n  },\n  reactionThreadParentMessageContainer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  marginEnd: {\n    marginEnd: 4.5,\n  },\n  marginBottom: {\n    marginBottom: 4,\n  },\n});\n\nexport default MessageReactionAddon;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/ReactionBottomSheets/ReactionListBottomSheet.js

@@ -4,12 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
 var _uikitUtils = require("@sendbird/uikit-utils");
 var _constants = require("../../constants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 ReactionEmojiPressable = ({
+  emojiKey,
+  url,
+  message,
+  channel,
+  currentUserId,
+  selectedBackground,
+  enabledBackground,
+  onClose
+}) => {
+  var _message$reactions;
+  const [pressed, setPressed] = (0, _react.useState)(false);
+  const reactedUserIds = (message === null || message === void 0 || (_message$reactions = message.reactions) === null || _message$reactions === void 0 || (_message$reactions = _message$reactions.find(it => it.key === emojiKey)) === null || _message$reactions === void 0 ? void 0 : _message$reactions.userIds) ?? [];
+  const idx = reactedUserIds.indexOf(currentUserId ?? _constants.UNKNOWN_USER_ID);
+  const reacted = idx > -1;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: async () => {
+      if (message && channel) {
+        const action = (msg, key) => {
+          return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);
+        };
+        action(message, emojiKey).catch(error => {
+          const operation = reacted ? 'remove' : 'add';
+          _uikitUtils.Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);
+        });
+      }
+      await onClose();
+    },
+    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 NUM_COLUMN = 6;
 const ReactionListBottomSheet = ({
   visible,
@@ -64,36 +104,18 @@ const ReactionListBottomSheet = ({
         url
       }
     }) => {
-      var _message$reactions;
-      const reactedUserIds = (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 idx = reactedUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? _constants.UNKNOWN_USER_ID);
-      const reacted = idx > -1;
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
         style: styles.emojiItem
-      }, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
-        key: key,
-        onPress: async () => {
-          if (message && channel) {
-            const action = (message, key) => {
-              return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);
-            };
-            action(message, key).catch(error => {
-              _uikitUtils.Logger.warn('Failed to reaction', error);
-            });
-          }
-          await onClose();
-        },
-        style: ({
-          pressed
-        }) => [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(ReactionEmojiPressable, {
+        emojiKey: key,
+        url: url,
+        message: message,
+        channel: channel,
+        currentUserId: currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId,
+        selectedBackground: color.selected.background,
+        enabledBackground: color.enabled.background,
+        onClose: onClose
+      }));
     }
   })));
 };

package/lib/commonjs/components/ReactionBottomSheets/ReactionListBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitReactNativeFoundation","_uikitUtils","_constants","e","__esModule","default","NUM_COLUMN","ReactionListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","width","useWindowDimensions","safeArea","useSafeAreaPadding","colors","useUIKitTheme","currentUser","emojiManager","channel","message","color","ui","reaction","createElement","Modal","type","Boolean","backgroundStyle","styles","modal","View","style","container","paddingBottom","backgroundColor","dialog","none","background","paddingStart","paddingHorizontal","paddingEnd","FlatList","data","allEmoji","numColumns","keyExtractor","item","key","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","url","_message$reactions","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","UNKNOWN_USER_ID","reacted","emojiItem","Pressable","onPress","action","deleteReaction","addReaction","catch","error","Logger","warn","pressed","button","selected","enabled","Image","source","uri","emoji","createStyleSheet","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius","_default","exports"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport type { ReactionBottomSheetProps } from './index';\n\nconst NUM_COLUMN = 6;\nconst ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);\n  const { colors } = useUIKitTheme();\n\n  const { currentUser, emojiManager } = chatCtx;\n  const { channel, message } = reactionCtx;\n  const color = colors.ui.reaction.default;\n\n  return (\n    <Modal\n      type={'slide'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          {\n            width,\n            paddingBottom: safeArea.paddingBottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,\n            paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,\n          },\n        ]}\n      >\n        <FlatList\n          data={emojiManager.allEmoji}\n          numColumns={NUM_COLUMN}\n          keyExtractor={(item) => item.key}\n          contentContainerStyle={styles.flatlist}\n          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}\n          renderItem={({ item: { key, url } }) => {\n            const reactedUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n\n            const idx = reactedUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n            const reacted = idx > -1;\n\n            return (\n              <View style={styles.emojiItem}>\n                <Pressable\n                  key={key}\n                  onPress={async () => {\n                    if (message && channel) {\n                      const action = (message: BaseMessage, key: string) => {\n                        return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);\n                      };\n\n                      action(message, key).catch((error) => {\n                        Logger.warn('Failed to reaction', error);\n                      });\n                    }\n                    await onClose();\n                  }}\n                  style={({ pressed }) => [\n                    styles.button,\n                    { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n                  ]}\n                >\n                  <Image source={{ uri: url }} style={styles.emoji} />\n                </Pressable>\n              </View>\n            );\n          }}\n        />\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  flatlist: {\n    width: '100%',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  emojiItem: {\n    width: `${100 / NUM_COLUMN}%`,\n    alignItems: 'center',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default ReactionListBottomSheet;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitReactNativeFoundation","_uikitUtils","_constants","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ReactionEmojiPressable","emojiKey","url","message","channel","currentUserId","selectedBackground","enabledBackground","onClose","_message$reactions","pressed","setPressed","useState","reactedUserIds","reactions","find","it","key","userIds","idx","indexOf","UNKNOWN_USER_ID","reacted","createElement","Pressable","onPress","action","msg","deleteReaction","addReaction","catch","error","operation","Logger","warn","onPressIn","onPressOut","style","styles","button","backgroundColor","Image","source","uri","emoji","NUM_COLUMN","ReactionListBottomSheet","visible","onDismiss","reactionCtx","chatCtx","width","useWindowDimensions","safeArea","useSafeAreaPadding","colors","useUIKitTheme","currentUser","emojiManager","color","ui","reaction","Modal","type","Boolean","backgroundStyle","modal","View","container","paddingBottom","dialog","none","background","paddingStart","paddingHorizontal","paddingEnd","FlatList","data","allEmoji","numColumns","keyExtractor","item","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","emojiItem","userId","selected","enabled","createStyleSheet","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius","_default","exports"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport type { ReactionBottomSheetProps } from './index';\n\nconst ReactionEmojiPressable = ({\n  emojiKey,\n  url,\n  message,\n  channel,\n  currentUserId,\n  selectedBackground,\n  enabledBackground,\n  onClose,\n}: {\n  emojiKey: string;\n  url: string;\n  message: SendbirdBaseMessage | undefined;\n  channel: SendbirdBaseChannel | undefined;\n  currentUserId: string | undefined;\n  selectedBackground: string;\n  enabledBackground: string;\n  onClose: () => Promise<void>;\n}) => {\n  const [pressed, setPressed] = useState(false);\n\n  const reactedUserIds = message?.reactions?.find((it) => it.key === emojiKey)?.userIds ?? [];\n  const idx = reactedUserIds.indexOf(currentUserId ?? UNKNOWN_USER_ID);\n  const reacted = idx > -1;\n\n  return (\n    <Pressable\n      onPress={async () => {\n        if (message && channel) {\n          const action = (msg: BaseMessage, key: string) => {\n            return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);\n          };\n\n          action(message, emojiKey).catch((error) => {\n            const operation = reacted ? 'remove' : 'add';\n            Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);\n          });\n        }\n        await onClose();\n      }}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n    </Pressable>\n  );\n};\n\nconst NUM_COLUMN = 6;\nconst ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);\n  const { colors } = useUIKitTheme();\n\n  const { currentUser, emojiManager } = chatCtx;\n  const { channel, message } = reactionCtx;\n  const color = colors.ui.reaction.default;\n\n  return (\n    <Modal\n      type={'slide'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          {\n            width,\n            paddingBottom: safeArea.paddingBottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,\n            paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,\n          },\n        ]}\n      >\n        <FlatList\n          data={emojiManager.allEmoji}\n          numColumns={NUM_COLUMN}\n          keyExtractor={(item) => item.key}\n          contentContainerStyle={styles.flatlist}\n          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}\n          renderItem={({ item: { key, url } }) => {\n            return (\n              <View style={styles.emojiItem}>\n                <ReactionEmojiPressable\n                  emojiKey={key}\n                  url={url}\n                  message={message}\n                  channel={channel}\n                  currentUserId={currentUser?.userId}\n                  selectedBackground={color.selected.background}\n                  enabledBackground={color.enabled.background}\n                  onClose={onClose}\n                />\n              </View>\n            );\n          }}\n        />\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  flatlist: {\n    width: '100%',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  emojiItem: {\n    width: `${100 / NUM_COLUMN}%`,\n    alignItems: 'center',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default ReactionListBottomSheet;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/version.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const VERSION = '3.12.2';
+const VERSION = '3.12.3';
 var _default = exports.default = VERSION;
 //# sourceMappingURL=version.js.map

package/lib/commonjs/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERSION","_default","exports","default"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.12.2';\nexport default VERSION;\n"],"mappings":";;;;;;AAAA,MAAMA,OAAO,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACVH,OAAO","ignoreList":[]}
+{"version":3,"names":["VERSION","_default","exports","default"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.12.3';\nexport default VERSION;\n"],"mappings":";;;;;;AAAA,MAAMA,OAAO,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACVH,OAAO","ignoreList":[]}

package/lib/module/components/ReactionAddons/BottomSheetReactionAddon.js

@@ -1,10 +1,52 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Pressable, View } from 'react-native';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
+const EmojiReactionPressable = ({
+  url,
+  reacted,
+  selectedBackground,
+  enabledBackground,
+  onPress
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [styles.button, {
+      backgroundColor: reacted || pressed ? selectedBackground : enabledBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: url
+    },
+    style: styles.emoji
+  }));
+};
+const EmojiMorePressable = ({
+  selectedBackground,
+  enabledBackground,
+  iconColor,
+  onPress
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [styles.button, {
+      backgroundColor: pressed ? selectedBackground : enabledBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'emoji-more',
+    style: styles.emoji,
+    color: iconColor
+  }));
+};
 const BottomSheetReactionAddon = ({
   onClose,
   message,
@@ -63,38 +105,26 @@ const BottomSheetReactionAddon = ({
         onClose();
       });
     };
-    return /*#__PURE__*/React.createElement(Pressable, {
+    return /*#__PURE__*/React.createElement(EmojiReactionPressable, {
       key: key,
-      onPress: onPress,
-      style: ({
-        pressed
-      }) => [styles.button, {
-        backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
-      }]
-    }, /*#__PURE__*/React.createElement(Image, {
-      source: {
-        uri: url
-      },
-      style: styles.emoji
-    }));
-  }), /*#__PURE__*/React.createElement(Pressable, {
+      url: url,
+      reacted: reacted,
+      selectedBackground: color.selected.background,
+      enabledBackground: color.enabled.background,
+      onPress: onPress
+    });
+  }), /*#__PURE__*/React.createElement(EmojiMorePressable, {
+    selectedBackground: color.selected.background,
+    enabledBackground: color.enabled.background,
+    iconColor: colors.onBackground03,
     onPress: async () => {
       await onClose();
       openReactionList({
         channel,
         message
       });
-    },
-    style: ({
-      pressed
-    }) => [styles.button, {
-      backgroundColor: pressed ? color.selected.background : color.enabled.background
-    }]
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: 'emoji-more',
-    style: styles.emoji,
-    color: colors.onBackground03
-  })));
+    }
+  }));
 };
 const styles = createStyleSheet({
   container: {