fix: fixed config linking in mention manager

sendbird · Jun 13, 2023 · 6e8ba6c · 6e8ba6c
1 parent a182ead
commit 6e8ba6c
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 27 deletions.
diff --git a/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx
@@ -39,7 +39,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
   },
   ref,
 ) {
-  const { mentionManager } = useSendbirdChat();
+  const { mentionManager, sbOptions } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const toast = useToast();
 
@@ -52,7 +52,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     if (messageToEdit.isUserMessage()) {
       const mentionType = MentionType.USERS;
       const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
-      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
+      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(
+        text,
+        mentionedUsers,
+        sbOptions.uikit.groupChannel.channel.enableMention,
+      );
 
       onPressUpdateUserMessage(messageToEdit, {
         message: text,
@@ -81,7 +85,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
         >
-          {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+          {mentionManager.textToMentionedComponents(
+            text,
+            mentionedUsers,
+            sbOptions.uikit.groupChannel.channel.enableMention,
+          )}
         </TextInput>
       </View>
       <View style={{ marginTop: 8, flexDirection: 'row' }}>

diff --git a/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx
@@ -50,7 +50,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   },
   ref,
 ) {
-  const { mentionManager } = useSendbirdChat();
+  const { mentionManager, sbOptions } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { openSheet } = useBottomSheet();
@@ -61,7 +61,11 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   const sendUserMessage = () => {
     const mentionType = MentionType.USERS;
     const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
-    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
+    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(
+      text,
+      mentionedUsers,
+      sbOptions.uikit.groupChannel.channel.enableMention,
+    );
 
     onPressSendUserMessage({
       message: text,
@@ -106,7 +110,11 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
         style={styles.input}
         placeholder={getPlaceholder()}
       >
-        {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+        {mentionManager.textToMentionedComponents(
+          text,
+          mentionedUsers,
+          sbOptions.uikit.groupChannel.channel.enableMention,
+        )}
       </TextInput>
 
       {Boolean(text.trim()) && (

diff --git a/packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx b/packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx
@@ -88,8 +88,13 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     regexTextPatterns: RegexTextPattern[];
   } = {
     renderRegexTextChildren: (message) => {
-      if (mentionManager.shouldUseMentionedMessageTemplate(message)) return message.mentionedMessageTemplate;
-      else return message.message;
+      if (
+        mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
+      ) {
+        return message.mentionedMessageTemplate;
+      } else {
+        return message.message;
+      }
     },
     regexTextPatterns: [
       {

diff --git a/packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx b/packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx
@@ -14,7 +14,7 @@ import {
   ToastProvider,
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
-import { SBUConfig, UIKitConfigProvider, initialConfig } from '@sendbird/uikit-tools';
+import { SBUConfig, UIKitConfigProvider } from '@sendbird/uikit-tools';
 import type {
   PartialDeep,
   SendbirdChatSDK,
@@ -150,16 +150,8 @@ const SendbirdUIKitContainer = ({
       delimiter: MentionConfig.DEFAULT.DELIMITER,
       trigger: MentionConfig.DEFAULT.TRIGGER,
     });
-    return new MentionManager(
-      config,
-      uikitOptions?.groupChannel?.enableMention ?? initialConfig.groupChannel.channel.enableMention,
-    );
-  }, [
-    userMention?.mentionLimit,
-    userMention?.suggestionLimit,
-    userMention?.debounceMills,
-    uikitOptions?.groupChannel?.enableMention,
-  ]);
+    return new MentionManager(config);
+  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
 
   const imageCompressionConfig = useMemo(() => {
     return new ImageCompressionConfig({

diff --git a/packages/uikit-react-native/src/hooks/useMentionTextInput.ts b/packages/uikit-react-native/src/hooks/useMentionTextInput.ts
@@ -8,7 +8,7 @@ import type { MentionedUser } from '../types';
 import { useSendbirdChat } from './useContext';
 
 const useMentionTextInput = (params: { messageToEdit?: SendbirdUserMessage | SendbirdFileMessage }) => {
-  const { mentionManager } = useSendbirdChat();
+  const { mentionManager, sbOptions } = useSendbirdChat();
 
   const mentionedUsersRef = useRef<MentionedUser[]>([]);
   const textInputRef = useRef<TextInput>();
@@ -18,7 +18,12 @@ const useMentionTextInput = (params: { messageToEdit?: SendbirdUserMessage | Sen
 
   // TODO: Refactor text edit logic more clearly
   useEffect(() => {
-    if (mentionManager.shouldUseMentionedMessageTemplate(params.messageToEdit)) {
+    if (
+      mentionManager.shouldUseMentionedMessageTemplate(
+        params.messageToEdit,
+        sbOptions.uikit.groupChannel.channel.enableMention,
+      )
+    ) {
       const result = mentionManager.templateToTextAndMentionedUsers(
         params.messageToEdit.mentionedMessageTemplate,
         params.messageToEdit.mentionedUsers,

diff --git a/packages/uikit-react-native/src/libs/MentionManager.tsx b/packages/uikit-react-native/src/libs/MentionManager.tsx
@@ -11,7 +11,7 @@ class MentionManager {
   private _invalidStartsKeywords: string[];
   private _templateRegex: RegExp;
 
-  constructor(public config: MentionConfigInterface, public mentionEnabled: boolean) {
+  constructor(public config: MentionConfigInterface) {
     this._invalidStartsKeywords = [this.config.trigger, this.config.delimiter];
     this._templateRegex = createMentionTemplateRegex(this.config.trigger);
   }
@@ -120,8 +120,8 @@ class MentionManager {
   /**
    * @description Bold @user.nickname
    * */
-  public textToMentionedComponents = (text: string, mentionedUsers: MentionedUser[]) => {
-    if (!this.mentionEnabled || mentionedUsers.length === 0) return text;
+  public textToMentionedComponents = (text: string, mentionedUsers: MentionedUser[], mentionEnabled: boolean) => {
+    if (!mentionEnabled || mentionedUsers.length === 0) return text;
 
     const { leftText, components } = mentionedUsers
       .sort((a, b) => b.range.start - a.range.start)
@@ -148,8 +148,8 @@ class MentionManager {
     return [leftText, ...components];
   };
 
-  public textToMentionedMessageTemplate = (text: string, mentionedUsers: MentionedUser[]) => {
-    if (!this.mentionEnabled) return text;
+  public textToMentionedMessageTemplate = (text: string, mentionedUsers: MentionedUser[], mentionEnabled: boolean) => {
+    if (!mentionEnabled) return text;
 
     const { leftText, strings } = mentionedUsers
       .sort((a, b) => b.range.start - a.range.start)
@@ -216,12 +216,13 @@ class MentionManager {
 
   public shouldUseMentionedMessageTemplate = (
     message?: SendbirdUserMessage | SendbirdFileMessage,
+    mentionEnabled?: boolean,
   ): message is RequiredSpecific<
     SendbirdUserMessage | SendbirdFileMessage,
     'mentionedMessageTemplate' | 'mentionedUsers' | 'mentionedUserIds' | 'mentionType'
   > => {
     return Boolean(
-      this.mentionEnabled &&
+      mentionEnabled &&
         message?.mentionedMessageTemplate &&
         message?.mentionedUsers &&
         message?.mentionedUsers.length > 0,