@sendbird/uikit-react-native 2.1.0 → 2.3.0

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';
@@ -27,6 +29,7 @@ export { default as createGroupChannelOperatorsFragment } from './fragments/crea
 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/SendbirdChatCtx';
@@ -37,7 +40,7 @@ export { LocalizationContext, LocalizationProvider } from './contexts/Localizati
 /** Hooks **/
 export { default as useConnection } from './hooks/useConnection';
 export { default as usePushTokenRegistration } from './hooks/usePushTokenRegistration';
-export { useLocalization, usePlatformService, useSendbirdChat, useUserProfile } from './hooks/useContext';
+export * from './hooks/useContext';
 
 /** Localization **/
 export { default as StringSetEn } from './localization/StringSet.en';
@@ -69,6 +72,7 @@ export type {
   FilePickerResponse,
   FileType,
   NotificationServiceInterface,
+  MediaServiceInterface,
 } from './platform/types';
 
 /** Domain **/
@@ -97,9 +101,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/ImageCompressionConfig.ts

@@ -0,0 +1,31 @@
+import { Logger } from '@sendbird/uikit-utils';
+
+export interface ImageCompressionConfigInterface {
+  compressionRate: number;
+  width?: number;
+  height?: number;
+}
+
+class ImageCompressionConfig {
+  static DEFAULT = {
+    COMPRESSION_RATE: 0.7,
+  };
+
+  constructor(private _config: ImageCompressionConfigInterface) {
+    if (_config.compressionRate > 1) Logger.warn('Compression rate must be in the range of 0.0 - 1.0');
+  }
+
+  get compressionRate() {
+    return Math.min(Math.max(0, this._config.compressionRate), 1);
+  }
+
+  get width() {
+    return this._config.width;
+  }
+
+  get height() {
+    return this._config.height;
+  }
+}
+
+export default ImageCompressionConfig;

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;

package/src/libs/MentionManager.tsx

@@ -0,0 +1,240 @@
+import React from 'react';
+
+import { Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdFileMessage, SendbirdUser, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import { createMentionTemplateRegex, replaceWithRegex } from '@sendbird/uikit-utils';
+
+import type { MentionedUser, Range } from '../types';
+import type { MentionConfigInterface } from './MentionConfig';
+
+class MentionManager {
+  private _invalidStartsKeywords: string[];
+  private _templateRegex: RegExp;
+
+  constructor(public config: MentionConfigInterface, public mentionEnabled: boolean) {
+    this._invalidStartsKeywords = [this.config.trigger, this.config.delimiter];
+    this._templateRegex = createMentionTemplateRegex(this.config.trigger);
+  }
+
+  public rangeHelpers = {
+    inRangeUnderOver(start: number, num: number, end: number) {
+      return start < num && num < end;
+    },
+    inRangeUnderMore(start: number, num: number, end: number) {
+      return start < num && num <= end;
+    },
+    inRangeLessOver(start: number, num: number, end: number) {
+      return start <= num && num < end;
+    },
+    inRangeLessMore(start: number, num: number, end: number) {
+      return start <= num && num <= end;
+    },
+    overlaps(a: Range, b: Range, compare: 'underOver' | 'underMore' | 'lessOver' | 'lessMore' = 'underOver') {
+      const inRange = {
+        underOver: this.inRangeUnderOver,
+        underMore: this.inRangeUnderMore,
+        lessOver: this.inRangeLessOver,
+        lessMore: this.inRangeLessMore,
+      }[compare];
+
+      return inRange(a.start, b.start, a.end) || inRange(a.start, b.end, a.end);
+    },
+  };
+
+  public get templateRegex() {
+    return this._templateRegex;
+  }
+
+  public getSearchString = (text: string, selectionIndex: number) => {
+    const lastSpan = text.slice(0, selectionIndex).split(this.config.delimiter).pop() ?? '';
+    const triggerIdx = lastSpan.indexOf(this.config.trigger);
+    const mentionSpan = triggerIdx === -1 ? lastSpan : lastSpan.slice(triggerIdx);
+    const searchString = mentionSpan.slice(this.config.trigger.length);
+
+    return {
+      searchString,
+      isTriggered: () => mentionSpan.startsWith(this.config.trigger),
+      isValidSearchString: () => this._invalidStartsKeywords.every((it) => !searchString.startsWith(it)),
+    };
+  };
+
+  /**
+   * @description Reconcile the range by offset in the mentioned users
+   * */
+  public reconcileRangeOfMentionedUsers = (offset: number, selectionIndex: number, mentionedUsers: MentionedUser[]) => {
+    return mentionedUsers.map((it) => {
+      // Changes only on the right text of selection.
+      if (selectionIndex <= it.range.start) {
+        return {
+          ...it,
+          range: {
+            start: it.range.start + offset,
+            end: it.range.end + offset,
+          },
+        };
+      }
+
+      return it;
+    });
+  };
+
+  /**
+   * @description Remove users who in a range
+   * */
+  public removeMentionedUsersInSelection = (selection: Range, mentionedUsers: MentionedUser[]) => {
+    let lastSelection = 0;
+    let removedOffset = 0;
+    const filtered = mentionedUsers.filter((it) => {
+      const shouldRemove = this.rangeHelpers.overlaps(selection, it.range, 'lessMore');
+      if (shouldRemove) {
+        lastSelection = Math.max(lastSelection, it.range.end);
+        removedOffset -= it.range.end - it.range.start;
+      }
+      return !shouldRemove;
+    });
+
+    return { filtered, lastSelection, removedOffset };
+  };
+
+  public getSearchStringRangeInText = (selectionIndex: number, searchString: string): Range => {
+    return {
+      start: selectionIndex - searchString.length - this.config.trigger.length,
+      end: selectionIndex,
+    };
+  };
+
+  /**
+   * @description User to @{user.id} template format
+   * */
+  public asMentionedMessageTemplate = (user: SendbirdUser, delimiter = false) => {
+    return `${this.config.trigger}{${user.userId}}` + (delimiter ? this.config.delimiter : '');
+  };
+
+  /**
+   * @description User to @user.nickname text format
+   * */
+  public asMentionedMessageText = (user: SendbirdUser, delimiter = false) => {
+    return `${this.config.trigger}${user.nickname}` + (delimiter ? this.config.delimiter : '');
+  };
+
+  /**
+   * @description Bold @user.nickname
+   * */
+  public textToMentionedComponents = (text: string, mentionedUsers: MentionedUser[]) => {
+    if (!this.mentionEnabled || mentionedUsers.length === 0) return text;
+
+    const { leftText, components } = mentionedUsers
+      .sort((a, b) => b.range.start - a.range.start)
+      .reduce(
+        ({ leftText, components }, curr, currentIndex) => {
+          const leftSpan = leftText.slice(0, curr.range.start);
+          const mentionSpan = leftText.slice(curr.range.start, curr.range.end);
+          const rightSpan = leftText.slice(curr.range.end);
+
+          return {
+            leftText: leftSpan,
+            components: [
+              <Text key={mentionSpan + currentIndex} style={styles.mentionedText}>
+                {mentionSpan}
+              </Text>,
+              rightSpan,
+              ...components,
+            ],
+          };
+        },
+        { leftText: text, components: [] as (string | JSX.Element)[] },
+      );
+
+    return [leftText, ...components];
+  };
+
+  public textToMentionedMessageTemplate = (text: string, mentionedUsers: MentionedUser[]) => {
+    if (!this.mentionEnabled) return text;
+
+    const { leftText, strings } = mentionedUsers
+      .sort((a, b) => b.range.start - a.range.start)
+      .reduce(
+        ({ leftText, strings }, curr) => {
+          const leftSpan = leftText.slice(0, curr.range.start);
+          const templateSpan = this.asMentionedMessageTemplate(curr.user);
+          const rightSpan = leftText.slice(curr.range.end);
+
+          return {
+            leftText: leftSpan,
+            strings: [templateSpan, rightSpan, ...strings],
+          };
+        },
+        { leftText: text, strings: [] as string[] },
+      );
+
+    return [leftText, ...strings].join('');
+  };
+
+  /**
+   * @description Convert @{user.id} template to @user.nickname text and MentionedUser[] array.
+   * */
+  public templateToTextAndMentionedUsers = (template: string, mentionedUsers: SendbirdUser[]) => {
+    const actualMentionedUsers: MentionedUser[] = [];
+
+    let offsetToMove = 0;
+    const mentionedText = replaceWithRegex(
+      template,
+      this.templateRegex,
+      ({ match, matchIndex, groups }) => {
+        const user = mentionedUsers.find((it) => it.userId === groups[2]);
+        if (user && typeof matchIndex === 'number') {
+          const userIdSpan = match;
+          const userNicknameSpan = this.asMentionedMessageText(user);
+
+          const offsetAfterConverted = userNicknameSpan.length - userIdSpan.length;
+
+          const originalRange: Range = {
+            start: matchIndex,
+            end: matchIndex + userIdSpan.length,
+          };
+
+          const convertedRange: Range = {
+            start: Math.max(0, originalRange.start + offsetToMove),
+            end: originalRange.end + offsetToMove + offsetAfterConverted,
+          };
+
+          offsetToMove += offsetAfterConverted;
+
+          actualMentionedUsers.push({ range: convertedRange, user });
+          return userNicknameSpan;
+        }
+        return match;
+      },
+      '',
+    ).join('');
+
+    return {
+      mentionedText,
+      mentionedUsers: actualMentionedUsers,
+    };
+  };
+
+  public shouldUseMentionedMessageTemplate = (
+    message?: SendbirdUserMessage | SendbirdFileMessage,
+  ): message is RequiredSpecific<
+    SendbirdUserMessage | SendbirdFileMessage,
+    'mentionedMessageTemplate' | 'mentionedUsers' | 'mentionedUserIds' | 'mentionType'
+  > => {
+    return Boolean(
+      this.mentionEnabled &&
+        message?.mentionedMessageTemplate &&
+        message?.mentionedUsers &&
+        message?.mentionedUsers.length > 0,
+    );
+  };
+}
+
+type RequiredSpecific<T, K extends keyof T> = T & {
+  [P in K]-?: T[P];
+};
+
+const styles = createStyleSheet({
+  mentionedText: { fontWeight: 'bold' },
+});
+
+export default MentionManager;

package/src/libs/SBUUtils.ts

@@ -1,4 +1,6 @@
-import { Linking, Platform } from 'react-native';
+import { Image, Linking, Platform } from 'react-native';
+
+import { Logger } from '@sendbird/uikit-utils';
 
 export default class SBUUtils {
   static openSettings() {
@@ -6,4 +8,29 @@ export default class SBUUtils {
       if (Platform.OS === 'ios') Linking.openURL('App-Prefs:root');
     });
   }
+
+  static openURL(url: string) {
+    const targetUrl = url.startsWith('http') ? url : 'https://' + url;
+    Linking.openURL(targetUrl).catch((err) => Logger.warn('Cannot open url', err));
+  }
+
+  static getImageSize(uri: string): Promise<{ width: number; height: number }> {
+    return new Promise((resolve, reject) => {
+      Image.getSize(
+        uri,
+        (width, height) => {
+          resolve({ width, height });
+        },
+        (error) => {
+          reject(error);
+        },
+      );
+    });
+  }
+
+  static async safeRun(callback: () => Promise<void>) {
+    try {
+      await callback();
+    } catch (e) {}
+  }
 }