@sendbird/uikit-react-native 2.1.0 → 2.2.0

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,
+};

package/src/constants.ts

@@ -4,3 +4,5 @@ export const DEPRECATION_WARNING = {
     ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',
   },
 } as const;
+
+export const UNKNOWN_USER_ID = '##__USER_ID_IS_NOT_PROVIDED__##';

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -32,7 +32,7 @@ type Props = {
   onLongPress: () => void;
 };
 const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props) => {
-  const { currentUser, sdk, features } = useSendbirdChat();
+  const { currentUser, sdk, features, mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
 
@@ -100,6 +100,8 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         body={bodyText}
         bodyIcon={bodyIcon}
         badgeCount={channel.unreadMessageCount}
+        mentioned={channel.unreadMentionCount > 0}
+        mentionTrigger={mentionManager.config.trigger}
         memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
         frozen={channel.isFrozen}
         broadcast={channel.isBroadcast}

package/src/containers/SendbirdUIKitContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -21,14 +21,18 @@ import type {
   SendbirdMember,
   SendbirdUser,
 } from '@sendbird/uikit-utils';
+import { useIsFirstMount } from '@sendbird/uikit-utils';
 
-import { LocalizationProvider } from '../contexts/LocalizationCtx';
+import { LocalizationContext, LocalizationProvider } from '../contexts/LocalizationCtx';
 import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
+import { ReactionProvider } from '../contexts/ReactionCtx';
 import type { UIKitFeaturesInSendbirdChatContext } from '../contexts/SendbirdChatCtx';
 import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
 import { UserProfileProvider } from '../contexts/UserProfileCtx';
-import { useLocalization } from '../hooks/useContext';
+import EmojiManager from '../libs/EmojiManager';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
+import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
+import MentionManager from '../libs/MentionManager';
 import StringSetEn from '../localization/StringSet.en';
 import type { StringSet } from '../localization/StringSet.type';
 import SBUDynamicModule from '../platform/dynamicModule';
@@ -47,6 +51,13 @@ const NetInfo = SBUDynamicModule.get('@react-native-community/netinfo', 'warn');
 export const SendbirdUIKit = Object.freeze({
   VERSION,
   PLATFORM: Platform.OS.toLowerCase(),
+  DEFAULT: {
+    AUTO_PUSH_TOKEN_REGISTRATION: true,
+    CHANNEL_LIST_TYPING_INDICATOR: false,
+    CHANNEL_LIST_MESSAGE_RECEIPT_STATUS: false,
+    USE_USER_ID_FOR_NICKNAME: false,
+    USER_MENTION: false,
+  },
 });
 
 export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
@@ -81,6 +92,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
       users: SendbirdUser[] | SendbirdMember[],
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
+  userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
   errorBoundary?: {
     onError?: (props: ErrorBoundaryProps) => void;
     ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
@@ -96,73 +108,75 @@ const SendbirdUIKitContainer = ({
   styles,
   toast,
   userProfile,
+  userMention,
   errorBoundary,
 }: SendbirdUIKitContainerProps) => {
-  const unsubscribes = useRef<(() => void)[]>([]).current;
-  const getSendbirdSDK = () => {
-    let sdk: SendbirdChatSDK;
-
-    sdk = Sendbird.init({
-      appId,
-      modules: [new GroupChannelModule(), new OpenChannelModule()],
-      localCacheEnabled: Boolean(chatOptions?.localCacheStorage),
-      // @ts-ignore
-      useAsyncStorageStore: chatOptions?.localCacheStorage
-        ? new InternalLocalCacheStorage(chatOptions.localCacheStorage)
-        : undefined,
-    });
-
-    if (chatOptions?.onInitialized) {
-      sdk = chatOptions?.onInitialized(sdk);
-    }
+  const defaultStringSet = localization?.stringSet ?? StringSetEn;
 
-    if (SendbirdUIKit.VERSION) {
-      sdk.addExtension('sb_uikit', SendbirdUIKit.VERSION);
-    }
+  const isFirstMount = useIsFirstMount();
+  const unsubscribes = useRef<Array<() => void>>([]);
+  const internalStorage = useMemo(
+    () => (chatOptions?.localCacheStorage ? new InternalLocalCacheStorage(chatOptions.localCacheStorage) : undefined),
+    [chatOptions?.localCacheStorage],
+  );
 
-    if (SendbirdUIKit.PLATFORM) {
-      sdk.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
-    }
+  const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(() => {
+    const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
+    unsubscribes.current = sendbird.unsubscribes;
+    return sendbird.chatSDK;
+  });
+  const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
+  const mentionManager = useMemo(() => {
+    const config = new MentionConfig({
+      mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
+      suggestionLimit: userMention?.suggestionLimit || MentionConfig.DEFAULT.SUGGESTION_LIMIT,
+      debounceMills: userMention?.debounceMills ?? MentionConfig.DEFAULT.DEBOUNCE_MILLS,
+      delimiter: MentionConfig.DEFAULT.DELIMITER,
+      trigger: MentionConfig.DEFAULT.TRIGGER,
+    });
+    return new MentionManager(config, chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION);
+  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
 
-    if (NetInfo?.addEventListener) {
-      const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
-        const unsubscribe = NetInfo.addEventListener((state) => {
-          const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
-          if (online && callbackType === 'online') callback();
-          if (!online && callbackType === 'offline') callback();
-        });
-        unsubscribes.push(unsubscribe);
-        return unsubscribe;
-      };
-      sdk.setOnlineListener?.((onOnline) => listener(onOnline, 'online'));
-      sdk.setOfflineListener?.((onOffline) => listener(onOffline, 'offline'));
+  useLayoutEffect(() => {
+    if (!isFirstMount) {
+      const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
+      setSdkInstance(sendbird.chatSDK);
+      unsubscribes.current = sendbird.unsubscribes;
     }
-    return sdk;
-  };
 
-  const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(getSendbirdSDK);
-
-  useEffect(() => {
-    setSdkInstance(getSendbirdSDK);
     return () => {
-      unsubscribes.forEach((u) => {
-        try {
-          u();
-        } catch {}
-      });
+      if (!isFirstMount) {
+        unsubscribes.current.forEach((u) => {
+          try {
+            u();
+          } catch {}
+        });
+      }
     };
-  }, [appId, chatOptions?.localCacheStorage]);
+  }, [appId, internalStorage]);
 
   return (
     <SafeAreaProvider>
       <SendbirdChatProvider
         sdkInstance={sdkInstance}
-        enableAutoPushTokenRegistration={chatOptions?.enableAutoPushTokenRegistration ?? true}
-        enableChannelListTypingIndicator={chatOptions?.enableChannelListTypingIndicator ?? false}
-        enableChannelListMessageReceiptStatus={chatOptions?.enableChannelListMessageReceiptStatus ?? false}
-        enableUseUserIdForNickname={chatOptions?.enableUseUserIdForNickname ?? false}
+        emojiManager={emojiManager}
+        mentionManager={mentionManager}
+        enableAutoPushTokenRegistration={
+          chatOptions?.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
+        }
+        enableChannelListTypingIndicator={
+          chatOptions?.enableChannelListTypingIndicator ?? SendbirdUIKit.DEFAULT.CHANNEL_LIST_TYPING_INDICATOR
+        }
+        enableChannelListMessageReceiptStatus={
+          chatOptions?.enableChannelListMessageReceiptStatus ??
+          SendbirdUIKit.DEFAULT.CHANNEL_LIST_MESSAGE_RECEIPT_STATUS
+        }
+        enableUseUserIdForNickname={
+          chatOptions?.enableUseUserIdForNickname ?? SendbirdUIKit.DEFAULT.USE_USER_ID_FOR_NICKNAME
+        }
+        enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
       >
-        <LocalizationProvider stringSet={localization?.stringSet ?? StringSetEn}>
+        <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider
             fileService={platformServices.file}
             notificationService={platformServices.notification}
@@ -175,16 +189,36 @@ const SendbirdUIKitContainer = ({
                 defaultTitleAlign={styles?.defaultHeaderTitleAlign ?? 'left'}
                 statusBarTranslucent={styles?.statusBarTranslucent ?? true}
               >
-                <LocalizedDialogProvider>
-                  <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <UserProfileProvider
-                      onCreateChannel={userProfile?.onCreateChannel}
-                      onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
-                    >
-                      <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
-                    </UserProfileProvider>
-                  </ToastProvider>
-                </LocalizedDialogProvider>
+                <ToastProvider dismissTimeout={toast?.dismissTimeout}>
+                  <UserProfileProvider
+                    onCreateChannel={userProfile?.onCreateChannel}
+                    onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
+                  >
+                    <ReactionProvider>
+                      <LocalizationContext.Consumer>
+                        {(value) => {
+                          const STRINGS = value?.STRINGS || defaultStringSet;
+                          return (
+                            <DialogProvider
+                              defaultLabels={{
+                                alert: { ok: STRINGS.DIALOG.ALERT_DEFAULT_OK },
+                                prompt: {
+                                  ok: STRINGS.DIALOG.PROMPT_DEFAULT_OK,
+                                  cancel: STRINGS.DIALOG.PROMPT_DEFAULT_CANCEL,
+                                  placeholder: STRINGS.DIALOG.PROMPT_DEFAULT_PLACEHOLDER,
+                                },
+                              }}
+                            >
+                              <InternalErrorBoundaryContainer {...errorBoundary}>
+                                {children}
+                              </InternalErrorBoundaryContainer>
+                            </DialogProvider>
+                          );
+                        }}
+                      </LocalizationContext.Consumer>
+                    </ReactionProvider>
+                  </UserProfileProvider>
+                </ToastProvider>
               </HeaderStyleProvider>
             </UIKitThemeProvider>
           </PlatformServiceProvider>
@@ -194,24 +228,48 @@ const SendbirdUIKitContainer = ({
   );
 };
 
-const LocalizedDialogProvider = ({ children }: React.PropsWithChildren) => {
-  const { STRINGS } = useLocalization();
-  return (
-    <DialogProvider
-      defaultLabels={{
-        alert: {
-          ok: STRINGS.DIALOG.ALERT_DEFAULT_OK,
-        },
-        prompt: {
-          ok: STRINGS.DIALOG.PROMPT_DEFAULT_OK,
-          cancel: STRINGS.DIALOG.PROMPT_DEFAULT_CANCEL,
-          placeholder: STRINGS.DIALOG.PROMPT_DEFAULT_PLACEHOLDER,
-        },
-      }}
-    >
-      {children}
-    </DialogProvider>
-  );
+const initializeSendbird = (
+  appId: string,
+  internalStorage?: InternalLocalCacheStorage,
+  onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK,
+) => {
+  const unsubscribes: Array<() => void> = [];
+  let chatSDK: SendbirdChatSDK;
+
+  chatSDK = Sendbird.init({
+    appId,
+    modules: [new GroupChannelModule(), new OpenChannelModule()],
+    localCacheEnabled: Boolean(internalStorage),
+    useAsyncStorageStore: internalStorage as never,
+    newInstance: true,
+  });
+
+  if (onInitialized) {
+    chatSDK = onInitialized(chatSDK);
+  }
+
+  if (SendbirdUIKit.VERSION) {
+    chatSDK.addExtension('sb_uikit', SendbirdUIKit.VERSION);
+  }
+
+  if (SendbirdUIKit.PLATFORM) {
+    chatSDK.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
+  }
+
+  if (NetInfo?.addEventListener) {
+    const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
+      const unsubscribe = NetInfo.addEventListener((state) => {
+        const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
+        if (online && callbackType === 'online') callback();
+        if (!online && callbackType === 'offline') callback();
+      });
+      unsubscribes.push(unsubscribe);
+      return unsubscribe;
+    };
+    chatSDK.setOnlineListener?.((onOnline) => listener(onOnline, 'online'));
+    chatSDK.setOfflineListener?.((onOffline) => listener(onOffline, 'offline'));
+  }
+  return { chatSDK, unsubscribes };
 };
 
 export default SendbirdUIKitContainer;