From 6e8ba6cfae3f93ab53b5dfcf93c08fa8378c026c Mon Sep 17 00:00:00 2001 From: bang9 Date: Fri, 9 Jun 2023 20:21:04 +0900 Subject: [PATCH] fix: fixed config linking in mention manager --- .../src/components/ChannelInput/EditInput.tsx | 14 +++++++++++--- .../src/components/ChannelInput/SendInput.tsx | 14 +++++++++++--- .../GroupChannelMessageRenderer/index.tsx | 9 +++++++-- .../src/containers/SendbirdUIKitContainer.tsx | 14 +++----------- .../src/hooks/useMentionTextInput.ts | 9 +++++++-- .../uikit-react-native/src/libs/MentionManager.tsx | 13 +++++++------ 6 files changed, 46 insertions(+), 27 deletions(-) diff --git a/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/EditInput.tsx index ca73be1cd..4632546fa 100644 --- 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(function EditInput( }, ref, ) { - const { mentionManager } = useSendbirdChat(); + const { mentionManager, sbOptions } = useSendbirdChat(); const { STRINGS } = useLocalization(); const toast = useToast(); @@ -52,7 +52,11 @@ const EditInput = forwardRef(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(function EditInput( placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE} onSelectionChange={onSelectionChange} > - {mentionManager.textToMentionedComponents(text, mentionedUsers)} + {mentionManager.textToMentionedComponents( + text, + mentionedUsers, + sbOptions.uikit.groupChannel.channel.enableMention, + )} diff --git a/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx b/packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx index 733247d62..b202e63ce 100644 --- 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(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(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(function SendInput( style={styles.input} placeholder={getPlaceholder()} > - {mentionManager.textToMentionedComponents(text, mentionedUsers)} + {mentionManager.textToMentionedComponents( + text, + mentionedUsers, + sbOptions.uikit.groupChannel.channel.enableMention, + )} {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 index f37ea42f0..c9d116ad1 100644 --- 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 index c6c75175e..b1399a8da 100644 --- 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 index db326e3b4..c30f7c160 100644 --- 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([]); const textInputRef = useRef(); @@ -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 index 6002f9880..82a44a6b7 100644 --- 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,