@sendbird/uikit-react-native 2.4.1 → 2.5.0-rc.0

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","FlatList","Pressable","View","useWindowDimensions","useSafeAreaInsets","Image","Modal","createStyleSheet","useUIKitTheme","UNKNOWN_USER_ID","NUM_COLUMN","ReactionListBottomSheet","visible","onClose","onDismiss","reactionCtx","chatCtx","width","bottom","left","right","colors","currentUser","emojiManager","channel","message","color","ui","reaction","default","Boolean","styles","modal","container","paddingBottom","backgroundColor","dialog","none","background","paddingLeft","paddingHorizontal","paddingRight","allEmoji","item","key","flatlist","height","url","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","reacted","emojiItem","deleteReaction","addReaction","pressed","button","selected","enabled","uri","emoji","overflow","borderTopLeftRadius","borderTopRightRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport type { ReactionBottomSheetProps } from './index';\n\nconst NUM_COLUMN = 6;\nconst ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const { bottom, left, right } = useSafeAreaInsets();\n  const { colors } = useUIKitTheme();\n\n  const { currentUser, emojiManager } = chatCtx;\n  const { channel, message } = reactionCtx;\n  const color = colors.ui.reaction.default;\n\n  return (\n    <Modal\n      type={'slide'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          {\n            width,\n            paddingBottom: bottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingLeft: left + styles.container.paddingHorizontal,\n            paddingRight: right + styles.container.paddingHorizontal,\n          },\n        ]}\n      >\n        <FlatList\n          data={emojiManager.allEmoji}\n          numColumns={NUM_COLUMN}\n          keyExtractor={(item) => item.key}\n          contentContainerStyle={styles.flatlist}\n          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}\n          renderItem={({ item: { key, url } }) => {\n            const reactedUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n\n            const idx = reactedUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n            const reacted = idx > -1;\n\n            return (\n              <View style={styles.emojiItem}>\n                <Pressable\n                  key={key}\n                  onPress={() => {\n                    if (message && channel) {\n                      if (reacted) channel.deleteReaction(message, key);\n                      else channel.addReaction(message, key);\n                    }\n                    onClose();\n                  }}\n                  style={({ pressed }) => [\n                    styles.button,\n                    { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n                  ]}\n                >\n                  <Image source={{ uri: url }} style={styles.emoji} />\n                </Pressable>\n              </View>\n            );\n          }}\n        />\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderTopLeftRadius: 8,\n    borderTopRightRadius: 8,\n    paddingTop: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  flatlist: {\n    width: '100%',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  emojiItem: {\n    width: `${100 / NUM_COLUMN}%`,\n    alignItems: 'center',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default ReactionListBottomSheet;\n"],"mappings":"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"}
+{"version":3,"names":["React","FlatList","Pressable","View","useWindowDimensions","useSafeAreaInsets","Image","Modal","createStyleSheet","useUIKitTheme","UNKNOWN_USER_ID","NUM_COLUMN","ReactionListBottomSheet","_ref","visible","onClose","onDismiss","reactionCtx","chatCtx","width","bottom","left","right","colors","currentUser","emojiManager","channel","message","color","ui","reaction","default","createElement","type","Boolean","backgroundStyle","styles","modal","style","container","paddingBottom","backgroundColor","dialog","none","background","paddingLeft","paddingHorizontal","paddingRight","data","allEmoji","numColumns","keyExtractor","item","key","contentContainerStyle","flatlist","ItemSeparatorComponent","height","renderItem","_ref2","_message$reactions","_message$reactions$fi","url","reactedUserIds","reactions","find","it","userIds","idx","indexOf","userId","reacted","emojiItem","onPress","deleteReaction","addReaction","_ref3","pressed","button","selected","enabled","source","uri","emoji","overflow","borderTopLeftRadius","borderTopRightRadius","paddingTop","flexDirection","alignItems","justifyContent","padding","borderRadius"],"sources":["ReactionListBottomSheet.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList, Pressable, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport type { ReactionBottomSheetProps } from './index';\n\nconst NUM_COLUMN = 6;\nconst ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {\n  const { width } = useWindowDimensions();\n  const { bottom, left, right } = useSafeAreaInsets();\n  const { colors } = useUIKitTheme();\n\n  const { currentUser, emojiManager } = chatCtx;\n  const { channel, message } = reactionCtx;\n  const color = colors.ui.reaction.default;\n\n  return (\n    <Modal\n      type={'slide'}\n      visible={Boolean(visible && channel && message)}\n      onClose={onClose}\n      onDismiss={onDismiss}\n      backgroundStyle={styles.modal}\n    >\n      <View\n        style={[\n          styles.container,\n          {\n            width,\n            paddingBottom: bottom,\n            backgroundColor: colors.ui.dialog.default.none.background,\n            paddingLeft: left + styles.container.paddingHorizontal,\n            paddingRight: right + styles.container.paddingHorizontal,\n          },\n        ]}\n      >\n        <FlatList\n          data={emojiManager.allEmoji}\n          numColumns={NUM_COLUMN}\n          keyExtractor={(item) => item.key}\n          contentContainerStyle={styles.flatlist}\n          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}\n          renderItem={({ item: { key, url } }) => {\n            const reactedUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n\n            const idx = reactedUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n            const reacted = idx > -1;\n\n            return (\n              <View style={styles.emojiItem}>\n                <Pressable\n                  key={key}\n                  onPress={() => {\n                    if (message && channel) {\n                      if (reacted) channel.deleteReaction(message, key);\n                      else channel.addReaction(message, key);\n                    }\n                    onClose();\n                  }}\n                  style={({ pressed }) => [\n                    styles.button,\n                    { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n                  ]}\n                >\n                  <Image source={{ uri: url }} style={styles.emoji} />\n                </Pressable>\n              </View>\n            );\n          }}\n        />\n      </View>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderTopLeftRadius: 8,\n    borderTopRightRadius: 8,\n    paddingTop: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n  },\n  modal: {\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  flatlist: {\n    width: '100%',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  emojiItem: {\n    width: `${100 / NUM_COLUMN}%`,\n    alignItems: 'center',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default ReactionListBottomSheet;\n"],"mappings":"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"}

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

@@ -3,7 +3,6 @@ import { Animated, Easing, Pressable, ScrollView, View, useWindowDimensions } fr
 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,
@@ -51,14 +50,11 @@ const ReactionUserListBottomSheet = _ref => {
     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({
@@ -67,7 +63,6 @@ const ReactionUserListBottomSheet = _ref => {
       });
     }
   };
-
   const animateTabIndicator = function (x, width) {
     let animated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     const baseConfig = {
@@ -83,11 +78,9 @@ const ReactionUserListBottomSheet = _ref => {
       ...baseConfig
     })]).start();
   };
-
   const layoutCalculated = () => {
     return tabIndicatorValue.current.length === reactions.length && tabIndicatorValue.current.every(Boolean);
   };
-
   useEffect(() => {
     if (!visible) {
       tabIndicatorValue.current = [];
@@ -96,7 +89,6 @@ const ReactionUserListBottomSheet = _ref => {
       focusedWithLayoutCalculated.current = false;
     }
   }, [visible]);
-
   const renderTabs = () => {
     return /*#__PURE__*/React.createElement(Pressable, {
       style: styles.tabsWrapper
@@ -112,7 +104,6 @@ const ReactionUserListBottomSheet = _ref => {
         onPress: () => focusTab(index),
         onLayout: e => {
           tabIndicatorValue.current[index] = e.nativeEvent.layout;
-
           if (layoutCalculated()) {
             if (focusedWithLayoutCalculated.current) {
               focusTab(tabIndex, false);
@@ -139,7 +130,6 @@ const ReactionUserListBottomSheet = _ref => {
       }]
     }));
   };
-
   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()) {
@@ -164,11 +154,9 @@ const ReactionUserListBottomSheet = _ref => {
           }
         }, (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),
@@ -198,7 +186,6 @@ const ReactionUserListBottomSheet = _ref => {
     contentContainerStyle: containerSafeArea
   }, renderPage())));
 };
-
 const styles = createStyleSheet({
   layout: {
     paddingHorizontal: 16,

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

@@ -1 +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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"}
+{"version":3,"names":["React","useEffect","useRef","useState","Animated","Easing","Pressable","ScrollView","View","useWindowDimensions","useSafeAreaInsets","Avatar","Divider","Image","Modal","Text","createStyleSheet","useUIKitTheme","getReactionCount","truncatedCount","ReactionUserListBottomSheet","_ref","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","arguments","length","undefined","indicatorValue","_scrollRef$current","animateTabIndicator","scrollTo","baseConfig","duration","easing","inOut","ease","useNativeDriver","parallel","timing","toValue","start","layoutCalculated","every","Boolean","renderTabs","createElement","style","tabsWrapper","map","isFocused","key","isLastItem","emoji","allEmojiMap","tabItem","marginRight","onPress","onLayout","e","nativeEvent","source","uri","url","tabEmoji","button","selected","highlight","enabled","tabIndicator","backgroundColor","renderPage","Fragment","userIds","userId","isGroupChannel","user","members","find","show","pageItem","size","profileUrl","containerStyle","avatar","subtitle2","flex","nickname","LABELS","USER_NO_NAME","type","backgroundStyle","modal","container","paddingBottom","dialog","none","background","ref","horizontal","bounces","showsHorizontalScrollIndicator","contentContainerStyle","tabsContainer","top","showsVerticalScrollIndicator","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.map

@@ -1 +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"}
+{"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,YAAY,MAAM,2BAA2B;AACpD,OAAOC,QAAQ,MAAM,+BAA+B;AAapD,OAAO,MAAMC,oBAAoB,GAAG;EAClCF,YAAY;EACZC;AACF,CAAC"}

package/lib/module/components/ScrollToBottomButton.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Platform, TouchableOpacity } from 'react-native';
 import { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-
 const ScrollToBottomButton = _ref => {
   let {
     visible,
@@ -11,12 +10,12 @@ const ScrollToBottomButton = _ref => {
     palette,
     select
   } = useUIKitTheme();
+  if (!visible) return null;
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: onPress,
     activeOpacity: 0.8,
     disabled: !visible,
     style: [styles.container, {
-      opacity: visible ? 1 : 0,
       backgroundColor: select({
         dark: palette.background400,
         light: palette.background50
@@ -27,7 +26,6 @@ const ScrollToBottomButton = _ref => {
     size: 22
   }));
 };
-
 const styles = createStyleSheet({
   container: {
     padding: 8,

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

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","TouchableOpacity","Icon","createStyleSheet","useUIKitTheme","ScrollToBottomButton","visible","onPress","palette","select","styles","container","opacity","backgroundColor","dark","background400","light","background50","padding","borderRadius","android","elevation","ios","shadowColor","shadowRadius","shadowOffset","width","height","shadowOpacity","memo"],"sources":["ScrollToBottomButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, TouchableOpacity } from 'react-native';\n\nimport { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\ntype Props = {\n  visible: boolean;\n  onPress: () => void;\n};\nconst ScrollToBottomButton = ({ visible, onPress }: Props) => {\n  const { palette, select } = useUIKitTheme();\n  return (\n    <TouchableOpacity\n      onPress={onPress}\n      activeOpacity={0.8}\n      disabled={!visible}\n      style={[\n        styles.container,\n        {\n          opacity: visible ? 1 : 0,\n          backgroundColor: select({ dark: palette.background400, light: palette.background50 }),\n        },\n      ]}\n    >\n      <Icon icon={'chevron-down'} size={22} />\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    padding: 8,\n    borderRadius: 24,\n    ...Platform.select({\n      android: {\n        elevation: 4,\n      },\n      ios: {\n        shadowColor: 'black',\n        shadowRadius: 4,\n        shadowOffset: { width: 0, height: 4 },\n        shadowOpacity: 0.3,\n      },\n    }),\n  },\n});\n\nexport default React.memo(ScrollToBottomButton);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,gBAAnB,QAA2C,cAA3C;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;;AAMA,MAAMC,oBAAoB,GAAG,QAAiC;EAAA,IAAhC;IAAEC,OAAF;IAAWC;EAAX,CAAgC;EAC5D,MAAM;IAAEC,OAAF;IAAWC;EAAX,IAAsBL,aAAa,EAAzC;EACA,oBACE,oBAAC,gBAAD;IACE,OAAO,EAAEG,OADX;IAEE,aAAa,EAAE,GAFjB;IAGE,QAAQ,EAAE,CAACD,OAHb;IAIE,KAAK,EAAE,CACLI,MAAM,CAACC,SADF,EAEL;MACEC,OAAO,EAAEN,OAAO,GAAG,CAAH,GAAO,CADzB;MAEEO,eAAe,EAAEJ,MAAM,CAAC;QAAEK,IAAI,EAAEN,OAAO,CAACO,aAAhB;QAA+BC,KAAK,EAAER,OAAO,CAACS;MAA9C,CAAD;IAFzB,CAFK;EAJT,gBAYE,oBAAC,IAAD;IAAM,IAAI,EAAE,cAAZ;IAA4B,IAAI,EAAE;EAAlC,EAZF,CADF;AAgBD,CAlBD;;AAoBA,MAAMP,MAAM,GAAGP,gBAAgB,CAAC;EAC9BQ,SAAS,EAAE;IACTO,OAAO,EAAE,CADA;IAETC,YAAY,EAAE,EAFL;IAGT,GAAGnB,QAAQ,CAACS,MAAT,CAAgB;MACjBW,OAAO,EAAE;QACPC,SAAS,EAAE;MADJ,CADQ;MAIjBC,GAAG,EAAE;QACHC,WAAW,EAAE,OADV;QAEHC,YAAY,EAAE,CAFX;QAGHC,YAAY,EAAE;UAAEC,KAAK,EAAE,CAAT;UAAYC,MAAM,EAAE;QAApB,CAHX;QAIHC,aAAa,EAAE;MAJZ;IAJY,CAAhB;EAHM;AADmB,CAAD,CAA/B;AAkBA,4BAAe7B,KAAK,CAAC8B,IAAN,CAAWxB,oBAAX,CAAf"}
+{"version":3,"names":["React","Platform","TouchableOpacity","Icon","createStyleSheet","useUIKitTheme","ScrollToBottomButton","_ref","visible","onPress","palette","select","createElement","activeOpacity","disabled","style","styles","container","backgroundColor","dark","background400","light","background50","icon","size","padding","borderRadius","android","elevation","ios","shadowColor","shadowRadius","shadowOffset","width","height","shadowOpacity","memo"],"sources":["ScrollToBottomButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, TouchableOpacity } from 'react-native';\n\nimport { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\ntype Props = {\n  visible: boolean;\n  onPress: () => void;\n};\nconst ScrollToBottomButton = ({ visible, onPress }: Props) => {\n  const { palette, select } = useUIKitTheme();\n  if (!visible) return null;\n\n  return (\n    <TouchableOpacity\n      onPress={onPress}\n      activeOpacity={0.8}\n      disabled={!visible}\n      style={[\n        styles.container,\n        { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },\n      ]}\n    >\n      <Icon icon={'chevron-down'} size={22} />\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    padding: 8,\n    borderRadius: 24,\n    ...Platform.select({\n      android: {\n        elevation: 4,\n      },\n      ios: {\n        shadowColor: 'black',\n        shadowRadius: 4,\n        shadowOffset: { width: 0, height: 4 },\n        shadowOpacity: 0.3,\n      },\n    }),\n  },\n});\n\nexport default React.memo(ScrollToBottomButton);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,cAAc;AAEzD,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,yCAAyC;AAM/F,MAAMC,oBAAoB,GAAGC,IAAA,IAAiC;EAAA,IAAhC;IAAEC,OAAO;IAAEC;EAAe,CAAC,GAAAF,IAAA;EACvD,MAAM;IAAEG,OAAO;IAAEC;EAAO,CAAC,GAAGN,aAAa,EAAE;EAC3C,IAAI,CAACG,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACER,KAAA,CAAAY,aAAA,CAACV,gBAAgB;IACfO,OAAO,EAAEA,OAAQ;IACjBI,aAAa,EAAE,GAAI;IACnBC,QAAQ,EAAE,CAACN,OAAQ;IACnBO,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAEP,MAAM,CAAC;QAAEQ,IAAI,EAAET,OAAO,CAACU,aAAa;QAAEC,KAAK,EAAEX,OAAO,CAACY;MAAa,CAAC;IAAE,CAAC;EACzF,gBAEFtB,KAAA,CAAAY,aAAA,CAACT,IAAI;IAACoB,IAAI,EAAE,cAAe;IAACC,IAAI,EAAE;EAAG,EAAG,CACvB;AAEvB,CAAC;AAED,MAAMR,MAAM,GAAGZ,gBAAgB,CAAC;EAC9Ba,SAAS,EAAE;IACTQ,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE,EAAE;IAChB,GAAGzB,QAAQ,CAACU,MAAM,CAAC;MACjBgB,OAAO,EAAE;QACPC,SAAS,EAAE;MACb,CAAC;MACDC,GAAG,EAAE;QACHC,WAAW,EAAE,OAAO;QACpBC,YAAY,EAAE,CAAC;QACfC,YAAY,EAAE;UAAEC,KAAK,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAE,CAAC;QACrCC,aAAa,EAAE;MACjB;IACF,CAAC;EACH;AACF,CAAC,CAAC;AAEF,4BAAenC,KAAK,CAACoC,IAAI,CAAC9B,oBAAoB,CAAC"}

package/lib/module/components/StatusComposition.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 const StatusComposition = _ref => {
   let {
     children,
@@ -12,6 +11,5 @@ const StatusComposition = _ref => {
   if (error && ErrorComponent) return /*#__PURE__*/React.createElement(React.Fragment, null, ErrorComponent);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-
 export default StatusComposition;
 //# sourceMappingURL=StatusComposition.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","StatusComposition","children","error","ErrorComponent","LoadingComponent","loading"],"sources":["StatusComposition.tsx"],"sourcesContent":["import React from 'react';\n\ntype Props = {\n  loading?: boolean;\n  LoadingComponent?: JSX.Element;\n  error?: boolean;\n  ErrorComponent?: JSX.Element;\n  children: React.ReactNode;\n};\nconst StatusComposition = ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => {\n  if (loading && LoadingComponent) return <>{LoadingComponent}</>;\n  if (error && ErrorComponent) return <>{ErrorComponent}</>;\n  return <>{children}</>;\n};\n\nexport default StatusComposition;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AASA,MAAMC,iBAAiB,GAAG,QAA2E;EAAA,IAA1E;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,cAAnB;IAAmCC,gBAAnC;IAAqDC;EAArD,CAA0E;EACnG,IAAIA,OAAO,IAAID,gBAAf,EAAiC,oBAAO,0CAAGA,gBAAH,CAAP;EACjC,IAAIF,KAAK,IAAIC,cAAb,EAA6B,oBAAO,0CAAGA,cAAH,CAAP;EAC7B,oBAAO,0CAAGF,QAAH,CAAP;AACD,CAJD;;AAMA,eAAeD,iBAAf"}
+{"version":3,"names":["React","StatusComposition","_ref","children","error","ErrorComponent","LoadingComponent","loading","createElement","Fragment"],"sources":["StatusComposition.tsx"],"sourcesContent":["import React from 'react';\n\ntype Props = {\n  loading?: boolean;\n  LoadingComponent?: JSX.Element;\n  error?: boolean;\n  ErrorComponent?: JSX.Element;\n  children: React.ReactNode;\n};\nconst StatusComposition = ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => {\n  if (loading && LoadingComponent) return <>{LoadingComponent}</>;\n  if (error && ErrorComponent) return <>{ErrorComponent}</>;\n  return <>{children}</>;\n};\n\nexport default StatusComposition;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,MAAMC,iBAAiB,GAAGC,IAAA,IAA2E;EAAA,IAA1E;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,cAAc;IAAEC,gBAAgB;IAAEC;EAAe,CAAC,GAAAL,IAAA;EAC9F,IAAIK,OAAO,IAAID,gBAAgB,EAAE,oBAAON,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,QAAGH,gBAAgB,CAAI;EAC/D,IAAIF,KAAK,IAAIC,cAAc,EAAE,oBAAOL,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,QAAGJ,cAAc,CAAI;EACzD,oBAAOL,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,QAAGN,QAAQ,CAAI;AACxB,CAAC;AAED,eAAeF,iBAAiB"}

package/lib/module/components/TypedPlaceholder.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Placeholder } from '@sendbird/uikit-react-native-foundation';
 import { useLocalization } from '../hooks/useContext';
-
 const TypedPlaceholder = _ref => {
   let {
     type,
@@ -10,50 +9,42 @@ const TypedPlaceholder = _ref => {
   const {
     STRINGS
   } = useLocalization();
-
   switch (type) {
     case 'no-banned-users':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'ban',
         message: STRINGS.PLACEHOLDER.NO_BANNED_USERS
       });
-
     case 'no-channels':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'chat',
         message: STRINGS.PLACEHOLDER.NO_CHANNELS
       });
-
     case 'no-messages':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'message',
         message: STRINGS.PLACEHOLDER.NO_MESSAGES
       });
-
     case 'no-muted-members':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'mute',
         message: STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS
       });
-
     case 'no-muted-participants':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'mute',
         message: STRINGS.PLACEHOLDER.NO_MUTED_PARTICIPANTS
       });
-
     case 'no-results-found':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'search',
         message: STRINGS.PLACEHOLDER.NO_RESULTS_FOUND
       });
-
     case 'no-users':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'members',
         message: STRINGS.PLACEHOLDER.NO_USERS
       });
-
     case 'error-wrong':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'error',
@@ -61,7 +52,6 @@ const TypedPlaceholder = _ref => {
         errorRetryLabel: STRINGS.PLACEHOLDER.ERROR.RETRY_LABEL,
         onPressRetry: onPressRetry
       });
-
     case 'loading':
       return /*#__PURE__*/React.createElement(Placeholder, {
         loading: true,
@@ -69,6 +59,5 @@ const TypedPlaceholder = _ref => {
       });
   }
 };
-
 export default TypedPlaceholder;
 //# sourceMappingURL=TypedPlaceholder.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Placeholder","useLocalization","TypedPlaceholder","type","onPressRetry","STRINGS","PLACEHOLDER","NO_BANNED_USERS","NO_CHANNELS","NO_MESSAGES","NO_MUTED_MEMBERS","NO_MUTED_PARTICIPANTS","NO_RESULTS_FOUND","NO_USERS","ERROR","MESSAGE","RETRY_LABEL"],"sources":["TypedPlaceholder.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Placeholder } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../hooks/useContext';\n\ntype Props = {\n  type:\n    | 'no-muted-members'\n    | 'no-muted-participants'\n    | 'no-banned-users'\n    | 'no-channels'\n    | 'no-messages'\n    | 'no-users'\n    | 'no-results-found'\n    | 'error-wrong'\n    | 'loading';\n  onPressRetry?: () => void;\n};\nconst TypedPlaceholder = ({ type, onPressRetry }: Props) => {\n  const { STRINGS } = useLocalization();\n  switch (type) {\n    case 'no-banned-users':\n      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_USERS} />;\n    case 'no-channels':\n      return <Placeholder icon={'chat'} message={STRINGS.PLACEHOLDER.NO_CHANNELS} />;\n    case 'no-messages':\n      return <Placeholder icon={'message'} message={STRINGS.PLACEHOLDER.NO_MESSAGES} />;\n    case 'no-muted-members':\n      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS} />;\n    case 'no-muted-participants':\n      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_PARTICIPANTS} />;\n    case 'no-results-found':\n      return <Placeholder icon={'search'} message={STRINGS.PLACEHOLDER.NO_RESULTS_FOUND} />;\n    case 'no-users':\n      return <Placeholder icon={'members'} message={STRINGS.PLACEHOLDER.NO_USERS} />;\n    case 'error-wrong':\n      return (\n        <Placeholder\n          icon={'error'}\n          message={STRINGS.PLACEHOLDER.ERROR.MESSAGE}\n          errorRetryLabel={STRINGS.PLACEHOLDER.ERROR.RETRY_LABEL}\n          onPressRetry={onPressRetry}\n        />\n      );\n    case 'loading':\n      return <Placeholder loading icon={'spinner'} />;\n  }\n};\n\nexport default TypedPlaceholder;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,WAAT,QAA4B,yCAA5B;AAEA,SAASC,eAAT,QAAgC,qBAAhC;;AAeA,MAAMC,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC,IAAF;IAAQC;EAAR,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;;EACA,QAAQE,IAAR;IACE,KAAK,iBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,KAAnB;QAA0B,OAAO,EAAEE,OAAO,CAACC,WAAR,CAAoBC;MAAvD,EAAP;;IACF,KAAK,aAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEF,OAAO,CAACC,WAAR,CAAoBE;MAAxD,EAAP;;IACF,KAAK,aAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,SAAnB;QAA8B,OAAO,EAAEH,OAAO,CAACC,WAAR,CAAoBG;MAA3D,EAAP;;IACF,KAAK,kBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEJ,OAAO,CAACC,WAAR,CAAoBI;MAAxD,EAAP;;IACF,KAAK,uBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEL,OAAO,CAACC,WAAR,CAAoBK;MAAxD,EAAP;;IACF,KAAK,kBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,QAAnB;QAA6B,OAAO,EAAEN,OAAO,CAACC,WAAR,CAAoBM;MAA1D,EAAP;;IACF,KAAK,UAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,SAAnB;QAA8B,OAAO,EAAEP,OAAO,CAACC,WAAR,CAAoBO;MAA3D,EAAP;;IACF,KAAK,aAAL;MACE,oBACE,oBAAC,WAAD;QACE,IAAI,EAAE,OADR;QAEE,OAAO,EAAER,OAAO,CAACC,WAAR,CAAoBQ,KAApB,CAA0BC,OAFrC;QAGE,eAAe,EAAEV,OAAO,CAACC,WAAR,CAAoBQ,KAApB,CAA0BE,WAH7C;QAIE,YAAY,EAAEZ;MAJhB,EADF;;IAQF,KAAK,SAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,OAAO,MAApB;QAAqB,IAAI,EAAE;MAA3B,EAAP;EAzBJ;AA2BD,CA7BD;;AA+BA,eAAeF,gBAAf"}
+{"version":3,"names":["React","Placeholder","useLocalization","TypedPlaceholder","_ref","type","onPressRetry","STRINGS","createElement","icon","message","PLACEHOLDER","NO_BANNED_USERS","NO_CHANNELS","NO_MESSAGES","NO_MUTED_MEMBERS","NO_MUTED_PARTICIPANTS","NO_RESULTS_FOUND","NO_USERS","ERROR","MESSAGE","errorRetryLabel","RETRY_LABEL","loading"],"sources":["TypedPlaceholder.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Placeholder } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../hooks/useContext';\n\ntype Props = {\n  type:\n    | 'no-muted-members'\n    | 'no-muted-participants'\n    | 'no-banned-users'\n    | 'no-channels'\n    | 'no-messages'\n    | 'no-users'\n    | 'no-results-found'\n    | 'error-wrong'\n    | 'loading';\n  onPressRetry?: () => void;\n};\nconst TypedPlaceholder = ({ type, onPressRetry }: Props) => {\n  const { STRINGS } = useLocalization();\n  switch (type) {\n    case 'no-banned-users':\n      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_USERS} />;\n    case 'no-channels':\n      return <Placeholder icon={'chat'} message={STRINGS.PLACEHOLDER.NO_CHANNELS} />;\n    case 'no-messages':\n      return <Placeholder icon={'message'} message={STRINGS.PLACEHOLDER.NO_MESSAGES} />;\n    case 'no-muted-members':\n      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS} />;\n    case 'no-muted-participants':\n      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_PARTICIPANTS} />;\n    case 'no-results-found':\n      return <Placeholder icon={'search'} message={STRINGS.PLACEHOLDER.NO_RESULTS_FOUND} />;\n    case 'no-users':\n      return <Placeholder icon={'members'} message={STRINGS.PLACEHOLDER.NO_USERS} />;\n    case 'error-wrong':\n      return (\n        <Placeholder\n          icon={'error'}\n          message={STRINGS.PLACEHOLDER.ERROR.MESSAGE}\n          errorRetryLabel={STRINGS.PLACEHOLDER.ERROR.RETRY_LABEL}\n          onPressRetry={onPressRetry}\n        />\n      );\n    case 'loading':\n      return <Placeholder loading icon={'spinner'} />;\n  }\n};\n\nexport default TypedPlaceholder;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,WAAW,QAAQ,yCAAyC;AAErE,SAASC,eAAe,QAAQ,qBAAqB;AAerD,MAAMC,gBAAgB,GAAGC,IAAA,IAAmC;EAAA,IAAlC;IAAEC,IAAI;IAAEC;EAAoB,CAAC,GAAAF,IAAA;EACrD,MAAM;IAAEG;EAAQ,CAAC,GAAGL,eAAe,EAAE;EACrC,QAAQG,IAAI;IACV,KAAK,iBAAiB;MACpB,oBAAOL,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACQ,IAAI,EAAE,KAAM;QAACC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACC;MAAgB,EAAG;IACnF,KAAK,aAAa;MAChB,oBAAOZ,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACQ,IAAI,EAAE,MAAO;QAACC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACE;MAAY,EAAG;IAChF,KAAK,aAAa;MAChB,oBAAOb,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACQ,IAAI,EAAE,SAAU;QAACC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACG;MAAY,EAAG;IACnF,KAAK,kBAAkB;MACrB,oBAAOd,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACQ,IAAI,EAAE,MAAO;QAACC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACI;MAAiB,EAAG;IACrF,KAAK,uBAAuB;MAC1B,oBAAOf,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACQ,IAAI,EAAE,MAAO;QAACC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACK;MAAsB,EAAG;IAC1F,KAAK,kBAAkB;MACrB,oBAAOhB,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACQ,IAAI,EAAE,QAAS;QAACC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACM;MAAiB,EAAG;IACvF,KAAK,UAAU;MACb,oBAAOjB,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACQ,IAAI,EAAE,SAAU;QAACC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACO;MAAS,EAAG;IAChF,KAAK,aAAa;MAChB,oBACElB,KAAA,CAAAQ,aAAA,CAACP,WAAW;QACVQ,IAAI,EAAE,OAAQ;QACdC,OAAO,EAAEH,OAAO,CAACI,WAAW,CAACQ,KAAK,CAACC,OAAQ;QAC3CC,eAAe,EAAEd,OAAO,CAACI,WAAW,CAACQ,KAAK,CAACG,WAAY;QACvDhB,YAAY,EAAEA;MAAa,EAC3B;IAEN,KAAK,SAAS;MACZ,oBAAON,KAAA,CAAAQ,aAAA,CAACP,WAAW;QAACsB,OAAO;QAACd,IAAI,EAAE;MAAU,EAAG;EAAC;AAEtD,CAAC;AAED,eAAeN,gBAAgB"}

package/lib/module/components/UserActionBar.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Pressable, TouchableOpacity, View } from 'react-native';
 import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
-
 const UserActionBar = _ref => {
   let {
     muted,
@@ -49,7 +48,6 @@ const UserActionBar = _ref => {
     containerStyle: styles.iconContainer
   }))));
 };
-
 const styles = createStyleSheet({
   container: {
     flexDirection: 'row',

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","TouchableOpacity","View","Avatar","Icon","Text","createStyleSheet","useUIKitTheme","conditionChaining","UserActionBar","muted","uri","name","disabled","label","onPressActionMenu","onPressAvatar","colors","iconColor","onBackground04","onBackground01","styles","container","avatar","infoContainer","borderBottomColor","Boolean","onBackground02","iconContainer","flexDirection","alignItems","width","height","marginLeft","marginRight","flex","paddingRight","borderBottomWidth","padding"],"sources":["UserActionBar.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, TouchableOpacity, View } from 'react-native';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\ntype Props = {\n  uri: string;\n  name: string;\n  label?: string;\n\n  muted: boolean;\n  disabled: boolean;\n\n  onPressActionMenu?: (ev: GestureResponderEvent) => void;\n  onPressAvatar?: (ev: GestureResponderEvent) => void;\n};\nconst UserActionBar = ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);\n\n  return (\n    <View style={styles.container}>\n      <Pressable onPress={onPressAvatar} style={styles.avatar}>\n        <Avatar muted={muted} size={36} uri={uri} />\n      </Pressable>\n      <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>\n        <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>\n          {name}\n        </Text>\n        {Boolean(label) && (\n          <Text body2 color={colors.onBackground02} style={styles.label}>\n            {label}\n          </Text>\n        )}\n        {Boolean(onPressActionMenu) && (\n          <TouchableOpacity onPress={onPressActionMenu} disabled={disabled}>\n            <Icon color={iconColor} size={24} icon={'more'} containerStyle={styles.iconContainer} />\n          </TouchableOpacity>\n        )}\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    width: '100%',\n    height: 56,\n  },\n  avatar: {\n    marginLeft: 16,\n    marginRight: 16,\n  },\n  label: {\n    marginRight: 4,\n  },\n  infoContainer: {\n    height: '100%',\n    flex: 1,\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingRight: 12,\n    borderBottomWidth: 1,\n  },\n  iconContainer: {\n    padding: 4,\n  },\n  name: {\n    flex: 1,\n    marginRight: 8,\n  },\n});\n\nexport default UserActionBar;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,gBAApB,EAAsCC,IAAtC,QAAkD,cAAlD;AAGA,SAASC,MAAT,EAAiBC,IAAjB,EAAuBC,IAAvB,EAA6BC,gBAA7B,EAA+CC,aAA/C,QAAoE,yCAApE;AACA,SAASC,iBAAT,QAAkC,uBAAlC;;AAaA,MAAMC,aAAa,GAAG,QAAoF;EAAA,IAAnF;IAAEC,KAAF;IAASC,GAAT;IAAcC,IAAd;IAAoBC,QAApB;IAA8BC,KAA9B;IAAqCC,iBAArC;IAAwDC;EAAxD,CAAmF;EACxG,MAAM;IAAEC;EAAF,IAAaV,aAAa,EAAhC;EAEA,MAAMW,SAAS,GAAGV,iBAAiB,CAAC,CAACK,QAAD,CAAD,EAAa,CAACI,MAAM,CAACE,cAAR,EAAwBF,MAAM,CAACG,cAA/B,CAAb,CAAnC;EAEA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,gBACE,oBAAC,SAAD;IAAW,OAAO,EAAEN,aAApB;IAAmC,KAAK,EAAEK,MAAM,CAACE;EAAjD,gBACE,oBAAC,MAAD;IAAQ,KAAK,EAAEb,KAAf;IAAsB,IAAI,EAAE,EAA5B;IAAgC,GAAG,EAAEC;EAArC,EADF,CADF,eAIE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACU,MAAM,CAACG,aAAR,EAAuB;MAAEC,iBAAiB,EAAER,MAAM,CAACE;IAA5B,CAAvB;EAAb,gBACE,oBAAC,IAAD;IAAM,SAAS,MAAf;IAAgB,aAAa,EAAE,CAA/B;IAAkC,KAAK,EAAEE,MAAM,CAACT,IAAhD;IAAsD,KAAK,EAAEK,MAAM,CAACG;EAApE,GACGR,IADH,CADF,EAIGc,OAAO,CAACZ,KAAD,CAAP,iBACC,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEG,MAAM,CAACU,cAA1B;IAA0C,KAAK,EAAEN,MAAM,CAACP;EAAxD,GACGA,KADH,CALJ,EASGY,OAAO,CAACX,iBAAD,CAAP,iBACC,oBAAC,gBAAD;IAAkB,OAAO,EAAEA,iBAA3B;IAA8C,QAAQ,EAAEF;EAAxD,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAEK,SAAb;IAAwB,IAAI,EAAE,EAA9B;IAAkC,IAAI,EAAE,MAAxC;IAAgD,cAAc,EAAEG,MAAM,CAACO;EAAvE,EADF,CAVJ,CAJF,CADF;AAsBD,CA3BD;;AA6BA,MAAMP,MAAM,GAAGf,gBAAgB,CAAC;EAC9BgB,SAAS,EAAE;IACTO,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,KAAK,EAAE,MAHE;IAITC,MAAM,EAAE;EAJC,CADmB;EAO9BT,MAAM,EAAE;IACNU,UAAU,EAAE,EADN;IAENC,WAAW,EAAE;EAFP,CAPsB;EAW9BpB,KAAK,EAAE;IACLoB,WAAW,EAAE;EADR,CAXuB;EAc9BV,aAAa,EAAE;IACbQ,MAAM,EAAE,MADK;IAEbG,IAAI,EAAE,CAFO;IAGbL,UAAU,EAAE,QAHC;IAIbD,aAAa,EAAE,KAJF;IAKbO,YAAY,EAAE,EALD;IAMbC,iBAAiB,EAAE;EANN,CAde;EAsB9BT,aAAa,EAAE;IACbU,OAAO,EAAE;EADI,CAtBe;EAyB9B1B,IAAI,EAAE;IACJuB,IAAI,EAAE,CADF;IAEJD,WAAW,EAAE;EAFT;AAzBwB,CAAD,CAA/B;AA+BA,eAAezB,aAAf"}
+{"version":3,"names":["React","Pressable","TouchableOpacity","View","Avatar","Icon","Text","createStyleSheet","useUIKitTheme","conditionChaining","UserActionBar","_ref","muted","uri","name","disabled","label","onPressActionMenu","onPressAvatar","colors","iconColor","onBackground04","onBackground01","createElement","style","styles","container","onPress","avatar","size","infoContainer","borderBottomColor","subtitle2","numberOfLines","color","Boolean","body2","onBackground02","icon","containerStyle","iconContainer","flexDirection","alignItems","width","height","marginLeft","marginRight","flex","paddingRight","borderBottomWidth","padding"],"sources":["UserActionBar.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, TouchableOpacity, View } from 'react-native';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\ntype Props = {\n  uri: string;\n  name: string;\n  label?: string;\n\n  muted: boolean;\n  disabled: boolean;\n\n  onPressActionMenu?: (ev: GestureResponderEvent) => void;\n  onPressAvatar?: (ev: GestureResponderEvent) => void;\n};\nconst UserActionBar = ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);\n\n  return (\n    <View style={styles.container}>\n      <Pressable onPress={onPressAvatar} style={styles.avatar}>\n        <Avatar muted={muted} size={36} uri={uri} />\n      </Pressable>\n      <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>\n        <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>\n          {name}\n        </Text>\n        {Boolean(label) && (\n          <Text body2 color={colors.onBackground02} style={styles.label}>\n            {label}\n          </Text>\n        )}\n        {Boolean(onPressActionMenu) && (\n          <TouchableOpacity onPress={onPressActionMenu} disabled={disabled}>\n            <Icon color={iconColor} size={24} icon={'more'} containerStyle={styles.iconContainer} />\n          </TouchableOpacity>\n        )}\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    width: '100%',\n    height: 56,\n  },\n  avatar: {\n    marginLeft: 16,\n    marginRight: 16,\n  },\n  label: {\n    marginRight: 4,\n  },\n  infoContainer: {\n    height: '100%',\n    flex: 1,\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingRight: 12,\n    borderBottomWidth: 1,\n  },\n  iconContainer: {\n    padding: 4,\n  },\n  name: {\n    flex: 1,\n    marginRight: 8,\n  },\n});\n\nexport default UserActionBar;\n"],"mappings":"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"}

package/lib/module/components/UserSelectableBar.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { View } from 'react-native';
 import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
-
 const UserSelectableBar = _ref => {
   let {
     uri,
@@ -35,7 +34,6 @@ const UserSelectableBar = _ref => {
     icon: selected ? 'checkbox-on' : 'checkbox-off'
   })));
 };
-
 const styles = createStyleSheet({
   container: {
     flexDirection: 'row',