From 5f7c6afbfa2b69ee2b8f8e21b9228fcae905c0c7 Mon Sep 17 00:00:00 2001
From: bang9 <gusrn1423@naver.com>
Date: Thu, 28 Nov 2024 17:03:18 +0900
Subject: [PATCH] feat: added showUserId config to suggested mention list

---
 .../src/components/ChannelInput/index.tsx                | 4 ++++
 .../component/GroupChannelSuggestedMentionList.tsx       | 9 ++++++---
 .../component/GroupChannelThreadSuggestedMentionList.tsx | 9 ++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/uikit-react-native/src/components/ChannelInput/index.tsx b/packages/uikit-react-native/src/components/ChannelInput/index.tsx
index 2073d06a9..645fa4dcb 100644
--- a/packages/uikit-react-native/src/components/ChannelInput/index.tsx
+++ b/packages/uikit-react-native/src/components/ChannelInput/index.tsx
@@ -37,6 +37,10 @@ export type SuggestedMentionListProps = {
   inputHeight: number;
   onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
   mentionedUsers: MentionedUser[];
+  /**
+   * Whether to show user id information on each item.
+   * */
+  showUserId?: boolean;
 };
 
 export type ChannelInputProps = {
diff --git a/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx b/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx
index 40535fd1d..863b7caa0 100644
--- a/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx
+++ b/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx
@@ -26,6 +26,7 @@ const GroupChannelSuggestedMentionList = ({
   bottomInset,
   onPressToMention,
   mentionedUsers,
+  showUserId = true,
 }: GroupChannelProps['SuggestedMentionList']) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { channel } = useContext(GroupChannelContexts.Fragment);
@@ -79,9 +80,11 @@ const GroupChannelSuggestedMentionList = ({
                 <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
                   {member.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
-                <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
-                  {member.userId}
-                </Text>
+                {!!showUserId && (
+                  <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
+                    {member.userId}
+                  </Text>
+                )}
                 <Divider style={{ position: 'absolute', bottom: 0 }} />
               </Box>
             </Pressable>
diff --git a/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx b/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx
index 8856478df..19f80e7a6 100644
--- a/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx
+++ b/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx
@@ -25,6 +25,7 @@ const GroupChannelThreadSuggestedMentionList = ({
   bottomInset,
   onPressToMention,
   mentionedUsers,
+  showUserId = true,
 }: GroupChannelThreadProps['SuggestedMentionList']) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { channel } = useContext(GroupChannelThreadContexts.Fragment);
@@ -78,9 +79,11 @@ const GroupChannelThreadSuggestedMentionList = ({
                 <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
                   {member.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
-                <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
-                  {member.userId}
-                </Text>
+                {!!showUserId && (
+                  <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
+                    {member.userId}
+                  </Text>
+                )}
                 <Divider style={{ position: 'absolute', bottom: 0 }} />
               </View>
             </Pressable>