@sendbird/uikit-react-native 3.12.2 → 3.12.3

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","View","Icon","Image","createStyleSheet","useUIKitTheme","useGroupChannelHandler","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","useReaction","useSendbirdChat","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","safeArea","onReactionUpdated","eventChannel","event","url","messageId","msg","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","default","createElement","style","styles","container","marginStart","paddingStart","marginEnd","paddingEnd","map","key","_message$reactions","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","reacted","onPress","action","deleteReaction","addReaction","catch","error","warn","finally","pressed","button","backgroundColor","selected","background","enabled","source","uri","emoji","icon","onBackground03","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius"],"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","useState","Pressable","View","Icon","Image","createStyleSheet","useUIKitTheme","useGroupChannelHandler","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","useReaction","useSendbirdChat","EmojiReactionPressable","url","reacted","selectedBackground","enabledBackground","onPress","pressed","setPressed","createElement","onPressIn","onPressOut","style","styles","button","backgroundColor","source","uri","emoji","EmojiMorePressable","iconColor","icon","color","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","safeArea","onReactionUpdated","eventChannel","event","messageId","msg","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","ui","reaction","default","container","marginStart","paddingStart","marginEnd","paddingEnd","map","key","_message$reactions","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","action","deleteReaction","addReaction","catch","error","warn","finally","selected","background","enabled","onBackground03","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius"],"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/module/components/ReactionAddons/MessageReactionAddon.js

@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -17,34 +17,62 @@ const createOnPressReaction = (reaction, channel, message, reacted) => {
     }
   };
 };
+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(Pressable, {
+    return /*#__PURE__*/React.createElement(ReactionPressable, {
       key: reaction.key,
-      onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
-      onLongPress: () => onOpenReactionUserList(index),
-      delayLongPress: DEFAULT_LONG_PRESS_DELAY
-    }, ({
-      pressed
-    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton, {
+      reaction: reaction,
+      channel: channel,
+      message: message,
       source: getIconSource(reaction.key),
-      count: 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.createElement(Pressable, {
+    buttons.push(/*#__PURE__*/React.createElement(ReactionMorePressable, {
       key: REACTION_MORE_KEY,
       onPress: onOpenReactionList
-    }, ({
-      pressed
-    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
-      pressed: pressed
-    })));
+    }));
   }
   return buttons;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","createStyleSheet","useUIKitTheme","useForceUpdate","useGroupChannelHandler","getReactionCount","DEFAULT_LONG_PRESS_DELAY","useReaction","useSendbirdChat","ReactionRoundedButton","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","onPress","hasCurrentUserReacted","onLongPress","delayLongPress","pressed","source","count","style","styles","marginEnd","marginBottom","push","More","MessageReactionAddon","_message$reactions","colors","sdk","emojiManager","openReactionList","openReactionUserList","forceUpdate","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","reactionKey","emoji","allEmojiMap","getEmojiIconSource","allEmoji","focusIndex","containerStyle","reactionContainer","reactionThreadParentMessageContainer","backgroundColor","background","borderColor","ui","rounded","enabled","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth"],"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","useState","Pressable","createStyleSheet","useUIKitTheme","useForceUpdate","useGroupChannelHandler","getReactionCount","DEFAULT_LONG_PRESS_DELAY","useReaction","useSendbirdChat","ReactionRoundedButton","NUM_COL","REACTION_MORE_KEY","createOnPressReaction","reaction","channel","message","reacted","deleteReaction","key","addReaction","ReactionPressable","source","onOpenReactionUserList","index","style","pressed","setPressed","createElement","onPress","hasCurrentUserReacted","onLongPress","delayLongPress","onPressIn","onPressOut","count","ReactionMorePressable","More","createReactionButtons","getIconSource","emojiLimit","onOpenReactionList","reactionAddonType","reactions","buttons","map","isNotLastOfRow","isNotLastOfCol","length","styles","marginEnd","marginBottom","push","MessageReactionAddon","_message$reactions","colors","sdk","emojiManager","openReactionList","openReactionUserList","forceUpdate","onReactionUpdated","_","event","messageId","applyReactionEvent","reactionButtons","reactionKey","emoji","allEmojiMap","getEmojiIconSource","allEmoji","focusIndex","containerStyle","reactionContainer","reactionThreadParentMessageContainer","backgroundColor","background","borderColor","ui","rounded","enabled","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth"],"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/module/components/ReactionBottomSheets/ReactionListBottomSheet.js

@@ -1,8 +1,48 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
+const ReactionEmojiPressable = ({
+  emojiKey,
+  url,
+  message,
+  channel,
+  currentUserId,
+  selectedBackground,
+  enabledBackground,
+  onClose
+}) => {
+  var _message$reactions;
+  const [pressed, setPressed] = 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 ?? UNKNOWN_USER_ID);
+  const reacted = idx > -1;
+  return /*#__PURE__*/React.createElement(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';
+          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.createElement(Image, {
+    source: {
+      uri: url
+    },
+    style: styles.emoji
+  }));
+};
 const NUM_COLUMN = 6;
 const ReactionListBottomSheet = ({
   visible,
@@ -57,36 +97,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) ?? UNKNOWN_USER_ID);
-      const reacted = idx > -1;
       return /*#__PURE__*/React.createElement(View, {
         style: styles.emojiItem
-      }, /*#__PURE__*/React.createElement(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 => {
-              Logger.warn('Failed to reaction', error);
-            });
-          }
-          await onClose();
-        },
-        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(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/module/components/ReactionBottomSheets/ReactionListBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FlatList","Pressable","View","useWindowDimensions","Image","Modal","createStyleSheet","useUIKitTheme","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","NUM_COLUMN","ReactionListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","width","safeArea","colors","currentUser","emojiManager","channel","message","color","ui","reaction","default","createElement","type","Boolean","backgroundStyle","styles","modal","style","container","paddingBottom","backgroundColor","dialog","none","background","paddingStart","paddingHorizontal","paddingEnd","data","allEmoji","numColumns","keyExtractor","item","key","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","url","_message$reactions","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","reacted","emojiItem","onPress","action","deleteReaction","addReaction","catch","error","warn","pressed","button","selected","enabled","source","uri","emoji","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"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","useState","FlatList","Pressable","View","useWindowDimensions","Image","Modal","createStyleSheet","useUIKitTheme","Logger","useSafeAreaPadding","UNKNOWN_USER_ID","ReactionEmojiPressable","emojiKey","url","message","channel","currentUserId","selectedBackground","enabledBackground","onClose","_message$reactions","pressed","setPressed","reactedUserIds","reactions","find","it","key","userIds","idx","indexOf","reacted","createElement","onPress","action","msg","deleteReaction","addReaction","catch","error","operation","warn","onPressIn","onPressOut","style","styles","button","backgroundColor","source","uri","emoji","NUM_COLUMN","ReactionListBottomSheet","visible","onDismiss","reactionCtx","chatCtx","width","safeArea","colors","currentUser","emojiManager","color","ui","reaction","default","type","Boolean","backgroundStyle","modal","container","paddingBottom","dialog","none","background","paddingStart","paddingHorizontal","paddingEnd","data","allEmoji","numColumns","keyExtractor","item","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","emojiItem","userId","selected","enabled","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"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":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,cAAc;AAG7E,SAASC,KAAK,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AACvG,SAASC,MAAM,EAAEC,kBAAkB,QAAQ,uBAAuB;AAGlE,SAASC,eAAe,QAAQ,iBAAiB;AAGjD,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,QAAQ;EACRC,GAAG;EACHC,OAAO;EACPC,OAAO;EACPC,aAAa;EACbC,kBAAkB;EAClBC,iBAAiB;EACjBC;AAUF,CAAC,KAAK;EAAA,IAAAC,kBAAA;EACJ,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGvB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMwB,cAAc,GAAG,CAAAT,OAAO,aAAPA,OAAO,gBAAAM,kBAAA,GAAPN,OAAO,CAAEU,SAAS,cAAAJ,kBAAA,gBAAAA,kBAAA,GAAlBA,kBAAA,CAAoBK,IAAI,CAAEC,EAAE,IAAKA,EAAE,CAACC,GAAG,KAAKf,QAAQ,CAAC,cAAAQ,kBAAA,uBAArDA,kBAAA,CAAuDQ,OAAO,KAAI,EAAE;EAC3F,MAAMC,GAAG,GAAGN,cAAc,CAACO,OAAO,CAACd,aAAa,IAAIN,eAAe,CAAC;EACpE,MAAMqB,OAAO,GAAGF,GAAG,GAAG,CAAC,CAAC;EAExB,oBACE/B,KAAA,CAAAkC,aAAA,CAAC/B,SAAS;IACRgC,OAAO,EAAE,MAAAA,CAAA,KAAY;MACnB,IAAInB,OAAO,IAAIC,OAAO,EAAE;QACtB,MAAMmB,MAAM,GAAGA,CAACC,GAAgB,EAAER,GAAW,KAAK;UAChD,OAAOI,OAAO,GAAGhB,OAAO,CAACqB,cAAc,CAACD,GAAG,EAAER,GAAG,CAAC,GAAGZ,OAAO,CAACsB,WAAW,CAACF,GAAG,EAAER,GAAG,CAAC;QACnF,CAAC;QAEDO,MAAM,CAACpB,OAAO,EAAEF,QAAQ,CAAC,CAAC0B,KAAK,CAAEC,KAAK,IAAK;UACzC,MAAMC,SAAS,GAAGT,OAAO,GAAG,QAAQ,GAAG,KAAK;UAC5CvB,MAAM,CAACiC,IAAI,CAAC,aAAaD,SAAS,uBAAuB5B,QAAQ,GAAG,EAAE2B,KAAK,CAAC;QAC9E,CAAC,CAAC;MACJ;MACA,MAAMpB,OAAO,CAAC,CAAC;IACjB,CAAE;IACFuB,SAAS,EAAEA,CAAA,KAAMpB,UAAU,CAAC,IAAI,CAAE;IAClCqB,UAAU,EAAEA,CAAA,KAAMrB,UAAU,CAAC,KAAK,CAAE;IACpCsB,KAAK,EAAE,CAACC,MAAM,CAACC,MAAM,EAAE;MAAEC,eAAe,EAAEhB,OAAO,IAAIV,OAAO,GAAGJ,kBAAkB,GAAGC;IAAkB,CAAC;EAAE,gBAEzGpB,KAAA,CAAAkC,aAAA,CAAC5B,KAAK;IAAC4C,MAAM,EAAE;MAAEC,GAAG,EAAEpC;IAAI,CAAE;IAAC+B,KAAK,EAAEC,MAAM,CAACK;EAAM,CAAE,CAC1C,CAAC;AAEhB,CAAC;AAED,MAAMC,UAAU,GAAG,CAAC;AACpB,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAElC,OAAO;EAAEmC,SAAS;EAAEC,WAAW;EAAEC;AAAkC,CAAC,KAAK;EACnH,MAAM;IAAEC;EAAM,CAAC,GAAGtD,mBAAmB,CAAC,CAAC;EACvC,MAAMuD,QAAQ,GAAGjD,kBAAkB,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EAChE,MAAM;IAAEkD;EAAO,CAAC,GAAGpD,aAAa,CAAC,CAAC;EAElC,MAAM;IAAEqD,WAAW;IAAEC;EAAa,CAAC,GAAGL,OAAO;EAC7C,MAAM;IAAEzC,OAAO;IAAED;EAAQ,CAAC,GAAGyC,WAAW;EACxC,MAAMO,KAAK,GAAGH,MAAM,CAACI,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACEnE,KAAA,CAAAkC,aAAA,CAAC3B,KAAK;IACJ6D,IAAI,EAAE,OAAQ;IACdb,OAAO,EAAEc,OAAO,CAACd,OAAO,IAAItC,OAAO,IAAID,OAAO,CAAE;IAChDK,OAAO,EAAEA,OAAQ;IACjBmC,SAAS,EAAEA,SAAU;IACrBc,eAAe,EAAEvB,MAAM,CAACwB;EAAM,gBAE9BvE,KAAA,CAAAkC,aAAA,CAAC9B,IAAI;IACH0C,KAAK,EAAE,CACLC,MAAM,CAACyB,SAAS,EAChB;MACEb,KAAK;MACLc,aAAa,EAAEb,QAAQ,CAACa,aAAa;MACrCxB,eAAe,EAAEY,MAAM,CAACI,EAAE,CAACS,MAAM,CAACP,OAAO,CAACQ,IAAI,CAACC,UAAU;MACzDC,YAAY,EAAEjB,QAAQ,CAACiB,YAAY,GAAG9B,MAAM,CAACyB,SAAS,CAACM,iBAAiB;MACxEC,UAAU,EAAEnB,QAAQ,CAACmB,UAAU,GAAGhC,MAAM,CAACyB,SAAS,CAACM;IACrD,CAAC;EACD,gBAEF9E,KAAA,CAAAkC,aAAA,CAAChC,QAAQ;IACP8E,IAAI,EAAEjB,YAAY,CAACkB,QAAS;IAC5BC,UAAU,EAAE7B,UAAW;IACvB8B,YAAY,EAAGC,IAAI,IAAKA,IAAI,CAACvD,GAAI;IACjCwD,qBAAqB,EAAEtC,MAAM,CAACuC,QAAS;IACvCC,sBAAsB,EAAEA,CAAA,kBAAMvF,KAAA,CAAAkC,aAAA,CAAC9B,IAAI;MAAC0C,KAAK,EAAE;QAAE0C,MAAM,EAAE;MAAG;IAAE,CAAE,CAAE;IAC9DC,UAAU,EAAEA,CAAC;MAAEL,IAAI,EAAE;QAAEvD,GAAG;QAAEd;MAAI;IAAE,CAAC,KAAK;MACtC,oBACEf,KAAA,CAAAkC,aAAA,CAAC9B,IAAI;QAAC0C,KAAK,EAAEC,MAAM,CAAC2C;MAAU,gBAC5B1F,KAAA,CAAAkC,aAAA,CAACrB,sBAAsB;QACrBC,QAAQ,EAAEe,GAAI;QACdd,GAAG,EAAEA,GAAI;QACTC,OAAO,EAAEA,OAAQ;QACjBC,OAAO,EAAEA,OAAQ;QACjBC,aAAa,EAAE4C,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAE6B,MAAO;QACnCxE,kBAAkB,EAAE6C,KAAK,CAAC4B,QAAQ,CAAChB,UAAW;QAC9CxD,iBAAiB,EAAE4C,KAAK,CAAC6B,OAAO,CAACjB,UAAW;QAC5CvD,OAAO,EAAEA;MAAQ,CAClB,CACG,CAAC;IAEX;EAAE,CACH,CACG,CACD,CAAC;AAEZ,CAAC;AAED,MAAM0B,MAAM,GAAGvC,gBAAgB,CAAC;EAC9BgE,SAAS,EAAE;IACTsB,QAAQ,EAAE,QAAQ;IAClBC,oBAAoB,EAAE,CAAC;IACvBC,kBAAkB,EAAE,CAAC;IACrBC,UAAU,EAAE,EAAE;IACdnB,iBAAiB,EAAE,EAAE;IACrBoB,aAAa,EAAE;EACjB,CAAC;EACD3B,KAAK,EAAE;IACL4B,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDd,QAAQ,EAAE;IACR3B,KAAK,EAAE,MAAM;IACbuC,aAAa,EAAE,QAAQ;IACvBE,cAAc,EAAE;EAClB,CAAC;EACDV,SAAS,EAAE;IACT/B,KAAK,EAAE,GAAG,GAAG,GAAGN,UAAU,GAAG;IAC7B8C,UAAU,EAAE;EACd,CAAC;EACDnD,MAAM,EAAE;IACNW,KAAK,EAAE,EAAE;IACT6B,MAAM,EAAE,EAAE;IACVa,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE;EAChB,CAAC;EACDlD,KAAK,EAAE;IACLO,KAAK,EAAE,MAAM;IACb6B,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAelC,uBAAuB","ignoreList":[]}

package/lib/module/version.js

@@ -1,3 +1,3 @@
-const VERSION = '3.12.2';
+const VERSION = '3.12.3';
 export default VERSION;
 //# sourceMappingURL=version.js.map

package/lib/module/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.12.2';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,QAAQ;AACxB,eAAeA,OAAO","ignoreList":[]}
+{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.12.3';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,QAAQ;AACxB,eAAeA,OAAO","ignoreList":[]}

package/lib/typescript/src/components/ReactionAddons/BottomSheetReactionAddon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
+import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 type Props = {
     onClose: () => Promise<void>;
     channel: SendbirdBaseChannel;

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -14,7 +14,7 @@ import type { StringSet } from '../localization/StringSet.type';
 import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface, PlayerServiceInterface, RecorderServiceInterface } from '../platform/types';
 import { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "3.12.2";
+    VERSION: "3.12.3";
     PLATFORM: string;
     DEFAULT: {
         AUTO_PUSH_TOKEN_REGISTRATION: boolean;

package/lib/typescript/src/hooks/useChannelInputItems.d.ts

@@ -1,7 +1,7 @@
 import { SendbirdChannel } from '@sendbird/uikit-utils';
 import { FileType } from '../platform/types';
 export declare const useChannelInputItems: (channel: SendbirdChannel, sendFileMessage: (file: FileType) => void) => {
-    icon?: "search" | "stop" | "photo" | "recording" | "remove" | "delete" | "message" | "done" | "user" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "mark-as-unread" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive";
+    icon?: "search" | "stop" | "photo" | "recording" | "remove" | "delete" | "message" | "done" | "add" | "user" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "mark-as-unread" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive";
     iconColor?: string;
     title: string;
     titleColor?: string;

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.12.2";
+declare const VERSION = "3.12.3";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.12.2",
+  "version": "3.12.3",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -69,10 +69,10 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.3.0",
-    "@sendbird/uikit-chat-hooks": "3.12.2",
-    "@sendbird/uikit-react-native-foundation": "3.12.2",
+    "@sendbird/uikit-chat-hooks": "3.12.3",
+    "@sendbird/uikit-react-native-foundation": "3.12.3",
     "@sendbird/uikit-tools": "0.0.15",
-    "@sendbird/uikit-utils": "3.12.2"
+    "@sendbird/uikit-utils": "3.12.3"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.11",
@@ -256,5 +256,5 @@
       ]
     ]
   },
-  "gitHead": "bea2acef581a062a275f1b8463ebe643bc4276e6"
+  "gitHead": "6c20512fbcfb708b75339474c47558225e8ce262"
 }

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Pressable, View } from 'react-native';
 
 import type { BaseMessage } from '@sendbird/chat/message';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
-import { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useSafeAreaPadding } from '@sendbird/uikit-utils';
+import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
+import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
@@ -14,6 +15,57 @@ type Props = {
   channel: SendbirdBaseChannel;
   message: SendbirdBaseMessage;
 };
+
+const EmojiReactionPressable = ({
+  url,
+  reacted,
+  selectedBackground,
+  enabledBackground,
+  onPress,
+}: {
+  url: string;
+  reacted: boolean;
+  selectedBackground: string;
+  enabledBackground: string;
+  onPress: () => void;
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}
+    >
+      <Image source={{ uri: url }} style={styles.emoji} />
+    </Pressable>
+  );
+};
+
+const EmojiMorePressable = ({
+  selectedBackground,
+  enabledBackground,
+  iconColor,
+  onPress,
+}: {
+  selectedBackground: string;
+  enabledBackground: string;
+  iconColor: string;
+  onPress: () => void;
+}) => {
+  const [pressed, setPressed] = useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[styles.button, { backgroundColor: pressed ? selectedBackground : enabledBackground }]}
+    >
+      <Icon icon={'emoji-more'} style={styles.emoji} color={iconColor} />
+    </Pressable>
+  );
+};
+
 const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   const { emojiManager, currentUser, sdk } = useSendbirdChat();
   const { updateReactionFocusedItem, openReactionList } = useReaction();
@@ -59,31 +111,26 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
         };
 
         return (
-          <Pressable
+          <EmojiReactionPressable
             key={key}
+            url={url}
+            reacted={reacted}
+            selectedBackground={color.selected.background}
+            enabledBackground={color.enabled.background}
             onPress={onPress}
-            style={({ pressed }) => [
-              styles.button,
-              { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },
-            ]}
-          >
-            <Image source={{ uri: url }} style={styles.emoji} />
-          </Pressable>
+          />
         );
       })}
 
-      <Pressable
+      <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 },
-        ]}
-      >
-        <Icon icon={'emoji-more'} style={styles.emoji} color={colors.onBackground03} />
-      </Pressable>
+      />
     </View>
   );
 };