@sendbird/uikit-react-native 3.7.5 → 3.8.0

package/lib/module/components/MessageSearchResultItem.js

@@ -2,11 +2,10 @@ import React from 'react';
 import { Avatar, Box, Icon, PressBox, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { getFileIconFromMessage, isVoiceMessage, useIIFE } from '@sendbird/uikit-utils';
 import { useLocalization } from '../hooks/useContext';
-const MessageSearchResultItem = _ref => {
-  let {
-    onPress,
-    message
-  } = _ref;
+const MessageSearchResultItem = ({
+  onPress,
+  message
+}) => {
   const {
     colors,
     select,
@@ -30,13 +29,14 @@ const MessageSearchResultItem = _ref => {
     containerStyle: styles.avatar
   }), /*#__PURE__*/React.createElement(Box, {
     flex: 1,
-    paddingRight: 16
+    paddingEnd: 16
   }, /*#__PURE__*/React.createElement(Box, {
     style: styles.titleLine
   }, /*#__PURE__*/React.createElement(Box, {
     flex: 1,
-    marginRight: 4,
-    justifyContent: 'center'
+    marginEnd: 4,
+    justifyContent: 'center',
+    alignItems: 'flex-start'
   }, /*#__PURE__*/React.createElement(Text, {
     subtitle2: true,
     color: colors.onBackground01,
@@ -61,13 +61,17 @@ const MessageSearchResultItem = _ref => {
         dark: palette.background500
       })
     }]
-  }), /*#__PURE__*/React.createElement(Text, {
+  }), /*#__PURE__*/React.createElement(Box, {
+    flex: 1,
+    alignItems: 'flex-start'
+  }, /*#__PURE__*/React.createElement(Text, {
     body3: true,
     numberOfLines: fileIcon ? 1 : 2,
     ellipsizeMode: fileIcon ? 'middle' : 'tail',
     style: styles.bodyText,
-    color: colors.onBackground03
-  }, STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)))), /*#__PURE__*/React.createElement(Box, {
+    color: colors.onBackground03,
+    supportRTLAlign: true
+  }, STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message))))), /*#__PURE__*/React.createElement(Box, {
     style: styles.separator,
     backgroundColor: colors.onBackground04
   }))));
@@ -102,16 +106,15 @@ const styles = createStyleSheet({
     borderRadius: 8,
     width: 26,
     height: 26,
-    marginRight: 4
+    marginEnd: 4
   },
   bodyText: {
-    flex: 1,
     lineHeight: 16
   },
   separator: {
     position: 'absolute',
-    left: 0,
-    right: -16,
+    start: 0,
+    end: -16,
     bottom: 0,
     height: 1
   }

package/lib/module/components/MessageSearchResultItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Avatar","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","getFileIconFromMessage","isVoiceMessage","useIIFE","useLocalization","MessageSearchResultItem","_ref","onPress","message","colors","select","palette","STRINGS","fileIcon","isFileMessage","undefined","createElement","style","styles","container","size","avatarSize","width","uri","getSenderProfile","containerStyle","avatar","flex","paddingRight","titleLine","marginRight","justifyContent","subtitle2","color","onBackground01","numberOfLines","MESSAGE_SEARCH","SEARCH_RESULT_ITEM_TITLE","paddingTop","caption2","onBackground02","SEARCH_RESULT_ITEM_TITLE_CAPTION","alignItems","flexDirection","icon","bodyIcon","backgroundColor","light","background100","dark","background500","body3","ellipsizeMode","bodyText","onBackground03","SEARCH_RESULT_ITEM_BODY","separator","onBackground04","isUserMessage","sender","profileUrl","height","marginHorizontal","marginTop","marginBottom","borderRadius","lineHeight","position","left","right","bottom"],"sources":["MessageSearchResultItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  Avatar,\n  Box,\n  Icon,\n  PressBox,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdBaseMessage } from '@sendbird/uikit-utils';\nimport { getFileIconFromMessage, isVoiceMessage, useIIFE } from '@sendbird/uikit-utils';\n\nimport type { MessageSearchProps } from '../domain/messageSearch/types';\nimport { useLocalization } from '../hooks/useContext';\n\nconst MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultItem'] = ({ onPress, message }) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n\n  const fileIcon = useIIFE(() => {\n    if (!message?.isFileMessage()) return undefined;\n    if (isVoiceMessage(message)) return undefined;\n    return getFileIconFromMessage(message);\n  });\n\n  return (\n    <PressBox onPress={onPress}>\n      <Box style={styles.container}>\n        <Avatar size={styles.avatarSize.width} uri={getSenderProfile(message)} containerStyle={styles.avatar} />\n\n        <Box flex={1} paddingRight={16}>\n          <Box style={styles.titleLine}>\n            <Box flex={1} marginRight={4} justifyContent={'center'}>\n              <Text subtitle2 color={colors.onBackground01} numberOfLines={1}>\n                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE(message)}\n              </Text>\n            </Box>\n            <Box paddingTop={2}>\n              <Text caption2 color={colors.onBackground02}>\n                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE_CAPTION(message)}\n              </Text>\n            </Box>\n          </Box>\n\n          <Box flex={1}>\n            <Box alignItems={'center'} flexDirection={'row'}>\n              {fileIcon && (\n                <Icon\n                  icon={fileIcon}\n                  size={18}\n                  color={colors.onBackground02}\n                  containerStyle={[\n                    styles.bodyIcon,\n                    { backgroundColor: select({ light: palette.background100, dark: palette.background500 }) },\n                  ]}\n                />\n              )}\n\n              <Text\n                body3\n                numberOfLines={fileIcon ? 1 : 2}\n                ellipsizeMode={fileIcon ? 'middle' : 'tail'}\n                style={styles.bodyText}\n                color={colors.onBackground03}\n              >\n                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}\n              </Text>\n            </Box>\n          </Box>\n\n          <Box style={styles.separator} backgroundColor={colors.onBackground04} />\n        </Box>\n      </Box>\n    </PressBox>\n  );\n};\n\nfunction getSenderProfile(message: SendbirdBaseMessage) {\n  if (message.isUserMessage() || message.isFileMessage()) {\n    return message.sender.profileUrl;\n  } else {\n    return undefined;\n  }\n}\n\nconst styles = createStyleSheet({\n  container: {\n    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  avatar: {\n    marginHorizontal: 16,\n  },\n  avatarSize: {\n    width: 56,\n  },\n  titleLine: {\n    flexDirection: 'row',\n    marginTop: 10,\n    marginBottom: 4,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  bodyText: {\n    flex: 1,\n    lineHeight: 16,\n  },\n  separator: {\n    position: 'absolute',\n    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default MessageSearchResultItem;\n"],"mappings":"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"}
+{"version":3,"names":["React","Avatar","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","getFileIconFromMessage","isVoiceMessage","useIIFE","useLocalization","MessageSearchResultItem","onPress","message","colors","select","palette","STRINGS","fileIcon","isFileMessage","undefined","createElement","style","styles","container","size","avatarSize","width","uri","getSenderProfile","containerStyle","avatar","flex","paddingEnd","titleLine","marginEnd","justifyContent","alignItems","subtitle2","color","onBackground01","numberOfLines","MESSAGE_SEARCH","SEARCH_RESULT_ITEM_TITLE","paddingTop","caption2","onBackground02","SEARCH_RESULT_ITEM_TITLE_CAPTION","flexDirection","icon","bodyIcon","backgroundColor","light","background100","dark","background500","body3","ellipsizeMode","bodyText","onBackground03","supportRTLAlign","SEARCH_RESULT_ITEM_BODY","separator","onBackground04","isUserMessage","sender","profileUrl","height","marginHorizontal","marginTop","marginBottom","borderRadius","lineHeight","position","start","end","bottom"],"sources":["MessageSearchResultItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  Avatar,\n  Box,\n  Icon,\n  PressBox,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdBaseMessage } from '@sendbird/uikit-utils';\nimport { getFileIconFromMessage, isVoiceMessage, useIIFE } from '@sendbird/uikit-utils';\n\nimport type { MessageSearchProps } from '../domain/messageSearch/types';\nimport { useLocalization } from '../hooks/useContext';\n\nconst MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultItem'] = ({ onPress, message }) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n\n  const fileIcon = useIIFE(() => {\n    if (!message?.isFileMessage()) return undefined;\n    if (isVoiceMessage(message)) return undefined;\n    return getFileIconFromMessage(message);\n  });\n\n  return (\n    <PressBox onPress={onPress}>\n      <Box style={styles.container}>\n        <Avatar size={styles.avatarSize.width} uri={getSenderProfile(message)} containerStyle={styles.avatar} />\n\n        <Box flex={1} paddingEnd={16}>\n          <Box style={styles.titleLine}>\n            <Box flex={1} marginEnd={4} justifyContent={'center'} alignItems={'flex-start'}>\n              <Text subtitle2 color={colors.onBackground01} numberOfLines={1}>\n                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE(message)}\n              </Text>\n            </Box>\n            <Box paddingTop={2}>\n              <Text caption2 color={colors.onBackground02}>\n                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE_CAPTION(message)}\n              </Text>\n            </Box>\n          </Box>\n\n          <Box flex={1}>\n            <Box alignItems={'center'} flexDirection={'row'}>\n              {fileIcon && (\n                <Icon\n                  icon={fileIcon}\n                  size={18}\n                  color={colors.onBackground02}\n                  containerStyle={[\n                    styles.bodyIcon,\n                    { backgroundColor: select({ light: palette.background100, dark: palette.background500 }) },\n                  ]}\n                />\n              )}\n\n              <Box flex={1} alignItems={'flex-start'}>\n                <Text\n                  body3\n                  numberOfLines={fileIcon ? 1 : 2}\n                  ellipsizeMode={fileIcon ? 'middle' : 'tail'}\n                  style={styles.bodyText}\n                  color={colors.onBackground03}\n                  supportRTLAlign\n                >\n                  {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}\n                </Text>\n              </Box>\n            </Box>\n          </Box>\n\n          <Box style={styles.separator} backgroundColor={colors.onBackground04} />\n        </Box>\n      </Box>\n    </PressBox>\n  );\n};\n\nfunction getSenderProfile(message: SendbirdBaseMessage) {\n  if (message.isUserMessage() || message.isFileMessage()) {\n    return message.sender.profileUrl;\n  } else {\n    return undefined;\n  }\n}\n\nconst styles = createStyleSheet({\n  container: {\n    height: 76,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  avatar: {\n    marginHorizontal: 16,\n  },\n  avatarSize: {\n    width: 56,\n  },\n  titleLine: {\n    flexDirection: 'row',\n    marginTop: 10,\n    marginBottom: 4,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginEnd: 4,\n  },\n  bodyText: {\n    lineHeight: 16,\n  },\n  separator: {\n    position: 'absolute',\n    start: 0,\n    end: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default MessageSearchResultItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/NewMessagesButton.js

@@ -2,12 +2,11 @@ import React from 'react';
 import { Platform, TouchableOpacity } from 'react-native';
 import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useLocalization } from '../hooks/useContext';
-const NewMessagesButton = _ref => {
-  let {
-    newMessages,
-    visible,
-    onPress
-  } = _ref;
+const NewMessagesButton = ({
+  newMessages,
+  visible,
+  onPress
+}) => {
   const {
     STRINGS
   } = useLocalization();

package/lib/module/components/NewMessagesButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","TouchableOpacity","Text","createStyleSheet","useUIKitTheme","useLocalization","NewMessagesButton","_ref","newMessages","visible","onPress","STRINGS","select","palette","colors","length","createElement","activeOpacity","style","styles","container","backgroundColor","dark","background400","light","background50","button","color","primary","GROUP_CHANNEL","LIST_BUTTON_NEW_MSG","paddingHorizontal","paddingVertical","borderRadius","android","elevation","ios","shadowColor","shadowRadius","shadowOffset","width","height","shadowOpacity","memo"],"sources":["NewMessagesButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, TouchableOpacity } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../hooks/useContext';\n\ntype Props = {\n  newMessages: SendbirdMessage[];\n  visible: boolean;\n  onPress: () => void;\n};\nconst NewMessagesButton = ({ newMessages, visible, onPress }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { select, palette, colors } = useUIKitTheme();\n  if (newMessages.length === 0 || !visible) return null;\n  return (\n    <TouchableOpacity\n      activeOpacity={0.8}\n      onPress={onPress}\n      style={[\n        styles.container,\n        { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },\n      ]}\n    >\n      <Text button color={colors.primary}>\n        {STRINGS.GROUP_CHANNEL.LIST_BUTTON_NEW_MSG(newMessages)}\n      </Text>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 10,\n    borderRadius: 20,\n    ...Platform.select({\n      android: {\n        elevation: 4,\n      },\n      ios: {\n        shadowColor: 'black',\n        shadowRadius: 4,\n        shadowOffset: { width: 0, height: 4 },\n        shadowOpacity: 0.3,\n      },\n    }),\n  },\n});\nexport default React.memo(NewMessagesButton);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,cAAc;AAEzD,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAG/F,SAASC,eAAe,QAAQ,qBAAqB;AAOrD,MAAMC,iBAAiB,GAAGC,IAAA,IAA8C;EAAA,IAA7C;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAe,CAAC,GAAAH,IAAA;EACjE,MAAM;IAAEI;EAAQ,CAAC,GAAGN,eAAe,EAAE;EACrC,MAAM;IAAEO,MAAM;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAGV,aAAa,EAAE;EACnD,IAAII,WAAW,CAACO,MAAM,KAAK,CAAC,IAAI,CAACN,OAAO,EAAE,OAAO,IAAI;EACrD,oBACEV,KAAA,CAAAiB,aAAA,CAACf,gBAAgB;IACfgB,aAAa,EAAE,GAAI;IACnBP,OAAO,EAAEA,OAAQ;IACjBQ,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAET,MAAM,CAAC;QAAEU,IAAI,EAAET,OAAO,CAACU,aAAa;QAAEC,KAAK,EAAEX,OAAO,CAACY;MAAa,CAAC;IAAE,CAAC;EACzF,gBAEF1B,KAAA,CAAAiB,aAAA,CAACd,IAAI;IAACwB,MAAM;IAACC,KAAK,EAAEb,MAAM,CAACc;EAAQ,GAChCjB,OAAO,CAACkB,aAAa,CAACC,mBAAmB,CAACtB,WAAW,CAAC,CAClD,CACU;AAEvB,CAAC;AAED,MAAMW,MAAM,GAAGhB,gBAAgB,CAAC;EAC9BiB,SAAS,EAAE;IACTW,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBC,YAAY,EAAE,EAAE;IAChB,GAAGjC,QAAQ,CAACY,MAAM,CAAC;MACjBsB,OAAO,EAAE;QACPC,SAAS,EAAE;MACb,CAAC;MACDC,GAAG,EAAE;QACHC,WAAW,EAAE,OAAO;QACpBC,YAAY,EAAE,CAAC;QACfC,YAAY,EAAE;UAAEC,KAAK,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAE,CAAC;QACrCC,aAAa,EAAE;MACjB;IACF,CAAC;EACH;AACF,CAAC,CAAC;AACF,4BAAe3C,KAAK,CAAC4C,IAAI,CAACrC,iBAAiB,CAAC"}
+{"version":3,"names":["React","Platform","TouchableOpacity","Text","createStyleSheet","useUIKitTheme","useLocalization","NewMessagesButton","newMessages","visible","onPress","STRINGS","select","palette","colors","length","createElement","activeOpacity","style","styles","container","backgroundColor","dark","background400","light","background50","button","color","primary","GROUP_CHANNEL","LIST_BUTTON_NEW_MSG","paddingHorizontal","paddingVertical","borderRadius","android","elevation","ios","shadowColor","shadowRadius","shadowOffset","width","height","shadowOpacity","memo"],"sources":["NewMessagesButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, TouchableOpacity } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../hooks/useContext';\n\ntype Props = {\n  newMessages: SendbirdMessage[];\n  visible: boolean;\n  onPress: () => void;\n};\nconst NewMessagesButton = ({ newMessages, visible, onPress }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { select, palette, colors } = useUIKitTheme();\n  if (newMessages.length === 0 || !visible) return null;\n  return (\n    <TouchableOpacity\n      activeOpacity={0.8}\n      onPress={onPress}\n      style={[\n        styles.container,\n        { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },\n      ]}\n    >\n      <Text button color={colors.primary}>\n        {STRINGS.GROUP_CHANNEL.LIST_BUTTON_NEW_MSG(newMessages)}\n      </Text>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 10,\n    borderRadius: 20,\n    ...Platform.select({\n      android: {\n        elevation: 4,\n      },\n      ios: {\n        shadowColor: 'black',\n        shadowRadius: 4,\n        shadowOffset: { width: 0, height: 4 },\n        shadowOpacity: 0.3,\n      },\n    }),\n  },\n});\nexport default React.memo(NewMessagesButton);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,cAAc;AAEzD,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAG/F,SAASC,eAAe,QAAQ,qBAAqB;AAOrD,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,WAAW;EAAEC,OAAO;EAAEC;AAAe,CAAC,KAAK;EACtE,MAAM;IAAEC;EAAQ,CAAC,GAAGL,eAAe,CAAC,CAAC;EACrC,MAAM;IAAEM,MAAM;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAGT,aAAa,CAAC,CAAC;EACnD,IAAIG,WAAW,CAACO,MAAM,KAAK,CAAC,IAAI,CAACN,OAAO,EAAE,OAAO,IAAI;EACrD,oBACET,KAAA,CAAAgB,aAAA,CAACd,gBAAgB;IACfe,aAAa,EAAE,GAAI;IACnBP,OAAO,EAAEA,OAAQ;IACjBQ,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAET,MAAM,CAAC;QAAEU,IAAI,EAAET,OAAO,CAACU,aAAa;QAAEC,KAAK,EAAEX,OAAO,CAACY;MAAa,CAAC;IAAE,CAAC;EACzF,gBAEFzB,KAAA,CAAAgB,aAAA,CAACb,IAAI;IAACuB,MAAM;IAACC,KAAK,EAAEb,MAAM,CAACc;EAAQ,GAChCjB,OAAO,CAACkB,aAAa,CAACC,mBAAmB,CAACtB,WAAW,CAClD,CACU,CAAC;AAEvB,CAAC;AAED,MAAMW,MAAM,GAAGf,gBAAgB,CAAC;EAC9BgB,SAAS,EAAE;IACTW,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBC,YAAY,EAAE,EAAE;IAChB,GAAGhC,QAAQ,CAACW,MAAM,CAAC;MACjBsB,OAAO,EAAE;QACPC,SAAS,EAAE;MACb,CAAC;MACDC,GAAG,EAAE;QACHC,WAAW,EAAE,OAAO;QACpBC,YAAY,EAAE,CAAC;QACfC,YAAY,EAAE;UAAEC,KAAK,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAE,CAAC;QACrCC,aAAa,EAAE;MACjB;IACF,CAAC;EACH;AACF,CAAC,CAAC;AACF,4BAAe1C,KAAK,CAAC2C,IAAI,CAACpC,iBAAiB,CAAC","ignoreList":[]}

package/lib/module/components/OpenChannelMessageRenderer/OpenChannelMessageDateSeparator.js

@@ -3,11 +3,10 @@ import React from 'react';
 import { View } from 'react-native';
 import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useLocalization } from '../../hooks/useContext';
-const OpenChannelMessageDateSeparator = _ref => {
-  let {
-    message,
-    prevMessage
-  } = _ref;
+const OpenChannelMessageDateSeparator = ({
+  message,
+  prevMessage
+}) => {
   const {
     STRINGS
   } = useLocalization();

package/lib/module/components/OpenChannelMessageRenderer/OpenChannelMessageDateSeparator.js.map

@@ -1 +1 @@
-{"version":3,"names":["isSameDay","React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","OpenChannelMessageDateSeparator","_ref","message","prevMessage","STRINGS","colors","sameDay","createdAt","createElement","style","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","caption1","color","text","OPEN_CHANNEL","LIST_DATE_SEPARATOR","Date","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["OpenChannelMessageDateSeparator.tsx"],"sourcesContent":["import { isSameDay } from 'date-fns';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\nconst OpenChannelMessageDateSeparator = ({\n  message,\n  prevMessage,\n}: {\n  message: SendbirdMessage;\n  prevMessage?: SendbirdMessage;\n}) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n\n  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);\n  if (sameDay) return null;\n\n  return (\n    <View style={styles.container}>\n      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>\n        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>\n          {STRINGS.OPEN_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    marginVertical: 16,\n  },\n  view: {\n    borderRadius: 10,\n    paddingVertical: 4,\n    paddingHorizontal: 10,\n  },\n});\n\nexport default OpenChannelMessageDateSeparator;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,UAAU;AACpC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAG/F,SAASC,eAAe,QAAQ,wBAAwB;AAExD,MAAMC,+BAA+B,GAAGC,IAAA,IAMlC;EAAA,IANmC;IACvCC,OAAO;IACPC;EAIF,CAAC,GAAAF,IAAA;EACC,MAAM;IAAEG;EAAQ,CAAC,GAAGL,eAAe,EAAE;EACrC,MAAM;IAAEM;EAAO,CAAC,GAAGP,aAAa,EAAE;EAElC,MAAMQ,OAAO,GAAGb,SAAS,CAACS,OAAO,CAACK,SAAS,EAAE,CAAAJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEI,SAAS,KAAI,CAAC,CAAC;EACzE,IAAID,OAAO,EAAE,OAAO,IAAI;EAExB,oBACEZ,KAAA,CAAAc,aAAA,CAACb,IAAI;IAACc,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC5BjB,KAAA,CAAAc,aAAA,CAACb,IAAI;IAACc,KAAK,EAAE,CAACC,MAAM,CAACE,IAAI,EAAE;MAAEC,eAAe,EAAER,MAAM,CAACS,EAAE,CAACC,aAAa,CAACC,OAAO,CAACC,IAAI,CAACC;IAAW,CAAC;EAAE,gBAC/FxB,KAAA,CAAAc,aAAA,CAACZ,IAAI;IAACuB,QAAQ;IAACC,KAAK,EAAEf,MAAM,CAACS,EAAE,CAACC,aAAa,CAACC,OAAO,CAACC,IAAI,CAACI;EAAK,GAC7DjB,OAAO,CAACkB,YAAY,CAACC,mBAAmB,CAAC,IAAIC,IAAI,CAACtB,OAAO,CAACK,SAAS,CAAC,CAAC,CACjE,CACF,CACF;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,SAAS,EAAE;IACTc,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDd,IAAI,EAAE;IACJe,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAe7B,+BAA+B"}
+{"version":3,"names":["isSameDay","React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","OpenChannelMessageDateSeparator","message","prevMessage","STRINGS","colors","sameDay","createdAt","createElement","style","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","caption1","color","text","OPEN_CHANNEL","LIST_DATE_SEPARATOR","Date","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["OpenChannelMessageDateSeparator.tsx"],"sourcesContent":["import { isSameDay } from 'date-fns';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\nconst OpenChannelMessageDateSeparator = ({\n  message,\n  prevMessage,\n}: {\n  message: SendbirdMessage;\n  prevMessage?: SendbirdMessage;\n}) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n\n  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);\n  if (sameDay) return null;\n\n  return (\n    <View style={styles.container}>\n      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>\n        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>\n          {STRINGS.OPEN_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    marginVertical: 16,\n  },\n  view: {\n    borderRadius: 10,\n    paddingVertical: 4,\n    paddingHorizontal: 10,\n  },\n});\n\nexport default OpenChannelMessageDateSeparator;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,UAAU;AACpC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAG/F,SAASC,eAAe,QAAQ,wBAAwB;AAExD,MAAMC,+BAA+B,GAAGA,CAAC;EACvCC,OAAO;EACPC;AAIF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAQ,CAAC,GAAGJ,eAAe,CAAC,CAAC;EACrC,MAAM;IAAEK;EAAO,CAAC,GAAGN,aAAa,CAAC,CAAC;EAElC,MAAMO,OAAO,GAAGZ,SAAS,CAACQ,OAAO,CAACK,SAAS,EAAE,CAAAJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEI,SAAS,KAAI,CAAC,CAAC;EACzE,IAAID,OAAO,EAAE,OAAO,IAAI;EAExB,oBACEX,KAAA,CAAAa,aAAA,CAACZ,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC5BhB,KAAA,CAAAa,aAAA,CAACZ,IAAI;IAACa,KAAK,EAAE,CAACC,MAAM,CAACE,IAAI,EAAE;MAAEC,eAAe,EAAER,MAAM,CAACS,EAAE,CAACC,aAAa,CAACC,OAAO,CAACC,IAAI,CAACC;IAAW,CAAC;EAAE,gBAC/FvB,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACsB,QAAQ;IAACC,KAAK,EAAEf,MAAM,CAACS,EAAE,CAACC,aAAa,CAACC,OAAO,CAACC,IAAI,CAACI;EAAK,GAC7DjB,OAAO,CAACkB,YAAY,CAACC,mBAAmB,CAAC,IAAIC,IAAI,CAACtB,OAAO,CAACK,SAAS,CAAC,CACjE,CACF,CACF,CAAC;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGZ,gBAAgB,CAAC;EAC9Ba,SAAS,EAAE;IACTc,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDd,IAAI,EAAE;IACJe,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAe5B,+BAA+B","ignoreList":[]}

package/lib/module/components/OpenChannelMessageRenderer/index.js

@@ -1,20 +1,19 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import { Box, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';
 import { calcMessageGrouping, getMessageType } from '@sendbird/uikit-utils';
 import { useLocalization, usePlatformService, useSBUHandlers, useSendbirdChat } from '../../hooks/useContext';
 import OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';
-const OpenChannelMessageRenderer = _ref => {
-  let {
-    channel,
-    message,
-    onPress,
-    onLongPress,
-    onShowUserProfile,
-    enableMessageGrouping,
-    prevMessage,
-    nextMessage
-  } = _ref;
+const OpenChannelMessageRenderer = ({
+  channel,
+  message,
+  onPress,
+  onLongPress,
+  onShowUserProfile,
+  enableMessageGrouping,
+  prevMessage,
+  nextMessage
+}) => {
   const handlers = useSBUHandlers();
   const {
     sbOptions

package/lib/module/components/OpenChannelMessageRenderer/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Box","OpenChannelMessage","calcMessageGrouping","getMessageType","useLocalization","usePlatformService","useSBUHandlers","useSendbirdChat","OpenChannelMessageDateSeparator","OpenChannelMessageRenderer","_ref","channel","message","onPress","onLongPress","onShowUserProfile","enableMessageGrouping","prevMessage","nextMessage","handlers","sbOptions","STRINGS","mediaService","groupWithPrev","Boolean","messageProps","onPressURL","url","onOpenURL","onPressAvatar","sender","hideMessageButton","grouped","strings","edited","OPEN_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","senderName","nickname","LABELS","USER_NO_NAME","sentDate","MESSAGE_BUBBLE_TIME","fileName","isFileMessage","MESSAGE_BUBBLE_FILE_TITLE","unknownTitle","MESSAGE_BUBBLE_UNKNOWN_TITLE","unknownDescription","MESSAGE_BUBBLE_UNKNOWN_DESC","renderMessage","createElement","Admin","_extends","User","uikitWithAppInfo","openChannel","enableOgtag","OpenGraphUser","File","ImageFile","VideoFile","fetchThumbnailFromVideoSource","uri","getVideoThumbnail","timeMills","Unknown","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { OpenChannelMessageProps } from '@sendbird/uikit-react-native-foundation';\nimport { Box, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdAdminMessage,\n  SendbirdFileMessage,\n  SendbirdMessage,\n  SendbirdUserMessage,\n  calcMessageGrouping,\n  getMessageType,\n} from '@sendbird/uikit-utils';\n\nimport type { OpenChannelProps } from '../../domain/openChannel/types';\nimport { useLocalization, usePlatformService, useSBUHandlers, useSendbirdChat } from '../../hooks/useContext';\nimport OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';\n\nconst OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  onShowUserProfile,\n  enableMessageGrouping,\n  prevMessage,\n  nextMessage,\n}) => {\n  const handlers = useSBUHandlers();\n  const { sbOptions } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const { mediaService } = usePlatformService();\n  const { groupWithPrev } = calcMessageGrouping(Boolean(enableMessageGrouping), message, prevMessage, nextMessage);\n\n  const messageProps: Omit<OpenChannelMessageProps<SendbirdMessage>, 'message'> = {\n    channel,\n    onPress,\n    onLongPress,\n    onPressURL: (url) => handlers.onOpenURL(url),\n    onPressAvatar: () => 'sender' in message && onShowUserProfile?.(message.sender, { hideMessageButton: true }),\n    grouped: groupWithPrev,\n    strings: {\n      edited: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,\n      senderName: ('sender' in message && message.sender.nickname) || STRINGS.LABELS.USER_NO_NAME,\n      sentDate: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_TIME(message),\n      fileName: message.isFileMessage() ? STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message) : '',\n      unknownTitle: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message),\n      unknownDescription: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message),\n    },\n  };\n  const renderMessage = () => {\n    switch (getMessageType(message)) {\n      case 'admin': {\n        return <OpenChannelMessage.Admin message={message as SendbirdAdminMessage} {...messageProps} />;\n      }\n      case 'user': {\n        return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;\n      }\n      case 'user.opengraph': {\n        if (sbOptions.uikitWithAppInfo.openChannel.channel.enableOgtag) {\n          return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;\n        } else {\n          return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;\n        }\n      }\n      case 'file':\n      case 'file.voice':\n      case 'file.audio': {\n        return <OpenChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;\n      }\n      case 'file.image': {\n        return <OpenChannelMessage.ImageFile message={message as SendbirdFileMessage} {...messageProps} />;\n      }\n      case 'file.video': {\n        return (\n          <OpenChannelMessage.VideoFile\n            message={message as SendbirdFileMessage}\n            fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}\n            {...messageProps}\n          />\n        );\n      }\n      case 'unknown':\n      default: {\n        return <OpenChannelMessage.Unknown message={message} {...messageProps} />;\n      }\n    }\n  };\n\n  return (\n    <Box>\n      <OpenChannelMessageDateSeparator message={message} prevMessage={prevMessage} />\n      {renderMessage()}\n    </Box>\n  );\n};\n\nexport default React.memo(OpenChannelMessageRenderer);\n"],"mappings":"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"}
+{"version":3,"names":["React","Box","OpenChannelMessage","calcMessageGrouping","getMessageType","useLocalization","usePlatformService","useSBUHandlers","useSendbirdChat","OpenChannelMessageDateSeparator","OpenChannelMessageRenderer","channel","message","onPress","onLongPress","onShowUserProfile","enableMessageGrouping","prevMessage","nextMessage","handlers","sbOptions","STRINGS","mediaService","groupWithPrev","Boolean","messageProps","onPressURL","url","onOpenURL","onPressAvatar","sender","hideMessageButton","grouped","strings","edited","OPEN_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","senderName","nickname","LABELS","USER_NO_NAME","sentDate","MESSAGE_BUBBLE_TIME","fileName","isFileMessage","MESSAGE_BUBBLE_FILE_TITLE","unknownTitle","MESSAGE_BUBBLE_UNKNOWN_TITLE","unknownDescription","MESSAGE_BUBBLE_UNKNOWN_DESC","renderMessage","createElement","Admin","_extends","User","uikitWithAppInfo","openChannel","enableOgtag","OpenGraphUser","File","ImageFile","VideoFile","fetchThumbnailFromVideoSource","uri","getVideoThumbnail","timeMills","Unknown","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { OpenChannelMessageProps } from '@sendbird/uikit-react-native-foundation';\nimport { Box, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdAdminMessage,\n  SendbirdFileMessage,\n  SendbirdMessage,\n  SendbirdUserMessage,\n  calcMessageGrouping,\n  getMessageType,\n} from '@sendbird/uikit-utils';\n\nimport type { OpenChannelProps } from '../../domain/openChannel/types';\nimport { useLocalization, usePlatformService, useSBUHandlers, useSendbirdChat } from '../../hooks/useContext';\nimport OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';\n\nconst OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  onShowUserProfile,\n  enableMessageGrouping,\n  prevMessage,\n  nextMessage,\n}) => {\n  const handlers = useSBUHandlers();\n  const { sbOptions } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const { mediaService } = usePlatformService();\n  const { groupWithPrev } = calcMessageGrouping(Boolean(enableMessageGrouping), message, prevMessage, nextMessage);\n\n  const messageProps: Omit<OpenChannelMessageProps<SendbirdMessage>, 'message'> = {\n    channel,\n    onPress,\n    onLongPress,\n    onPressURL: (url) => handlers.onOpenURL(url),\n    onPressAvatar: () => 'sender' in message && onShowUserProfile?.(message.sender, { hideMessageButton: true }),\n    grouped: groupWithPrev,\n    strings: {\n      edited: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,\n      senderName: ('sender' in message && message.sender.nickname) || STRINGS.LABELS.USER_NO_NAME,\n      sentDate: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_TIME(message),\n      fileName: message.isFileMessage() ? STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message) : '',\n      unknownTitle: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message),\n      unknownDescription: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message),\n    },\n  };\n  const renderMessage = () => {\n    switch (getMessageType(message)) {\n      case 'admin': {\n        return <OpenChannelMessage.Admin message={message as SendbirdAdminMessage} {...messageProps} />;\n      }\n      case 'user': {\n        return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;\n      }\n      case 'user.opengraph': {\n        if (sbOptions.uikitWithAppInfo.openChannel.channel.enableOgtag) {\n          return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;\n        } else {\n          return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;\n        }\n      }\n      case 'file':\n      case 'file.voice':\n      case 'file.audio': {\n        return <OpenChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;\n      }\n      case 'file.image': {\n        return <OpenChannelMessage.ImageFile message={message as SendbirdFileMessage} {...messageProps} />;\n      }\n      case 'file.video': {\n        return (\n          <OpenChannelMessage.VideoFile\n            message={message as SendbirdFileMessage}\n            fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}\n            {...messageProps}\n          />\n        );\n      }\n      case 'unknown':\n      default: {\n        return <OpenChannelMessage.Unknown message={message} {...messageProps} />;\n      }\n    }\n  };\n\n  return (\n    <Box>\n      <OpenChannelMessageDateSeparator message={message} prevMessage={prevMessage} />\n      {renderMessage()}\n    </Box>\n  );\n};\n\nexport default React.memo(OpenChannelMessageRenderer);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,GAAG,EAAEC,kBAAkB,QAAQ,yCAAyC;AACjF,SAKEC,mBAAmB,EACnBC,cAAc,QACT,uBAAuB;AAG9B,SAASC,eAAe,EAAEC,kBAAkB,EAAEC,cAAc,EAAEC,eAAe,QAAQ,wBAAwB;AAC7G,OAAOC,+BAA+B,MAAM,mCAAmC;AAE/E,MAAMC,0BAAyE,GAAGA,CAAC;EACjFC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,WAAW;EACXC,iBAAiB;EACjBC,qBAAqB;EACrBC,WAAW;EACXC;AACF,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGZ,cAAc,CAAC,CAAC;EACjC,MAAM;IAAEa;EAAU,CAAC,GAAGZ,eAAe,CAAC,CAAC;EACvC,MAAM;IAAEa;EAAQ,CAAC,GAAGhB,eAAe,CAAC,CAAC;EACrC,MAAM;IAAEiB;EAAa,CAAC,GAAGhB,kBAAkB,CAAC,CAAC;EAC7C,MAAM;IAAEiB;EAAc,CAAC,GAAGpB,mBAAmB,CAACqB,OAAO,CAACR,qBAAqB,CAAC,EAAEJ,OAAO,EAAEK,WAAW,EAAEC,WAAW,CAAC;EAEhH,MAAMO,YAAuE,GAAG;IAC9Ed,OAAO;IACPE,OAAO;IACPC,WAAW;IACXY,UAAU,EAAGC,GAAG,IAAKR,QAAQ,CAACS,SAAS,CAACD,GAAG,CAAC;IAC5CE,aAAa,EAAEA,CAAA,KAAM,QAAQ,IAAIjB,OAAO,KAAIG,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAGH,OAAO,CAACkB,MAAM,EAAE;MAAEC,iBAAiB,EAAE;IAAK,CAAC,CAAC;IAC5GC,OAAO,EAAET,aAAa;IACtBU,OAAO,EAAE;MACPC,MAAM,EAAEb,OAAO,CAACc,YAAY,CAACC,6BAA6B;MAC1DC,UAAU,EAAG,QAAQ,IAAIzB,OAAO,IAAIA,OAAO,CAACkB,MAAM,CAACQ,QAAQ,IAAKjB,OAAO,CAACkB,MAAM,CAACC,YAAY;MAC3FC,QAAQ,EAAEpB,OAAO,CAACc,YAAY,CAACO,mBAAmB,CAAC9B,OAAO,CAAC;MAC3D+B,QAAQ,EAAE/B,OAAO,CAACgC,aAAa,CAAC,CAAC,GAAGvB,OAAO,CAACc,YAAY,CAACU,yBAAyB,CAACjC,OAAO,CAAC,GAAG,EAAE;MAChGkC,YAAY,EAAEzB,OAAO,CAACc,YAAY,CAACY,4BAA4B,CAACnC,OAAO,CAAC;MACxEoC,kBAAkB,EAAE3B,OAAO,CAACc,YAAY,CAACc,2BAA2B,CAACrC,OAAO;IAC9E;EACF,CAAC;EACD,MAAMsC,aAAa,GAAGA,CAAA,KAAM;IAC1B,QAAQ9C,cAAc,CAACQ,OAAO,CAAC;MAC7B,KAAK,OAAO;QAAE;UACZ,oBAAOZ,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAACkD,KAAK,EAAAC,QAAA;YAACzC,OAAO,EAAEA;UAAgC,GAAKa,YAAY,CAAG,CAAC;QACjG;MACA,KAAK,MAAM;QAAE;UACX,oBAAOzB,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAACoD,IAAI,EAAAD,QAAA;YAACzC,OAAO,EAAEA;UAA+B,GAAKa,YAAY,CAAG,CAAC;QAC/F;MACA,KAAK,gBAAgB;QAAE;UACrB,IAAIL,SAAS,CAACmC,gBAAgB,CAACC,WAAW,CAAC7C,OAAO,CAAC8C,WAAW,EAAE;YAC9D,oBAAOzD,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAACwD,aAAa,EAAAL,QAAA;cAACzC,OAAO,EAAEA;YAA+B,GAAKa,YAAY,CAAG,CAAC;UACxG,CAAC,MAAM;YACL,oBAAOzB,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAACoD,IAAI,EAAAD,QAAA;cAACzC,OAAO,EAAEA;YAA+B,GAAKa,YAAY,CAAG,CAAC;UAC/F;QACF;MACA,KAAK,MAAM;MACX,KAAK,YAAY;MACjB,KAAK,YAAY;QAAE;UACjB,oBAAOzB,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAACyD,IAAI,EAAAN,QAAA;YAACzC,OAAO,EAAEA;UAA+B,GAAKa,YAAY,CAAG,CAAC;QAC/F;MACA,KAAK,YAAY;QAAE;UACjB,oBAAOzB,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAAC0D,SAAS,EAAAP,QAAA;YAACzC,OAAO,EAAEA;UAA+B,GAAKa,YAAY,CAAG,CAAC;QACpG;MACA,KAAK,YAAY;QAAE;UACjB,oBACEzB,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAAC2D,SAAS,EAAAR,QAAA;YAC3BzC,OAAO,EAAEA,OAA+B;YACxCkD,6BAA6B,EAAGC,GAAG,IAAKzC,YAAY,CAAC0C,iBAAiB,CAAC;cAAErC,GAAG,EAAEoC,GAAG;cAAEE,SAAS,EAAE;YAAK,CAAC;UAAE,GAClGxC,YAAY,CACjB,CAAC;QAEN;MACA,KAAK,SAAS;MACd;QAAS;UACP,oBAAOzB,KAAA,CAAAmD,aAAA,CAACjD,kBAAkB,CAACgE,OAAO,EAAAb,QAAA;YAACzC,OAAO,EAAEA;UAAQ,GAAKa,YAAY,CAAG,CAAC;QAC3E;IACF;EACF,CAAC;EAED,oBACEzB,KAAA,CAAAmD,aAAA,CAAClD,GAAG,qBACFD,KAAA,CAAAmD,aAAA,CAAC1C,+BAA+B;IAACG,OAAO,EAAEA,OAAQ;IAACK,WAAW,EAAEA;EAAY,CAAE,CAAC,EAC9EiC,aAAa,CAAC,CACZ,CAAC;AAEV,CAAC;AAED,4BAAelD,KAAK,CAACmE,IAAI,CAACzD,0BAA0B,CAAC","ignoreList":[]}

package/lib/module/components/ProviderLayout.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-const ProviderLayout = _ref => {
-  let {
-    children
-  } = _ref;
+const ProviderLayout = ({
+  children
+}) => {
   const {
     colors
   } = useUIKitTheme();

package/lib/module/components/ProviderLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","ProviderLayout","_ref","children","colors","createElement","style","styles","view","backgroundColor","background","flex"],"sources":["ProviderLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nconst ProviderLayout = ({ children }: React.PropsWithChildren) => {\n  const { colors } = useUIKitTheme();\n  return <View style={[styles.view, { backgroundColor: colors.background }]}>{children}</View>;\n};\n\nconst styles = createStyleSheet({\n  view: {\n    flex: 1,\n  },\n});\n\nexport default ProviderLayout;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAEzF,MAAMC,cAAc,GAAGC,IAAA,IAA2C;EAAA,IAA1C;IAAEC;EAAkC,CAAC,GAAAD,IAAA;EAC3D,MAAM;IAAEE;EAAO,CAAC,GAAGJ,aAAa,EAAE;EAClC,oBAAOH,KAAA,CAAAQ,aAAA,CAACP,IAAI;IAACQ,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAE;MAAEC,eAAe,EAAEL,MAAM,CAACM;IAAW,CAAC;EAAE,GAAEP,QAAQ,CAAQ;AAC9F,CAAC;AAED,MAAMI,MAAM,GAAGR,gBAAgB,CAAC;EAC9BS,IAAI,EAAE;IACJG,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEF,eAAeV,cAAc"}
+{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","ProviderLayout","children","colors","createElement","style","styles","view","backgroundColor","background","flex"],"sources":["ProviderLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nconst ProviderLayout = ({ children }: React.PropsWithChildren) => {\n  const { colors } = useUIKitTheme();\n  return <View style={[styles.view, { backgroundColor: colors.background }]}>{children}</View>;\n};\n\nconst styles = createStyleSheet({\n  view: {\n    flex: 1,\n  },\n});\n\nexport default ProviderLayout;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAEzF,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAK;EAChE,MAAM;IAAEC;EAAO,CAAC,GAAGH,aAAa,CAAC,CAAC;EAClC,oBAAOH,KAAA,CAAAO,aAAA,CAACN,IAAI;IAACO,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAE;MAAEC,eAAe,EAAEL,MAAM,CAACM;IAAW,CAAC;EAAE,GAAEP,QAAe,CAAC;AAC9F,CAAC;AAED,MAAMI,MAAM,GAAGP,gBAAgB,CAAC;EAC9BQ,IAAI,EAAE;IACJG,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAEF,eAAeT,cAAc","ignoreList":[]}

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

@@ -1,17 +1,15 @@
 import React from 'react';
 import { Pressable, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
-const BottomSheetReactionAddon = _ref => {
-  let {
-    onClose,
-    message,
-    channel
-  } = _ref;
+const BottomSheetReactionAddon = ({
+  onClose,
+  message,
+  channel
+}) => {
   const {
     emojiManager,
     currentUser,
@@ -24,12 +22,8 @@ const BottomSheetReactionAddon = _ref => {
   const {
     colors
   } = useUIKitTheme();
-  const handlerId = useUniqHandlerId('BottomSheetReactionAddon');
-  const {
-    left,
-    right
-  } = useSafeAreaInsets();
-  useChannelHandler(sdk, handlerId, {
+  const safeArea = useSafeAreaPadding(['left', 'right']);
+  useGroupChannelHandler(sdk, {
     async onReactionUpdated(eventChannel, event) {
       if ((channel === null || channel === void 0 ? void 0 : channel.url) === eventChannel.url && event.messageId === (message === null || message === void 0 ? void 0 : message.messageId)) {
         const msg = await sdk.message.getMessage({
@@ -48,16 +42,15 @@ const BottomSheetReactionAddon = _ref => {
   const color = colors.ui.reaction.default;
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
-      marginRight: right,
-      marginLeft: left
+      marginStart: safeArea.paddingStart,
+      marginEnd: safeArea.paddingEnd
     }]
-  }, emojiAll.map(_ref2 => {
-    var _message$reactions, _message$reactions$fi;
-    let {
-      key,
-      url
-    } = _ref2;
-    const reactionUserIds = (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.find(it => it.key === key)) === null || _message$reactions$fi === void 0 ? void 0 : _message$reactions$fi.userIds) ?? [];
+  }, emojiAll.map(({
+    key,
+    url
+  }) => {
+    var _message$reactions;
+    const reactionUserIds = (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 currentUserIdx = reactionUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? UNKNOWN_USER_ID);
     const reacted = currentUserIdx > -1;
     const onPress = async () => {
@@ -73,14 +66,11 @@ const BottomSheetReactionAddon = _ref => {
     return /*#__PURE__*/React.createElement(Pressable, {
       key: key,
       onPress: onPress,
-      style: _ref3 => {
-        let {
-          pressed
-        } = _ref3;
-        return [styles.button, {
-          backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
-        }];
-      }
+      style: ({
+        pressed
+      }) => [styles.button, {
+        backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
+      }]
     }, /*#__PURE__*/React.createElement(Image, {
       source: {
         uri: url
@@ -95,14 +85,11 @@ const BottomSheetReactionAddon = _ref => {
         message
       });
     },
-    style: _ref4 => {
-      let {
-        pressed
-      } = _ref4;
-      return [styles.button, {
-        backgroundColor: pressed ? color.selected.background : color.enabled.background
-      }];
-    }
+    style: ({
+      pressed
+    }) => [styles.button, {
+      backgroundColor: pressed ? color.selected.background : color.enabled.background
+    }]
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: 'emoji-more',
     style: styles.emoji,

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","View","useSafeAreaInsets","useChannelHandler","Icon","Image","createStyleSheet","useUIKitTheme","Logger","useUniqHandlerId","UNKNOWN_USER_ID","useReaction","useSendbirdChat","BottomSheetReactionAddon","_ref","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","handlerId","left","right","onReactionUpdated","eventChannel","event","url","messageId","msg","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","default","createElement","style","styles","container","marginRight","marginLeft","map","_ref2","_message$reactions","_message$reactions$fi","key","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","reacted","onPress","action","deleteReaction","addReaction","catch","error","warn","finally","_ref3","pressed","button","backgroundColor","selected","background","enabled","source","uri","emoji","_ref4","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';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { BaseMessage } from '@sendbird/chat/message';\nimport { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } 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 handlerId = useUniqHandlerId('BottomSheetReactionAddon');\n  const { left, right } = useSafeAreaInsets();\n\n  useChannelHandler(sdk, handlerId, {\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, { marginRight: right, marginLeft: left }]}>\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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,iBAAiB,QAAQ,gCAAgC;AAGlE,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,SAASC,IAAI,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AACtG,SAASC,MAAM,EAA4CC,gBAAgB,QAAQ,uBAAuB;AAE1G,SAASC,eAAe,QAAQ,iBAAiB;AACjD,SAASC,WAAW,EAAEC,eAAe,QAAQ,wBAAwB;AAOrE,MAAMC,wBAAwB,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,OAAO;IAAEC,OAAO;IAAEC;EAAe,CAAC,GAAAH,IAAA;EACpE,MAAM;IAAEI,YAAY;IAAEC,WAAW;IAAEC;EAAI,CAAC,GAAGR,eAAe,EAAE;EAC5D,MAAM;IAAES,yBAAyB;IAAEC;EAAiB,CAAC,GAAGX,WAAW,EAAE;EACrE,MAAM;IAAEY;EAAO,CAAC,GAAGhB,aAAa,EAAE;EAClC,MAAMiB,SAAS,GAAGf,gBAAgB,CAAC,0BAA0B,CAAC;EAC9D,MAAM;IAAEgB,IAAI;IAAEC;EAAM,CAAC,GAAGxB,iBAAiB,EAAE;EAE3CC,iBAAiB,CAACiB,GAAG,EAAEI,SAAS,EAAE;IAChC,MAAMG,iBAAiBA,CAACC,YAAY,EAAEC,KAAK,EAAE;MAC3C,IAAI,CAAAZ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEa,GAAG,MAAKF,YAAY,CAACE,GAAG,IAAID,KAAK,CAACE,SAAS,MAAKf,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEe,SAAS,GAAE;QAC/E,MAAMC,GAAG,GAAI,MAAMZ,GAAG,CAACJ,OAAO,CAACiB,UAAU,CAAC;UACxCC,gBAAgB,EAAE,IAAI;UACtBH,SAAS,EAAEf,OAAO,CAACe,SAAS;UAC5BI,UAAU,EAAEnB,OAAO,CAACmB,UAAU;UAC9BC,WAAW,EAAEpB,OAAO,CAACoB;QACvB,CAAC,CAAwB;QACzB,IAAIJ,GAAG,EAAEX,yBAAyB,CAAC;UAAEL,OAAO,EAAEgB;QAAI,CAAC,CAAC;MACtD;IACF;EACF,CAAC,CAAC;EAEF,MAAMK,QAAQ,GAAGnB,YAAY,CAACoB,QAAQ,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;EAClD,MAAMC,KAAK,GAAGjB,MAAM,CAACkB,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACE5C,KAAA,CAAA6C,aAAA,CAAC3C,IAAI;IAAC4C,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEC,WAAW,EAAEtB,KAAK;MAAEuB,UAAU,EAAExB;IAAK,CAAC;EAAE,GACvEY,QAAQ,CAACa,GAAG,CAACC,KAAA,IAAkB;IAAA,IAAAC,kBAAA,EAAAC,qBAAA;IAAA,IAAjB;MAAEC,GAAG;MAAExB;IAAI,CAAC,GAAAqB,KAAA;IACzB,MAAMI,eAAe,GAAG,CAAAvC,OAAO,aAAPA,OAAO,wBAAAoC,kBAAA,GAAPpC,OAAO,CAAEwC,SAAS,cAAAJ,kBAAA,wBAAAC,qBAAA,GAAlBD,kBAAA,CAAoBK,IAAI,CAAEC,EAAE,IAAKA,EAAE,CAACJ,GAAG,KAAKA,GAAG,CAAC,cAAAD,qBAAA,uBAAhDA,qBAAA,CAAkDM,OAAO,KAAI,EAAE;IACvF,MAAMC,cAAc,GAAGL,eAAe,CAACM,OAAO,CAAC,CAAA1C,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAE2C,MAAM,KAAIpD,eAAe,CAAC;IACtF,MAAMqD,OAAO,GAAGH,cAAc,GAAG,CAAC,CAAC;IAEnC,MAAMI,OAAO,GAAG,MAAAA,CAAA,KAAY;MAC1B,MAAMC,MAAM,GAAGA,CAACjD,OAAoB,EAAEsC,GAAW,KAAK;QACpD,OAAOS,OAAO,GAAG9C,OAAO,CAACiD,cAAc,CAAClD,OAAO,EAAEsC,GAAG,CAAC,GAAGrC,OAAO,CAACkD,WAAW,CAACnD,OAAO,EAAEsC,GAAG,CAAC;MAC3F,CAAC;MAED,MAAMW,MAAM,CAACjD,OAAO,EAAEsC,GAAG,CAAC,CACvBc,KAAK,CAAEC,KAAK,IAAK;QAChB7D,MAAM,CAAC8D,IAAI,CAAC,oBAAoB,EAAED,KAAK,CAAC;MAC1C,CAAC,CAAC,CACDE,OAAO,CAAC,MAAM;QACbxD,OAAO,EAAE;MACX,CAAC,CAAC;IACN,CAAC;IAED,oBACEhB,KAAA,CAAA6C,aAAA,CAAC5C,SAAS;MACRsD,GAAG,EAAEA,GAAI;MACTU,OAAO,EAAEA,OAAQ;MACjBnB,KAAK,EAAE2B,KAAA;QAAA,IAAC;UAAEC;QAAQ,CAAC,GAAAD,KAAA;QAAA,OAAK,CACtB1B,MAAM,CAAC4B,MAAM,EACb;UAAEC,eAAe,EAAEZ,OAAO,IAAIU,OAAO,GAAGjC,KAAK,CAACoC,QAAQ,CAACC,UAAU,GAAGrC,KAAK,CAACsC,OAAO,CAACD;QAAW,CAAC,CAC/F;MAAA;IAAC,gBAEF9E,KAAA,CAAA6C,aAAA,CAACvC,KAAK;MAAC0E,MAAM,EAAE;QAAEC,GAAG,EAAElD;MAAI,CAAE;MAACe,KAAK,EAAEC,MAAM,CAACmC;IAAM,EAAG,CAC1C;EAEhB,CAAC,CAAC,eAEFlF,KAAA,CAAA6C,aAAA,CAAC5C,SAAS;IACRgE,OAAO,EAAE,MAAAA,CAAA,KAAY;MACnB,MAAMjD,OAAO,EAAE;MACfO,gBAAgB,CAAC;QAAEL,OAAO;QAAED;MAAQ,CAAC,CAAC;IACxC,CAAE;IACF6B,KAAK,EAAEqC,KAAA;MAAA,IAAC;QAAET;MAAQ,CAAC,GAAAS,KAAA;MAAA,OAAK,CACtBpC,MAAM,CAAC4B,MAAM,EACb;QAAEC,eAAe,EAAEF,OAAO,GAAGjC,KAAK,CAACoC,QAAQ,CAACC,UAAU,GAAGrC,KAAK,CAACsC,OAAO,CAACD;MAAW,CAAC,CACpF;IAAA;EAAC,gBAEF9E,KAAA,CAAA6C,aAAA,CAACxC,IAAI;IAAC+E,IAAI,EAAE,YAAa;IAACtC,KAAK,EAAEC,MAAM,CAACmC,KAAM;IAACzC,KAAK,EAAEjB,MAAM,CAAC6D;EAAe,EAAG,CACrE,CACP;AAEX,CAAC;AAED,MAAMtC,MAAM,GAAGxC,gBAAgB,CAAC;EAC9ByC,SAAS,EAAE;IACTsC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE,EAAE;IACjBC,iBAAiB,EAAE,EAAE;IACrBC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDf,MAAM,EAAE;IACNgB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE;EAChB,CAAC;EACDZ,KAAK,EAAE;IACLS,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAe9E,wBAAwB"}
+{"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":[]}

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

@@ -3,15 +3,11 @@ import { Pressable } from 'react-native';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
 import { getReactionCount } from '@sendbird/uikit-utils';
-import { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } from '../../constants';
+import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
 import ReactionRoundedButton from './ReactionRoundedButton';
 const NUM_COL = 4;
 const REACTION_MORE_KEY = 'reaction-more-button';
-const getUserReacted = function (reaction) {
-  let userId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : UNKNOWN_USER_ID;
-  return reaction.userIds.indexOf(userId) > -1;
-};
 const createOnPressReaction = (reaction, channel, message, reacted) => {
   return () => {
     if (reacted) {
@@ -21,57 +17,49 @@ const createOnPressReaction = (reaction, channel, message, reacted) => {
     }
   };
 };
-const createReactionButtons = (channel, message, getEmoji, emojiLimit, onOpenReactionList, onOpenReactionUserList, currentUserId, reactionAddonType) => {
+const createReactionButtons = (channel, message, getEmoji, emojiLimit, onOpenReactionList, onOpenReactionUserList, reactionAddonType) => {
   const reactions = message.reactions ?? [];
   const buttons = reactions.map((reaction, index) => {
     const isNotLastOfRow = index % NUM_COL !== NUM_COL - 1;
     const isNotLastOfCol = index < NUM_COL && reactions.length >= NUM_COL;
     return /*#__PURE__*/React.createElement(Pressable, {
       key: reaction.key,
-      onPress: createOnPressReaction(reaction, channel, message, getUserReacted(reaction, currentUserId)),
+      onPress: createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted),
       onLongPress: () => onOpenReactionUserList(index),
       delayLongPress: DEFAULT_LONG_PRESS_DELAY
-    }, _ref => {
-      let {
-        pressed
-      } = _ref;
-      return /*#__PURE__*/React.createElement(ReactionRoundedButton, {
-        url: getEmoji(reaction.key).url,
-        count: getReactionCount(reaction),
-        reacted: pressed || getUserReacted(reaction, currentUserId),
-        style: reactionAddonType === 'default' ? [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom] : [styles.marginRight, styles.marginBottom]
-      });
-    });
+    }, ({
+      pressed
+    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton, {
+      url: getEmoji(reaction.key).url,
+      count: getReactionCount(reaction),
+      reacted: pressed || reaction.hasCurrentUserReacted,
+      style: reactionAddonType === 'default' ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom] : [styles.marginEnd, styles.marginBottom]
+    }));
   });
   if (buttons.length < emojiLimit) {
-    buttons.push( /*#__PURE__*/React.createElement(Pressable, {
+    buttons.push(/*#__PURE__*/React.createElement(Pressable, {
       key: REACTION_MORE_KEY,
       onPress: onOpenReactionList
-    }, _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
-        pressed: pressed
-      });
-    }));
+    }, ({
+      pressed
+    }) => /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
+      pressed: pressed
+    })));
   }
   return buttons;
 };
-const MessageReactionAddon = _ref3 => {
+const MessageReactionAddon = ({
+  channel,
+  message,
+  reactionAddonType = 'default'
+}) => {
   var _message$reactions;
-  let {
-    channel,
-    message,
-    reactionAddonType = 'default'
-  } = _ref3;
   const {
     colors
   } = useUIKitTheme();
   const {
     sdk,
-    emojiManager,
-    currentUser
+    emojiManager
   } = useSendbirdChat();
   const {
     openReactionList,
@@ -94,7 +82,7 @@ const MessageReactionAddon = _ref3 => {
     channel,
     message,
     focusIndex
-  }), currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId, reactionAddonType);
+  }), reactionAddonType);
   const containerStyle = reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;
   return /*#__PURE__*/React.createElement(Pressable, {
     style: [containerStyle, {
@@ -116,8 +104,8 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  marginRight: {
-    marginRight: 4.5
+  marginEnd: {
+    marginEnd: 4.5
   },
   marginBottom: {
     marginBottom: 4