@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/lib/module/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js

@@ -1,8 +1,11 @@
+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, { useState } from 'react';
-import { Linking, TouchableOpacity, View } from 'react-native';
-import { Icon, Image, Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining } from '@sendbird/uikit-utils';
-import { useLocalization } from '../../../hooks/useContext';
+import { TouchableOpacity, View } from 'react-native';
+import { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
+import SBUUtils from '../../../libs/SBUUtils';
 
 const OpenGraphUserMessage = _ref => {
   var _ogMetaData$defaultIm;
@@ -11,33 +14,109 @@ const OpenGraphUserMessage = _ref => {
     message,
     variant,
     pressed,
-    ogMetaData
+    ogMetaData,
+    children,
+    onLongPressMentionedUser,
+    onLongPressURL
   } = _ref;
+  const {
+    mentionManager,
+    currentUser
+  } = useSendbirdChat();
   const {
     STRINGS
   } = useLocalization();
+  const {
+    show
+  } = useUserProfile();
   const {
     colors,
     select,
     palette
   } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   const [imageNotFound, setImageNotFound] = useState(false);
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const containerBackground = select({
+    dark: palette.background400,
+    light: palette.background100
+  });
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles.container, {
+    style: [styles.bubbleContainer, {
+      backgroundColor: containerBackground
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, styles.bubbleContainer, {
       backgroundColor: color.background
     }]
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.messageContainer
-  }, /*#__PURE__*/React.createElement(URLParsedText, {
+  }, /*#__PURE__*/React.createElement(Text, {
     body3: true,
     color: color.textMsg
-  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(RegexText, {
+    body3: true,
+    color: color.textMsg,
+    patterns: [{
+      regex: mentionManager.templateRegex,
+
+      replacer(_ref2) {
+        var _message$mentionedUse;
+
+        let {
+          match,
+          groups,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref2;
+        const user = (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.find(it => it.userId === groups[2]);
+
+        if (user) {
+          const isCurrentUser = user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+          return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            onPress: () => show(user),
+            onLongPress: onLongPressMentionedUser,
+            style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.mentionedText, isCurrentUser && {
+              backgroundColor: palette.highlight
+            }]
+          }), `${mentionManager.asMentionedMessageText(user)}`);
+        }
+
+        return match;
+      }
+
+    }, {
+      regex: urlRegexRough,
+
+      replacer(_ref3) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref3;
+        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => SBUUtils.openURL(match),
+          onLongPress: onLongPressURL,
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+
+    }]
+  }, mentionManager.shouldUseMentionedMessageTemplate(message) ? message.mentionedMessageTemplate : message.message), Boolean(message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
     body3: true,
     color: color.textEdited
   }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX))), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    activeOpacity: 0.7,
-    onPress: () => Linking.openURL(ogMetaData.url).catch()
+    style: {
+      backgroundColor: select({
+        dark: palette.background500,
+        light: palette.background200
+      })
+    },
+    activeOpacity: 0.85,
+    onPress: () => SBUUtils.openURL(ogMetaData.url)
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.ogImageContainer, {
       backgroundColor: select({
@@ -59,10 +138,7 @@ const OpenGraphUserMessage = _ref => {
     onError: () => setImageNotFound(true)
   })])), /*#__PURE__*/React.createElement(View, {
     style: [styles.ogContainer, {
-      backgroundColor: select({
-        dark: palette.background400,
-        light: palette.background100
-      })
+      backgroundColor: containerBackground
     }]
   }, /*#__PURE__*/React.createElement(Text, {
     numberOfLines: 3,
@@ -78,16 +154,18 @@ const OpenGraphUserMessage = _ref => {
     numberOfLines: 1,
     caption2: true,
     color: colors.onBackground02
-  }, ogMetaData.url))));
+  }, ogMetaData.url)))), children);
 };
 
 const styles = createStyleSheet({
-  container: {
-    width: 240,
-    maxWidth: 240,
+  bubbleContainer: {
     borderRadius: 16,
     overflow: 'hidden'
   },
+  container: {
+    width: 240,
+    maxWidth: 240
+  },
   messageContainer: {
     paddingVertical: 6,
     paddingHorizontal: 12
@@ -111,6 +189,12 @@ const styles = createStyleSheet({
   ogDesc: {
     lineHeight: 14,
     marginBottom: 8
+  },
+  mentionedText: {
+    fontWeight: 'bold'
+  },
+  urlText: {
+    textDecorationLine: 'underline'
   }
 });
 export default OpenGraphUserMessage;

package/lib/module/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Linking","TouchableOpacity","View","Icon","Image","Text","URLParsedText","createStyleSheet","useUIKitTheme","conditionChaining","useLocalization","OpenGraphUserMessage","message","variant","pressed","ogMetaData","STRINGS","colors","select","palette","color","ui","imageNotFound","setImageNotFound","styles","container","backgroundColor","background","messageContainer","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","openURL","url","catch","ogImageContainer","dark","background500","light","background200","ogImage","onBackground02","uri","defaultImage","ogContainer","background400","background100","onBackground01","ogTitle","title","description","ogDesc","width","maxWidth","borderRadius","overflow","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","flex","height","marginBottom","lineHeight"],"sources":["OpenGraphUserMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Linking, TouchableOpacity, View } from 'react-native';\n\nimport type { OGMetaData } from '@sendbird/chat/message';\nimport {\n  Icon,\n  Image,\n  Text,\n  URLParsedText,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { UserMessageProps } from './index';\n\ntype Props = UserMessageProps & {\n  ogMetaData: OGMetaData;\n};\nconst OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors, select, palette } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  const [imageNotFound, setImageNotFound] = useState(false);\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <View style={styles.messageContainer}>\n        <URLParsedText body3 color={color.textMsg}>\n          {message.message}\n          {Boolean(message.updatedAt) && (\n            <Text body3 color={color.textEdited}>\n              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n            </Text>\n          )}\n        </URLParsedText>\n      </View>\n      <TouchableOpacity activeOpacity={0.7} onPress={() => Linking.openURL(ogMetaData.url).catch()}>\n        <View\n          style={[\n            styles.ogImageContainer,\n            { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },\n          ]}\n        >\n          {conditionChaining(\n            [imageNotFound],\n            [\n              <Icon containerStyle={styles.ogImage} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />,\n              <Image\n                source={{ uri: ogMetaData.defaultImage?.url }}\n                style={styles.ogImage}\n                resizeMode={'cover'}\n                onError={() => setImageNotFound(true)}\n              />,\n            ],\n          )}\n        </View>\n        <View\n          style={[\n            styles.ogContainer,\n            { backgroundColor: select({ dark: palette.background400, light: palette.background100 }) },\n          ]}\n        >\n          <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n            {ogMetaData.title}\n          </Text>\n          {Boolean(ogMetaData.description) && (\n            <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n              {ogMetaData.description}\n            </Text>\n          )}\n          <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n            {ogMetaData.url}\n          </Text>\n        </View>\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 240,\n    maxWidth: 240,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  messageContainer: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImageContainer: {\n    flex: 1,\n    height: 136,\n  },\n  ogImage: {\n    width: '100%',\n    height: '100%',\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","useState","TouchableOpacity","View","Icon","Image","RegexText","Text","createStyleSheet","useUIKitTheme","conditionChaining","urlRegexRough","useLocalization","useSendbirdChat","useUserProfile","SBUUtils","OpenGraphUserMessage","message","variant","pressed","ogMetaData","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","STRINGS","show","colors","select","palette","imageNotFound","setImageNotFound","color","ui","containerBackground","dark","background400","light","background100","styles","bubbleContainer","backgroundColor","container","background","messageContainer","textMsg","regex","templateRegex","replacer","match","groups","parentProps","keyPrefix","index","user","mentionedUsers","find","it","userId","isCurrentUser","style","mentionedText","highlight","asMentionedMessageText","openURL","urlText","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","background500","background200","url","ogImageContainer","ogImage","onBackground02","uri","defaultImage","ogContainer","onBackground01","ogTitle","title","description","ogDesc","borderRadius","overflow","width","maxWidth","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","flex","height","marginBottom","lineHeight","fontWeight","textDecorationLine"],"sources":["OpenGraphUserMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { OGMetaData } from '@sendbird/chat/message';\nimport { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';\nimport SBUUtils from '../../../libs/SBUUtils';\nimport type { UserMessageProps } from './index';\n\ntype Props = UserMessageProps & {\n  ogMetaData: OGMetaData;\n};\n\nconst OpenGraphUserMessage = ({\n  message,\n  variant,\n  pressed,\n  ogMetaData,\n  children,\n  onLongPressMentionedUser,\n  onLongPressURL,\n}: Props) => {\n  const { mentionManager, currentUser } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const { show } = useUserProfile();\n  const { colors, select, palette } = useUIKitTheme();\n\n  const [imageNotFound, setImageNotFound] = useState(false);\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n\n  const containerBackground = select({ dark: palette.background400, light: palette.background100 });\n\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: containerBackground }]}>\n      <View style={[styles.container, styles.bubbleContainer, { backgroundColor: color.background }]}>\n        <View style={styles.messageContainer}>\n          <Text body3 color={color.textMsg}>\n            <RegexText\n              body3\n              color={color.textMsg}\n              patterns={[\n                {\n                  regex: mentionManager.templateRegex,\n                  replacer({ match, groups, parentProps, keyPrefix, index }) {\n                    const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);\n                    if (user) {\n                      const isCurrentUser = user.userId === currentUser?.userId;\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => show(user)}\n                          onLongPress={onLongPressMentionedUser}\n                          style={[\n                            parentProps?.style,\n                            styles.mentionedText,\n                            isCurrentUser && { backgroundColor: palette.highlight },\n                          ]}\n                        >\n                          {`${mentionManager.asMentionedMessageText(user)}`}\n                        </Text>\n                      );\n                    }\n                    return match;\n                  },\n                },\n                {\n                  regex: urlRegexRough,\n                  replacer({ match, parentProps, keyPrefix, index }) {\n                    return (\n                      <Text\n                        {...parentProps}\n                        key={`${keyPrefix}-${index}`}\n                        onPress={() => SBUUtils.openURL(match)}\n                        onLongPress={onLongPressURL}\n                        style={[parentProps?.style, styles.urlText]}\n                      >\n                        {match}\n                      </Text>\n                    );\n                  },\n                },\n              ]}\n            >\n              {mentionManager.shouldUseMentionedMessageTemplate(message)\n                ? message.mentionedMessageTemplate\n                : message.message}\n            </RegexText>\n            {Boolean(message.updatedAt) && (\n              <Text body3 color={color.textEdited}>\n                {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n              </Text>\n            )}\n          </Text>\n        </View>\n        <TouchableOpacity\n          style={{ backgroundColor: select({ dark: palette.background500, light: palette.background200 }) }}\n          activeOpacity={0.85}\n          onPress={() => SBUUtils.openURL(ogMetaData.url)}\n        >\n          <View\n            style={[\n              styles.ogImageContainer,\n              { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },\n            ]}\n          >\n            {conditionChaining(\n              [imageNotFound],\n              [\n                <Icon\n                  containerStyle={styles.ogImage}\n                  icon={'thumbnail-none'}\n                  size={48}\n                  color={colors.onBackground02}\n                />,\n                <Image\n                  source={{ uri: ogMetaData.defaultImage?.url }}\n                  style={styles.ogImage}\n                  resizeMode={'cover'}\n                  onError={() => setImageNotFound(true)}\n                />,\n              ],\n            )}\n          </View>\n          <View style={[styles.ogContainer, { backgroundColor: containerBackground }]}>\n            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n              {ogMetaData.title}\n            </Text>\n            {Boolean(ogMetaData.description) && (\n              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                {ogMetaData.description}\n              </Text>\n            )}\n            <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n              {ogMetaData.url}\n            </Text>\n          </View>\n        </TouchableOpacity>\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  container: {\n    width: 240,\n    maxWidth: 240,\n  },\n  messageContainer: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImageContainer: {\n    flex: 1,\n    height: 136,\n  },\n  ogImage: {\n    width: '100%',\n    height: '100%',\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n  mentionedText: {\n    fontWeight: 'bold',\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}

package/lib/module/components/MessageRenderer/UserMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","BaseUserMessage","OpenGraphUserMessage","UserMessage","props","message","ogMetaData","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseUserMessage from './BaseUserMessage';\nimport OpenGraphUserMessage from './OpenGraphUserMessage';\n\nexport type UserMessageProps = MessageRendererInterface<SendbirdUserMessage>;\nconst UserMessage = (props: UserMessageProps) => {\n  if (props.message.ogMetaData) {\n    return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;\n  }\n  return <BaseUserMessage {...props} />;\n};\n\nexport default React.memo(UserMessage);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAKA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;;AAGA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC/C,IAAIA,KAAK,CAACC,OAAN,CAAcC,UAAlB,EAA8B;IAC5B,oBAAO,oBAAC,oBAAD,eAA0BF,KAA1B;MAAiC,UAAU,EAAEA,KAAK,CAACC,OAAN,CAAcC;IAA3D,GAAP;EACD;;EACD,oBAAO,oBAAC,eAAD,EAAqBF,KAArB,CAAP;AACD,CALD;;AAOA,4BAAeJ,KAAK,CAACO,IAAN,CAAWJ,WAAX,CAAf"}
+{"version":3,"names":["React","BaseUserMessage","OpenGraphUserMessage","UserMessage","props","message","ogMetaData","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseUserMessage from './BaseUserMessage';\nimport OpenGraphUserMessage from './OpenGraphUserMessage';\n\nexport type UserMessageProps = MessageRendererInterface<\n  SendbirdUserMessage,\n  {\n    onLongPressMentionedUser?: () => void;\n    onLongPressURL?: () => void;\n  }\n>;\n\nconst UserMessage = (props: UserMessageProps) => {\n  if (props.message.ogMetaData) {\n    return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;\n  }\n  return <BaseUserMessage {...props} />;\n};\n\nexport default React.memo(UserMessage);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAKA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;;AAUA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC/C,IAAIA,KAAK,CAACC,OAAN,CAAcC,UAAlB,EAA8B;IAC5B,oBAAO,oBAAC,oBAAD,eAA0BF,KAA1B;MAAiC,UAAU,EAAEA,KAAK,CAACC,OAAN,CAAcC;IAA3D,GAAP;EACD;;EACD,oBAAO,oBAAC,eAAD,EAAqBF,KAArB,CAAP;AACD,CALD;;AAOA,4BAAeJ,KAAK,CAACO,IAAN,CAAWJ,WAAX,CAAf"}

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

@@ -3,8 +3,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { Pressable, View } from 'react-native';
 import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
-import { calcMessageGrouping, conditionChaining, isMyMessage, useIIFE } from '@sendbird/uikit-utils';
+import { calcMessageGrouping, conditionChaining, isMyMessage, shouldRenderReaction, useIIFE } from '@sendbird/uikit-utils';
 import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
+import { useSendbirdChat } from '../../hooks/useContext';
+import { ReactionAddons } from '../ReactionAddons';
 import AdminMessage from './AdminMessage';
 import FileMessage from './FileMessage';
 import MessageContainer from './MessageContainer';
@@ -36,6 +38,19 @@ const MessageRenderer = _ref => {
     groupWithPrev,
     groupWithNext
   } = calcMessageGrouping(Boolean(rest.enableMessageGrouping), message, rest.prevMessage, rest.nextMessage);
+  const {
+    features
+  } = useSendbirdChat();
+  const reactionChildren = useIIFE(() => {
+    if (shouldRenderReaction(channel, features.reactionEnabled) && message.reactions && message.reactions.length > 0) {
+      return /*#__PURE__*/React.createElement(ReactionAddons.Message, {
+        channel: channel,
+        message: message
+      });
+    }
+
+    return null;
+  });
   const messageComponent = useIIFE(() => {
     const pressableProps = {
       style: styles.msgContainer,
@@ -57,8 +72,10 @@ const MessageRenderer = _ref => {
         } = _ref2;
         return /*#__PURE__*/React.createElement(UserMessage, _extends({
           message: message,
-          pressed: pressed
-        }, messageProps));
+          pressed: pressed,
+          onLongPressURL: onLongPress,
+          onLongPressMentionedUser: onLongPress
+        }, messageProps), reactionChildren);
       });
     }
 
@@ -70,7 +87,7 @@ const MessageRenderer = _ref => {
         return /*#__PURE__*/React.createElement(FileMessage, _extends({
           message: message,
           pressed: pressed
-        }, messageProps));
+        }, messageProps), reactionChildren);
       });
     }
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","View","createStyleSheet","calcMessageGrouping","conditionChaining","isMyMessage","useIIFE","DEFAULT_LONG_PRESS_DELAY","AdminMessage","FileMessage","MessageContainer","MessageDateSeparator","MessageIncomingAvatar","MessageIncomingSenderName","MessageOutgoingStatus","MessageTime","UnknownMessage","UserMessage","MessageRenderer","currentUserId","channel","message","onPress","onLongPress","rest","variant","isOutgoing","isIncoming","variantContainerStyle","incoming","styles","chatIncoming","outgoing","chatOutgoing","groupWithPrev","groupWithNext","Boolean","enableMessageGrouping","prevMessage","nextMessage","messageComponent","pressableProps","style","msgContainer","disabled","delayLongPress","messageProps","isUserMessage","pressed","isFileMessage","isAdminMessage","chatGroup","chatNonGroup","chatLastMessage","outgoingContainer","timeOutgoing","bubbleContainer","bubbleWrapper","timeIncoming","flexDirection","justifyContent","alignItems","marginLeft","marginRight","marginBottom","maxWidth","flexShrink","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { calcMessageGrouping, conditionChaining, isMyMessage, useIIFE } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport type { GroupChannelProps } from '../../domain/groupChannel/types';\nimport AdminMessage from './AdminMessage';\nimport FileMessage from './FileMessage';\nimport MessageContainer from './MessageContainer';\nimport MessageDateSeparator from './MessageDateSeparator';\nimport MessageIncomingAvatar from './MessageIncomingAvatar';\nimport MessageIncomingSenderName from './MessageIncomingSenderName';\nimport MessageOutgoingStatus from './MessageOutgoingStatus';\nimport MessageTime from './MessageTime';\nimport UnknownMessage from './UnknownMessage';\nimport UserMessage from './UserMessage';\n\ntype MessageStyleVariant = 'outgoing' | 'incoming';\nexport interface MessageRendererInterface<T = SendbirdMessage> {\n  message: T;\n  prevMessage?: SendbirdMessage;\n  nextMessage?: SendbirdMessage;\n  variant: MessageStyleVariant;\n  groupWithPrev: boolean;\n  groupWithNext: boolean;\n  pressed: boolean;\n}\n\nconst MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({\n  currentUserId,\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  ...rest\n}) => {\n  const variant: MessageStyleVariant = isMyMessage(message, currentUserId) ? 'outgoing' : 'incoming';\n  const isOutgoing = variant === 'outgoing';\n  const isIncoming = variant === 'incoming';\n  const variantContainerStyle = { incoming: styles.chatIncoming, outgoing: styles.chatOutgoing }[variant];\n\n  const { groupWithPrev, groupWithNext } = calcMessageGrouping(\n    Boolean(rest.enableMessageGrouping),\n    message,\n    rest.prevMessage,\n    rest.nextMessage,\n  );\n\n  const messageComponent = useIIFE(() => {\n    const pressableProps = {\n      style: styles.msgContainer,\n      disabled: !onPress && !onLongPress,\n      onPress,\n      onLongPress,\n      delayLongPress: DEFAULT_LONG_PRESS_DELAY,\n    };\n    const messageProps = { ...rest, variant, groupWithNext, groupWithPrev };\n\n    if (message.isUserMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => <UserMessage message={message} pressed={pressed} {...messageProps} />}\n        </Pressable>\n      );\n    }\n\n    if (message.isFileMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => <FileMessage message={message} pressed={pressed} {...messageProps} />}\n        </Pressable>\n      );\n    }\n\n    if (message.isAdminMessage()) {\n      return <AdminMessage message={message} pressed={false} {...messageProps} />;\n    }\n\n    return (\n      <Pressable {...pressableProps}>\n        {({ pressed }) => <UnknownMessage message={message} pressed={pressed} {...messageProps} />}\n      </Pressable>\n    );\n  });\n\n  return (\n    <MessageContainer>\n      <MessageDateSeparator message={message} prevMessage={rest.prevMessage} />\n      {message.isAdminMessage() && messageComponent}\n      {!message.isAdminMessage() && (\n        <View\n          style={[\n            variantContainerStyle,\n            conditionChaining(\n              [groupWithNext, Boolean(rest.nextMessage)],\n              [styles.chatGroup, styles.chatNonGroup, styles.chatLastMessage],\n            ),\n          ]}\n        >\n          {isOutgoing && (\n            <View style={styles.outgoingContainer}>\n              <MessageOutgoingStatus channel={channel} message={message} />\n              <MessageTime message={message} grouping={groupWithNext} style={styles.timeOutgoing} />\n            </View>\n          )}\n          {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}\n          <View style={styles.bubbleContainer}>\n            {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}\n            <View style={styles.bubbleWrapper}>\n              {messageComponent}\n              {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}\n            </View>\n          </View>\n        </View>\n      )}\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  chatIncoming: {\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    alignItems: 'flex-end',\n  },\n  chatOutgoing: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'flex-end',\n  },\n  timeIncoming: {\n    marginLeft: 4,\n  },\n  timeOutgoing: {\n    marginRight: 4,\n  },\n  chatGroup: {\n    marginBottom: 2,\n  },\n  chatNonGroup: {\n    marginBottom: 16,\n  },\n  chatLastMessage: {\n    marginBottom: 16,\n  },\n  msgContainer: {\n    maxWidth: 240,\n  },\n  bubbleContainer: {\n    flexShrink: 1,\n  },\n  bubbleWrapper: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n  },\n  outgoingContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    justifyContent: 'center',\n  },\n});\n\nexport default React.memo(MessageRenderer);\n"],"mappings":"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"}
+{"version":3,"names":["React","Pressable","View","createStyleSheet","calcMessageGrouping","conditionChaining","isMyMessage","shouldRenderReaction","useIIFE","DEFAULT_LONG_PRESS_DELAY","useSendbirdChat","ReactionAddons","AdminMessage","FileMessage","MessageContainer","MessageDateSeparator","MessageIncomingAvatar","MessageIncomingSenderName","MessageOutgoingStatus","MessageTime","UnknownMessage","UserMessage","MessageRenderer","currentUserId","channel","message","onPress","onLongPress","rest","variant","isOutgoing","isIncoming","variantContainerStyle","incoming","styles","chatIncoming","outgoing","chatOutgoing","groupWithPrev","groupWithNext","Boolean","enableMessageGrouping","prevMessage","nextMessage","features","reactionChildren","reactionEnabled","reactions","length","messageComponent","pressableProps","style","msgContainer","disabled","delayLongPress","messageProps","isUserMessage","pressed","isFileMessage","isAdminMessage","chatGroup","chatNonGroup","chatLastMessage","outgoingContainer","timeOutgoing","bubbleContainer","bubbleWrapper","timeIncoming","flexDirection","justifyContent","alignItems","marginLeft","marginRight","marginBottom","maxWidth","flexShrink","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, PressableProps, View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport {\n  calcMessageGrouping,\n  conditionChaining,\n  isMyMessage,\n  shouldRenderReaction,\n  useIIFE,\n} from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport type { GroupChannelProps } from '../../domain/groupChannel/types';\nimport { useSendbirdChat } from '../../hooks/useContext';\nimport { ReactionAddons } from '../ReactionAddons';\nimport AdminMessage from './AdminMessage';\nimport FileMessage from './FileMessage';\nimport MessageContainer from './MessageContainer';\nimport MessageDateSeparator from './MessageDateSeparator';\nimport MessageIncomingAvatar from './MessageIncomingAvatar';\nimport MessageIncomingSenderName from './MessageIncomingSenderName';\nimport MessageOutgoingStatus from './MessageOutgoingStatus';\nimport MessageTime from './MessageTime';\nimport UnknownMessage from './UnknownMessage';\nimport UserMessage from './UserMessage';\n\ntype MessageStyleVariant = 'outgoing' | 'incoming';\nexport type MessageRendererInterface<T = SendbirdMessage, AdditionalProps = unknown> = {\n  message: T;\n  prevMessage?: SendbirdMessage;\n  nextMessage?: SendbirdMessage;\n  variant: MessageStyleVariant;\n  groupWithPrev: boolean;\n  groupWithNext: boolean;\n  pressed: boolean;\n  children?: React.ReactElement | null;\n} & AdditionalProps;\n\nconst MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({\n  currentUserId,\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  ...rest\n}) => {\n  const variant: MessageStyleVariant = isMyMessage(message, currentUserId) ? 'outgoing' : 'incoming';\n  const isOutgoing = variant === 'outgoing';\n  const isIncoming = variant === 'incoming';\n  const variantContainerStyle = { incoming: styles.chatIncoming, outgoing: styles.chatOutgoing }[variant];\n\n  const { groupWithPrev, groupWithNext } = calcMessageGrouping(\n    Boolean(rest.enableMessageGrouping),\n    message,\n    rest.prevMessage,\n    rest.nextMessage,\n  );\n\n  const { features } = useSendbirdChat();\n\n  const reactionChildren = useIIFE(() => {\n    if (shouldRenderReaction(channel, features.reactionEnabled) && message.reactions && message.reactions.length > 0) {\n      return <ReactionAddons.Message channel={channel} message={message} />;\n    }\n    return null;\n  });\n\n  const messageComponent = useIIFE(() => {\n    const pressableProps: PressableProps = {\n      style: styles.msgContainer,\n      disabled: !onPress && !onLongPress,\n      onPress,\n      onLongPress,\n      delayLongPress: DEFAULT_LONG_PRESS_DELAY,\n    };\n    const messageProps = { ...rest, variant, groupWithNext, groupWithPrev };\n\n    if (message.isUserMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => (\n            <UserMessage\n              message={message}\n              pressed={pressed}\n              onLongPressURL={onLongPress}\n              onLongPressMentionedUser={onLongPress}\n              {...messageProps}\n            >\n              {reactionChildren}\n            </UserMessage>\n          )}\n        </Pressable>\n      );\n    }\n\n    if (message.isFileMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => (\n            <FileMessage message={message} pressed={pressed} {...messageProps}>\n              {reactionChildren}\n            </FileMessage>\n          )}\n        </Pressable>\n      );\n    }\n\n    if (message.isAdminMessage()) {\n      return <AdminMessage message={message} pressed={false} {...messageProps} />;\n    }\n\n    return (\n      <Pressable {...pressableProps}>\n        {({ pressed }) => <UnknownMessage message={message} pressed={pressed} {...messageProps} />}\n      </Pressable>\n    );\n  });\n\n  return (\n    <MessageContainer>\n      <MessageDateSeparator message={message} prevMessage={rest.prevMessage} />\n      {message.isAdminMessage() && messageComponent}\n      {!message.isAdminMessage() && (\n        <View\n          style={[\n            variantContainerStyle,\n            conditionChaining(\n              [groupWithNext, Boolean(rest.nextMessage)],\n              [styles.chatGroup, styles.chatNonGroup, styles.chatLastMessage],\n            ),\n          ]}\n        >\n          {isOutgoing && (\n            <View style={styles.outgoingContainer}>\n              <MessageOutgoingStatus channel={channel} message={message} />\n              <MessageTime message={message} grouping={groupWithNext} style={styles.timeOutgoing} />\n            </View>\n          )}\n          {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}\n          <View style={styles.bubbleContainer}>\n            {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}\n            <View style={styles.bubbleWrapper}>\n              {messageComponent}\n              {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}\n            </View>\n          </View>\n        </View>\n      )}\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  chatIncoming: {\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    alignItems: 'flex-end',\n  },\n  chatOutgoing: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'flex-end',\n  },\n  timeIncoming: {\n    marginLeft: 4,\n  },\n  timeOutgoing: {\n    marginRight: 4,\n  },\n  chatGroup: {\n    marginBottom: 2,\n  },\n  chatNonGroup: {\n    marginBottom: 16,\n  },\n  chatLastMessage: {\n    marginBottom: 16,\n  },\n  msgContainer: {\n    maxWidth: 240,\n  },\n  bubbleContainer: {\n    flexShrink: 1,\n  },\n  bubbleWrapper: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n  },\n  outgoingContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    justifyContent: 'center',\n  },\n});\n\nexport default React.memo(MessageRenderer);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoCC,IAApC,QAAgD,cAAhD;AAEA,SAASC,gBAAT,QAAiC,yCAAjC;AAEA,SACEC,mBADF,EAEEC,iBAFF,EAGEC,WAHF,EAIEC,oBAJF,EAKEC,OALF,QAMO,uBANP;AAQA,SAASC,wBAAT,QAAyC,iBAAzC;AAEA,SAASC,eAAT,QAAgC,wBAAhC;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,oBAAP,MAAiC,wBAAjC;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AACA,OAAOC,yBAAP,MAAsC,6BAAtC;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,OAAOC,WAAP,MAAwB,eAAxB;;AAcA,MAAMC,eAA+D,GAAG,QAOlE;EAAA,IAPmE;IACvEC,aADuE;IAEvEC,OAFuE;IAGvEC,OAHuE;IAIvEC,OAJuE;IAKvEC,WALuE;IAMvE,GAAGC;EANoE,CAOnE;EACJ,MAAMC,OAA4B,GAAGvB,WAAW,CAACmB,OAAD,EAAUF,aAAV,CAAX,GAAsC,UAAtC,GAAmD,UAAxF;EACA,MAAMO,UAAU,GAAGD,OAAO,KAAK,UAA/B;EACA,MAAME,UAAU,GAAGF,OAAO,KAAK,UAA/B;EACA,MAAMG,qBAAqB,GAAG;IAAEC,QAAQ,EAAEC,MAAM,CAACC,YAAnB;IAAiCC,QAAQ,EAAEF,MAAM,CAACG;EAAlD,EAAiER,OAAjE,CAA9B;EAEA,MAAM;IAAES,aAAF;IAAiBC;EAAjB,IAAmCnC,mBAAmB,CAC1DoC,OAAO,CAACZ,IAAI,CAACa,qBAAN,CADmD,EAE1DhB,OAF0D,EAG1DG,IAAI,CAACc,WAHqD,EAI1Dd,IAAI,CAACe,WAJqD,CAA5D;EAOA,MAAM;IAAEC;EAAF,IAAelC,eAAe,EAApC;EAEA,MAAMmC,gBAAgB,GAAGrC,OAAO,CAAC,MAAM;IACrC,IAAID,oBAAoB,CAACiB,OAAD,EAAUoB,QAAQ,CAACE,eAAnB,CAApB,IAA2DrB,OAAO,CAACsB,SAAnE,IAAgFtB,OAAO,CAACsB,SAAR,CAAkBC,MAAlB,GAA2B,CAA/G,EAAkH;MAChH,oBAAO,oBAAC,cAAD,CAAgB,OAAhB;QAAwB,OAAO,EAAExB,OAAjC;QAA0C,OAAO,EAAEC;MAAnD,EAAP;IACD;;IACD,OAAO,IAAP;EACD,CAL+B,CAAhC;EAOA,MAAMwB,gBAAgB,GAAGzC,OAAO,CAAC,MAAM;IACrC,MAAM0C,cAA8B,GAAG;MACrCC,KAAK,EAAEjB,MAAM,CAACkB,YADuB;MAErCC,QAAQ,EAAE,CAAC3B,OAAD,IAAY,CAACC,WAFc;MAGrCD,OAHqC;MAIrCC,WAJqC;MAKrC2B,cAAc,EAAE7C;IALqB,CAAvC;IAOA,MAAM8C,YAAY,GAAG,EAAE,GAAG3B,IAAL;MAAWC,OAAX;MAAoBU,aAApB;MAAmCD;IAAnC,CAArB;;IAEA,IAAIb,OAAO,CAAC+B,aAAR,EAAJ,EAA6B;MAC3B,oBACE,oBAAC,SAAD,EAAeN,cAAf,EACG;QAAA,IAAC;UAAEO;QAAF,CAAD;QAAA,oBACC,oBAAC,WAAD;UACE,OAAO,EAAEhC,OADX;UAEE,OAAO,EAAEgC,OAFX;UAGE,cAAc,EAAE9B,WAHlB;UAIE,wBAAwB,EAAEA;QAJ5B,GAKM4B,YALN,GAOGV,gBAPH,CADD;MAAA,CADH,CADF;IAeD;;IAED,IAAIpB,OAAO,CAACiC,aAAR,EAAJ,EAA6B;MAC3B,oBACE,oBAAC,SAAD,EAAeR,cAAf,EACG;QAAA,IAAC;UAAEO;QAAF,CAAD;QAAA,oBACC,oBAAC,WAAD;UAAa,OAAO,EAAEhC,OAAtB;UAA+B,OAAO,EAAEgC;QAAxC,GAAqDF,YAArD,GACGV,gBADH,CADD;MAAA,CADH,CADF;IASD;;IAED,IAAIpB,OAAO,CAACkC,cAAR,EAAJ,EAA8B;MAC5B,oBAAO,oBAAC,YAAD;QAAc,OAAO,EAAElC,OAAvB;QAAgC,OAAO,EAAE;MAAzC,GAAoD8B,YAApD,EAAP;IACD;;IAED,oBACE,oBAAC,SAAD,EAAeL,cAAf,EACG;MAAA,IAAC;QAAEO;MAAF,CAAD;MAAA,oBAAiB,oBAAC,cAAD;QAAgB,OAAO,EAAEhC,OAAzB;QAAkC,OAAO,EAAEgC;MAA3C,GAAwDF,YAAxD,EAAjB;IAAA,CADH,CADF;EAKD,CAjD+B,CAAhC;EAmDA,oBACE,oBAAC,gBAAD,qBACE,oBAAC,oBAAD;IAAsB,OAAO,EAAE9B,OAA/B;IAAwC,WAAW,EAAEG,IAAI,CAACc;EAA1D,EADF,EAEGjB,OAAO,CAACkC,cAAR,MAA4BV,gBAF/B,EAGG,CAACxB,OAAO,CAACkC,cAAR,EAAD,iBACC,oBAAC,IAAD;IACE,KAAK,EAAE,CACL3B,qBADK,EAEL3B,iBAAiB,CACf,CAACkC,aAAD,EAAgBC,OAAO,CAACZ,IAAI,CAACe,WAAN,CAAvB,CADe,EAEf,CAACT,MAAM,CAAC0B,SAAR,EAAmB1B,MAAM,CAAC2B,YAA1B,EAAwC3B,MAAM,CAAC4B,eAA/C,CAFe,CAFZ;EADT,GASGhC,UAAU,iBACT,oBAAC,IAAD;IAAM,KAAK,EAAEI,MAAM,CAAC6B;EAApB,gBACE,oBAAC,qBAAD;IAAuB,OAAO,EAAEvC,OAAhC;IAAyC,OAAO,EAAEC;EAAlD,EADF,eAEE,oBAAC,WAAD;IAAa,OAAO,EAAEA,OAAtB;IAA+B,QAAQ,EAAEc,aAAzC;IAAwD,KAAK,EAAEL,MAAM,CAAC8B;EAAtE,EAFF,CAVJ,EAeGjC,UAAU,iBAAI,oBAAC,qBAAD;IAAuB,OAAO,EAAEN,OAAhC;IAAyC,QAAQ,EAAEc;EAAnD,EAfjB,eAgBE,oBAAC,IAAD;IAAM,KAAK,EAAEL,MAAM,CAAC+B;EAApB,GACGlC,UAAU,iBAAI,oBAAC,yBAAD;IAA2B,OAAO,EAAEN,OAApC;IAA6C,QAAQ,EAAEa;EAAvD,EADjB,eAEE,oBAAC,IAAD;IAAM,KAAK,EAAEJ,MAAM,CAACgC;EAApB,GACGjB,gBADH,EAEGlB,UAAU,iBAAI,oBAAC,WAAD;IAAa,OAAO,EAAEN,OAAtB;IAA+B,QAAQ,EAAEc,aAAzC;IAAwD,KAAK,EAAEL,MAAM,CAACiC;EAAtE,EAFjB,CAFF,CAhBF,CAJJ,CADF;AAgCD,CAhHD;;AAkHA,MAAMjC,MAAM,GAAG/B,gBAAgB,CAAC;EAC9BgC,YAAY,EAAE;IACZiC,aAAa,EAAE,KADH;IAEZC,cAAc,EAAE,YAFJ;IAGZC,UAAU,EAAE;EAHA,CADgB;EAM9BjC,YAAY,EAAE;IACZ+B,aAAa,EAAE,KADH;IAEZC,cAAc,EAAE,UAFJ;IAGZC,UAAU,EAAE;EAHA,CANgB;EAW9BH,YAAY,EAAE;IACZI,UAAU,EAAE;EADA,CAXgB;EAc9BP,YAAY,EAAE;IACZQ,WAAW,EAAE;EADD,CAdgB;EAiB9BZ,SAAS,EAAE;IACTa,YAAY,EAAE;EADL,CAjBmB;EAoB9BZ,YAAY,EAAE;IACZY,YAAY,EAAE;EADF,CApBgB;EAuB9BX,eAAe,EAAE;IACfW,YAAY,EAAE;EADC,CAvBa;EA0B9BrB,YAAY,EAAE;IACZsB,QAAQ,EAAE;EADE,CA1BgB;EA6B9BT,eAAe,EAAE;IACfU,UAAU,EAAE;EADG,CA7Ba;EAgC9BT,aAAa,EAAE;IACbE,aAAa,EAAE,KADF;IAEbE,UAAU,EAAE;EAFC,CAhCe;EAoC9BP,iBAAiB,EAAE;IACjBK,aAAa,EAAE,KADE;IAEjBE,UAAU,EAAE,UAFK;IAGjBD,cAAc,EAAE;EAHC;AApCW,CAAD,CAA/B;AA2CA,4BAAerE,KAAK,CAAC4E,IAAN,CAAWtD,eAAX,CAAf"}

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

@@ -0,0 +1,132 @@
+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 { useUniqId } from '@sendbird/uikit-utils';
+import { UNKNOWN_USER_ID } from '../../constants';
+import { useReaction, useSendbirdChat } from '../../hooks/useContext';
+const COMPONENT_NAME = 'BottomSheetReactionAddon';
+
+const BottomSheetReactionAddon = _ref => {
+  let {
+    onClose,
+    message,
+    channel
+  } = _ref;
+  const {
+    emojiManager,
+    currentUser,
+    sdk
+  } = useSendbirdChat();
+  const {
+    updateReactionFocusedItem,
+    openReactionList
+  } = useReaction();
+  const {
+    colors
+  } = useUIKitTheme();
+  const id = useUniqId(COMPONENT_NAME);
+  const {
+    left,
+    right
+  } = useSafeAreaInsets();
+  useChannelHandler(sdk, COMPONENT_NAME + id, {
+    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)) {
+        updateReactionFocusedItem({
+          message: await sdk.message.getMessage({
+            includeReactions: true,
+            messageId: message.messageId,
+            channelUrl: message.channelUrl,
+            channelType: message.channelType
+          })
+        });
+      }
+    }
+
+  });
+  const emojiAll = emojiManager.allEmoji.slice(0, 5);
+  const color = colors.ui.reaction.default;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      marginRight: right,
+      marginLeft: left
+    }]
+  }, 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) ?? [];
+    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,
+      style: _ref3 => {
+        let {
+          pressed
+        } = _ref3;
+        return [styles.button, {
+          backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
+        }];
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: url
+      },
+      style: styles.emoji
+    }));
+  }), /*#__PURE__*/React.createElement(Pressable, {
+    onPress: async () => {
+      await onClose();
+      openReactionList({
+        channel,
+        message
+      });
+    },
+    style: _ref4 => {
+      let {
+        pressed
+      } = _ref4;
+      return [styles.button, {
+        backgroundColor: pressed ? color.selected.background : color.enabled.background
+      }];
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'emoji-more',
+    style: styles.emoji,
+    color: colors.onBackground03
+  })));
+};
+
+const styles = createStyleSheet({
+  container: {
+    paddingTop: 12,
+    paddingBottom: 16,
+    paddingHorizontal: 18,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  button: {
+    width: 44,
+    height: 44,
+    padding: 4,
+    borderRadius: 8
+  },
+  emoji: {
+    width: '100%',
+    height: '100%'
+  }
+});
+export default BottomSheetReactionAddon;
+//# sourceMappingURL=BottomSheetReactionAddon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","View","useSafeAreaInsets","useChannelHandler","Icon","Image","createStyleSheet","useUIKitTheme","useUniqId","UNKNOWN_USER_ID","useReaction","useSendbirdChat","COMPONENT_NAME","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","id","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, useUniqId } 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 COMPONENT_NAME = 'BottomSheetReactionAddon';\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const id = useUniqId(COMPONENT_NAME);\n  const { left, right } = useSafeAreaInsets();\n\n  useChannelHandler(sdk, COMPONENT_NAME + id, {\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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getReactionCount } from '@sendbird/uikit-utils';
+import { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } 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) {
+      return channel.deleteReaction(message, reaction.key);
+    } else {
+      return channel.addReaction(message, reaction.key);
+    }
+  };
+};
+
+const createReactionButtons = (channel, message, getEmoji, emojiLimit, onOpenReactionList, onOpenReactionUserList, currentUserId) => {
+  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)),
+      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: [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]
+      });
+    });
+  });
+
+  if (buttons.length < emojiLimit) {
+    buttons.push( /*#__PURE__*/React.createElement(Pressable, {
+      key: REACTION_MORE_KEY,
+      onPress: onOpenReactionList
+    }, _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ReactionRoundedButton.More, {
+        pressed: pressed
+      });
+    }));
+  }
+
+  return buttons;
+};
+
+const MessageReactionAddon = _ref3 => {
+  var _message$reactions;
+
+  let {
+    channel,
+    message
+  } = _ref3;
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    emojiManager,
+    currentUser
+  } = useSendbirdChat();
+  const {
+    openReactionList,
+    openReactionUserList
+  } = useReaction();
+  if (!((_message$reactions = message.reactions) !== null && _message$reactions !== void 0 && _message$reactions.length)) return null;
+  const reactionButtons = createReactionButtons(channel, message, key => emojiManager.allEmojiMap[key], emojiManager.allEmoji.length, () => openReactionList({
+    channel,
+    message
+  }), focusIndex => openReactionUserList({
+    channel,
+    message,
+    focusIndex
+  }), currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: [styles.reactionContainer, {
+      backgroundColor: colors.background,
+      borderColor: colors.ui.reaction.rounded.enabled.background
+    }]
+  }, reactionButtons);
+};
+
+const styles = createStyleSheet({
+  reactionContainer: {
+    alignItems: 'stretch',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 8,
+    borderRadius: 16,
+    borderWidth: 1
+  },
+  marginRight: {
+    marginRight: 4.5
+  },
+  marginBottom: {
+    marginBottom: 4
+  }
+});
+export default MessageReactionAddon;
+//# sourceMappingURL=MessageReactionAddon.js.map

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

@@ -0,0 +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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"}