@sendbird/uikit-react-native 2.4.0 → 2.4.2

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

@@ -3,7 +3,6 @@ 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,
@@ -28,7 +27,6 @@ const OpenChannelMessageDateSeparator = _ref => {
     color: colors.ui.dateSeparator.default.none.text
   }, STRINGS.OPEN_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt)))));
 };
-
 const styles = createStyleSheet({
   container: {
     alignItems: 'center',

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

@@ -1 +1 @@
-{"version":3,"names":["isSameDay","React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","OpenChannelMessageDateSeparator","message","prevMessage","STRINGS","colors","sameDay","createdAt","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","text","OPEN_CHANNEL","LIST_DATE_SEPARATOR","Date","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["OpenChannelMessageDateSeparator.tsx"],"sourcesContent":["import isSameDay from 'date-fns/isSameDay';\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,OAAOA,SAAP,MAAsB,oBAAtB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAEA,MAAMC,+BAA+B,GAAG,QAMlC;EAAA,IANmC;IACvCC,OADuC;IAEvCC;EAFuC,CAMnC;EACJ,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;EACA,MAAM;IAAEK;EAAF,IAAaN,aAAa,EAAhC;EAEA,MAAMO,OAAO,GAAGZ,SAAS,CAACQ,OAAO,CAACK,SAAT,EAAoB,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,SAAb,KAA0B,CAA9C,CAAzB;EACA,IAAID,OAAJ,EAAa,OAAO,IAAP;EAEb,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACC;EAApB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACD,MAAM,CAACE,IAAR,EAAc;MAAEC,eAAe,EAAEN,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCC;IAAxD,CAAd;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEX,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCE;EAA3D,GACGb,OAAO,CAACc,YAAR,CAAqBC,mBAArB,CAAyC,IAAIC,IAAJ,CAASlB,OAAO,CAACK,SAAjB,CAAzC,CADH,CADF,CADF,CADF;AASD,CAtBD;;AAwBA,MAAMC,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,SAAS,EAAE;IACTY,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADmB;EAK9BZ,IAAI,EAAE;IACJa,YAAY,EAAE,EADV;IAEJC,eAAe,EAAE,CAFb;IAGJC,iBAAiB,EAAE;EAHf;AALwB,CAAD,CAA/B;AAYA,eAAexB,+BAAf"}
+{"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/isSameDay';\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,OAAOA,SAAS,MAAM,oBAAoB;AAC1C,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"}

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

@@ -1,12 +1,10 @@
 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); }
-
 import React from 'react';
 import { Box, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';
 import { calcMessageGrouping, getMessageType } from '@sendbird/uikit-utils';
 import { useLocalization, usePlatformService } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
 import OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';
-
 const OpenChannelMessageRenderer = _ref => {
   let {
     channel,
@@ -33,7 +31,6 @@ const OpenChannelMessageRenderer = _ref => {
     onLongPress,
     onPressURL: () => {
       var _message$ogMetaData, _message$ogMetaData2;
-
       return ((_message$ogMetaData = message.ogMetaData) === null || _message$ogMetaData === void 0 ? void 0 : _message$ogMetaData.url) && SBUUtils.openURL((_message$ogMetaData2 = message.ogMetaData) === null || _message$ogMetaData2 === void 0 ? void 0 : _message$ogMetaData2.url);
     },
     onPressAvatar: () => 'sender' in message && (onPressAvatar === null || onPressAvatar === void 0 ? void 0 : onPressAvatar(message.sender, {
@@ -49,7 +46,6 @@ const OpenChannelMessageRenderer = _ref => {
       unknownDescription: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message)
     }
   };
-
   const renderMessage = () => {
     switch (getMessageType(message)) {
       case 'admin':
@@ -58,21 +54,18 @@ const OpenChannelMessageRenderer = _ref => {
             message: message
           }, messageProps));
         }
-
       case 'user':
         {
           return /*#__PURE__*/React.createElement(OpenChannelMessage.User, _extends({
             message: message
           }, messageProps));
         }
-
       case 'user.opengraph':
         {
           return /*#__PURE__*/React.createElement(OpenChannelMessage.OpenGraphUser, _extends({
             message: message
           }, messageProps));
         }
-
       case 'file':
       case 'file.audio':
         {
@@ -80,14 +73,12 @@ const OpenChannelMessageRenderer = _ref => {
             message: message
           }, messageProps));
         }
-
       case 'file.image':
         {
           return /*#__PURE__*/React.createElement(OpenChannelMessage.ImageFile, _extends({
             message: message
           }, messageProps));
         }
-
       case 'file.video':
         {
           return /*#__PURE__*/React.createElement(OpenChannelMessage.VideoFile, _extends({
@@ -98,7 +89,6 @@ const OpenChannelMessageRenderer = _ref => {
             })
           }, messageProps));
         }
-
       case 'unknown':
       default:
         {
@@ -108,12 +98,10 @@ const OpenChannelMessageRenderer = _ref => {
         }
     }
   };
-
   return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(OpenChannelMessageDateSeparator, {
     message: message,
     prevMessage: prevMessage
   }), renderMessage());
 };
-
 export default /*#__PURE__*/React.memo(OpenChannelMessageRenderer);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Box","OpenChannelMessage","calcMessageGrouping","getMessageType","useLocalization","usePlatformService","SBUUtils","OpenChannelMessageDateSeparator","OpenChannelMessageRenderer","channel","message","onPress","onLongPress","onPressAvatar","enableMessageGrouping","prevMessage","nextMessage","STRINGS","mediaService","groupWithPrev","Boolean","messageProps","onPressURL","ogMetaData","url","openURL","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","uri","getVideoThumbnail","timeMills","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 } from '../../hooks/useContext';\nimport SBUUtils from '../../libs/SBUUtils';\nimport OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';\n\nconst OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  onPressAvatar,\n  enableMessageGrouping,\n  prevMessage,\n  nextMessage,\n}) => {\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: () => message.ogMetaData?.url && SBUUtils.openURL(message.ogMetaData?.url),\n    onPressAvatar: () => 'sender' in message && onPressAvatar?.(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        return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;\n      }\n      case 'file':\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","SBUUtils","OpenChannelMessageDateSeparator","OpenChannelMessageRenderer","_ref","channel","message","onPress","onLongPress","onPressAvatar","enableMessageGrouping","prevMessage","nextMessage","STRINGS","mediaService","groupWithPrev","Boolean","messageProps","onPressURL","_message$ogMetaData","_message$ogMetaData2","ogMetaData","url","openURL","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","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 } from '../../hooks/useContext';\nimport SBUUtils from '../../libs/SBUUtils';\nimport OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';\n\nconst OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  onPressAvatar,\n  enableMessageGrouping,\n  prevMessage,\n  nextMessage,\n}) => {\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: () => message.ogMetaData?.url && SBUUtils.openURL(message.ogMetaData?.url),\n    onPressAvatar: () => 'sender' in message && onPressAvatar?.(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        return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;\n      }\n      case 'file':\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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"}

package/lib/module/components/ProviderLayout.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-
 const ProviderLayout = _ref => {
   let {
     children
@@ -15,7 +14,6 @@ const ProviderLayout = _ref => {
     }]
   }, children);
 };
-
 const styles = createStyleSheet({
   view: {
     flex: 1

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","ProviderLayout","children","colors","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,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,gBAAT,EAA2BC,aAA3B,QAAgD,yCAAhD;;AAEA,MAAMC,cAAc,GAAG,QAA2C;EAAA,IAA1C;IAAEC;EAAF,CAA0C;EAChE,MAAM;IAAEC;EAAF,IAAaH,aAAa,EAAhC;EACA,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACI,MAAM,CAACC,IAAR,EAAc;MAAEC,eAAe,EAAEH,MAAM,CAACI;IAA1B,CAAd;EAAb,GAAqEL,QAArE,CAAP;AACD,CAHD;;AAKA,MAAME,MAAM,GAAGL,gBAAgB,CAAC;EAC9BM,IAAI,EAAE;IACJG,IAAI,EAAE;EADF;AADwB,CAAD,CAA/B;AAMA,eAAeP,cAAf"}
+{"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"}

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

@@ -6,7 +6,6 @@ import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-re
 import { useUniqHandlerId } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
-
 const BottomSheetReactionAddon = _ref => {
   let {
     onClose,
@@ -43,7 +42,6 @@ const BottomSheetReactionAddon = _ref => {
         });
       }
     }
-
   });
   const emojiAll = emojiManager.allEmoji.slice(0, 5);
   const color = colors.ui.reaction.default;
@@ -54,7 +52,6 @@ const BottomSheetReactionAddon = _ref => {
     }]
   }, emojiAll.map(_ref2 => {
     var _message$reactions, _message$reactions$fi;
-
     let {
       key,
       url
@@ -62,12 +59,10 @@ const BottomSheetReactionAddon = _ref => {
     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) ?? [];
     const currentUserIdx = reactionUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? UNKNOWN_USER_ID);
     const reacted = currentUserIdx > -1;
-
     const onPress = () => {
       if (reacted) channel.deleteReaction(message, key);else channel.addReaction(message, key);
       onClose();
     };
-
     return /*#__PURE__*/React.createElement(Pressable, {
       key: key,
       onPress: onPress,
@@ -107,7 +102,6 @@ const BottomSheetReactionAddon = _ref => {
     color: colors.onBackground03
   })));
 };
-
 const styles = createStyleSheet({
   container: {
     paddingTop: 12,

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","View","useSafeAreaInsets","useChannelHandler","Icon","Image","createStyleSheet","useUIKitTheme","useUniqHandlerId","UNKNOWN_USER_ID","useReaction","useSendbirdChat","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","handlerId","left","right","onReactionUpdated","eventChannel","event","url","messageId","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","default","styles","container","marginRight","marginLeft","map","key","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","reacted","onPress","deleteReaction","addReaction","pressed","button","backgroundColor","selected","background","enabled","uri","emoji","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 { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { 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        updateReactionFocusedItem({\n          message: await sdk.message.getMessage({\n            includeReactions: true,\n            messageId: message.messageId,\n            channelUrl: message.channelUrl,\n            channelType: message.channelType,\n          }),\n        });\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 = () => {\n          if (reacted) channel.deleteReaction(message, key);\n          else channel.addReaction(message, key);\n          onClose();\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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"}
+{"version":3,"names":["React","Pressable","View","useSafeAreaInsets","useChannelHandler","Icon","Image","createStyleSheet","useUIKitTheme","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","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","deleteReaction","addReaction","_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 { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { 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        updateReactionFocusedItem({\n          message: await sdk.message.getMessage({\n            includeReactions: true,\n            messageId: message.messageId,\n            channelUrl: message.channelUrl,\n            channelType: message.channelType,\n          }),\n        });\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 = () => {\n          if (reacted) channel.deleteReaction(message, key);\n          else channel.addReaction(message, key);\n          onClose();\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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"}

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

@@ -7,12 +7,10 @@ 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) {
@@ -22,7 +20,6 @@ const createOnPressReaction = (reaction, channel, message, reacted) => {
     }
   };
 };
-
 const createReactionButtons = (channel, message, getEmoji, emojiLimit, onOpenReactionList, onOpenReactionUserList, currentUserId) => {
   const reactions = message.reactions ?? [];
   const buttons = reactions.map((reaction, index) => {
@@ -45,7 +42,6 @@ const createReactionButtons = (channel, message, getEmoji, emojiLimit, onOpenRea
       });
     });
   });
-
   if (buttons.length < emojiLimit) {
     buttons.push( /*#__PURE__*/React.createElement(Pressable, {
       key: REACTION_MORE_KEY,
@@ -59,13 +55,10 @@ const createReactionButtons = (channel, message, getEmoji, emojiLimit, onOpenRea
       });
     }));
   }
-
   return buttons;
 };
-
 const MessageReactionAddon = _ref3 => {
   var _message$reactions;
-
   let {
     channel,
     message
@@ -97,7 +90,6 @@ const MessageReactionAddon = _ref3 => {
     }]
   }, reactionButtons);
 };
-
 const styles = createStyleSheet({
   reactionContainer: {
     alignItems: 'stretch',

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","createStyleSheet","useUIKitTheme","getReactionCount","DEFAULT_LONG_PRESS_DELAY","UNKNOWN_USER_ID","useReaction","useSendbirdChat","ReactionRoundedButton","NUM_COL","REACTION_MORE_KEY","getUserReacted","reaction","userId","userIds","indexOf","createOnPressReaction","channel","message","reacted","deleteReaction","key","addReaction","createReactionButtons","getEmoji","emojiLimit","onOpenReactionList","onOpenReactionUserList","currentUserId","reactions","buttons","map","index","isNotLastOfRow","isNotLastOfCol","length","pressed","url","styles","marginRight","marginBottom","push","MessageReactionAddon","colors","emojiManager","currentUser","openReactionList","openReactionUserList","reactionButtons","allEmojiMap","allEmoji","focusIndex","reactionContainer","backgroundColor","background","borderColor","ui","rounded","enabled","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth"],"sources":["MessageReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { Emoji } from '@sendbird/chat';\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';\nimport { getReactionCount } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\nimport ReactionRoundedButton from './ReactionRoundedButton';\n\nconst NUM_COL = 4;\nconst REACTION_MORE_KEY = 'reaction-more-button';\n\nconst getUserReacted = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {\n  return reaction.userIds.indexOf(userId) > -1;\n};\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  getEmoji: (key: string) => Emoji,\n  emojiLimit: number,\n  onOpenReactionList: () => void,\n  onOpenReactionUserList: (focusIndex: number) => void,\n  currentUserId?: string,\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, getUserReacted(reaction, currentUserId))}\n        onLongPress={() => onOpenReactionUserList(index)}\n        delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      >\n        {({ pressed }) => (\n          <ReactionRoundedButton\n            url={getEmoji(reaction.key).url}\n            count={getReactionCount(reaction)}\n            reacted={pressed || getUserReacted(reaction, currentUserId)}\n            style={[isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]}\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 = ({ channel, message }: { channel: SendbirdBaseChannel; message: SendbirdBaseMessage }) => {\n  const { colors } = useUIKitTheme();\n  const { emojiManager, currentUser } = useSendbirdChat();\n  const { openReactionList, openReactionUserList } = useReaction();\n\n  if (!message.reactions?.length) return null;\n\n  const reactionButtons = createReactionButtons(\n    channel,\n    message,\n    (key) => emojiManager.allEmojiMap[key],\n    emojiManager.allEmoji.length,\n    () => openReactionList({ channel, message }),\n    (focusIndex) => openReactionUserList({ channel, message, focusIndex }),\n    currentUser?.userId,\n  );\n\n  return (\n    <Pressable\n      style={[\n        styles.reactionContainer,\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  marginRight: {\n    marginRight: 4.5,\n  },\n  marginBottom: {\n    marginBottom: 4,\n  },\n});\n\nexport default MessageReactionAddon;\n"],"mappings":"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"}
+{"version":3,"names":["React","Pressable","createStyleSheet","useUIKitTheme","getReactionCount","DEFAULT_LONG_PRESS_DELAY","UNKNOWN_USER_ID","useReaction","useSendbirdChat","ReactionRoundedButton","NUM_COL","REACTION_MORE_KEY","getUserReacted","reaction","userId","arguments","length","undefined","userIds","indexOf","createOnPressReaction","channel","message","reacted","deleteReaction","key","addReaction","createReactionButtons","getEmoji","emojiLimit","onOpenReactionList","onOpenReactionUserList","currentUserId","reactions","buttons","map","index","isNotLastOfRow","isNotLastOfCol","createElement","onPress","onLongPress","delayLongPress","_ref","pressed","url","count","style","styles","marginRight","marginBottom","push","_ref2","More","MessageReactionAddon","_ref3","_message$reactions","colors","emojiManager","currentUser","openReactionList","openReactionUserList","reactionButtons","allEmojiMap","allEmoji","focusIndex","reactionContainer","backgroundColor","background","borderColor","ui","rounded","enabled","alignItems","flexDirection","flexWrap","padding","borderRadius","borderWidth"],"sources":["MessageReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { Emoji } from '@sendbird/chat';\nimport { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';\nimport { getReactionCount } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\nimport ReactionRoundedButton from './ReactionRoundedButton';\n\nconst NUM_COL = 4;\nconst REACTION_MORE_KEY = 'reaction-more-button';\n\nconst getUserReacted = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {\n  return reaction.userIds.indexOf(userId) > -1;\n};\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  getEmoji: (key: string) => Emoji,\n  emojiLimit: number,\n  onOpenReactionList: () => void,\n  onOpenReactionUserList: (focusIndex: number) => void,\n  currentUserId?: string,\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, getUserReacted(reaction, currentUserId))}\n        onLongPress={() => onOpenReactionUserList(index)}\n        delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      >\n        {({ pressed }) => (\n          <ReactionRoundedButton\n            url={getEmoji(reaction.key).url}\n            count={getReactionCount(reaction)}\n            reacted={pressed || getUserReacted(reaction, currentUserId)}\n            style={[isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]}\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 = ({ channel, message }: { channel: SendbirdBaseChannel; message: SendbirdBaseMessage }) => {\n  const { colors } = useUIKitTheme();\n  const { emojiManager, currentUser } = useSendbirdChat();\n  const { openReactionList, openReactionUserList } = useReaction();\n\n  if (!message.reactions?.length) return null;\n\n  const reactionButtons = createReactionButtons(\n    channel,\n    message,\n    (key) => emojiManager.allEmojiMap[key],\n    emojiManager.allEmoji.length,\n    () => openReactionList({ channel, message }),\n    (focusIndex) => openReactionUserList({ channel, message, focusIndex }),\n    currentUser?.userId,\n  );\n\n  return (\n    <Pressable\n      style={[\n        styles.reactionContainer,\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  marginRight: {\n    marginRight: 4.5,\n  },\n  marginBottom: {\n    marginBottom: 4,\n  },\n});\n\nexport default MessageReactionAddon;\n"],"mappings":"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"}

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { View } from 'react-native';
 import { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { truncatedCount } from '@sendbird/uikit-utils';
-
 const ReactionRoundedButton = _ref => {
   let {
     url,
@@ -30,7 +29,6 @@ const ReactionRoundedButton = _ref => {
     style: styles.count
   }, truncatedCount(count, 99, '')));
 };
-
 ReactionRoundedButton.More = _ref2 => {
   let {
     pressed
@@ -49,7 +47,6 @@ ReactionRoundedButton.More = _ref2 => {
     size: 20
   }));
 };
-
 const styles = createStyleSheet({
   reactionContainer: {
     flexDirection: 'row',

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Icon","Image","Text","createStyleSheet","useUIKitTheme","truncatedCount","ReactionRoundedButton","url","count","reacted","style","colors","color","ui","reaction","rounded","styles","reactionContainer","backgroundColor","selected","background","enabled","uri","emoji","onBackground01","More","pressed","onBackground03","flexDirection","justifyContent","alignItems","width","borderRadius","paddingVertical","paddingHorizontal","height","marginRight","textAlign"],"sources":["ReactionRoundedButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { truncatedCount } from '@sendbird/uikit-utils';\n\ntype Props = {\n  url: string;\n  count: number;\n  reacted: boolean;\n  style: StyleProp<ViewStyle>;\n};\n\nconst ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: reacted ? color.selected.background : color.enabled.background },\n        style,\n      ]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n      <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>\n        {truncatedCount(count, 99, '')}\n      </Text>\n    </View>\n  );\n};\n\nReactionRoundedButton.More = ({ pressed }: { pressed: boolean }) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n      ]}\n    >\n      <Icon icon={'emoji-more'} color={colors.onBackground03} size={20} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 52,\n    borderRadius: 24,\n    paddingVertical: 5,\n    paddingHorizontal: 8,\n  },\n  emoji: {\n    width: 20,\n    height: 20,\n    marginRight: 4,\n  },\n  count: {\n    width: 13,\n    textAlign: 'left',\n  },\n});\n\nexport default ReactionRoundedButton;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,IAAtB,EAA4BC,gBAA5B,EAA8CC,aAA9C,QAAmE,yCAAnE;AACA,SAASC,cAAT,QAA+B,uBAA/B;;AASA,MAAMC,qBAAqB,GAAG,QAA2C;EAAA,IAA1C;IAAEC,GAAF;IAAOC,KAAP;IAAcC,OAAd;IAAuBC;EAAvB,CAA0C;EACvE,MAAM;IAAEC;EAAF,IAAaP,aAAa,EAAhC;EACA,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUC,QAAV,CAAmBC,OAAjC;EAEA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLC,MAAM,CAACC,iBADF,EAEL;MAAEC,eAAe,EAAET,OAAO,GAAGG,KAAK,CAACO,QAAN,CAAeC,UAAlB,GAA+BR,KAAK,CAACS,OAAN,CAAcD;IAAvE,CAFK,EAGLV,KAHK;EADT,gBAOE,oBAAC,KAAD;IAAO,MAAM,EAAE;MAAEY,GAAG,EAAEf;IAAP,CAAf;IAA6B,KAAK,EAAES,MAAM,CAACO;EAA3C,EAPF,eAQE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEZ,MAAM,CAACa,cAA7B;IAA6C,aAAa,EAAE,CAA5D;IAA+D,KAAK,EAAER,MAAM,CAACR;EAA7E,GACGH,cAAc,CAACG,KAAD,EAAQ,EAAR,EAAY,EAAZ,CADjB,CARF,CADF;AAcD,CAlBD;;AAoBAF,qBAAqB,CAACmB,IAAtB,GAA6B,SAAuC;EAAA,IAAtC;IAAEC;EAAF,CAAsC;EAClE,MAAM;IAAEf;EAAF,IAAaP,aAAa,EAAhC;EACA,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUC,QAAV,CAAmBC,OAAjC;EAEA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLC,MAAM,CAACC,iBADF,EAEL;MAAEC,eAAe,EAAEQ,OAAO,GAAGd,KAAK,CAACO,QAAN,CAAeC,UAAlB,GAA+BR,KAAK,CAACS,OAAN,CAAcD;IAAvE,CAFK;EADT,gBAME,oBAAC,IAAD;IAAM,IAAI,EAAE,YAAZ;IAA0B,KAAK,EAAET,MAAM,CAACgB,cAAxC;IAAwD,IAAI,EAAE;EAA9D,EANF,CADF;AAUD,CAdD;;AAgBA,MAAMX,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,iBAAiB,EAAE;IACjBW,aAAa,EAAE,KADE;IAEjBC,cAAc,EAAE,QAFC;IAGjBC,UAAU,EAAE,QAHK;IAIjBC,KAAK,EAAE,EAJU;IAKjBC,YAAY,EAAE,EALG;IAMjBC,eAAe,EAAE,CANA;IAOjBC,iBAAiB,EAAE;EAPF,CADW;EAU9BX,KAAK,EAAE;IACLQ,KAAK,EAAE,EADF;IAELI,MAAM,EAAE,EAFH;IAGLC,WAAW,EAAE;EAHR,CAVuB;EAe9B5B,KAAK,EAAE;IACLuB,KAAK,EAAE,EADF;IAELM,SAAS,EAAE;EAFN;AAfuB,CAAD,CAA/B;AAqBA,eAAe/B,qBAAf"}
+{"version":3,"names":["React","View","Icon","Image","Text","createStyleSheet","useUIKitTheme","truncatedCount","ReactionRoundedButton","_ref","url","count","reacted","style","colors","color","ui","reaction","rounded","createElement","styles","reactionContainer","backgroundColor","selected","background","enabled","source","uri","emoji","caption4","onBackground01","numberOfLines","More","_ref2","pressed","icon","onBackground03","size","flexDirection","justifyContent","alignItems","width","borderRadius","paddingVertical","paddingHorizontal","height","marginRight","textAlign"],"sources":["ReactionRoundedButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { truncatedCount } from '@sendbird/uikit-utils';\n\ntype Props = {\n  url: string;\n  count: number;\n  reacted: boolean;\n  style: StyleProp<ViewStyle>;\n};\n\nconst ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: reacted ? color.selected.background : color.enabled.background },\n        style,\n      ]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n      <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>\n        {truncatedCount(count, 99, '')}\n      </Text>\n    </View>\n  );\n};\n\nReactionRoundedButton.More = ({ pressed }: { pressed: boolean }) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n      ]}\n    >\n      <Icon icon={'emoji-more'} color={colors.onBackground03} size={20} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 52,\n    borderRadius: 24,\n    paddingVertical: 5,\n    paddingHorizontal: 8,\n  },\n  emoji: {\n    width: 20,\n    height: 20,\n    marginRight: 4,\n  },\n  count: {\n    width: 13,\n    textAlign: 'left',\n  },\n});\n\nexport default ReactionRoundedButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,SAASC,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAC5G,SAASC,cAAc,QAAQ,uBAAuB;AAStD,MAAMC,qBAAqB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;IAAEC,GAAG;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAJ,IAAA;EAClE,MAAM;IAAEK;EAAO,CAAC,GAAGR,aAAa,EAAE;EAClC,MAAMS,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACElB,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACHY,KAAK,EAAE,CACLO,MAAM,CAACC,iBAAiB,EACxB;MAAEC,eAAe,EAAEV,OAAO,GAAGG,KAAK,CAACQ,QAAQ,CAACC,UAAU,GAAGT,KAAK,CAACU,OAAO,CAACD;IAAW,CAAC,EACnFX,KAAK;EACL,gBAEFb,KAAA,CAAAmB,aAAA,CAAChB,KAAK;IAACuB,MAAM,EAAE;MAAEC,GAAG,EAAEjB;IAAI,CAAE;IAACG,KAAK,EAAEO,MAAM,CAACQ;EAAM,EAAG,eACpD5B,KAAA,CAAAmB,aAAA,CAACf,IAAI;IAACyB,QAAQ;IAACd,KAAK,EAAED,MAAM,CAACgB,cAAe;IAACC,aAAa,EAAE,CAAE;IAAClB,KAAK,EAAEO,MAAM,CAACT;EAAM,GAChFJ,cAAc,CAACI,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CACzB,CACF;AAEX,CAAC;AAEDH,qBAAqB,CAACwB,IAAI,GAAGC,KAAA,IAAuC;EAAA,IAAtC;IAAEC;EAA8B,CAAC,GAAAD,KAAA;EAC7D,MAAM;IAAEnB;EAAO,CAAC,GAAGR,aAAa,EAAE;EAClC,MAAMS,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,QAAQ,CAACC,OAAO;EAExC,oBACElB,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IACHY,KAAK,EAAE,CACLO,MAAM,CAACC,iBAAiB,EACxB;MAAEC,eAAe,EAAEY,OAAO,GAAGnB,KAAK,CAACQ,QAAQ,CAACC,UAAU,GAAGT,KAAK,CAACU,OAAO,CAACD;IAAW,CAAC;EACnF,gBAEFxB,KAAA,CAAAmB,aAAA,CAACjB,IAAI;IAACiC,IAAI,EAAE,YAAa;IAACpB,KAAK,EAAED,MAAM,CAACsB,cAAe;IAACC,IAAI,EAAE;EAAG,EAAG,CAC/D;AAEX,CAAC;AAED,MAAMjB,MAAM,GAAGf,gBAAgB,CAAC;EAC9BgB,iBAAiB,EAAE;IACjBiB,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,KAAK,EAAE,EAAE;IACTC,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB,CAAC;EACDhB,KAAK,EAAE;IACLa,KAAK,EAAE,EAAE;IACTI,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE;EACf,CAAC;EACDnC,KAAK,EAAE;IACL8B,KAAK,EAAE,EAAE;IACTM,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAevC,qBAAqB"}

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

@@ -1 +1 @@
-{"version":3,"names":["BottomSheet","Message","ReactionAddons"],"sources":["index.tsx"],"sourcesContent":["import BottomSheet from './BottomSheetReactionAddon';\nimport Message from './MessageReactionAddon';\n\nexport const ReactionAddons = {\n  BottomSheet,\n  Message,\n};\n"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,4BAAxB;AACA,OAAOC,OAAP,MAAoB,wBAApB;AAEA,OAAO,MAAMC,cAAc,GAAG;EAC5BF,WAD4B;EAE5BC;AAF4B,CAAvB"}
+{"version":3,"names":["BottomSheet","Message","ReactionAddons"],"sources":["index.tsx"],"sourcesContent":["import BottomSheet from './BottomSheetReactionAddon';\nimport Message from './MessageReactionAddon';\n\nexport const ReactionAddons = {\n  BottomSheet,\n  Message,\n};\n"],"mappings":"AAAA,OAAOA,WAAW,MAAM,4BAA4B;AACpD,OAAOC,OAAO,MAAM,wBAAwB;AAE5C,OAAO,MAAMC,cAAc,GAAG;EAC5BF,WAAW;EACXC;AACF,CAAC"}

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

@@ -4,7 +4,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { UNKNOWN_USER_ID } from '../../constants';
 const NUM_COLUMN = 6;
-
 const ReactionListBottomSheet = _ref => {
   let {
     visible,
@@ -59,7 +58,6 @@ const ReactionListBottomSheet = _ref => {
     }),
     renderItem: _ref2 => {
       var _message$reactions, _message$reactions$fi;
-
       let {
         item: {
           key,
@@ -77,7 +75,6 @@ const ReactionListBottomSheet = _ref => {
           if (message && channel) {
             if (reacted) channel.deleteReaction(message, key);else channel.addReaction(message, key);
           }
-
           onClose();
         },
         style: _ref3 => {
@@ -97,7 +94,6 @@ const ReactionListBottomSheet = _ref => {
     }
   })));
 };
-
 const styles = createStyleSheet({
   container: {
     overflow: 'hidden',

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

@@ -1 +1 @@
-{"version":3,"names":["React","FlatList","Pressable","View","useWindowDimensions","useSafeAreaInsets","Image","Modal","createStyleSheet","useUIKitTheme","UNKNOWN_USER_ID","NUM_COLUMN","ReactionListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","width","bottom","left","right","colors","currentUser","emojiManager","channel","message","color","ui","reaction","default","Boolean","styles","modal","container","paddingBottom","backgroundColor","dialog","none","background","paddingLeft","paddingHorizontal","paddingRight","allEmoji","item","key","flatlist","height","url","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","reacted","emojiItem","deleteReaction","addReaction","pressed","button","selected","enabled","uri","emoji","overflow","borderTopLeftRadius","borderTopRightRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\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 { bottom, left, right } = useSafeAreaInsets();\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: bottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingLeft: left + styles.container.paddingHorizontal,\n            paddingRight: right + 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={() => {\n                    if (message && channel) {\n                      if (reacted) channel.deleteReaction(message, key);\n                      else channel.addReaction(message, key);\n                    }\n                    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    borderTopLeftRadius: 8,\n    borderTopRightRadius: 8,\n    paddingTop: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  flatlist: {\n    width: '100%',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  emojiItem: {\n    width: `${100 / NUM_COLUMN}%`,\n    alignItems: 'center',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default ReactionListBottomSheet;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,IAA9B,EAAoCC,mBAApC,QAA+D,cAA/D;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,gBAAvB,EAAyCC,aAAzC,QAA8D,yCAA9D;AAEA,SAASC,eAAT,QAAgC,iBAAhC;AAGA,MAAMC,UAAU,GAAG,CAAnB;;AACA,MAAMC,uBAAuB,GAAG,QAAqF;EAAA,IAApF;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,SAApB;IAA+BC,WAA/B;IAA4CC;EAA5C,CAAoF;EACnH,MAAM;IAAEC;EAAF,IAAYd,mBAAmB,EAArC;EACA,MAAM;IAAEe,MAAF;IAAUC,IAAV;IAAgBC;EAAhB,IAA0BhB,iBAAiB,EAAjD;EACA,MAAM;IAAEiB;EAAF,IAAab,aAAa,EAAhC;EAEA,MAAM;IAAEc,WAAF;IAAeC;EAAf,IAAgCP,OAAtC;EACA,MAAM;IAAEQ,OAAF;IAAWC;EAAX,IAAuBV,WAA7B;EACA,MAAMW,KAAK,GAAGL,MAAM,CAACM,EAAP,CAAUC,QAAV,CAAmBC,OAAjC;EAEA,oBACE,oBAAC,KAAD;IACE,IAAI,EAAE,OADR;IAEE,OAAO,EAAEC,OAAO,CAAClB,OAAO,IAAIY,OAAX,IAAsBC,OAAvB,CAFlB;IAGE,OAAO,EAAEZ,OAHX;IAIE,SAAS,EAAEC,SAJb;IAKE,eAAe,EAAEiB,MAAM,CAACC;EAL1B,gBAOE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLD,MAAM,CAACE,SADF,EAEL;MACEhB,KADF;MAEEiB,aAAa,EAAEhB,MAFjB;MAGEiB,eAAe,EAAEd,MAAM,CAACM,EAAP,CAAUS,MAAV,CAAiBP,OAAjB,CAAyBQ,IAAzB,CAA8BC,UAHjD;MAIEC,WAAW,EAAEpB,IAAI,GAAGY,MAAM,CAACE,SAAP,CAAiBO,iBAJvC;MAKEC,YAAY,EAAErB,KAAK,GAAGW,MAAM,CAACE,SAAP,CAAiBO;IALzC,CAFK;EADT,gBAYE,oBAAC,QAAD;IACE,IAAI,EAAEjB,YAAY,CAACmB,QADrB;IAEE,UAAU,EAAEhC,UAFd;IAGE,YAAY,EAAGiC,IAAD,IAAUA,IAAI,CAACC,GAH/B;IAIE,qBAAqB,EAAEb,MAAM,CAACc,QAJhC;IAKE,sBAAsB,EAAE,mBAAM,oBAAC,IAAD;MAAM,KAAK,EAAE;QAAEC,MAAM,EAAE;MAAV;IAAb,EALhC;IAME,UAAU,EAAE,SAA4B;MAAA;;MAAA,IAA3B;QAAEH,IAAI,EAAE;UAAEC,GAAF;UAAOG;QAAP;MAAR,CAA2B;MACtC,MAAMC,cAAc,GAAG,CAAAvB,OAAO,SAAP,IAAAA,OAAO,WAAP,kCAAAA,OAAO,CAAEwB,SAAT,mGAAoBC,IAApB,CAA0BC,EAAD,IAAQA,EAAE,CAACP,GAAH,KAAWA,GAA5C,iFAAkDQ,OAAlD,KAA6D,EAApF;MAEA,MAAMC,GAAG,GAAGL,cAAc,CAACM,OAAf,CAAuB,CAAAhC,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEiC,MAAb,KAAuB9C,eAA9C,CAAZ;MACA,MAAM+C,OAAO,GAAGH,GAAG,GAAG,CAAC,CAAvB;MAEA,oBACE,oBAAC,IAAD;QAAM,KAAK,EAAEtB,MAAM,CAAC0B;MAApB,gBACE,oBAAC,SAAD;QACE,GAAG,EAAEb,GADP;QAEE,OAAO,EAAE,MAAM;UACb,IAAInB,OAAO,IAAID,OAAf,EAAwB;YACtB,IAAIgC,OAAJ,EAAahC,OAAO,CAACkC,cAAR,CAAuBjC,OAAvB,EAAgCmB,GAAhC,EAAb,KACKpB,OAAO,CAACmC,WAAR,CAAoBlC,OAApB,EAA6BmB,GAA7B;UACN;;UACD/B,OAAO;QACR,CARH;QASE,KAAK,EAAE;UAAA,IAAC;YAAE+C;UAAF,CAAD;UAAA,OAAiB,CACtB7B,MAAM,CAAC8B,MADe,EAEtB;YAAE1B,eAAe,EAAEqB,OAAO,IAAII,OAAX,GAAqBlC,KAAK,CAACoC,QAAN,CAAexB,UAApC,GAAiDZ,KAAK,CAACqC,OAAN,CAAczB;UAAlF,CAFsB,CAAjB;QAAA;MATT,gBAcE,oBAAC,KAAD;QAAO,MAAM,EAAE;UAAE0B,GAAG,EAAEjB;QAAP,CAAf;QAA6B,KAAK,EAAEhB,MAAM,CAACkC;MAA3C,EAdF,CADF,CADF;IAoBD;EAhCH,EAZF,CAPF,CADF;AAyDD,CAlED;;AAoEA,MAAMlC,MAAM,GAAGxB,gBAAgB,CAAC;EAC9B0B,SAAS,EAAE;IACTiC,QAAQ,EAAE,QADD;IAETC,mBAAmB,EAAE,CAFZ;IAGTC,oBAAoB,EAAE,CAHb;IAITC,UAAU,EAAE,EAJH;IAKT7B,iBAAiB,EAAE,EALV;IAMT8B,aAAa,EAAE;EANN,CADmB;EAS9BtC,KAAK,EAAE;IACLuC,UAAU,EAAE,QADP;IAELC,cAAc,EAAE;EAFX,CATuB;EAa9B3B,QAAQ,EAAE;IACR5B,KAAK,EAAE,MADC;IAERqD,aAAa,EAAE,QAFP;IAGRE,cAAc,EAAE;EAHR,CAboB;EAkB9Bf,SAAS,EAAE;IACTxC,KAAK,EAAG,GAAE,MAAMP,UAAW,GADlB;IAET6D,UAAU,EAAE;EAFH,CAlBmB;EAsB9BV,MAAM,EAAE;IACN5C,KAAK,EAAE,EADD;IAEN6B,MAAM,EAAE,EAFF;IAGN2B,OAAO,EAAE,CAHH;IAINC,YAAY,EAAE;EAJR,CAtBsB;EA4B9BT,KAAK,EAAE;IACLhD,KAAK,EAAE,MADF;IAEL6B,MAAM,EAAE;EAFH;AA5BuB,CAAD,CAA/B;AAkCA,eAAenC,uBAAf"}
+{"version":3,"names":["React","FlatList","Pressable","View","useWindowDimensions","useSafeAreaInsets","Image","Modal","createStyleSheet","useUIKitTheme","UNKNOWN_USER_ID","NUM_COLUMN","ReactionListBottomSheet","_ref","visible","onClose","onDismiss","reactionCtx","chatCtx","width","bottom","left","right","colors","currentUser","emojiManager","channel","message","color","ui","reaction","default","createElement","type","Boolean","backgroundStyle","styles","modal","style","container","paddingBottom","backgroundColor","dialog","none","background","paddingLeft","paddingHorizontal","paddingRight","data","allEmoji","numColumns","keyExtractor","item","key","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","_ref2","_message$reactions","_message$reactions$fi","url","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","reacted","emojiItem","onPress","deleteReaction","addReaction","_ref3","pressed","button","selected","enabled","source","uri","emoji","overflow","borderTopLeftRadius","borderTopRightRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\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 { bottom, left, right } = useSafeAreaInsets();\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: bottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingLeft: left + styles.container.paddingHorizontal,\n            paddingRight: right + 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={() => {\n                    if (message && channel) {\n                      if (reacted) channel.deleteReaction(message, key);\n                      else channel.addReaction(message, key);\n                    }\n                    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    borderTopLeftRadius: 8,\n    borderTopRightRadius: 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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"}