@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/hooks/useContext.ts

@@ -1,8 +1,10 @@
 import { useContext } from 'react';
 
-import { LocalizationContext } from '../contexts/Localization';
-import { PlatformServiceContext } from '../contexts/PlatformService';
-import { SendbirdChatContext } from '../contexts/SendbirdChat';
+import { LocalizationContext } from '../contexts/LocalizationCtx';
+import { PlatformServiceContext } from '../contexts/PlatformServiceCtx';
+import { ReactionContext } from '../contexts/ReactionCtx';
+import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
+import { UserProfileContext } from '../contexts/UserProfileCtx';
 
 export const useLocalization = () => {
   const value = useContext(LocalizationContext);
@@ -21,3 +23,15 @@ export const useSendbirdChat = () => {
   if (!value) throw new Error('SendbirdChatContext is not provided');
   return value;
 };
+
+export const useUserProfile = () => {
+  const value = useContext(UserProfileContext);
+  if (!value) throw new Error('UserProfileContext is not provided');
+  return value;
+};
+
+export const useReaction = () => {
+  const value = useContext(ReactionContext);
+  if (!value) throw new Error('ReactionContext is not provided');
+  return value;
+};

package/src/hooks/useKeyboardStatus.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, KeyboardEvent, KeyboardEventName, LayoutAnimation, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+type KeyboardEvents = {
+  showEvent: KeyboardEventName;
+  hideEvent: KeyboardEventName;
+};
+
+const configureNextLayoutAnimation = (event: KeyboardEvent) => {
+  const config = LayoutAnimation.create(event.duration, event.easing);
+  LayoutAnimation.configureNext(config);
+};
+
+const { showEvent, hideEvent } = Platform.select<KeyboardEvents>({
+  android: { showEvent: 'keyboardDidShow', hideEvent: 'keyboardDidHide' },
+  default: { showEvent: 'keyboardWillShow', hideEvent: 'keyboardWillHide' },
+});
+
+const useKeyboardStatus = () => {
+  const [keyboardStatus, setKeyboardStatus] = useState({ visible: false, height: 0, bottomSpace: 0 });
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
+  useEffect(() => {
+    const subscriptions = [
+      Keyboard.addListener(showEvent, (event) => {
+        const height = event.endCoordinates.height;
+        const bottomSpace = Platform.select({ ios: height - bottomInset, default: 0 });
+        const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
+
+        nextLayoutAnimation(event);
+        setKeyboardStatus({ visible: true, height, bottomSpace });
+      }),
+
+      Keyboard.addListener(hideEvent, (event) => {
+        const height = 0;
+        const bottomSpace = Platform.select({ default: height });
+        const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });
+
+        nextLayoutAnimation(event);
+        setKeyboardStatus({ visible: false, height, bottomSpace });
+      }),
+    ];
+    return () => {
+      subscriptions.forEach((it) => it.remove());
+    };
+  }, []);
+
+  return keyboardStatus;
+};
+
+export default useKeyboardStatus;

package/src/hooks/useMentionSuggestion.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { SendbirdGroupChannel, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+import { useAsyncEffect } from '@sendbird/uikit-utils';
+
+import { useSendbirdChat } from '../hooks/useContext';
+import type { Range } from '../types';
+
+const useMentionSuggestion = (params: {
+  text: string;
+  selection: Range;
+  channel: SendbirdGroupChannel;
+  mentionedUsers: { user: SendbirdUser; range: Range }[];
+}) => {
+  const { text, selection, channel, mentionedUsers } = params;
+
+  const [freshChannel, setFreshChannel] = useState(channel);
+
+  useAsyncEffect(async () => {
+    setFreshChannel(await channel.refresh());
+  }, [channel.url]);
+
+  const { mentionManager, currentUser } = useSendbirdChat();
+  const [members, setMembers] = useState<SendbirdMember[]>([]);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const searchStringRangeRef = useRef<Range>({ start: 0, end: 0 });
+  const searchLimitedRef = useRef(false);
+
+  const updateSearchStringRange = (selectionIndex: number, searchString: string) => {
+    searchStringRangeRef.current = mentionManager.getSearchStringRangeInText(selectionIndex, searchString);
+    return searchStringRangeRef.current;
+  };
+  const updateSearchLimited = (mentionCount: number, mentionLimit: number) => {
+    searchLimitedRef.current = mentionCount >= mentionLimit;
+    return searchLimitedRef.current;
+  };
+  const resetRefs = () => {
+    searchLimitedRef.current = false;
+    searchStringRangeRef.current = { start: 0, end: 0 };
+  };
+
+  const fetchMembers = async (): Promise<SendbirdMember[]> => {
+    resetRefs();
+
+    const selectionRanged = selection.start !== selection.end;
+    if (selectionRanged) return [];
+
+    const selectionContainsMentionedUser = mentionedUsers.some((it) =>
+      mentionManager.rangeHelpers.overlaps(it.range, selection, 'underMore'),
+    );
+    if (selectionContainsMentionedUser) return [];
+
+    const { isTriggered, isValidSearchString, searchString } = mentionManager.getSearchString(text, selection.start);
+    if (!isTriggered() || !isValidSearchString()) return [];
+
+    const limited = updateSearchLimited(mentionedUsers.length, mentionManager.config.mentionLimit);
+    if (limited) return [];
+
+    updateSearchStringRange(selection.start, searchString);
+
+    if (freshChannel.isSuper) {
+      return freshChannel
+        .createMemberListQuery({
+          nicknameStartsWithFilter: searchString,
+          limit: mentionManager.config.suggestionLimit + 1,
+        })
+        .next()
+        .then((members) => members.filter((member) => member.userId !== currentUser?.userId));
+    } else {
+      return freshChannel.members
+        .sort((a, b) => a.nickname?.localeCompare(b.nickname))
+        .filter(
+          (member) =>
+            member.nickname?.toLowerCase().startsWith(searchString.toLowerCase()) &&
+            member.userId !== currentUser?.userId,
+        )
+        .slice(0, mentionManager.config.suggestionLimit);
+    }
+  };
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(async () => {
+      fetchMembers()
+        .then(setMembers)
+        .catch(() => setMembers([]))
+        .finally(() => (timeoutRef.current = undefined));
+    }, mentionManager.config.debounceMills);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+      }
+    };
+  }, [text, selection]);
+
+  return {
+    members,
+    reset: useCallback(() => setMembers([]), []),
+    searchStringRange: searchStringRangeRef.current,
+    searchLimited: searchLimitedRef.current,
+  };
+};
+
+export default useMentionSuggestion;

package/src/hooks/useMentionTextInput.ts

@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import type { NativeSyntheticEvent, TextInput, TextInputSelectionChangeEventData } from 'react-native';
+import { Platform } from 'react-native';
+
+import { SendbirdFileMessage, SendbirdUserMessage, replace, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { MentionedUser } from '../types';
+import { useSendbirdChat } from './useContext';
+
+const useMentionTextInput = (params: { messageToEdit?: SendbirdUserMessage | SendbirdFileMessage }) => {
+  const { mentionManager } = useSendbirdChat();
+
+  const mentionedUsersRef = useRef<MentionedUser[]>([]);
+  const textInputRef = useRef<TextInput>();
+
+  const [text, setText] = useState('');
+  const [selection, setSelection] = useState({ start: 0, end: 0 });
+
+  // TODO: Refactor text edit logic more clearly
+  useEffect(() => {
+    if (mentionManager.shouldUseMentionedMessageTemplate(params.messageToEdit)) {
+      const result = mentionManager.templateToTextAndMentionedUsers(
+        params.messageToEdit.mentionedMessageTemplate,
+        params.messageToEdit.mentionedUsers,
+      );
+
+      mentionedUsersRef.current = result.mentionedUsers;
+      setText(result.mentionedText);
+    } else {
+      mentionedUsersRef.current = [];
+      if (params.messageToEdit?.isUserMessage()) {
+        setText(params.messageToEdit.message);
+      }
+    }
+  }, [params.messageToEdit]);
+
+  const onChangeText = useFreshCallback((_nextText: string, addedMentionedUser?: MentionedUser) => {
+    const prevText = text;
+    let nextText = _nextText;
+    let offset = nextText.length - prevText.length;
+
+    // Text clear
+    if (nextText === '') {
+      mentionedUsersRef.current = [];
+    }
+    // Text add
+    else if (offset > 0) {
+      /** Add mentioned user **/
+      if (addedMentionedUser) mentionedUsersRef.current.push(addedMentionedUser);
+
+      /** Reconcile mentioned users range on the right side of the selection **/
+      mentionedUsersRef.current = mentionManager.reconcileRangeOfMentionedUsers(
+        offset,
+        selection.end,
+        mentionedUsersRef.current,
+      );
+    }
+    // Text remove
+    else if (offset < 0) {
+      // Ranged remove
+      if (selection.start !== selection.end) {
+        /** Filter mentioned users in selection range **/
+        const { filtered, lastSelection } = mentionManager.removeMentionedUsersInSelection(
+          selection,
+          mentionedUsersRef.current,
+        );
+
+        /** Reconcile mentioned users range on the right side of the selection **/
+        mentionedUsersRef.current = mentionManager.reconcileRangeOfMentionedUsers(
+          offset,
+          Math.max(selection.end, lastSelection),
+          filtered,
+        );
+      }
+      // Single remove
+      else {
+        /** Find mentioned user who ranges in removed selection **/
+        const foundIndex = mentionedUsersRef.current.findIndex((it) =>
+          mentionManager.rangeHelpers.overlaps(it.range, selection, 'underMore'),
+        );
+        /** If found, remove from the mentioned user list and remove remainder text **/
+        if (foundIndex > -1) {
+          const it = mentionedUsersRef.current[foundIndex];
+          const remainderLength = it.range.end - it.range.start + offset;
+
+          offset = -remainderLength + offset;
+          nextText = replace(nextText, it.range.start, it.range.start + remainderLength, '');
+
+          mentionedUsersRef.current.splice(foundIndex, 1);
+        }
+
+        /** Reconcile mentioned users range on the right side of the selection **/
+        mentionedUsersRef.current = mentionManager.reconcileRangeOfMentionedUsers(
+          offset,
+          selection.end,
+          mentionedUsersRef.current,
+        );
+      }
+    }
+
+    setText(nextText);
+  });
+
+  return {
+    textInputRef,
+    selection,
+    onSelectionChange: useFreshCallback((e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+      const nativeSelection = { ...e.nativeEvent.selection };
+
+      // NOTE: To synchronize call onSelectionChange after onChangeText called on each platform.
+      setTimeout(() => {
+        const mentionedUser = mentionedUsersRef.current.find((it) =>
+          mentionManager.rangeHelpers.overlaps(it.range, nativeSelection),
+        );
+
+        // Selection should be blocked if changed into mentioned area
+        if (mentionedUser) {
+          const selectionBlock = { start: mentionedUser.range.start, end: mentionedUser.range.end };
+          textInputRef.current?.setNativeProps({ selection: selectionBlock });
+          // BUG: setNativeProps called again when invoked onChangeText
+          //  https://github.com/facebook/react-native/issues/33520
+          if (Platform.OS === 'android') {
+            setTimeout(() => {
+              textInputRef.current?.setNativeProps({ selection: { start: 0 } });
+            }, 250);
+          }
+          setSelection(selectionBlock);
+        } else {
+          setSelection(nativeSelection);
+        }
+      }, 10);
+    }),
+    text,
+    onChangeText,
+    mentionedUsers: mentionedUsersRef.current,
+  };
+};
+
+export default useMentionTextInput;

package/src/index.ts

@@ -4,6 +4,8 @@ import { Platform } from 'react-native';
 import { Logger } from '@sendbird/uikit-utils';
 
 export { default as MessageRenderer } from './components/MessageRenderer';
+export { ReactionAddons } from './components/ReactionAddons';
+export { ReactionBottomSheets } from './components/ReactionBottomSheets';
 export { default as ChannelCover } from './components/ChannelCover';
 export { default as ChatFlatList } from './components/ChatFlatList';
 export { default as FileViewer } from './components/FileViewer';
@@ -22,16 +24,23 @@ export { default as createGroupChannelSettingsFragment } from './fragments/creat
 export { default as createGroupChannelInviteFragment } from './fragments/createGroupChannelInviteFragment';
 export { default as createGroupChannelListFragment } from './fragments/createGroupChannelListFragment';
 export { default as createGroupChannelMembersFragment } from './fragments/createGroupChannelMembersFragment';
+export { default as createGroupChannelModerationFragment } from './fragments/createGroupChannelModerationFragment';
+export { default as createGroupChannelOperatorsFragment } from './fragments/createGroupChannelOperatorsFragment';
+export { default as createGroupChannelRegisterOperatorFragment } from './fragments/createGroupChannelRegisterOperatorFragment';
+export { default as createGroupChannelMutedMembersFragment } from './fragments/createGroupChannelMutedMembersFragment';
+export { default as createGroupChannelBannedUsersFragment } from './fragments/createGroupChannelBannedUsersFragment';
+export { default as createGroupChannelNotificationsFragment } from './fragments/createGroupChannelNotificationsFragment';
 
 /** Context **/
-export { SendbirdChatContext, SendbirdChatProvider } from './contexts/SendbirdChat';
-export { PlatformServiceContext, PlatformServiceProvider } from './contexts/PlatformService';
-export { LocalizationContext, LocalizationProvider } from './contexts/Localization';
+export { SendbirdChatContext, SendbirdChatProvider } from './contexts/SendbirdChatCtx';
+export { PlatformServiceContext, PlatformServiceProvider } from './contexts/PlatformServiceCtx';
+export { UserProfileContext, UserProfileProvider } from './contexts/UserProfileCtx';
+export { LocalizationContext, LocalizationProvider } from './contexts/LocalizationCtx';
 
 /** Hooks **/
 export { default as useConnection } from './hooks/useConnection';
 export { default as usePushTokenRegistration } from './hooks/usePushTokenRegistration';
-export { useLocalization, usePlatformService, useSendbirdChat } from './hooks/useContext';
+export * from './hooks/useContext';
 
 /** Localization **/
 export { default as StringSetEn } from './localization/StringSet.en';
@@ -91,9 +100,17 @@ export type {
   GroupChannelListContextsType,
 } from './domain/groupChannelList/types';
 
+export * from './domain/groupChannelNotifications';
+export {
+  GroupChannelNotificationsProps,
+  GroupChannelNotificationsContextsType,
+  GroupChannelNotificationsFragment,
+  GroupChannelNotificationsModule,
+} from './domain/groupChannelNotifications/types';
+
+export * from './domain/groupChannelUserList/types';
 export * from './domain/userList';
 export type { UserListProps, UserListModule, UserListContextsType } from './domain/userList/types';
-export * from './domain/groupChannelUserList/types';
 
 /** UIKit **/
 export { default as SendbirdUIKitContainer, SendbirdUIKit } from './containers/SendbirdUIKitContainer';

package/src/libs/EmojiManager.ts

@@ -0,0 +1,80 @@
+import type { SendbirdEmoji, SendbirdEmojiCategory, SendbirdEmojiContainer } from '@sendbird/uikit-utils';
+
+import type { LocalCacheStorage } from '../types';
+import InternalLocalCacheStorage from './InternalLocalCacheStorage';
+
+class MemoryStorage implements LocalCacheStorage {
+  _data: Record<string, string> = {};
+
+  async getAllKeys(): Promise<readonly string[] | string[]> {
+    return Object.keys(this._data);
+  }
+
+  async getItem(key: string): Promise<string | null> {
+    return this._data[key];
+  }
+
+  async removeItem(key: string): Promise<void> {
+    delete this._data[key];
+  }
+
+  async setItem(key: string, value: string): Promise<void> {
+    this._data[key] = value;
+  }
+}
+
+class EmojiManager {
+  static key = 'sendbird-uikit@emoji-manager';
+
+  constructor(
+    private internalStorage: InternalLocalCacheStorage = new InternalLocalCacheStorage(new MemoryStorage()),
+  ) {}
+
+  private emojiStorage = {
+    data: null as null | SendbirdEmojiContainer,
+    get: async () => {
+      if (!this.emojiStorage.data) {
+        const strItem = await this.internalStorage.getItem(EmojiManager.key);
+        if (strItem) this.emojiStorage.data = Object.freeze(JSON.parse(strItem));
+      }
+      return this.emojiStorage.data;
+    },
+    set: async (data: SendbirdEmojiContainer) => {
+      this.emojiStorage.data = Object.freeze(data);
+      await this.internalStorage.setItem(EmojiManager.key, JSON.stringify(data));
+    },
+  };
+
+  private _emojiCategoryMap: Record<string, SendbirdEmojiCategory> = {};
+  public get emojiCategoryMap() {
+    return this._emojiCategoryMap;
+  }
+
+  private _allEmojiMap: Record<string, SendbirdEmoji> = {};
+  public get allEmojiMap() {
+    return this._allEmojiMap;
+  }
+
+  private _allEmoji: SendbirdEmoji[] = [];
+  public get allEmoji() {
+    return this._allEmoji;
+  }
+
+  public init = async (emojiContainer?: SendbirdEmojiContainer) => {
+    if (emojiContainer) await this.emojiStorage.set(emojiContainer);
+
+    const container = await this.emojiStorage.get();
+
+    if (container) {
+      for (const category of container.emojiCategories) {
+        this._emojiCategoryMap[category.id] = category;
+        for (const emoji of category.emojis) {
+          this._allEmojiMap[emoji.key] = emoji;
+        }
+      }
+      this._allEmoji = Object.values(this._allEmojiMap);
+    }
+  };
+}
+
+export default EmojiManager;

package/src/libs/MentionConfig.ts

@@ -0,0 +1,40 @@
+export interface MentionConfigInterface {
+  mentionLimit: number;
+  suggestionLimit: number;
+  debounceMills: number;
+  delimiter: string;
+  trigger: string;
+}
+
+class MentionConfig {
+  static DEFAULT = {
+    MENTION_LIMIT: 10,
+    SUGGESTION_LIMIT: 15,
+    DEBOUNCE_MILLS: 300,
+    DELIMITER: ' ',
+    TRIGGER: '@',
+  };
+  constructor(private _config: MentionConfigInterface) {}
+
+  get mentionLimit() {
+    return this._config.mentionLimit;
+  }
+
+  get suggestionLimit() {
+    return this._config.suggestionLimit;
+  }
+
+  get delimiter() {
+    return this._config.delimiter;
+  }
+
+  get debounceMills() {
+    return this._config.debounceMills;
+  }
+
+  get trigger() {
+    return this._config.trigger;
+  }
+}
+
+export default MentionConfig;