@sendbird/uikit-react-native 1.1.0 → 1.1.2

package/lib/module/components/MessageRenderer/FileMessage/VideoFileMessage.js

@@ -1,9 +1,53 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 import { usePlatformService } from '../../../hooks/useContext';
 
+const useRetry = function (videoFileUrl) {
+  let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  const [state, setState] = useState({
+    thumbnail: null,
+    loading: true
+  });
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef();
+  const {
+    mediaService
+  } = usePlatformService();
+
+  const fetchThumbnail = () => {
+    return mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
+      url: videoFileUrl,
+      timeMills: 1000
+    }).then(result => {
+      setState({
+        loading: false,
+        thumbnail: (result === null || result === void 0 ? void 0 : result.path) ?? null
+      });
+    });
+  };
+
+  useEffect(() => {
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail();
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+  return state;
+};
+
 const VideoFileMessage = _ref => {
   let {
     message
@@ -11,40 +55,16 @@ const VideoFileMessage = _ref => {
   const {
     colors
   } = useUIKitTheme();
-  const {
-    mediaService
-  } = usePlatformService();
   const fileUrl = getAvailableUriFromFileMessage(message);
   const style = [styles.image, {
     backgroundColor: colors.onBackground04
   }];
-  const [state, setState] = useState({
-    thumbnail: null,
-    loading: true,
-    imageNotFound: false
-  });
-  useEffect(() => {
-    mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
-      url: fileUrl,
-      timeMills: 1000
-    }).then(result => {
-      if (result !== null && result !== void 0 && result.path) {
-        setState(prev => ({ ...prev,
-          loading: false,
-          thumbnail: result.path
-        }));
-      } else {
-        throw new Error('Cannot generate thumbnail');
-      }
-    }).catch(() => {
-      setState(prev => ({ ...prev,
-        loading: false,
-        imageNotFound: true
-      }));
-    });
-  }, []);
+  const {
+    loading,
+    thumbnail
+  } = useRetry(fileUrl);
 
-  if (state.loading || state.imageNotFound) {
+  if (loading) {
     return /*#__PURE__*/React.createElement(View, {
       style: [style, styles.container]
     }, /*#__PURE__*/React.createElement(PlayIcon, null));
@@ -54,14 +74,11 @@ const VideoFileMessage = _ref => {
     style: styles.container
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
-      uri: state.thumbnail || fileUrl
+      uri: thumbnail || fileUrl
     },
     style: style,
     resizeMode: 'cover',
-    resizeMethod: 'resize',
-    onError: () => setState(prev => ({ ...prev,
-      imageNotFound: true
-    }))
+    resizeMethod: 'resize'
   }), /*#__PURE__*/React.createElement(PlayIcon, null));
 };
 

package/lib/module/components/MessageRenderer/FileMessage/VideoFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","VideoFileMessage","message","colors","mediaService","fileUrl","style","styles","image","backgroundColor","onBackground04","state","setState","thumbnail","loading","imageNotFound","getVideoThumbnail","url","timeMills","then","result","path","prev","Error","catch","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","alignItems","justifyContent","width","maxWidth","height","borderRadius","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst VideoFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const { mediaService } = usePlatformService();\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const [state, setState] = useState({\n    thumbnail: null as null | string,\n    loading: true,\n    imageNotFound: false,\n  });\n\n  useEffect(() => {\n    mediaService\n      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })\n      .then((result) => {\n        if (result?.path) {\n          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));\n        } else {\n          throw new Error('Cannot generate thumbnail');\n        }\n      })\n      .catch(() => {\n        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));\n      });\n  }, []);\n\n  if (state.loading || state.imageNotFound) {\n    return (\n      <View style={[style, styles.container]}>\n        <PlayIcon />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Image\n        source={{ uri: state.thumbnail || fileUrl }}\n        style={style}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}\n      />\n      <PlayIcon />\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","useRetry","videoFileUrl","retryCount","state","setState","thumbnail","loading","retryCountRef","retryTimeoutRef","mediaService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","colors","fileUrl","style","styles","image","backgroundColor","onBackground04","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","alignItems","justifyContent","width","maxWidth","height","borderRadius","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (videoFileUrl: string, retryCount = 5) => {\n  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n  const retryCountRef = useRef(0);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  const { mediaService } = usePlatformService();\n\n  const fetchThumbnail = () => {\n    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {\n      setState({ loading: false, thumbnail: result?.path ?? null });\n    });\n  };\n\n  useEffect(() => {\n    if (!state.thumbnail) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            fetchThumbnail();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [state.thumbnail]);\n\n  return state;\n};\n\nconst VideoFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const { loading, thumbnail } = useRetry(fileUrl);\n\n  if (loading) {\n    return (\n      <View style={[style, styles.container]}>\n        <PlayIcon />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />\n      <PlayIcon />\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}

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

@@ -21,7 +21,8 @@ const MessageIncomingSenderName = _ref => {
     style: styles.sender
   }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Text, {
     caption1: true,
-    color: colors.ui.message.incoming.enabled.textSenderName
+    color: colors.ui.message.incoming.enabled.textSenderName,
+    numberOfLines: 1
   }, ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.nickname) || STRINGS.LABELS.USER_NO_NAME));
 };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageIncomingSenderName","message","grouping","colors","STRINGS","styles","sender","isFileMessage","isUserMessage","ui","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import 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\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingSenderName = ({ message, grouping }: Props) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAMA,MAAMC,yBAAyB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAClE,MAAM;IAAEC;EAAF,IAAaL,aAAa,EAAhC;EACA,MAAM;IAAEM;EAAF,IAAcL,eAAe,EAAnC;EACA,IAAIG,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,GACG,CAACL,OAAO,CAACM,aAAR,MAA2BN,OAAO,CAACO,aAAR,EAA5B,kBACC,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEL,MAAM,CAACM,EAAP,CAAUR,OAAV,CAAkBS,QAAlB,CAA2BC,OAA3B,CAAmCC;EAAzD,GACG,oBAAAX,OAAO,CAACK,MAAR,oEAAgBO,QAAhB,KAA4BT,OAAO,CAACU,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMV,MAAM,GAAGR,gBAAgB,CAAC;EAC9BS,MAAM,EAAE;IACNU,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAD,CAA/B;AAOA,eAAejB,yBAAf"}
+{"version":3,"names":["React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageIncomingSenderName","message","grouping","colors","STRINGS","styles","sender","isFileMessage","isUserMessage","ui","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import 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\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingSenderName = ({ message, grouping }: Props) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAMA,MAAMC,yBAAyB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAClE,MAAM;IAAEC;EAAF,IAAaL,aAAa,EAAhC;EACA,MAAM;IAAEM;EAAF,IAAcL,eAAe,EAAnC;EACA,IAAIG,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,GACG,CAACL,OAAO,CAACM,aAAR,MAA2BN,OAAO,CAACO,aAAR,EAA5B,kBACC,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEL,MAAM,CAACM,EAAP,CAAUR,OAAV,CAAkBS,QAAlB,CAA2BC,OAA3B,CAAmCC,cAAzD;IAAyE,aAAa,EAAE;EAAxF,GACG,oBAAAX,OAAO,CAACK,MAAR,oEAAgBO,QAAhB,KAA4BT,OAAO,CAACU,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMV,MAAM,GAAGR,gBAAgB,CAAC;EAC9BS,MAAM,EAAE;IACNU,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAD,CAA/B;AAOA,eAAejB,yBAAf"}

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

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
 import { useSendbirdChat } from '../../hooks/useContext';
 const SIZE = 16;
 
@@ -11,50 +11,21 @@ const MessageOutgoingStatus = _ref => {
   } = _ref;
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
   const {
-    sdk,
-    features
+    sdk
   } = useSendbirdChat();
   const {
     colors
   } = useUIKitTheme();
-  const uniqId = useUniqId('MessageOutgoingStatus');
-  const forceUpdate = useForceUpdate();
-  useEffect(() => {
-    const handlerId = `MessageOutgoingStatus_${uniqId}`;
+  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, message);
 
-    if (message.sendingStatus === 'succeeded' && channel.getUnreadMemberCount(message) === 0 && channel.getUndeliveredMemberCount(message) === 0) {
-      sdk.removeChannelHandler(handlerId);
-    } else {
-      const handler = new sdk.ChannelHandler();
-
-      handler.onReadReceiptUpdated = eventChannel => {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        forceUpdate();
-      };
-
-      if (features.deliveryReceiptEnabled) {
-        handler.onDeliveryReceiptUpdated = eventChannel => {
-          if (isDifferentChannel(channel, eventChannel)) return;
-          forceUpdate();
-        };
-      }
-
-      sdk.addChannelHandler(handlerId, handler);
-    }
-
-    return () => {
-      sdk.removeChannelHandler(handlerId);
-    };
-  }, [message.sendingStatus]);
-
-  if (message.sendingStatus === 'pending') {
+  if (outgoingStatus === 'PENDING') {
     return /*#__PURE__*/React.createElement(LoadingSpinner, {
       size: SIZE,
       style: styles.container
     });
   }
 
-  if (message.sendingStatus === 'failed') {
+  if (outgoingStatus === 'FAILED') {
     return /*#__PURE__*/React.createElement(Icon, {
       icon: 'error',
       size: SIZE,
@@ -63,7 +34,7 @@ const MessageOutgoingStatus = _ref => {
     });
   }
 
-  if (channel.getUnreadMemberCount(message) === 0) {
+  if (outgoingStatus === 'READ') {
     return /*#__PURE__*/React.createElement(Icon, {
       icon: 'done-all',
       size: SIZE,
@@ -72,16 +43,16 @@ const MessageOutgoingStatus = _ref => {
     });
   }
 
-  if (features.deliveryReceiptEnabled) {
-    if (channel.getUndeliveredMemberCount(message) === 0) {
-      return /*#__PURE__*/React.createElement(Icon, {
-        icon: 'done-all',
-        size: SIZE,
-        color: colors.onBackground03,
-        style: styles.container
-      });
-    }
+  if (outgoingStatus === 'UNREAD' || outgoingStatus === 'DELIVERED') {
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: 'done-all',
+      size: SIZE,
+      color: colors.onBackground03,
+      style: styles.container
+    });
+  }
 
+  if (outgoingStatus === 'UNDELIVERED') {
     return /*#__PURE__*/React.createElement(Icon, {
       icon: 'done',
       size: SIZE,
@@ -90,12 +61,7 @@ const MessageOutgoingStatus = _ref => {
     });
   }
 
-  return /*#__PURE__*/React.createElement(Icon, {
-    icon: 'done-all',
-    size: SIZE,
-    color: colors.onBackground03,
-    style: styles.container
-  });
+  return null;
 };
 
 const styles = createStyleSheet({

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Icon","LoadingSpinner","createStyleSheet","useUIKitTheme","isDifferentChannel","useForceUpdate","useUniqId","useSendbirdChat","SIZE","MessageOutgoingStatus","channel","message","isUserMessage","isFileMessage","sdk","features","colors","uniqId","forceUpdate","handlerId","sendingStatus","getUnreadMemberCount","getUndeliveredMemberCount","removeChannelHandler","handler","ChannelHandler","onReadReceiptUpdated","eventChannel","deliveryReceiptEnabled","onDeliveryReceiptUpdated","addChannelHandler","styles","container","error","secondary","onBackground03","marginRight","memo"],"sources":["MessageOutgoingStatus.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';\nimport { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../../hooks/useContext';\n\nconst SIZE = 16;\n\ntype Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };\nconst MessageOutgoingStatus = ({ channel, message }: Props) => {\n  if (!message.isUserMessage() && !message.isFileMessage()) return null;\n\n  const { sdk, features } = useSendbirdChat();\n  const { colors } = useUIKitTheme();\n\n  const uniqId = useUniqId('MessageOutgoingStatus');\n  const forceUpdate = useForceUpdate();\n\n  useEffect(() => {\n    const handlerId = `MessageOutgoingStatus_${uniqId}`;\n\n    if (\n      message.sendingStatus === 'succeeded' &&\n      channel.getUnreadMemberCount(message) === 0 &&\n      channel.getUndeliveredMemberCount(message) === 0\n    ) {\n      sdk.removeChannelHandler(handlerId);\n    } else {\n      const handler = new sdk.ChannelHandler();\n\n      handler.onReadReceiptUpdated = (eventChannel) => {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        forceUpdate();\n      };\n\n      if (features.deliveryReceiptEnabled) {\n        handler.onDeliveryReceiptUpdated = (eventChannel) => {\n          if (isDifferentChannel(channel, eventChannel)) return;\n          forceUpdate();\n        };\n      }\n\n      sdk.addChannelHandler(handlerId, handler);\n    }\n\n    return () => {\n      sdk.removeChannelHandler(handlerId);\n    };\n  }, [message.sendingStatus]);\n\n  if (message.sendingStatus === 'pending') {\n    return <LoadingSpinner size={SIZE} style={styles.container} />;\n  }\n\n  if (message.sendingStatus === 'failed') {\n    return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;\n  }\n\n  if (channel.getUnreadMemberCount(message) === 0) {\n    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;\n  }\n\n  if (features.deliveryReceiptEnabled) {\n    if (channel.getUndeliveredMemberCount(message) === 0) {\n      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n    }\n    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n  }\n\n  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    marginRight: 4,\n  },\n});\n\nexport default React.memo(MessageOutgoingStatus);\n"],"mappings":"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"}
+{"version":3,"names":["React","useMessageOutgoingStatus","Icon","LoadingSpinner","createStyleSheet","useUIKitTheme","useSendbirdChat","SIZE","MessageOutgoingStatus","channel","message","isUserMessage","isFileMessage","sdk","colors","outgoingStatus","styles","container","error","secondary","onBackground03","marginRight","memo"],"sources":["MessageOutgoingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';\nimport { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../../hooks/useContext';\n\nconst SIZE = 16;\n\ntype Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };\nconst MessageOutgoingStatus = ({ channel, message }: Props) => {\n  if (!message.isUserMessage() && !message.isFileMessage()) return null;\n\n  const { sdk } = useSendbirdChat();\n  const { colors } = useUIKitTheme();\n  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, message);\n\n  if (outgoingStatus === 'PENDING') {\n    return <LoadingSpinner size={SIZE} style={styles.container} />;\n  }\n\n  if (outgoingStatus === 'FAILED') {\n    return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;\n  }\n\n  if (outgoingStatus === 'READ') {\n    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;\n  }\n\n  if (outgoingStatus === 'UNREAD' || outgoingStatus === 'DELIVERED') {\n    return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n  }\n\n  if (outgoingStatus === 'UNDELIVERED') {\n    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n  }\n\n  return null;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    marginRight: 4,\n  },\n});\n\nexport default React.memo(MessageOutgoingStatus);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,wBAAT,QAAyC,4BAAzC;AACA,SAASC,IAAT,EAAeC,cAAf,EAA+BC,gBAA/B,EAAiDC,aAAjD,QAAsE,yCAAtE;AAGA,SAASC,eAAT,QAAgC,wBAAhC;AAEA,MAAMC,IAAI,GAAG,EAAb;;AAGA,MAAMC,qBAAqB,GAAG,QAAiC;EAAA,IAAhC;IAAEC,OAAF;IAAWC;EAAX,CAAgC;EAC7D,IAAI,CAACA,OAAO,CAACC,aAAR,EAAD,IAA4B,CAACD,OAAO,CAACE,aAAR,EAAjC,EAA0D,OAAO,IAAP;EAE1D,MAAM;IAAEC;EAAF,IAAUP,eAAe,EAA/B;EACA,MAAM;IAAEQ;EAAF,IAAaT,aAAa,EAAhC;EACA,MAAMU,cAAc,GAAGd,wBAAwB,CAACY,GAAD,EAAMJ,OAAN,EAAeC,OAAf,CAA/C;;EAEA,IAAIK,cAAc,KAAK,SAAvB,EAAkC;IAChC,oBAAO,oBAAC,cAAD;MAAgB,IAAI,EAAER,IAAtB;MAA4B,KAAK,EAAES,MAAM,CAACC;IAA1C,EAAP;EACD;;EAED,IAAIF,cAAc,KAAK,QAAvB,EAAiC;IAC/B,oBAAO,oBAAC,IAAD;MAAM,IAAI,EAAE,OAAZ;MAAqB,IAAI,EAAER,IAA3B;MAAiC,KAAK,EAAEO,MAAM,CAACI,KAA/C;MAAsD,KAAK,EAAEF,MAAM,CAACC;IAApE,EAAP;EACD;;EAED,IAAIF,cAAc,KAAK,MAAvB,EAA+B;IAC7B,oBAAO,oBAAC,IAAD;MAAM,IAAI,EAAE,UAAZ;MAAwB,IAAI,EAAER,IAA9B;MAAoC,KAAK,EAAEO,MAAM,CAACK,SAAlD;MAA6D,KAAK,EAAEH,MAAM,CAACC;IAA3E,EAAP;EACD;;EAED,IAAIF,cAAc,KAAK,QAAnB,IAA+BA,cAAc,KAAK,WAAtD,EAAmE;IACjE,oBAAO,oBAAC,IAAD;MAAM,IAAI,EAAE,UAAZ;MAAwB,IAAI,EAAER,IAA9B;MAAoC,KAAK,EAAEO,MAAM,CAACM,cAAlD;MAAkE,KAAK,EAAEJ,MAAM,CAACC;IAAhF,EAAP;EACD;;EAED,IAAIF,cAAc,KAAK,aAAvB,EAAsC;IACpC,oBAAO,oBAAC,IAAD;MAAM,IAAI,EAAE,MAAZ;MAAoB,IAAI,EAAER,IAA1B;MAAgC,KAAK,EAAEO,MAAM,CAACM,cAA9C;MAA8D,KAAK,EAAEJ,MAAM,CAACC;IAA5E,EAAP;EACD;;EAED,OAAO,IAAP;AACD,CA5BD;;AA8BA,MAAMD,MAAM,GAAGZ,gBAAgB,CAAC;EAC9Ba,SAAS,EAAE;IACTI,WAAW,EAAE;EADJ;AADmB,CAAD,CAA/B;AAMA,4BAAerB,KAAK,CAACsB,IAAN,CAAWd,qBAAX,CAAf"}

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

@@ -108,11 +108,13 @@ const MessageRenderer = _ref => {
   })), isIncoming && /*#__PURE__*/React.createElement(MessageIncomingAvatar, {
     message: message,
     grouping: groupWithNext
-  }), /*#__PURE__*/React.createElement(View, null, isIncoming && /*#__PURE__*/React.createElement(MessageIncomingSenderName, {
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.bubbleContainer
+  }, isIncoming && /*#__PURE__*/React.createElement(MessageIncomingSenderName, {
     message: message,
     grouping: groupWithPrev
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles.bubbleContainer
+    style: styles.bubbleWrapper
   }, messageComponent, isIncoming && /*#__PURE__*/React.createElement(MessageTime, {
     message: message,
     grouping: groupWithNext,
@@ -150,6 +152,9 @@ const styles = createStyleSheet({
     maxWidth: 240
   },
   bubbleContainer: {
+    flexShrink: 1
+  },
+  bubbleWrapper: {
     flexDirection: 'row',
     alignItems: 'flex-end'
   },

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","timeIncoming","flexDirection","justifyContent","alignItems","marginLeft","marginRight","marginBottom","maxWidth","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>\n            {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}\n            <View style={styles.bubbleContainer}>\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    flexDirection: 'row',\n    alignItems: 'flex-end',\n  },\n  outgoingContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default React.memo(MessageRenderer);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,IAApB,QAAgC,cAAhC;AAEA,SAASC,gBAAT,QAAiC,yCAAjC;AAEA,SAASC,mBAAT,EAA8BC,iBAA9B,EAAiDC,WAAjD,EAA8DC,OAA9D,QAA6E,uBAA7E;AAEA,SAASC,wBAAT,QAAyC,iBAAzC;AAEA,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;;AAaA,MAAMC,eAA+D,GAAG,QAOlE;EAAA,IAPmE;IACvEC,aADuE;IAEvEC,OAFuE;IAGvEC,OAHuE;IAIvEC,OAJuE;IAKvEC,WALuE;IAMvE,GAAGC;EANoE,CAOnE;EACJ,MAAMC,OAA4B,GAAGpB,WAAW,CAACgB,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,IAAmChC,mBAAmB,CAC1DiC,OAAO,CAACZ,IAAI,CAACa,qBAAN,CADmD,EAE1DhB,OAF0D,EAG1DG,IAAI,CAACc,WAHqD,EAI1Dd,IAAI,CAACe,WAJqD,CAA5D;EAOA,MAAMC,gBAAgB,GAAGlC,OAAO,CAAC,MAAM;IACrC,MAAMmC,cAAc,GAAG;MACrBC,KAAK,EAAEZ,MAAM,CAACa,YADO;MAErBC,QAAQ,EAAE,CAACtB,OAAD,IAAY,CAACC,WAFF;MAGrBD,OAHqB;MAIrBC,WAJqB;MAKrBsB,cAAc,EAAEtC;IALK,CAAvB;IAOA,MAAMuC,YAAY,GAAG,EAAE,GAAGtB,IAAL;MAAWC,OAAX;MAAoBU,aAApB;MAAmCD;IAAnC,CAArB;;IAEA,IAAIb,OAAO,CAAC0B,aAAR,EAAJ,EAA6B;MAC3B,oBACE,oBAAC,SAAD,EAAeN,cAAf,EACG;QAAA,IAAC;UAAEO;QAAF,CAAD;QAAA,oBAAiB,oBAAC,WAAD;UAAa,OAAO,EAAE3B,OAAtB;UAA+B,OAAO,EAAE2B;QAAxC,GAAqDF,YAArD,EAAjB;MAAA,CADH,CADF;IAKD;;IAED,IAAIzB,OAAO,CAAC4B,aAAR,EAAJ,EAA6B;MAC3B,oBACE,oBAAC,SAAD,EAAeR,cAAf,EACG;QAAA,IAAC;UAAEO;QAAF,CAAD;QAAA,oBAAiB,oBAAC,WAAD;UAAa,OAAO,EAAE3B,OAAtB;UAA+B,OAAO,EAAE2B;QAAxC,GAAqDF,YAArD,EAAjB;MAAA,CADH,CADF;IAKD;;IAED,IAAIzB,OAAO,CAAC6B,cAAR,EAAJ,EAA8B;MAC5B,oBAAO,oBAAC,YAAD;QAAc,OAAO,EAAE7B,OAAvB;QAAgC,OAAO,EAAE;MAAzC,GAAoDyB,YAApD,EAAP;IACD;;IAED,oBACE,oBAAC,SAAD,EAAeL,cAAf,EACG;MAAA,IAAC;QAAEO;MAAF,CAAD;MAAA,oBAAiB,oBAAC,cAAD;QAAgB,OAAO,EAAE3B,OAAzB;QAAkC,OAAO,EAAE2B;MAA3C,GAAwDF,YAAxD,EAAjB;IAAA,CADH,CADF;EAKD,CAnC+B,CAAhC;EAqCA,oBACE,oBAAC,gBAAD,qBACE,oBAAC,oBAAD;IAAsB,OAAO,EAAEzB,OAA/B;IAAwC,WAAW,EAAEG,IAAI,CAACc;EAA1D,EADF,EAEGjB,OAAO,CAAC6B,cAAR,MAA4BV,gBAF/B,EAGG,CAACnB,OAAO,CAAC6B,cAAR,EAAD,iBACC,oBAAC,IAAD;IACE,KAAK,EAAE,CACLtB,qBADK,EAELxB,iBAAiB,CACf,CAAC+B,aAAD,EAAgBC,OAAO,CAACZ,IAAI,CAACe,WAAN,CAAvB,CADe,EAEf,CAACT,MAAM,CAACqB,SAAR,EAAmBrB,MAAM,CAACsB,YAA1B,EAAwCtB,MAAM,CAACuB,eAA/C,CAFe,CAFZ;EADT,GASG3B,UAAU,iBACT,oBAAC,IAAD;IAAM,KAAK,EAAEI,MAAM,CAACwB;EAApB,gBACE,oBAAC,qBAAD;IAAuB,OAAO,EAAElC,OAAhC;IAAyC,OAAO,EAAEC;EAAlD,EADF,eAEE,oBAAC,WAAD;IAAa,OAAO,EAAEA,OAAtB;IAA+B,QAAQ,EAAEc,aAAzC;IAAwD,KAAK,EAAEL,MAAM,CAACyB;EAAtE,EAFF,CAVJ,EAeG5B,UAAU,iBAAI,oBAAC,qBAAD;IAAuB,OAAO,EAAEN,OAAhC;IAAyC,QAAQ,EAAEc;EAAnD,EAfjB,eAgBE,oBAAC,IAAD,QACGR,UAAU,iBAAI,oBAAC,yBAAD;IAA2B,OAAO,EAAEN,OAApC;IAA6C,QAAQ,EAAEa;EAAvD,EADjB,eAEE,oBAAC,IAAD;IAAM,KAAK,EAAEJ,MAAM,CAAC0B;EAApB,GACGhB,gBADH,EAEGb,UAAU,iBAAI,oBAAC,WAAD;IAAa,OAAO,EAAEN,OAAtB;IAA+B,QAAQ,EAAEc,aAAzC;IAAwD,KAAK,EAAEL,MAAM,CAAC2B;EAAtE,EAFjB,CAFF,CAhBF,CAJJ,CADF;AAgCD,CAzFD;;AA2FA,MAAM3B,MAAM,GAAG5B,gBAAgB,CAAC;EAC9B6B,YAAY,EAAE;IACZ2B,aAAa,EAAE,KADH;IAEZC,cAAc,EAAE,YAFJ;IAGZC,UAAU,EAAE;EAHA,CADgB;EAM9B3B,YAAY,EAAE;IACZyB,aAAa,EAAE,KADH;IAEZC,cAAc,EAAE,UAFJ;IAGZC,UAAU,EAAE;EAHA,CANgB;EAW9BH,YAAY,EAAE;IACZI,UAAU,EAAE;EADA,CAXgB;EAc9BN,YAAY,EAAE;IACZO,WAAW,EAAE;EADD,CAdgB;EAiB9BX,SAAS,EAAE;IACTY,YAAY,EAAE;EADL,CAjBmB;EAoB9BX,YAAY,EAAE;IACZW,YAAY,EAAE;EADF,CApBgB;EAuB9BV,eAAe,EAAE;IACfU,YAAY,EAAE;EADC,CAvBa;EA0B9BpB,YAAY,EAAE;IACZqB,QAAQ,EAAE;EADE,CA1BgB;EA6B9BR,eAAe,EAAE;IACfE,aAAa,EAAE,KADA;IAEfE,UAAU,EAAE;EAFG,CA7Ba;EAiC9BN,iBAAiB,EAAE;IACjBI,aAAa,EAAE,KADE;IAEjBE,UAAU,EAAE,QAFK;IAGjBD,cAAc,EAAE;EAHC;AAjCW,CAAD,CAA/B;AAwCA,4BAAe5D,KAAK,CAACkE,IAAN,CAAW/C,eAAX,CAAf"}
+{"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: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default React.memo(MessageRenderer);\n"],"mappings":"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"}

package/lib/module/{components → containers}/GroupChannelPreviewContainer.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
-import { GroupChannelPreview, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import Icon from '@sendbird/uikit-react-native-foundation/src/ui/Icon';
-import { getFileExtension, getFileType, isDifferentChannel, isMyMessage, useForceUpdate, useIIFE, useUniqId } from '@sendbird/uikit-utils';
+import { Pressable } from 'react-native';
+import { useChannelHandler, useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
+import { GroupChannelPreview, Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getFileExtension, getFileType, isDifferentChannel, isMyMessage, useIIFE, useUniqId } from '@sendbird/uikit-utils';
+import ChannelCover from '../components/ChannelCover';
+import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
-import ChannelCover from './ChannelCover';
-import SBUPressable from './SBUPressable';
 const iconMapper = {
   audio: 'file-audio',
   image: 'photo',
@@ -31,7 +31,6 @@ const GroupChannelPreviewContainer = _ref => {
     colors
   } = useUIKitTheme();
   const [typingUsers, setTypingUsers] = useState([]);
-  const forceUpdate = useForceUpdate();
 
   if (features.channelListTypingIndicatorEnabled) {
     const typingId = useUniqId('GroupChannelPreviewContainer');
@@ -44,26 +43,7 @@ const GroupChannelPreviewContainer = _ref => {
     });
   }
 
-  if (features.channelListMessageReceiptStatusEnabled) {
-    const receiptId = useUniqId('GroupChannelPreviewContainer');
-    useChannelHandler(sdk, `GroupChannelPreviewContainer_ReceiptStatus_${receiptId}`, {
-      onDeliveryReceiptUpdated(eventChannel) {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
-        if (!isMyMessage(eventChannel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return;
-        forceUpdate();
-      },
-
-      onReadReceiptUpdated(eventChannel) {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
-        if (!isMyMessage(eventChannel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return;
-        forceUpdate();
-      }
-
-    });
-  }
-
+  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, channel.lastMessage);
   const bodyText = useIIFE(() => {
     if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);
   });
@@ -71,6 +51,7 @@ const GroupChannelPreviewContainer = _ref => {
     var _channel$lastMessage;
 
     if (!((_channel$lastMessage = channel.lastMessage) !== null && _channel$lastMessage !== void 0 && _channel$lastMessage.isFileMessage())) return undefined;
+    if (typingUsers.length > 0) return undefined;
     return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
   });
   const titleCaptionIcon = useIIFE(() => {
@@ -78,14 +59,14 @@ const GroupChannelPreviewContainer = _ref => {
     if (!features.channelListMessageReceiptStatusEnabled) return undefined;
     if (!isMyMessage(channel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return undefined;
 
-    if (channel.lastMessage.sendingStatus === 'pending') {
+    if (outgoingStatus === 'PENDING') {
       return /*#__PURE__*/React.createElement(LoadingSpinner, {
         size: 16,
         style: styles.titleCaptionIcon
       });
     }
 
-    if (channel.lastMessage.sendingStatus === 'failed') {
+    if (outgoingStatus === 'FAILED') {
       return /*#__PURE__*/React.createElement(Icon, {
         icon: 'error',
         size: 16,
@@ -94,41 +75,37 @@ const GroupChannelPreviewContainer = _ref => {
       });
     }
 
-    if (channel.getUnreadMemberCount(channel.lastMessage) === 0) {
+    if (outgoingStatus === 'UNDELIVERED') {
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: 'done',
+        size: 16,
+        color: colors.onBackground03,
+        containerStyle: styles.titleCaptionIcon
+      });
+    }
+
+    if (outgoingStatus === 'DELIVERED' || outgoingStatus === 'UNREAD') {
       return /*#__PURE__*/React.createElement(Icon, {
         icon: 'done-all',
         size: 16,
-        color: colors.secondary,
+        color: colors.onBackground03,
         style: styles.titleCaptionIcon
       });
     }
 
-    if (features.deliveryReceiptEnabled) {
-      if (channel.getUndeliveredMemberCount(channel.lastMessage) === 0) {
-        return /*#__PURE__*/React.createElement(Icon, {
-          icon: 'done-all',
-          size: 16,
-          color: colors.onBackground03,
-          style: styles.titleCaptionIcon
-        });
-      }
-
+    if (outgoingStatus === 'READ') {
       return /*#__PURE__*/React.createElement(Icon, {
-        icon: 'done',
+        icon: 'done-all',
         size: 16,
-        color: colors.onBackground03,
-        containerStyle: styles.titleCaptionIcon
+        color: colors.secondary,
+        style: styles.titleCaptionIcon
       });
     }
 
-    return /*#__PURE__*/React.createElement(Icon, {
-      icon: 'done-all',
-      size: 16,
-      color: colors.onBackground03,
-      style: styles.titleCaptionIcon
-    });
+    return undefined;
   });
-  return /*#__PURE__*/React.createElement(SBUPressable, {
+  return /*#__PURE__*/React.createElement(Pressable, {
+    delayLongPress: DEFAULT_LONG_PRESS_DELAY,
     onPress: onPress,
     onLongPress: onLongPress
   }, /*#__PURE__*/React.createElement(GroupChannelPreview, {

package/lib/module/containers/GroupChannelPreviewContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","useChannelHandler","useMessageOutgoingStatus","GroupChannelPreview","Icon","LoadingSpinner","createStyleSheet","useUIKitTheme","getFileExtension","getFileType","isDifferentChannel","isMyMessage","useIIFE","useUniqId","ChannelCover","DEFAULT_LONG_PRESS_DELAY","useLocalization","useSendbirdChat","iconMapper","audio","image","video","file","GroupChannelPreviewContainer","onPress","onLongPress","channel","currentUser","sdk","features","STRINGS","colors","typingUsers","setTypingUsers","channelListTypingIndicatorEnabled","typingId","onTypingStatusUpdated","eventChannel","getTypingUsers","outgoingStatus","lastMessage","bodyText","length","LABELS","TYPING_INDICATOR_TYPINGS","GROUP_CHANNEL_LIST","CHANNEL_PREVIEW_BODY","bodyIcon","isFileMessage","undefined","type","name","titleCaptionIcon","channelListMessageReceiptStatusEnabled","userId","styles","error","onBackground03","secondary","coverUrl","CHANNEL_PREVIEW_TITLE","CHANNEL_PREVIEW_TITLE_CAPTION","unreadMessageCount","memberCount","isFrozen","myPushTriggerOption","marginRight"],"sources":["GroupChannelPreviewContainer.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Pressable } from 'react-native';\n\nimport { useChannelHandler, useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';\nimport {\n  GroupChannelPreview,\n  Icon,\n  LoadingSpinner,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdGroupChannel,\n  SendbirdUser,\n  getFileExtension,\n  getFileType,\n  isDifferentChannel,\n  isMyMessage,\n  useIIFE,\n  useUniqId,\n} from '@sendbird/uikit-utils';\n\nimport ChannelCover from '../components/ChannelCover';\nimport { DEFAULT_LONG_PRESS_DELAY } from '../constants';\nimport { useLocalization, useSendbirdChat } from '../hooks/useContext';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = {\n  channel: SendbirdGroupChannel;\n  onPress: () => void;\n  onLongPress: () => void;\n};\nconst GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props) => {\n  const { currentUser, sdk, features } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n\n  const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);\n\n  if (features.channelListTypingIndicatorEnabled) {\n    const typingId = useUniqId('GroupChannelPreviewContainer');\n    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {\n      onTypingStatusUpdated(eventChannel) {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        setTypingUsers(eventChannel.getTypingUsers());\n      },\n    });\n  }\n\n  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, channel.lastMessage);\n\n  const bodyText = useIIFE(() => {\n    if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';\n    else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);\n  });\n\n  const bodyIcon = useIIFE(() => {\n    if (!channel.lastMessage?.isFileMessage()) return undefined;\n    if (typingUsers.length > 0) return undefined;\n    return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];\n  });\n\n  const titleCaptionIcon = useIIFE(() => {\n    if (!channel.lastMessage) return undefined;\n    if (!features.channelListMessageReceiptStatusEnabled) return undefined;\n    if (!isMyMessage(channel.lastMessage, currentUser?.userId)) return undefined;\n\n    if (outgoingStatus === 'PENDING') {\n      return <LoadingSpinner size={16} style={styles.titleCaptionIcon} />;\n    }\n\n    if (outgoingStatus === 'FAILED') {\n      return <Icon icon={'error'} size={16} color={colors.error} style={styles.titleCaptionIcon} />;\n    }\n\n    if (outgoingStatus === 'UNDELIVERED') {\n      return <Icon icon={'done'} size={16} color={colors.onBackground03} containerStyle={styles.titleCaptionIcon} />;\n    }\n\n    if (outgoingStatus === 'DELIVERED' || outgoingStatus === 'UNREAD') {\n      return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;\n    }\n\n    if (outgoingStatus === 'READ') {\n      return <Icon icon={'done-all'} size={16} color={colors.secondary} style={styles.titleCaptionIcon} />;\n    }\n\n    return undefined;\n  });\n\n  return (\n    <Pressable delayLongPress={DEFAULT_LONG_PRESS_DELAY} onPress={onPress} onLongPress={onLongPress}>\n      <GroupChannelPreview\n        customCover={<ChannelCover channel={channel} size={56} />}\n        coverUrl={channel.coverUrl}\n        title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}\n        titleCaptionLeft={titleCaptionIcon}\n        titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}\n        body={bodyText}\n        bodyIcon={bodyIcon}\n        badgeCount={channel.unreadMessageCount}\n        memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}\n        frozen={channel.isFrozen}\n        notificationOff={channel.myPushTriggerOption === 'off'}\n      />\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  titleCaptionIcon: {\n    marginRight: 4,\n  },\n});\n\nexport default GroupChannelPreviewContainer;\n"],"mappings":"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"}

package/lib/module/{InternalErrorBoundary.js → containers/InternalErrorBoundaryContainer.js}

@@ -2,7 +2,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import React from 'react';
 import { View } from 'react-native';
-import TypedPlaceholder from './components/TypedPlaceholder';
+import TypedPlaceholder from '../components/TypedPlaceholder';
 
 const DefaultErrorBoundaryComponent = props => {
   return /*#__PURE__*/React.createElement(View, {
@@ -17,7 +17,7 @@ const DefaultErrorBoundaryComponent = props => {
   }));
 };
 
-class InternalErrorBoundary extends React.PureComponent {
+class InternalErrorBoundaryContainer extends React.PureComponent {
   constructor() {
     super(...arguments);
 
@@ -64,9 +64,9 @@ class InternalErrorBoundary extends React.PureComponent {
 
 }
 
-_defineProperty(InternalErrorBoundary, "defaultProps", {
+_defineProperty(InternalErrorBoundaryContainer, "defaultProps", {
   ErrorInfoComponent: DefaultErrorBoundaryComponent
 });
 
-export default InternalErrorBoundary;
-//# sourceMappingURL=InternalErrorBoundary.js.map
+export default InternalErrorBoundaryContainer;
+//# sourceMappingURL=InternalErrorBoundaryContainer.js.map

package/lib/module/containers/InternalErrorBoundaryContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","TypedPlaceholder","DefaultErrorBoundaryComponent","props","flex","justifyContent","alignItems","reset","InternalErrorBoundaryContainer","PureComponent","error","errorInfo","setState","onError","state","ErrorInfoComponent","children"],"sources":["InternalErrorBoundaryContainer.tsx"],"sourcesContent":["import React, { ErrorInfo } from 'react';\nimport { View } from 'react-native';\n\nimport TypedPlaceholder from '../components/TypedPlaceholder';\nimport type { ErrorBoundaryProps } from '../types';\n\nconst DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <TypedPlaceholder type={'error-wrong'} onPressRetry={props.reset} />\n    </View>\n  );\n};\n\nclass InternalErrorBoundaryContainer extends React.PureComponent<{\n  onError?: (props: ErrorBoundaryProps) => void;\n  ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;\n  children?: React.ReactNode;\n}> {\n  static defaultProps = {\n    ErrorInfoComponent: DefaultErrorBoundaryComponent,\n  };\n\n  state: { error: Error | null; errorInfo: ErrorInfo | null } = {\n    error: null,\n    errorInfo: null,\n  };\n\n  componentDidCatch = (error: Error, errorInfo: ErrorInfo) => {\n    this.setState({ error, errorInfo });\n    this.props.onError?.({ error, errorInfo, reset: this.reset });\n  };\n\n  reset = () => {\n    this.setState({ error: null, errorInfo: null });\n  };\n\n  render = () => {\n    if (this.state.error && this.state.errorInfo) {\n      return (\n        this.props.ErrorInfoComponent?.({\n          error: this.state.error,\n          errorInfo: this.state.errorInfo,\n          reset: this.reset,\n        }) ?? null\n      );\n    }\n\n    return <>{this.props.children}</>;\n  };\n}\n\nexport default InternalErrorBoundaryContainer;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAiC,OAAjC;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,gBAAP,MAA6B,gCAA7B;;AAGA,MAAMC,6BAA6B,GAAIC,KAAD,IAA+B;EACnE,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE;MAAEC,IAAI,EAAE,CAAR;MAAWC,cAAc,EAAE,QAA3B;MAAqCC,UAAU,EAAE;IAAjD;EAAb,gBACE,oBAAC,gBAAD;IAAkB,IAAI,EAAE,aAAxB;IAAuC,YAAY,EAAEH,KAAK,CAACI;EAA3D,EADF,CADF;AAKD,CAND;;AAQA,MAAMC,8BAAN,SAA6CT,KAAK,CAACU,aAAnD,CAIG;EAAA;IAAA;;IAAA,+BAK6D;MAC5DC,KAAK,EAAE,IADqD;MAE5DC,SAAS,EAAE;IAFiD,CAL7D;;IAAA,2CAUmB,CAACD,KAAD,EAAeC,SAAf,KAAwC;MAAA;;MAC1D,KAAKC,QAAL,CAAc;QAAEF,KAAF;QAASC;MAAT,CAAd;MACA,2CAAKR,KAAL,EAAWU,OAAX,8FAAqB;QAAEH,KAAF;QAASC,SAAT;QAAoBJ,KAAK,EAAE,KAAKA;MAAhC,CAArB;IACD,CAbA;;IAAA,+BAeO,MAAM;MACZ,KAAKK,QAAL,CAAc;QAAEF,KAAK,EAAE,IAAT;QAAeC,SAAS,EAAE;MAA1B,CAAd;IACD,CAjBA;;IAAA,gCAmBQ,MAAM;MACb,IAAI,KAAKG,KAAL,CAAWJ,KAAX,IAAoB,KAAKI,KAAL,CAAWH,SAAnC,EAA8C;QAAA;;QAC5C,OACE,+CAAKR,KAAL,EAAWY,kBAAX,mGAAgC;UAC9BL,KAAK,EAAE,KAAKI,KAAL,CAAWJ,KADY;UAE9BC,SAAS,EAAE,KAAKG,KAAL,CAAWH,SAFQ;UAG9BJ,KAAK,EAAE,KAAKA;QAHkB,CAAhC,MAIM,IALR;MAOD;;MAED,oBAAO,0CAAG,KAAKJ,KAAL,CAAWa,QAAd,CAAP;IACD,CA/BA;EAAA;;AAAA;;gBAJGR,8B,kBAKkB;EACpBO,kBAAkB,EAAEb;AADA,C;;AAiCxB,eAAeM,8BAAf"}