@sendbird/uikit-react-native 2.0.3 → 2.2.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","View","useSafeAreaInsets","useChannelHandler","Icon","Image","createStyleSheet","useUIKitTheme","useUniqId","UNKNOWN_USER_ID","useReaction","useSendbirdChat","COMPONENT_NAME","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","id","left","right","onReactionUpdated","eventChannel","event","url","messageId","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","default","styles","container","marginRight","marginLeft","map","key","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","reacted","onPress","deleteReaction","addReaction","pressed","button","backgroundColor","selected","background","enabled","uri","emoji","onBackground03","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius"],"sources":["BottomSheetReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdBaseChannel, SendbirdBaseMessage, useUniqId } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\n\ntype Props = {\n  onClose: () => Promise<void>;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n};\nconst COMPONENT_NAME = 'BottomSheetReactionAddon';\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const id = useUniqId(COMPONENT_NAME);\n  const { left, right } = useSafeAreaInsets();\n\n  useChannelHandler(sdk, COMPONENT_NAME + id, {\n    async onReactionUpdated(eventChannel, event) {\n      if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {\n        updateReactionFocusedItem({\n          message: await sdk.message.getMessage({\n            includeReactions: true,\n            messageId: message.messageId,\n            channelUrl: message.channelUrl,\n            channelType: message.channelType,\n          }),\n        });\n      }\n    },\n  });\n\n  const emojiAll = emojiManager.allEmoji.slice(0, 5);\n  const color = colors.ui.reaction.default;\n\n  return (\n    <View style={[styles.container, { marginRight: right, marginLeft: left }]}>\n      {emojiAll.map(({ key, url }) => {\n        const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n        const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n        const reacted = currentUserIdx > -1;\n\n        const onPress = () => {\n          if (reacted) channel.deleteReaction(message, key);\n          else channel.addReaction(message, key);\n          onClose();\n        };\n\n        return (\n          <Pressable\n            key={key}\n            onPress={onPress}\n            style={({ pressed }) => [\n              styles.button,\n              { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n            ]}\n          >\n            <Image source={{ uri: url }} style={styles.emoji} />\n          </Pressable>\n        );\n      })}\n\n      <Pressable\n        onPress={async () => {\n          await onClose();\n          openReactionList({ channel, message });\n        }}\n        style={({ pressed }) => [\n          styles.button,\n          { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n        ]}\n      >\n        <Icon icon={'emoji-more'} style={styles.emoji} color={colors.onBackground03} />\n      </Pressable>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 12,\n    paddingBottom: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default BottomSheetReactionAddon;\n"],"mappings":"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"}

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

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

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

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

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":"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"}

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