@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

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

package/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import type { Emoji } from '@sendbird/chat';
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
+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 = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {
+  return reaction.userIds.indexOf(userId) > -1;
+};
+
+const createOnPressReaction = (
+  reaction: SendbirdReaction,
+  channel: SendbirdBaseChannel,
+  message: SendbirdBaseMessage,
+  reacted: boolean,
+) => {
+  return () => {
+    if (reacted) {
+      return channel.deleteReaction(message, reaction.key);
+    } else {
+      return channel.addReaction(message, reaction.key);
+    }
+  };
+};
+
+const createReactionButtons = (
+  channel: SendbirdBaseChannel,
+  message: SendbirdBaseMessage,
+  getEmoji: (key: string) => Emoji,
+  emojiLimit: number,
+  onOpenReactionList: () => void,
+  onOpenReactionUserList: (focusIndex: number) => void,
+  currentUserId?: string,
+) => {
+  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 (
+      <Pressable
+        key={reaction.key}
+        onPress={createOnPressReaction(reaction, channel, message, getUserReacted(reaction, currentUserId))}
+        onLongPress={() => onOpenReactionUserList(index)}
+        delayLongPress={DEFAULT_LONG_PRESS_DELAY}
+      >
+        {({ pressed }) => (
+          <ReactionRoundedButton
+            url={getEmoji(reaction.key).url}
+            count={getReactionCount(reaction)}
+            reacted={pressed || getUserReacted(reaction, currentUserId)}
+            style={[isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]}
+          />
+        )}
+      </Pressable>
+    );
+  });
+  if (buttons.length < emojiLimit) {
+    buttons.push(
+      <Pressable key={REACTION_MORE_KEY} onPress={onOpenReactionList}>
+        {({ pressed }) => <ReactionRoundedButton.More pressed={pressed} />}
+      </Pressable>,
+    );
+  }
+
+  return buttons;
+};
+
+const MessageReactionAddon = ({ channel, message }: { channel: SendbirdBaseChannel; message: SendbirdBaseMessage }) => {
+  const { colors } = useUIKitTheme();
+  const { emojiManager, currentUser } = useSendbirdChat();
+  const { openReactionList, openReactionUserList } = useReaction();
+
+  if (!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?.userId,
+  );
+
+  return (
+    <Pressable
+      style={[
+        styles.reactionContainer,
+        { backgroundColor: colors.background, borderColor: colors.ui.reaction.rounded.enabled.background },
+      ]}
+    >
+      {reactionButtons}
+    </Pressable>
+  );
+};
+
+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;

package/src/components/ReactionAddons/ReactionRoundedButton.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { truncatedCount } from '@sendbird/uikit-utils';
+
+type Props = {
+  url: string;
+  count: number;
+  reacted: boolean;
+  style: StyleProp<ViewStyle>;
+};
+
+const ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.reaction.rounded;
+
+  return (
+    <View
+      style={[
+        styles.reactionContainer,
+        { backgroundColor: reacted ? color.selected.background : color.enabled.background },
+        style,
+      ]}
+    >
+      <Image source={{ uri: url }} style={styles.emoji} />
+      <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>
+        {truncatedCount(count, 99, '')}
+      </Text>
+    </View>
+  );
+};
+
+ReactionRoundedButton.More = ({ pressed }: { pressed: boolean }) => {
+  const { colors } = useUIKitTheme();
+  const color = colors.ui.reaction.rounded;
+
+  return (
+    <View
+      style={[
+        styles.reactionContainer,
+        { backgroundColor: pressed ? color.selected.background : color.enabled.background },
+      ]}
+    >
+      <Icon icon={'emoji-more'} color={colors.onBackground03} size={20} />
+    </View>
+  );
+};
+
+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;

package/src/components/ReactionAddons/index.tsx

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

package/src/components/ReactionBottomSheets/ReactionListBottomSheet.tsx

@@ -0,0 +1,113 @@
+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';
+import type { ReactionBottomSheetProps } from './index';
+
+const NUM_COLUMN = 6;
+const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {
+  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 (
+    <Modal
+      type={'slide'}
+      visible={Boolean(visible && channel && message)}
+      onClose={onClose}
+      onDismiss={onDismiss}
+      backgroundStyle={styles.modal}
+    >
+      <View
+        style={[
+          styles.container,
+          {
+            width,
+            paddingBottom: bottom,
+            backgroundColor: colors.ui.dialog.default.none.background,
+            paddingLeft: left + styles.container.paddingHorizontal,
+            paddingRight: right + styles.container.paddingHorizontal,
+          },
+        ]}
+      >
+        <FlatList
+          data={emojiManager.allEmoji}
+          numColumns={NUM_COLUMN}
+          keyExtractor={(item) => item.key}
+          contentContainerStyle={styles.flatlist}
+          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
+          renderItem={({ item: { key, url } }) => {
+            const reactedUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];
+
+            const idx = reactedUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);
+            const reacted = idx > -1;
+
+            return (
+              <View style={styles.emojiItem}>
+                <Pressable
+                  key={key}
+                  onPress={() => {
+                    if (message && channel) {
+                      if (reacted) channel.deleteReaction(message, key);
+                      else channel.addReaction(message, key);
+                    }
+                    onClose();
+                  }}
+                  style={({ pressed }) => [
+                    styles.button,
+                    { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },
+                  ]}
+                >
+                  <Image source={{ uri: url }} style={styles.emoji} />
+                </Pressable>
+              </View>
+            );
+          }}
+        />
+      </View>
+    </Modal>
+  );
+};
+
+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;

package/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -0,0 +1,249 @@
+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 { SendbirdReaction, getReactionCount, truncatedCount } from '@sendbird/uikit-utils';
+
+import type { ReactionBottomSheetProps } from './index';
+
+const ReactionUserListBottomSheet = ({
+  visible,
+  onClose,
+  onDismiss,
+  reactionCtx,
+  chatCtx,
+  localizationCtx,
+  userProfileCtx,
+}: ReactionBottomSheetProps) => {
+  const { width } = useWindowDimensions();
+  const { bottom, left, right } = useSafeAreaInsets();
+  const { colors } = useUIKitTheme();
+
+  const [tabIndex, setTabIndex] = useState(0);
+  const scrollRef = useRef<ScrollView>();
+  const tabIndicatorValue = useRef<Array<{ x: number; width: number }>>([]);
+  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?.reactions ?? [];
+  const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;
+  const containerSafeArea = {
+    paddingLeft: left + styles.layout.paddingHorizontal,
+    paddingRight: right + styles.layout.paddingHorizontal,
+  };
+
+  const focusTab = (index: number, animated = true) => {
+    const indicatorValue = tabIndicatorValue.current[index];
+    if (indicatorValue) {
+      setTabIndex(index);
+      animateTabIndicator(indicatorValue.x, indicatorValue.width, animated);
+      scrollRef.current?.scrollTo({ x: indicatorValue.x, animated });
+    }
+  };
+
+  const animateTabIndicator = (x: number, width: number, animated = 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 (
+      <Pressable style={styles.tabsWrapper}>
+        {reactions.map((reaction, index) => {
+          const isFocused = focusedReaction?.key === reaction.key;
+          const isLastItem = reactions.length - 1 === index;
+          const emoji = emojiManager.allEmojiMap[reaction.key];
+
+          return (
+            <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);
+                  }
+                }
+              }}
+            >
+              <Image source={{ uri: emoji.url }} style={styles.tabEmoji} />
+              <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>
+                {truncatedCount(getReactionCount(reaction))}
+              </Text>
+            </Pressable>
+          );
+        })}
+        <Animated.View
+          style={[
+            styles.tabIndicator,
+            {
+              left: tabIndicatorAnimated.x,
+              width: tabIndicatorAnimated.width,
+              backgroundColor: color.selected.highlight,
+            },
+          ]}
+        />
+      </Pressable>
+    );
+  };
+
+  const renderPage = () => {
+    return (
+      <>
+        {focusedReaction?.userIds.map((userId) => {
+          if (channel?.isGroupChannel()) {
+            const user = channel.members.find((x) => x.userId === userId);
+            return (
+              <Pressable
+                key={userId}
+                onPress={async () => {
+                  if (user) {
+                    await onClose();
+                    userProfileCtx.show(user);
+                  }
+                }}
+                style={styles.pageItem}
+              >
+                <Avatar size={36} uri={user?.profileUrl} containerStyle={styles.avatar} />
+                <Text subtitle2 style={{ flex: 1 }}>
+                  {user?.nickname || STRINGS.LABELS.USER_NO_NAME}
+                </Text>
+              </Pressable>
+            );
+          }
+          return null;
+        })}
+      </>
+    );
+  };
+
+  return (
+    <Modal
+      type={'slide-no-gesture'}
+      visible={Boolean(visible && channel && message)}
+      onClose={onClose}
+      onDismiss={onDismiss}
+      backgroundStyle={styles.modal}
+    >
+      <View
+        style={[
+          styles.container,
+          { width, paddingBottom: bottom, backgroundColor: colors.ui.dialog.default.none.background },
+        ]}
+      >
+        <ScrollView
+          ref={scrollRef as never}
+          horizontal
+          bounces={false}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={[containerSafeArea, styles.tabsContainer]}
+        >
+          {renderTabs()}
+        </ScrollView>
+        <Divider style={{ top: -1 }} />
+        <ScrollView
+          bounces={false}
+          showsVerticalScrollIndicator={false}
+          style={styles.pageContainer}
+          contentContainerStyle={containerSafeArea}
+        >
+          {renderPage()}
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+};
+
+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;

package/src/components/ReactionBottomSheets/index.tsx

@@ -0,0 +1,24 @@
+import type React from 'react';
+
+import type { LocalizationContext } from '../../contexts/LocalizationCtx';
+import type { ReactionContext } from '../../contexts/ReactionCtx';
+import type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';
+import type { UserProfileContext } from '../../contexts/UserProfileCtx';
+import ReactionList from './ReactionListBottomSheet';
+import UserList from './ReactionUserListBottomSheet';
+
+type GetFromContext<T> = T extends React.Context<infer Value> ? NonNullable<Value> : never;
+export type ReactionBottomSheetProps = {
+  visible: boolean;
+  onDismiss: () => void;
+  onClose: () => Promise<void>;
+  chatCtx: GetFromContext<typeof SendbirdChatContext>;
+  reactionCtx: GetFromContext<typeof ReactionContext>;
+  localizationCtx: GetFromContext<typeof LocalizationContext>;
+  userProfileCtx: GetFromContext<typeof UserProfileContext>;
+};
+
+export const ReactionBottomSheets = {
+  ReactionList,
+  UserList,
+};