@sendbird/uikit-react-native 3.12.1 → 3.12.3

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/components/ReactionBottomSheets/ReactionUserListBottomSheet.js

@@ -26,7 +26,7 @@ const ReactionUserListBottomSheet = ({
     colors
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
   const [tabIndex, setTabIndex] = (0, _react.useState)(0);
-  const scrollRef = (0, _react.useRef)();
+  const scrollRef = (0, _react.useRef)(undefined);
   const tabIndicatorValue = (0, _react.useRef)([]);
   const tabIndicatorAnimated = (0, _react.useRef)({
     x: new _reactNative.Animated.Value(0),

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitReactNativeFoundation","_uikitUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ReactionUserListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","localizationCtx","onPressUserProfile","width","useWindowDimensions","safeArea","useSafeAreaPadding","colors","useUIKitTheme","tabIndex","setTabIndex","useState","scrollRef","useRef","tabIndicatorValue","tabIndicatorAnimated","x","Animated","Value","current","focusedWithLayoutCalculated","emojiManager","channel","message","focusIndex","STRINGS","color","ui","reaction","reactions","focusedReaction","containerSafeArea","paddingStart","styles","layout","paddingHorizontal","paddingEnd","focusTab","index","animated","indicatorValue","_scrollRef$current","animateTabIndicator","scrollTo","baseConfig","duration","easing","Easing","inOut","ease","useNativeDriver","parallel","timing","toValue","start","layoutCalculated","filter","Boolean","length","useEffect","renderTabs","createElement","Pressable","style","tabsWrapper","map","isFocused","key","isLastItem","emoji","allEmojiMap","tabItem","marginEnd","onPress","onLayout","indexForLayout","I18nManager","isRTL","nativeEvent","Image","source","getEmojiIconSource","tabEmoji","Text","button","selected","highlight","enabled","truncatedCount","getReactionCount","View","tabIndicator","backgroundColor","renderPage","userCountDifference","count","sampledUserInfoList","Fragment","reactedUserInfo","isGroupChannel","userId","pageItem","Avatar","size","uri","profileUrl","containerStyle","avatar","subtitle2","flex","nickname","LABELS","USER_NO_NAME","body3","onBackground02","REACTION","MORE_USERS","Modal","type","backgroundStyle","modal","container","paddingBottom","dialog","none","background","ScrollView","ref","horizontal","bounces","showsHorizontalScrollIndicator","contentContainerStyle","tabsContainer","Divider","top","showsVerticalScrollIndicator","pageContainer","createStyleSheet","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","alignItems","justifyContent","flexGrow","flexDirection","height","position","bottom","_default","exports"],"sources":["ReactionUserListBottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';\n\nimport {\n  Avatar,\n  Divider,\n  Image,\n  Modal,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdEmoji,\n  SendbirdReaction,\n  getReactionCount,\n  truncatedCount,\n  useSafeAreaPadding,\n} from '@sendbird/uikit-utils';\n\nimport type { ReactionBottomSheetProps } from './index';\n\nconst ReactionUserListBottomSheet = ({\n  visible,\n  onClose,\n  onDismiss,\n  reactionCtx,\n  chatCtx,\n  localizationCtx,\n  onPressUserProfile,\n}: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['left', 'right', 'bottom']);\n  const { colors } = useUIKitTheme();\n\n  const [tabIndex, setTabIndex] = useState(0);\n  const scrollRef = useRef<ScrollView>();\n  const tabIndicatorValue = useRef<Array<{ x: number; width: number }>>([]);\n  const tabIndicatorAnimated = useRef({ x: new Animated.Value(0), width: new Animated.Value(0) }).current;\n  const focusedWithLayoutCalculated = useRef(false);\n\n  const { emojiManager } = chatCtx;\n  const { channel, message, focusIndex } = reactionCtx;\n  const { STRINGS } = localizationCtx;\n\n  const color = colors.ui.reaction.default;\n  const reactions = message?.reactions ?? [];\n  const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;\n  const containerSafeArea = {\n    paddingStart: safeArea.paddingStart + styles.layout.paddingHorizontal,\n    paddingEnd: safeArea.paddingEnd + styles.layout.paddingHorizontal,\n  };\n\n  const focusTab = (index: number, animated = true) => {\n    const indicatorValue = tabIndicatorValue.current[index];\n    if (indicatorValue) {\n      setTabIndex(index);\n      animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);\n      scrollRef.current?.scrollTo({ x: indicatorValue.x, animated });\n    }\n  };\n\n  const animateTabIndicator = (x: number, width: number, animated = true) => {\n    const baseConfig = { duration: animated ? 300 : 0, easing: Easing.inOut(Easing.ease), useNativeDriver: false };\n    Animated.parallel([\n      Animated.timing(tabIndicatorAnimated.x, { toValue: x, ...baseConfig }),\n      Animated.timing(tabIndicatorAnimated.width, { toValue: width, ...baseConfig }),\n    ]).start();\n  };\n\n  const layoutCalculated = () => {\n    return tabIndicatorValue.current.filter(Boolean).length === reactions.length;\n  };\n\n  useEffect(() => {\n    if (!visible) {\n      tabIndicatorValue.current = [];\n      tabIndicatorAnimated.x = new Animated.Value(0);\n      tabIndicatorAnimated.width = new Animated.Value(0);\n      focusedWithLayoutCalculated.current = false;\n    }\n  }, [visible]);\n\n  const renderTabs = () => {\n    return (\n      <Pressable style={styles.tabsWrapper}>\n        {reactions.map((reaction, index) => {\n          const isFocused = focusedReaction?.key === reaction.key;\n          const isLastItem = reactions.length - 1 === index;\n          const emoji = emojiManager.allEmojiMap[reaction.key] as SendbirdEmoji | undefined;\n\n          return (\n            <Pressable\n              key={reaction.key}\n              style={[styles.tabItem, isLastItem && { marginEnd: styles.layout.marginEnd }]}\n              onPress={() => focusTab(index)}\n              onLayout={(e) => {\n                const indexForLayout = I18nManager.isRTL ? reactions.length - 1 - index : index;\n                tabIndicatorValue.current[indexForLayout] = e.nativeEvent.layout;\n                if (layoutCalculated()) {\n                  if (focusedWithLayoutCalculated.current) {\n                    // re-calculating layout when screen rotation\n                    focusTab(tabIndex, false);\n                  } else {\n                    focusedWithLayoutCalculated.current = true;\n                    focusTab(focusIndex);\n                  }\n                }\n              }}\n            >\n              <Image source={emojiManager.getEmojiIconSource(emoji)} style={styles.tabEmoji} />\n              <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>\n                {truncatedCount(getReactionCount(reaction))}\n              </Text>\n            </Pressable>\n          );\n        })}\n        <Animated.View\n          style={[\n            styles.tabIndicator,\n            {\n              start: tabIndicatorAnimated.x,\n              width: tabIndicatorAnimated.width,\n              backgroundColor: color.selected.highlight,\n            },\n          ]}\n        />\n      </Pressable>\n    );\n  };\n\n  const renderPage = () => {\n    const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserInfoList.length || 0);\n\n    return (\n      <>\n        {focusedReaction?.sampledUserInfoList.map((reactedUserInfo) => {\n          if (channel?.isGroupChannel()) {\n            return (\n              <Pressable\n                key={reactedUserInfo.userId}\n                onPress={async () => {\n                  await onClose();\n                  onPressUserProfile(reactedUserInfo);\n                }}\n                style={styles.pageItem}\n              >\n                <Avatar size={36} uri={reactedUserInfo?.profileUrl} containerStyle={styles.avatar} />\n                <Text subtitle2 style={{ flex: 1 }}>\n                  {reactedUserInfo?.nickname || STRINGS.LABELS.USER_NO_NAME}\n                </Text>\n              </Pressable>\n            );\n          }\n          return null;\n        })}\n        {userCountDifference > 0 && (\n          <View style={styles.pageItem}>\n            <Text body3 color={colors.onBackground02}>\n              {STRINGS.REACTION.MORE_USERS(userCountDifference)}\n            </Text>\n          </View>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <Modal\n      type={'slide-no-gesture'}\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          { width, paddingBottom: safeArea.paddingBottom, backgroundColor: colors.ui.dialog.default.none.background },\n        ]}\n      >\n        <ScrollView\n          ref={scrollRef as never}\n          horizontal\n          bounces={false}\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={[containerSafeArea, styles.tabsContainer]}\n        >\n          {renderTabs()}\n        </ScrollView>\n        <Divider style={{ top: -1 }} />\n        <ScrollView\n          bounces={false}\n          showsVerticalScrollIndicator={false}\n          style={styles.pageContainer}\n          contentContainerStyle={containerSafeArea}\n        >\n          {renderPage()}\n        </ScrollView>\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  layout: {\n    paddingHorizontal: 16,\n    marginEnd: 0,\n  },\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    alignItems: 'center',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  tabsContainer: {\n    flexGrow: 1,\n  },\n  tabsWrapper: {\n    flexGrow: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    height: 44,\n  },\n  tabItem: {\n    marginEnd: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  tabEmoji: {\n    width: 28,\n    height: 28,\n    marginEnd: 4,\n  },\n  tabIndicator: {\n    position: 'absolute',\n    bottom: 0,\n    height: 3,\n  },\n  pageContainer: {\n    height: 216,\n    width: '100%',\n  },\n  pageItem: {\n    flexDirection: 'row',\n    width: '100%',\n    height: 48,\n    alignItems: 'center',\n  },\n  avatar: {\n    marginEnd: 16,\n  },\n});\n\nexport default ReactionUserListBottomSheet;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitReactNativeFoundation","_uikitUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ReactionUserListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","localizationCtx","onPressUserProfile","width","useWindowDimensions","safeArea","useSafeAreaPadding","colors","useUIKitTheme","tabIndex","setTabIndex","useState","scrollRef","useRef","undefined","tabIndicatorValue","tabIndicatorAnimated","x","Animated","Value","current","focusedWithLayoutCalculated","emojiManager","channel","message","focusIndex","STRINGS","color","ui","reaction","reactions","focusedReaction","containerSafeArea","paddingStart","styles","layout","paddingHorizontal","paddingEnd","focusTab","index","animated","indicatorValue","_scrollRef$current","animateTabIndicator","scrollTo","baseConfig","duration","easing","Easing","inOut","ease","useNativeDriver","parallel","timing","toValue","start","layoutCalculated","filter","Boolean","length","useEffect","renderTabs","createElement","Pressable","style","tabsWrapper","map","isFocused","key","isLastItem","emoji","allEmojiMap","tabItem","marginEnd","onPress","onLayout","indexForLayout","I18nManager","isRTL","nativeEvent","Image","source","getEmojiIconSource","tabEmoji","Text","button","selected","highlight","enabled","truncatedCount","getReactionCount","View","tabIndicator","backgroundColor","renderPage","userCountDifference","count","sampledUserInfoList","Fragment","reactedUserInfo","isGroupChannel","userId","pageItem","Avatar","size","uri","profileUrl","containerStyle","avatar","subtitle2","flex","nickname","LABELS","USER_NO_NAME","body3","onBackground02","REACTION","MORE_USERS","Modal","type","backgroundStyle","modal","container","paddingBottom","dialog","none","background","ScrollView","ref","horizontal","bounces","showsHorizontalScrollIndicator","contentContainerStyle","tabsContainer","Divider","top","showsVerticalScrollIndicator","pageContainer","createStyleSheet","overflow","borderTopStartRadius","borderTopEndRadius","paddingTop","alignItems","justifyContent","flexGrow","flexDirection","height","position","bottom","_default","exports"],"sources":["ReactionUserListBottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';\n\nimport {\n  Avatar,\n  Divider,\n  Image,\n  Modal,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdEmoji,\n  SendbirdReaction,\n  getReactionCount,\n  truncatedCount,\n  useSafeAreaPadding,\n} from '@sendbird/uikit-utils';\n\nimport type { ReactionBottomSheetProps } from './index';\n\nconst ReactionUserListBottomSheet = ({\n  visible,\n  onClose,\n  onDismiss,\n  reactionCtx,\n  chatCtx,\n  localizationCtx,\n  onPressUserProfile,\n}: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['left', 'right', 'bottom']);\n  const { colors } = useUIKitTheme();\n\n  const [tabIndex, setTabIndex] = useState(0);\n  const scrollRef = useRef<ScrollView | undefined>(undefined);\n  const tabIndicatorValue = useRef<Array<{ x: number; width: number }>>([]);\n  const tabIndicatorAnimated = useRef({ x: new Animated.Value(0), width: new Animated.Value(0) }).current;\n  const focusedWithLayoutCalculated = useRef(false);\n\n  const { emojiManager } = chatCtx;\n  const { channel, message, focusIndex } = reactionCtx;\n  const { STRINGS } = localizationCtx;\n\n  const color = colors.ui.reaction.default;\n  const reactions = message?.reactions ?? [];\n  const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;\n  const containerSafeArea = {\n    paddingStart: safeArea.paddingStart + styles.layout.paddingHorizontal,\n    paddingEnd: safeArea.paddingEnd + styles.layout.paddingHorizontal,\n  };\n\n  const focusTab = (index: number, animated = true) => {\n    const indicatorValue = tabIndicatorValue.current[index];\n    if (indicatorValue) {\n      setTabIndex(index);\n      animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);\n      scrollRef.current?.scrollTo({ x: indicatorValue.x, animated });\n    }\n  };\n\n  const animateTabIndicator = (x: number, width: number, animated = true) => {\n    const baseConfig = { duration: animated ? 300 : 0, easing: Easing.inOut(Easing.ease), useNativeDriver: false };\n    Animated.parallel([\n      Animated.timing(tabIndicatorAnimated.x, { toValue: x, ...baseConfig }),\n      Animated.timing(tabIndicatorAnimated.width, { toValue: width, ...baseConfig }),\n    ]).start();\n  };\n\n  const layoutCalculated = () => {\n    return tabIndicatorValue.current.filter(Boolean).length === reactions.length;\n  };\n\n  useEffect(() => {\n    if (!visible) {\n      tabIndicatorValue.current = [];\n      tabIndicatorAnimated.x = new Animated.Value(0);\n      tabIndicatorAnimated.width = new Animated.Value(0);\n      focusedWithLayoutCalculated.current = false;\n    }\n  }, [visible]);\n\n  const renderTabs = () => {\n    return (\n      <Pressable style={styles.tabsWrapper}>\n        {reactions.map((reaction, index) => {\n          const isFocused = focusedReaction?.key === reaction.key;\n          const isLastItem = reactions.length - 1 === index;\n          const emoji = emojiManager.allEmojiMap[reaction.key] as SendbirdEmoji | undefined;\n\n          return (\n            <Pressable\n              key={reaction.key}\n              style={[styles.tabItem, isLastItem && { marginEnd: styles.layout.marginEnd }]}\n              onPress={() => focusTab(index)}\n              onLayout={(e) => {\n                const indexForLayout = I18nManager.isRTL ? reactions.length - 1 - index : index;\n                tabIndicatorValue.current[indexForLayout] = e.nativeEvent.layout;\n                if (layoutCalculated()) {\n                  if (focusedWithLayoutCalculated.current) {\n                    // re-calculating layout when screen rotation\n                    focusTab(tabIndex, false);\n                  } else {\n                    focusedWithLayoutCalculated.current = true;\n                    focusTab(focusIndex);\n                  }\n                }\n              }}\n            >\n              <Image source={emojiManager.getEmojiIconSource(emoji)} style={styles.tabEmoji} />\n              <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>\n                {truncatedCount(getReactionCount(reaction))}\n              </Text>\n            </Pressable>\n          );\n        })}\n        <Animated.View\n          style={[\n            styles.tabIndicator,\n            {\n              start: tabIndicatorAnimated.x,\n              width: tabIndicatorAnimated.width,\n              backgroundColor: color.selected.highlight,\n            },\n          ]}\n        />\n      </Pressable>\n    );\n  };\n\n  const renderPage = () => {\n    const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserInfoList.length || 0);\n\n    return (\n      <>\n        {focusedReaction?.sampledUserInfoList.map((reactedUserInfo) => {\n          if (channel?.isGroupChannel()) {\n            return (\n              <Pressable\n                key={reactedUserInfo.userId}\n                onPress={async () => {\n                  await onClose();\n                  onPressUserProfile(reactedUserInfo);\n                }}\n                style={styles.pageItem}\n              >\n                <Avatar size={36} uri={reactedUserInfo?.profileUrl} containerStyle={styles.avatar} />\n                <Text subtitle2 style={{ flex: 1 }}>\n                  {reactedUserInfo?.nickname || STRINGS.LABELS.USER_NO_NAME}\n                </Text>\n              </Pressable>\n            );\n          }\n          return null;\n        })}\n        {userCountDifference > 0 && (\n          <View style={styles.pageItem}>\n            <Text body3 color={colors.onBackground02}>\n              {STRINGS.REACTION.MORE_USERS(userCountDifference)}\n            </Text>\n          </View>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <Modal\n      type={'slide-no-gesture'}\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          { width, paddingBottom: safeArea.paddingBottom, backgroundColor: colors.ui.dialog.default.none.background },\n        ]}\n      >\n        <ScrollView\n          ref={scrollRef as never}\n          horizontal\n          bounces={false}\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={[containerSafeArea, styles.tabsContainer]}\n        >\n          {renderTabs()}\n        </ScrollView>\n        <Divider style={{ top: -1 }} />\n        <ScrollView\n          bounces={false}\n          showsVerticalScrollIndicator={false}\n          style={styles.pageContainer}\n          contentContainerStyle={containerSafeArea}\n        >\n          {renderPage()}\n        </ScrollView>\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  layout: {\n    paddingHorizontal: 16,\n    marginEnd: 0,\n  },\n  container: {\n    overflow: 'hidden',\n    borderTopStartRadius: 8,\n    borderTopEndRadius: 8,\n    paddingTop: 16,\n    alignItems: 'center',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  tabsContainer: {\n    flexGrow: 1,\n  },\n  tabsWrapper: {\n    flexGrow: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    height: 44,\n  },\n  tabItem: {\n    marginEnd: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  tabEmoji: {\n    width: 28,\n    height: 28,\n    marginEnd: 4,\n  },\n  tabIndicator: {\n    position: 'absolute',\n    bottom: 0,\n    height: 3,\n  },\n  pageContainer: {\n    height: 216,\n    width: '100%',\n  },\n  pageItem: {\n    flexDirection: 'row',\n    width: '100%',\n    height: 48,\n    alignItems: 'center',\n  },\n  avatar: {\n    marginEnd: 16,\n  },\n});\n\nexport default ReactionUserListBottomSheet;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,2BAAA,GAAAF,OAAA;AASA,IAAAG,WAAA,GAAAH,OAAA;AAM+B,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAI/B,MAAMkB,2BAA2B,GAAGA,CAAC;EACnCC,OAAO;EACPC,OAAO;EACPC,SAAS;EACTC,WAAW;EACXC,OAAO;EACPC,eAAe;EACfC;AACwB,CAAC,KAAK;EAC9B,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EACvC,MAAMC,QAAQ,GAAG,IAAAC,8BAAkB,EAAC,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;EAChE,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,yCAAa,EAAC,CAAC;EAElC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAC3C,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAyBC,SAAS,CAAC;EAC3D,MAAMC,iBAAiB,GAAG,IAAAF,aAAM,EAAsC,EAAE,CAAC;EACzE,MAAMG,oBAAoB,GAAG,IAAAH,aAAM,EAAC;IAAEI,CAAC,EAAE,IAAIC,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;IAAEhB,KAAK,EAAE,IAAIe,qBAAQ,CAACC,KAAK,CAAC,CAAC;EAAE,CAAC,CAAC,CAACC,OAAO;EACvG,MAAMC,2BAA2B,GAAG,IAAAR,aAAM,EAAC,KAAK,CAAC;EAEjD,MAAM;IAAES;EAAa,CAAC,GAAGtB,OAAO;EAChC,MAAM;IAAEuB,OAAO;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAG1B,WAAW;EACpD,MAAM;IAAE2B;EAAQ,CAAC,GAAGzB,eAAe;EAEnC,MAAM0B,KAAK,GAAGpB,MAAM,CAACqB,EAAE,CAACC,QAAQ,CAAC3C,OAAO;EACxC,MAAM4C,SAAS,GAAG,CAAAN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,SAAS,KAAI,EAAE;EAC1C,MAAMC,eAAe,GAAGD,SAAS,CAACrB,QAAQ,CAAiC;EAC3E,MAAMuB,iBAAiB,GAAG;IACxBC,YAAY,EAAE5B,QAAQ,CAAC4B,YAAY,GAAGC,MAAM,CAACC,MAAM,CAACC,iBAAiB;IACrEC,UAAU,EAAEhC,QAAQ,CAACgC,UAAU,GAAGH,MAAM,CAACC,MAAM,CAACC;EAClD,CAAC;EAED,MAAME,QAAQ,GAAGA,CAACC,KAAa,EAAEC,QAAQ,GAAG,IAAI,KAAK;IACnD,MAAMC,cAAc,GAAG1B,iBAAiB,CAACK,OAAO,CAACmB,KAAK,CAAC;IACvD,IAAIE,cAAc,EAAE;MAAA,IAAAC,kBAAA;MAClBhC,WAAW,CAAC6B,KAAK,CAAC;MAClBI,mBAAmB,CAACF,cAAc,CAACxB,CAAC,EAAEwB,cAAc,CAACtC,KAAK,EAAEqC,QAAQ,CAAC;MACrE,CAAAE,kBAAA,GAAA9B,SAAS,CAACQ,OAAO,cAAAsB,kBAAA,eAAjBA,kBAAA,CAAmBE,QAAQ,CAAC;QAAE3B,CAAC,EAAEwB,cAAc,CAACxB,CAAC;QAAEuB;MAAS,CAAC,CAAC;IAChE;EACF,CAAC;EAED,MAAMG,mBAAmB,GAAGA,CAAC1B,CAAS,EAAEd,KAAa,EAAEqC,QAAQ,GAAG,IAAI,KAAK;IACzE,MAAMK,UAAU,GAAG;MAAEC,QAAQ,EAAEN,QAAQ,GAAG,GAAG,GAAG,CAAC;MAAEO,MAAM,EAAEC,mBAAM,CAACC,KAAK,CAACD,mBAAM,CAACE,IAAI,CAAC;MAAEC,eAAe,EAAE;IAAM,CAAC;IAC9GjC,qBAAQ,CAACkC,QAAQ,CAAC,CAChBlC,qBAAQ,CAACmC,MAAM,CAACrC,oBAAoB,CAACC,CAAC,EAAE;MAAEqC,OAAO,EAAErC,CAAC;MAAE,GAAG4B;IAAW,CAAC,CAAC,EACtE3B,qBAAQ,CAACmC,MAAM,CAACrC,oBAAoB,CAACb,KAAK,EAAE;MAAEmD,OAAO,EAAEnD,KAAK;MAAE,GAAG0C;IAAW,CAAC,CAAC,CAC/E,CAAC,CAACU,KAAK,CAAC,CAAC;EACZ,CAAC;EAED,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC7B,OAAOzC,iBAAiB,CAACK,OAAO,CAACqC,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM,KAAK7B,SAAS,CAAC6B,MAAM;EAC9E,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAI,CAAChE,OAAO,EAAE;MACZmB,iBAAiB,CAACK,OAAO,GAAG,EAAE;MAC9BJ,oBAAoB,CAACC,CAAC,GAAG,IAAIC,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;MAC9CH,oBAAoB,CAACb,KAAK,GAAG,IAAIe,qBAAQ,CAACC,KAAK,CAAC,CAAC,CAAC;MAClDE,2BAA2B,CAACD,OAAO,GAAG,KAAK;IAC7C;EACF,CAAC,EAAE,CAACxB,OAAO,CAAC,CAAC;EAEb,MAAMiE,UAAU,GAAGA,CAAA,KAAM;IACvB,oBACE3F,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAA0F,SAAS;MAACC,KAAK,EAAE9B,MAAM,CAAC+B;IAAY,GAClCnC,SAAS,CAACoC,GAAG,CAAC,CAACrC,QAAQ,EAAEU,KAAK,KAAK;MAClC,MAAM4B,SAAS,GAAG,CAAApC,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEqC,GAAG,MAAKvC,QAAQ,CAACuC,GAAG;MACvD,MAAMC,UAAU,GAAGvC,SAAS,CAAC6B,MAAM,GAAG,CAAC,KAAKpB,KAAK;MACjD,MAAM+B,KAAK,GAAGhD,YAAY,CAACiD,WAAW,CAAC1C,QAAQ,CAACuC,GAAG,CAA8B;MAEjF,oBACElG,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAA0F,SAAS;QACRK,GAAG,EAAEvC,QAAQ,CAACuC,GAAI;QAClBJ,KAAK,EAAE,CAAC9B,MAAM,CAACsC,OAAO,EAAEH,UAAU,IAAI;UAAEI,SAAS,EAAEvC,MAAM,CAACC,MAAM,CAACsC;QAAU,CAAC,CAAE;QAC9EC,OAAO,EAAEA,CAAA,KAAMpC,QAAQ,CAACC,KAAK,CAAE;QAC/BoC,QAAQ,EAAGnG,CAAC,IAAK;UACf,MAAMoG,cAAc,GAAGC,wBAAW,CAACC,KAAK,GAAGhD,SAAS,CAAC6B,MAAM,GAAG,CAAC,GAAGpB,KAAK,GAAGA,KAAK;UAC/ExB,iBAAiB,CAACK,OAAO,CAACwD,cAAc,CAAC,GAAGpG,CAAC,CAACuG,WAAW,CAAC5C,MAAM;UAChE,IAAIqB,gBAAgB,CAAC,CAAC,EAAE;YACtB,IAAInC,2BAA2B,CAACD,OAAO,EAAE;cACvC;cACAkB,QAAQ,CAAC7B,QAAQ,EAAE,KAAK,CAAC;YAC3B,CAAC,MAAM;cACLY,2BAA2B,CAACD,OAAO,GAAG,IAAI;cAC1CkB,QAAQ,CAACb,UAAU,CAAC;YACtB;UACF;QACF;MAAE,gBAEFvD,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACxF,2BAAA,CAAA0G,KAAK;QAACC,MAAM,EAAE3D,YAAY,CAAC4D,kBAAkB,CAACZ,KAAK,CAAE;QAACN,KAAK,EAAE9B,MAAM,CAACiD;MAAS,CAAE,CAAC,eACjFjH,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACxF,2BAAA,CAAA8G,IAAI;QAACC,MAAM;QAAC1D,KAAK,EAAEwC,SAAS,GAAGxC,KAAK,CAAC2D,QAAQ,CAACC,SAAS,GAAG5D,KAAK,CAAC6D,OAAO,CAACD;MAAU,GAChF,IAAAE,0BAAc,EAAC,IAAAC,4BAAgB,EAAC7D,QAAQ,CAAC,CACtC,CACG,CAAC;IAEhB,CAAC,CAAC,eACF3D,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAA6C,QAAQ,CAACyE,IAAI;MACZ3B,KAAK,EAAE,CACL9B,MAAM,CAAC0D,YAAY,EACnB;QACErC,KAAK,EAAEvC,oBAAoB,CAACC,CAAC;QAC7Bd,KAAK,EAAEa,oBAAoB,CAACb,KAAK;QACjC0F,eAAe,EAAElE,KAAK,CAAC2D,QAAQ,CAACC;MAClC,CAAC;IACD,CACH,CACQ,CAAC;EAEhB,CAAC;EAED,MAAMO,UAAU,GAAGA,CAAA,KAAM;IACvB,MAAMC,mBAAmB,GAAG,CAAC,CAAAhE,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEiE,KAAK,KAAI,CAAC,KAAK,CAAAjE,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEkE,mBAAmB,CAACtC,MAAM,KAAI,CAAC,CAAC;IAE9G,oBACEzF,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAAA5F,MAAA,CAAAgB,OAAA,CAAAgH,QAAA,QACGnE,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEkE,mBAAmB,CAAC/B,GAAG,CAAEiC,eAAe,IAAK;MAC7D,IAAI5E,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAE6E,cAAc,CAAC,CAAC,EAAE;QAC7B,oBACElI,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAA0F,SAAS;UACRK,GAAG,EAAE+B,eAAe,CAACE,MAAO;UAC5B3B,OAAO,EAAE,MAAAA,CAAA,KAAY;YACnB,MAAM7E,OAAO,CAAC,CAAC;YACfK,kBAAkB,CAACiG,eAAe,CAAC;UACrC,CAAE;UACFnC,KAAK,EAAE9B,MAAM,CAACoE;QAAS,gBAEvBpI,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACxF,2BAAA,CAAAiI,MAAM;UAACC,IAAI,EAAE,EAAG;UAACC,GAAG,EAAEN,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEO,UAAW;UAACC,cAAc,EAAEzE,MAAM,CAAC0E;QAAO,CAAE,CAAC,eACrF1I,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACxF,2BAAA,CAAA8G,IAAI;UAACyB,SAAS;UAAC7C,KAAK,EAAE;YAAE8C,IAAI,EAAE;UAAE;QAAE,GAChC,CAAAX,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEY,QAAQ,KAAIrF,OAAO,CAACsF,MAAM,CAACC,YACzC,CACG,CAAC;MAEhB;MACA,OAAO,IAAI;IACb,CAAC,CAAC,EACDlB,mBAAmB,GAAG,CAAC,iBACtB7H,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAAsH,IAAI;MAAC3B,KAAK,EAAE9B,MAAM,CAACoE;IAAS,gBAC3BpI,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACxF,2BAAA,CAAA8G,IAAI;MAAC8B,KAAK;MAACvF,KAAK,EAAEpB,MAAM,CAAC4G;IAAe,GACtCzF,OAAO,CAAC0F,QAAQ,CAACC,UAAU,CAACtB,mBAAmB,CAC5C,CACF,CAER,CAAC;EAEP,CAAC;EAED,oBACE7H,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACxF,2BAAA,CAAAgJ,KAAK;IACJC,IAAI,EAAE,kBAAmB;IACzB3H,OAAO,EAAE8D,OAAO,CAAC9D,OAAO,IAAI2B,OAAO,IAAIC,OAAO,CAAE;IAChD3B,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrB0H,eAAe,EAAEtF,MAAM,CAACuF;EAAM,gBAE9BvJ,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAAsH,IAAI;IACH3B,KAAK,EAAE,CACL9B,MAAM,CAACwF,SAAS,EAChB;MAAEvH,KAAK;MAAEwH,aAAa,EAAEtH,QAAQ,CAACsH,aAAa;MAAE9B,eAAe,EAAEtF,MAAM,CAACqB,EAAE,CAACgG,MAAM,CAAC1I,OAAO,CAAC2I,IAAI,CAACC;IAAW,CAAC;EAC3G,gBAEF5J,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAA0J,UAAU;IACTC,GAAG,EAAEpH,SAAmB;IACxBqH,UAAU;IACVC,OAAO,EAAE,KAAM;IACfC,8BAA8B,EAAE,KAAM;IACtCC,qBAAqB,EAAE,CAACpG,iBAAiB,EAAEE,MAAM,CAACmG,aAAa;EAAE,GAEhExE,UAAU,CAAC,CACF,CAAC,eACb3F,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACxF,2BAAA,CAAAgK,OAAO;IAACtE,KAAK,EAAE;MAAEuE,GAAG,EAAE,CAAC;IAAE;EAAE,CAAE,CAAC,eAC/BrK,MAAA,CAAAgB,OAAA,CAAA4E,aAAA,CAACzF,YAAA,CAAA0J,UAAU;IACTG,OAAO,EAAE,KAAM;IACfM,4BAA4B,EAAE,KAAM;IACpCxE,KAAK,EAAE9B,MAAM,CAACuG,aAAc;IAC5BL,qBAAqB,EAAEpG;EAAkB,GAExC8D,UAAU,CAAC,CACF,CACR,CACD,CAAC;AAEZ,CAAC;AAED,MAAM5D,MAAM,GAAG,IAAAwG,4CAAgB,EAAC;EAC9BvG,MAAM,EAAE;IACNC,iBAAiB,EAAE,EAAE;IACrBqC,SAAS,EAAE;EACb,CAAC;EACDiD,SAAS,EAAE;IACTiB,QAAQ,EAAE,QAAQ;IAClBC,oBAAoB,EAAE,CAAC;IACvBC,kBAAkB,EAAE,CAAC;IACrBC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAE;EACd,CAAC;EACDtB,KAAK,EAAE;IACLsB,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDX,aAAa,EAAE;IACbY,QAAQ,EAAE;EACZ,CAAC;EACDhF,WAAW,EAAE;IACXgF,QAAQ,EAAE,CAAC;IACXC,aAAa,EAAE,KAAK;IACpBH,UAAU,EAAE,YAAY;IACxBC,cAAc,EAAE,QAAQ;IACxBG,MAAM,EAAE;EACV,CAAC;EACD3E,OAAO,EAAE;IACPC,SAAS,EAAE,EAAE;IACbyE,aAAa,EAAE,KAAK;IACpBH,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACD7D,QAAQ,EAAE;IACRhF,KAAK,EAAE,EAAE;IACTgJ,MAAM,EAAE,EAAE;IACV1E,SAAS,EAAE;EACb,CAAC;EACDmB,YAAY,EAAE;IACZwD,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAE,CAAC;IACTF,MAAM,EAAE;EACV,CAAC;EACDV,aAAa,EAAE;IACbU,MAAM,EAAE,GAAG;IACXhJ,KAAK,EAAE;EACT,CAAC;EACDmG,QAAQ,EAAE;IACR4C,aAAa,EAAE,KAAK;IACpB/I,KAAK,EAAE,MAAM;IACbgJ,MAAM,EAAE,EAAE;IACVJ,UAAU,EAAE;EACd,CAAC;EACDnC,MAAM,EAAE;IACNnC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAAC,IAAA6E,QAAA,GAAAC,OAAA,CAAArK,OAAA,GAEYS,2BAA2B","ignoreList":[]}

package/lib/commonjs/domain/groupChannel/component/GroupChannelMessageList.js

@@ -42,7 +42,7 @@ const GroupChannelMessageList = props => {
   const isNewLineExistInChannelRef = (0, _react.useRef)(false);
   const scrolledAwayFromBottomRef = (0, _react.useRef)(false);
   const [isVisibleUnreadMessageFloating, setIsVisibleUnreadMessageFloating] = (0, _react.useState)(false);
-  const viewableMessages = (0, _react.useRef)();
+  const viewableMessages = (0, _react.useRef)(undefined);
   const hasUserMarkedAsUnreadRef = (0, _react.useRef)(false);
   const [unreadFirstMessage, setUnreadFirstMessage] = (0, _react.useState)(undefined);
   const pendingBottomReachedRef = (0, _react.useRef)(null);
@@ -198,7 +198,7 @@ const GroupChannelMessageList = props => {
   (0, _react.useEffect)(() => {
     isNewLineExistInChannelRef.current = !!props.isNewLineExistInChannel && !!viewableMessages.current;
   }, [props.isNewLineExistInChannel, viewableMessages.current]);
-  const unreadMessagesFloatingPropsRef = (0, _react.useRef)();
+  const unreadMessagesFloatingPropsRef = (0, _react.useRef)(undefined);
   const updateUnreadMessagesFloatingProps = (0, _uikitUtils.useFreshCallback)(() => {
     const canAutoMarkAsRead = !scrolledAwayFromBottomRef.current && !hasUserMarkedAsUnreadRef.current && (hasSeenNewLineRef.current || !isNewLineExistInChannelRef.current);
     unreadMessagesFloatingPropsRef.current = {