@sendbird/uikit-react-native 2.1.0 → 2.3.0

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { truncatedCount } from '@sendbird/uikit-utils';
+
+const ReactionRoundedButton = _ref => {
+  let {
+    url,
+    count,
+    reacted,
+    style
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.reaction.rounded;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.reactionContainer, {
+      backgroundColor: reacted ? color.selected.background : color.enabled.background
+    }, style]
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: url
+    },
+    style: styles.emoji
+  }), /*#__PURE__*/React.createElement(Text, {
+    caption4: true,
+    color: colors.onBackground01,
+    numberOfLines: 1,
+    style: styles.count
+  }, truncatedCount(count, 99, '')));
+};
+
+ReactionRoundedButton.More = _ref2 => {
+  let {
+    pressed
+  } = _ref2;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.reaction.rounded;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.reactionContainer, {
+      backgroundColor: pressed ? color.selected.background : color.enabled.background
+    }]
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'emoji-more',
+    color: colors.onBackground03,
+    size: 20
+  }));
+};
+
+const styles = createStyleSheet({
+  reactionContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 52,
+    borderRadius: 24,
+    paddingVertical: 5,
+    paddingHorizontal: 8
+  },
+  emoji: {
+    width: 20,
+    height: 20,
+    marginRight: 4
+  },
+  count: {
+    width: 13,
+    textAlign: 'left'
+  }
+});
+export default ReactionRoundedButton;
+//# sourceMappingURL=ReactionRoundedButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Icon","Image","Text","createStyleSheet","useUIKitTheme","truncatedCount","ReactionRoundedButton","url","count","reacted","style","colors","color","ui","reaction","rounded","styles","reactionContainer","backgroundColor","selected","background","enabled","uri","emoji","onBackground01","More","pressed","onBackground03","flexDirection","justifyContent","alignItems","width","borderRadius","paddingVertical","paddingHorizontal","height","marginRight","textAlign"],"sources":["ReactionRoundedButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { truncatedCount } from '@sendbird/uikit-utils';\n\ntype Props = {\n  url: string;\n  count: number;\n  reacted: boolean;\n  style: StyleProp<ViewStyle>;\n};\n\nconst ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: reacted ? color.selected.background : color.enabled.background },\n        style,\n      ]}\n    >\n      <Image source={{ uri: url }} style={styles.emoji} />\n      <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>\n        {truncatedCount(count, 99, '')}\n      </Text>\n    </View>\n  );\n};\n\nReactionRoundedButton.More = ({ pressed }: { pressed: boolean }) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.reaction.rounded;\n\n  return (\n    <View\n      style={[\n        styles.reactionContainer,\n        { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n      ]}\n    >\n      <Icon icon={'emoji-more'} color={colors.onBackground03} size={20} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  reactionContainer: {\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: 52,\n    borderRadius: 24,\n    paddingVertical: 5,\n    paddingHorizontal: 8,\n  },\n  emoji: {\n    width: 20,\n    height: 20,\n    marginRight: 4,\n  },\n  count: {\n    width: 13,\n    textAlign: 'left',\n  },\n});\n\nexport default ReactionRoundedButton;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,IAAtB,EAA4BC,gBAA5B,EAA8CC,aAA9C,QAAmE,yCAAnE;AACA,SAASC,cAAT,QAA+B,uBAA/B;;AASA,MAAMC,qBAAqB,GAAG,QAA2C;EAAA,IAA1C;IAAEC,GAAF;IAAOC,KAAP;IAAcC,OAAd;IAAuBC;EAAvB,CAA0C;EACvE,MAAM;IAAEC;EAAF,IAAaP,aAAa,EAAhC;EACA,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUC,QAAV,CAAmBC,OAAjC;EAEA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLC,MAAM,CAACC,iBADF,EAEL;MAAEC,eAAe,EAAET,OAAO,GAAGG,KAAK,CAACO,QAAN,CAAeC,UAAlB,GAA+BR,KAAK,CAACS,OAAN,CAAcD;IAAvE,CAFK,EAGLV,KAHK;EADT,gBAOE,oBAAC,KAAD;IAAO,MAAM,EAAE;MAAEY,GAAG,EAAEf;IAAP,CAAf;IAA6B,KAAK,EAAES,MAAM,CAACO;EAA3C,EAPF,eAQE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEZ,MAAM,CAACa,cAA7B;IAA6C,aAAa,EAAE,CAA5D;IAA+D,KAAK,EAAER,MAAM,CAACR;EAA7E,GACGH,cAAc,CAACG,KAAD,EAAQ,EAAR,EAAY,EAAZ,CADjB,CARF,CADF;AAcD,CAlBD;;AAoBAF,qBAAqB,CAACmB,IAAtB,GAA6B,SAAuC;EAAA,IAAtC;IAAEC;EAAF,CAAsC;EAClE,MAAM;IAAEf;EAAF,IAAaP,aAAa,EAAhC;EACA,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUC,QAAV,CAAmBC,OAAjC;EAEA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLC,MAAM,CAACC,iBADF,EAEL;MAAEC,eAAe,EAAEQ,OAAO,GAAGd,KAAK,CAACO,QAAN,CAAeC,UAAlB,GAA+BR,KAAK,CAACS,OAAN,CAAcD;IAAvE,CAFK;EADT,gBAME,oBAAC,IAAD;IAAM,IAAI,EAAE,YAAZ;IAA0B,KAAK,EAAET,MAAM,CAACgB,cAAxC;IAAwD,IAAI,EAAE;EAA9D,EANF,CADF;AAUD,CAdD;;AAgBA,MAAMX,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,iBAAiB,EAAE;IACjBW,aAAa,EAAE,KADE;IAEjBC,cAAc,EAAE,QAFC;IAGjBC,UAAU,EAAE,QAHK;IAIjBC,KAAK,EAAE,EAJU;IAKjBC,YAAY,EAAE,EALG;IAMjBC,eAAe,EAAE,CANA;IAOjBC,iBAAiB,EAAE;EAPF,CADW;EAU9BX,KAAK,EAAE;IACLQ,KAAK,EAAE,EADF;IAELI,MAAM,EAAE,EAFH;IAGLC,WAAW,EAAE;EAHR,CAVuB;EAe9B5B,KAAK,EAAE;IACLuB,KAAK,EAAE,EADF;IAELM,SAAS,EAAE;EAFN;AAfuB,CAAD,CAA/B;AAqBA,eAAe/B,qBAAf"}

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

@@ -0,0 +1,7 @@
+import BottomSheet from './BottomSheetReactionAddon';
+import Message from './MessageReactionAddon';
+export const ReactionAddons = {
+  BottomSheet,
+  Message
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { UNKNOWN_USER_ID } from '../../constants';
+const NUM_COLUMN = 6;
+
+const ReactionListBottomSheet = _ref => {
+  let {
+    visible,
+    onClose,
+    onDismiss,
+    reactionCtx,
+    chatCtx
+  } = _ref;
+  const {
+    width
+  } = useWindowDimensions();
+  const {
+    bottom,
+    left,
+    right
+  } = useSafeAreaInsets();
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    currentUser,
+    emojiManager
+  } = chatCtx;
+  const {
+    channel,
+    message
+  } = reactionCtx;
+  const color = colors.ui.reaction.default;
+  return /*#__PURE__*/React.createElement(Modal, {
+    type: 'slide',
+    visible: Boolean(visible && channel && message),
+    onClose: onClose,
+    onDismiss: onDismiss,
+    backgroundStyle: styles.modal
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      width,
+      paddingBottom: bottom,
+      backgroundColor: colors.ui.dialog.default.none.background,
+      paddingLeft: left + styles.container.paddingHorizontal,
+      paddingRight: right + styles.container.paddingHorizontal
+    }]
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: emojiManager.allEmoji,
+    numColumns: NUM_COLUMN,
+    keyExtractor: item => item.key,
+    contentContainerStyle: styles.flatlist,
+    ItemSeparatorComponent: () => /*#__PURE__*/React.createElement(View, {
+      style: {
+        height: 16
+      }
+    }),
+    renderItem: _ref2 => {
+      var _message$reactions, _message$reactions$fi;
+
+      let {
+        item: {
+          key,
+          url
+        }
+      } = _ref2;
+      const reactedUserIds = (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 idx = reactedUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? UNKNOWN_USER_ID);
+      const reacted = idx > -1;
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.emojiItem
+      }, /*#__PURE__*/React.createElement(Pressable, {
+        key: key,
+        onPress: () => {
+          if (message && channel) {
+            if (reacted) channel.deleteReaction(message, key);else channel.addReaction(message, key);
+          }
+
+          onClose();
+        },
+        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
+      })));
+    }
+  })));
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    paddingTop: 16,
+    paddingHorizontal: 18,
+    flexDirection: 'row'
+  },
+  modal: {
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  flatlist: {
+    width: '100%',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  },
+  emojiItem: {
+    width: `${100 / NUM_COLUMN}%`,
+    alignItems: 'center'
+  },
+  button: {
+    width: 44,
+    height: 44,
+    padding: 4,
+    borderRadius: 8
+  },
+  emoji: {
+    width: '100%',
+    height: '100%'
+  }
+});
+export default ReactionListBottomSheet;
+//# sourceMappingURL=ReactionListBottomSheet.js.map

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

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

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

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Avatar, Divider, Image, Modal, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getReactionCount, truncatedCount } from '@sendbird/uikit-utils';
+
+const ReactionUserListBottomSheet = _ref => {
+  let {
+    visible,
+    onClose,
+    onDismiss,
+    reactionCtx,
+    chatCtx,
+    localizationCtx,
+    userProfileCtx
+  } = _ref;
+  const {
+    width
+  } = useWindowDimensions();
+  const {
+    bottom,
+    left,
+    right
+  } = useSafeAreaInsets();
+  const {
+    colors
+  } = useUIKitTheme();
+  const [tabIndex, setTabIndex] = useState(0);
+  const scrollRef = useRef();
+  const tabIndicatorValue = useRef([]);
+  const tabIndicatorAnimated = useRef({
+    x: new Animated.Value(0),
+    width: new Animated.Value(0)
+  }).current;
+  const focusedWithLayoutCalculated = useRef(false);
+  const {
+    emojiManager
+  } = chatCtx;
+  const {
+    channel,
+    message,
+    focusIndex
+  } = reactionCtx;
+  const {
+    STRINGS
+  } = localizationCtx;
+  const color = colors.ui.reaction.default;
+  const reactions = (message === null || message === void 0 ? void 0 : message.reactions) ?? [];
+  const focusedReaction = reactions[tabIndex];
+  const containerSafeArea = {
+    paddingLeft: left + styles.layout.paddingHorizontal,
+    paddingRight: right + styles.layout.paddingHorizontal
+  };
+
+  const focusTab = function (index) {
+    let animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const indicatorValue = tabIndicatorValue.current[index];
+
+    if (indicatorValue) {
+      var _scrollRef$current;
+
+      setTabIndex(index);
+      animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);
+      (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo({
+        x: indicatorValue.x,
+        animated
+      });
+    }
+  };
+
+  const animateTabIndicator = function (x, width) {
+    let animated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    const baseConfig = {
+      duration: animated ? 300 : 0,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false
+    };
+    Animated.parallel([Animated.timing(tabIndicatorAnimated.x, {
+      toValue: x,
+      ...baseConfig
+    }), Animated.timing(tabIndicatorAnimated.width, {
+      toValue: width,
+      ...baseConfig
+    })]).start();
+  };
+
+  const layoutCalculated = () => {
+    return tabIndicatorValue.current.length === reactions.length && tabIndicatorValue.current.every(Boolean);
+  };
+
+  useEffect(() => {
+    if (!visible) {
+      tabIndicatorValue.current = [];
+      tabIndicatorAnimated.x = new Animated.Value(0);
+      tabIndicatorAnimated.width = new Animated.Value(0);
+      focusedWithLayoutCalculated.current = false;
+    }
+  }, [visible]);
+
+  const renderTabs = () => {
+    return /*#__PURE__*/React.createElement(Pressable, {
+      style: styles.tabsWrapper
+    }, reactions.map((reaction, index) => {
+      const isFocused = (focusedReaction === null || focusedReaction === void 0 ? void 0 : focusedReaction.key) === reaction.key;
+      const isLastItem = reactions.length - 1 === index;
+      const emoji = emojiManager.allEmojiMap[reaction.key];
+      return /*#__PURE__*/React.createElement(Pressable, {
+        key: reaction.key,
+        style: [styles.tabItem, isLastItem && {
+          marginRight: styles.layout.marginRight
+        }],
+        onPress: () => focusTab(index),
+        onLayout: e => {
+          tabIndicatorValue.current[index] = e.nativeEvent.layout;
+
+          if (layoutCalculated()) {
+            if (focusedWithLayoutCalculated.current) {
+              focusTab(tabIndex, false);
+            } else {
+              focusedWithLayoutCalculated.current = true;
+              focusTab(focusIndex);
+            }
+          }
+        }
+      }, /*#__PURE__*/React.createElement(Image, {
+        source: {
+          uri: emoji.url
+        },
+        style: styles.tabEmoji
+      }), /*#__PURE__*/React.createElement(Text, {
+        button: true,
+        color: isFocused ? color.selected.highlight : color.enabled.highlight
+      }, truncatedCount(getReactionCount(reaction))));
+    }), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles.tabIndicator, {
+        left: tabIndicatorAnimated.x,
+        width: tabIndicatorAnimated.width,
+        backgroundColor: color.selected.highlight
+      }]
+    }));
+  };
+
+  const renderPage = () => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, focusedReaction === null || focusedReaction === void 0 ? void 0 : focusedReaction.userIds.map(userId => {
+      if (channel !== null && channel !== void 0 && channel.isGroupChannel()) {
+        const user = channel.members.find(x => x.userId === userId);
+        return /*#__PURE__*/React.createElement(Pressable, {
+          key: userId,
+          onPress: async () => {
+            if (user) {
+              await onClose();
+              userProfileCtx.show(user);
+            }
+          },
+          style: styles.pageItem
+        }, /*#__PURE__*/React.createElement(Avatar, {
+          size: 36,
+          uri: user === null || user === void 0 ? void 0 : user.profileUrl,
+          containerStyle: styles.avatar
+        }), /*#__PURE__*/React.createElement(Text, {
+          subtitle2: true,
+          style: {
+            flex: 1
+          }
+        }, (user === null || user === void 0 ? void 0 : user.nickname) || STRINGS.LABELS.USER_NO_NAME));
+      }
+
+      return null;
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    type: 'slide-no-gesture',
+    visible: Boolean(visible && channel && message),
+    onClose: onClose,
+    onDismiss: onDismiss,
+    backgroundStyle: styles.modal
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      width,
+      paddingBottom: bottom,
+      backgroundColor: colors.ui.dialog.default.none.background
+    }]
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    ref: scrollRef,
+    horizontal: true,
+    bounces: false,
+    showsHorizontalScrollIndicator: false,
+    contentContainerStyle: [containerSafeArea, styles.tabsContainer]
+  }, renderTabs()), /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      top: -1
+    }
+  }), /*#__PURE__*/React.createElement(ScrollView, {
+    bounces: false,
+    showsVerticalScrollIndicator: false,
+    style: styles.pageContainer,
+    contentContainerStyle: containerSafeArea
+  }, renderPage())));
+};
+
+const styles = createStyleSheet({
+  layout: {
+    paddingHorizontal: 16,
+    marginRight: 0
+  },
+  container: {
+    overflow: 'hidden',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    paddingTop: 16,
+    alignItems: 'center'
+  },
+  modal: {
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  tabsContainer: {
+    flexGrow: 1
+  },
+  tabsWrapper: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    height: 44
+  },
+  tabItem: {
+    marginRight: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tabEmoji: {
+    width: 28,
+    height: 28,
+    marginRight: 4
+  },
+  tabIndicator: {
+    position: 'absolute',
+    bottom: 0,
+    height: 3
+  },
+  pageContainer: {
+    height: 216,
+    width: '100%'
+  },
+  pageItem: {
+    flexDirection: 'row',
+    width: '100%',
+    height: 48,
+    alignItems: 'center'
+  },
+  avatar: {
+    marginRight: 16
+  }
+});
+export default ReactionUserListBottomSheet;
+//# sourceMappingURL=ReactionUserListBottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","Animated","Easing","Pressable","ScrollView","View","useWindowDimensions","useSafeAreaInsets","Avatar","Divider","Image","Modal","Text","createStyleSheet","useUIKitTheme","getReactionCount","truncatedCount","ReactionUserListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","localizationCtx","userProfileCtx","width","bottom","left","right","colors","tabIndex","setTabIndex","scrollRef","tabIndicatorValue","tabIndicatorAnimated","x","Value","current","focusedWithLayoutCalculated","emojiManager","channel","message","focusIndex","STRINGS","color","ui","reaction","default","reactions","focusedReaction","containerSafeArea","paddingLeft","styles","layout","paddingHorizontal","paddingRight","focusTab","index","animated","indicatorValue","animateTabIndicator","scrollTo","baseConfig","duration","easing","inOut","ease","useNativeDriver","parallel","timing","toValue","start","layoutCalculated","length","every","Boolean","renderTabs","tabsWrapper","map","isFocused","key","isLastItem","emoji","allEmojiMap","tabItem","marginRight","e","nativeEvent","uri","url","tabEmoji","selected","highlight","enabled","tabIndicator","backgroundColor","renderPage","userIds","userId","isGroupChannel","user","members","find","show","pageItem","profileUrl","avatar","flex","nickname","LABELS","USER_NO_NAME","modal","container","paddingBottom","dialog","none","background","tabsContainer","top","pageContainer","overflow","borderTopLeftRadius","borderTopRightRadius","paddingTop","alignItems","justifyContent","flexGrow","flexDirection","height","position"],"sources":["ReactionUserListBottomSheet.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Easing, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport {\n  Avatar,\n  Divider,\n  Image,\n  Modal,\n  Text,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdReaction, getReactionCount, truncatedCount } from '@sendbird/uikit-utils';\n\nimport type { ReactionBottomSheetProps } from './index';\n\nconst ReactionUserListBottomSheet = ({\n  visible,\n  onClose,\n  onDismiss,\n  reactionCtx,\n  chatCtx,\n  localizationCtx,\n  userProfileCtx,\n}: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const { bottom, left, right } = useSafeAreaInsets();\n  const { colors } = useUIKitTheme();\n\n  const [tabIndex, setTabIndex] = useState(0);\n  const scrollRef = useRef<ScrollView>();\n  const tabIndicatorValue = useRef<Array<{ x: number; width: number }>>([]);\n  const tabIndicatorAnimated = useRef({ x: new Animated.Value(0), width: new Animated.Value(0) }).current;\n  const focusedWithLayoutCalculated = useRef(false);\n\n  const { emojiManager } = chatCtx;\n  const { channel, message, focusIndex } = reactionCtx;\n  const { STRINGS } = localizationCtx;\n\n  const color = colors.ui.reaction.default;\n  const reactions = message?.reactions ?? [];\n  const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;\n  const containerSafeArea = {\n    paddingLeft: left + styles.layout.paddingHorizontal,\n    paddingRight: right + styles.layout.paddingHorizontal,\n  };\n\n  const focusTab = (index: number, animated = true) => {\n    const indicatorValue = tabIndicatorValue.current[index];\n    if (indicatorValue) {\n      setTabIndex(index);\n      animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);\n      scrollRef.current?.scrollTo({ x: indicatorValue.x, animated });\n    }\n  };\n\n  const animateTabIndicator = (x: number, width: number, animated = true) => {\n    const baseConfig = { duration: animated ? 300 : 0, easing: Easing.inOut(Easing.ease), useNativeDriver: false };\n    Animated.parallel([\n      Animated.timing(tabIndicatorAnimated.x, { toValue: x, ...baseConfig }),\n      Animated.timing(tabIndicatorAnimated.width, { toValue: width, ...baseConfig }),\n    ]).start();\n  };\n\n  const layoutCalculated = () => {\n    return tabIndicatorValue.current.length === reactions.length && tabIndicatorValue.current.every(Boolean);\n  };\n\n  useEffect(() => {\n    if (!visible) {\n      tabIndicatorValue.current = [];\n      tabIndicatorAnimated.x = new Animated.Value(0);\n      tabIndicatorAnimated.width = new Animated.Value(0);\n      focusedWithLayoutCalculated.current = false;\n    }\n  }, [visible]);\n\n  const renderTabs = () => {\n    return (\n      <Pressable style={styles.tabsWrapper}>\n        {reactions.map((reaction, index) => {\n          const isFocused = focusedReaction?.key === reaction.key;\n          const isLastItem = reactions.length - 1 === index;\n          const emoji = emojiManager.allEmojiMap[reaction.key];\n\n          return (\n            <Pressable\n              key={reaction.key}\n              style={[styles.tabItem, isLastItem && { marginRight: styles.layout.marginRight }]}\n              onPress={() => focusTab(index)}\n              onLayout={(e) => {\n                tabIndicatorValue.current[index] = e.nativeEvent.layout;\n                if (layoutCalculated()) {\n                  if (focusedWithLayoutCalculated.current) {\n                    focusTab(tabIndex, false);\n                  } else {\n                    focusedWithLayoutCalculated.current = true;\n                    focusTab(focusIndex);\n                  }\n                }\n              }}\n            >\n              <Image source={{ uri: emoji.url }} style={styles.tabEmoji} />\n              <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>\n                {truncatedCount(getReactionCount(reaction))}\n              </Text>\n            </Pressable>\n          );\n        })}\n        <Animated.View\n          style={[\n            styles.tabIndicator,\n            {\n              left: tabIndicatorAnimated.x,\n              width: tabIndicatorAnimated.width,\n              backgroundColor: color.selected.highlight,\n            },\n          ]}\n        />\n      </Pressable>\n    );\n  };\n\n  const renderPage = () => {\n    return (\n      <>\n        {focusedReaction?.userIds.map((userId) => {\n          if (channel?.isGroupChannel()) {\n            const user = channel.members.find((x) => x.userId === userId);\n            return (\n              <Pressable\n                key={userId}\n                onPress={async () => {\n                  if (user) {\n                    await onClose();\n                    userProfileCtx.show(user);\n                  }\n                }}\n                style={styles.pageItem}\n              >\n                <Avatar size={36} uri={user?.profileUrl} containerStyle={styles.avatar} />\n                <Text subtitle2 style={{ flex: 1 }}>\n                  {user?.nickname || STRINGS.LABELS.USER_NO_NAME}\n                </Text>\n              </Pressable>\n            );\n          }\n          return null;\n        })}\n      </>\n    );\n  };\n\n  return (\n    <Modal\n      type={'slide-no-gesture'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          { width, paddingBottom: bottom, backgroundColor: colors.ui.dialog.default.none.background },\n        ]}\n      >\n        <ScrollView\n          ref={scrollRef as never}\n          horizontal\n          bounces={false}\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={[containerSafeArea, styles.tabsContainer]}\n        >\n          {renderTabs()}\n        </ScrollView>\n        <Divider style={{ top: -1 }} />\n        <ScrollView\n          bounces={false}\n          showsVerticalScrollIndicator={false}\n          style={styles.pageContainer}\n          contentContainerStyle={containerSafeArea}\n        >\n          {renderPage()}\n        </ScrollView>\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  layout: {\n    paddingHorizontal: 16,\n    marginRight: 0,\n  },\n  container: {\n    overflow: 'hidden',\n    borderTopLeftRadius: 8,\n    borderTopRightRadius: 8,\n    paddingTop: 16,\n    alignItems: 'center',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  tabsContainer: {\n    flexGrow: 1,\n  },\n  tabsWrapper: {\n    flexGrow: 1,\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    height: 44,\n  },\n  tabItem: {\n    marginRight: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  tabEmoji: {\n    width: 28,\n    height: 28,\n    marginRight: 4,\n  },\n  tabIndicator: {\n    position: 'absolute',\n    bottom: 0,\n    height: 3,\n  },\n  pageContainer: {\n    height: 216,\n    width: '100%',\n  },\n  pageItem: {\n    flexDirection: 'row',\n    width: '100%',\n    height: 48,\n    alignItems: 'center',\n  },\n  avatar: {\n    marginRight: 16,\n  },\n});\n\nexport default ReactionUserListBottomSheet;\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import ReactionList from './ReactionListBottomSheet';
+import UserList from './ReactionUserListBottomSheet';
+export const ReactionBottomSheets = {
+  ReactionList,
+  UserList
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ReactionList","UserList","ReactionBottomSheets"],"sources":["index.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { LocalizationContext } from '../../contexts/LocalizationCtx';\nimport type { ReactionContext } from '../../contexts/ReactionCtx';\nimport type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';\nimport type { UserProfileContext } from '../../contexts/UserProfileCtx';\nimport ReactionList from './ReactionListBottomSheet';\nimport UserList from './ReactionUserListBottomSheet';\n\ntype GetFromContext<T> = T extends React.Context<infer Value> ? NonNullable<Value> : never;\nexport type ReactionBottomSheetProps = {\n  visible: boolean;\n  onDismiss: () => void;\n  onClose: () => Promise<void>;\n  chatCtx: GetFromContext<typeof SendbirdChatContext>;\n  reactionCtx: GetFromContext<typeof ReactionContext>;\n  localizationCtx: GetFromContext<typeof LocalizationContext>;\n  userProfileCtx: GetFromContext<typeof UserProfileContext>;\n};\n\nexport const ReactionBottomSheets = {\n  ReactionList,\n  UserList,\n};\n"],"mappings":"AAMA,OAAOA,YAAP,MAAyB,2BAAzB;AACA,OAAOC,QAAP,MAAqB,+BAArB;AAaA,OAAO,MAAMC,oBAAoB,GAAG;EAClCF,YADkC;EAElCC;AAFkC,CAA7B"}

package/lib/module/constants.js

@@ -4,4 +4,5 @@ export const DEPRECATION_WARNING = {
     ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead'
   }
 };
+export const UNKNOWN_USER_ID = '##__USER_ID_IS_NOT_PROVIDED__##';
 //# sourceMappingURL=constants.js.map

package/lib/module/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["DEFAULT_LONG_PRESS_DELAY","DEPRECATION_WARNING","GROUP_CHANNEL","ON_PRESS_IMAGE_MESSAGE"],"sources":["constants.ts"],"sourcesContent":["export const DEFAULT_LONG_PRESS_DELAY = 350;\nexport const DEPRECATION_WARNING = {\n  GROUP_CHANNEL: {\n    ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',\n  },\n} as const;\n"],"mappings":"AAAA,OAAO,MAAMA,wBAAwB,GAAG,GAAjC;AACP,OAAO,MAAMC,mBAAmB,GAAG;EACjCC,aAAa,EAAE;IACbC,sBAAsB,EAAE;EADX;AADkB,CAA5B"}
+{"version":3,"names":["DEFAULT_LONG_PRESS_DELAY","DEPRECATION_WARNING","GROUP_CHANNEL","ON_PRESS_IMAGE_MESSAGE","UNKNOWN_USER_ID"],"sources":["constants.ts"],"sourcesContent":["export const DEFAULT_LONG_PRESS_DELAY = 350;\nexport const DEPRECATION_WARNING = {\n  GROUP_CHANNEL: {\n    ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',\n  },\n} as const;\n\nexport const UNKNOWN_USER_ID = '##__USER_ID_IS_NOT_PROVIDED__##';\n"],"mappings":"AAAA,OAAO,MAAMA,wBAAwB,GAAG,GAAjC;AACP,OAAO,MAAMC,mBAAmB,GAAG;EACjCC,aAAa,EAAE;IACbC,sBAAsB,EAAE;EADX;AADkB,CAA5B;AAMP,OAAO,MAAMC,eAAe,GAAG,iCAAxB"}

package/lib/module/containers/GroupChannelPreviewContainer.js

@@ -22,7 +22,8 @@ const GroupChannelPreviewContainer = _ref => {
   const {
     currentUser,
     sdk,
-    features
+    features,
+    mentionManager
   } = useSendbirdChat();
   const {
     STRINGS
@@ -120,6 +121,8 @@ const GroupChannelPreviewContainer = _ref => {
     body: bodyText,
     bodyIcon: bodyIcon,
     badgeCount: channel.unreadMessageCount,
+    mentioned: channel.unreadMentionCount > 0,
+    mentionTrigger: mentionManager.config.trigger,
     memberCount: channel.memberCount > 2 ? channel.memberCount : undefined,
     frozen: channel.isFrozen,
     broadcast: channel.isBroadcast,

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

@@ -1 +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","isBroadcast","myPushTriggerOption","marginRight","broadcastCover","padding","borderRadius"],"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        broadcast={channel.isBroadcast}\n        notificationOff={channel.myPushTriggerOption === 'off'}\n      />\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  titleCaptionIcon: {\n    marginRight: 4,\n  },\n  broadcastCover: {\n    padding: 12,\n    borderRadius: 28,\n  },\n});\n\nexport default GroupChannelPreviewContainer;\n"],"mappings":"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"}
+{"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","mentionManager","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","unreadMentionCount","config","trigger","memberCount","isFrozen","isBroadcast","myPushTriggerOption","marginRight","broadcastCover","padding","borderRadius"],"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, mentionManager } = 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        mentioned={channel.unreadMentionCount > 0}\n        mentionTrigger={mentionManager.config.trigger}\n        memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}\n        frozen={channel.isFrozen}\n        broadcast={channel.isBroadcast}\n        notificationOff={channel.myPushTriggerOption === 'off'}\n      />\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  titleCaptionIcon: {\n    marginRight: 4,\n  },\n  broadcastCover: {\n    padding: 12,\n    borderRadius: 28,\n  },\n});\n\nexport default GroupChannelPreviewContainer;\n"],"mappings":"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"}