Merge pull request #220 from sendbird/feat/mention-list-showUserId

[CLNP-5902] feat: added showUserId config to suggested mention list
sendbird · Nov 28, 2024 · f229033 · f229033
2 parents b021c59 + 5f7c6af
commit f229033
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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/...uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx b/...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/...native/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx b/...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>