feat(foundation): added mention related props to group channel preview

Author: bang9

packages/uikit-react-native-foundation/src/ui/GroupChannelPreview/index.tsx

@@ -29,6 +29,8 @@ type Props = {
   frozen?: boolean;
   notificationOff?: boolean;
   broadcast?: boolean;
+  mentioned?: boolean;
+  mentionTrigger?: string;
 };
 
 const GroupChannelPreview = ({
@@ -45,6 +47,8 @@ const GroupChannelPreview = ({
   frozen,
   notificationOff,
   broadcast,
+  mentioned,
+  mentionTrigger = '@',
 }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.groupChannelPreview;
@@ -115,7 +119,14 @@ const GroupChannelPreview = ({
               </Text>
             </View>
           </View>
-          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
+          <View style={styles.unreadContainer}>
+            {mentioned && (
+              <Text h2 color={colors.ui.badge.default.none.background} style={styles.unreadMention}>
+                {mentionTrigger}
+              </Text>
+            )}
+            {badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}
+          </View>
         </View>
         <Separator color={color.default.none.separator} />
       </View>
@@ -204,12 +215,12 @@ const styles = createStyleSheet({
     height: 26,
     marginRight: 4,
   },
-  unreadBadge: {
-    minWidth: 20,
-    minHeight: 20,
-    borderRadius: 99,
-    alignItems: 'center',
-    justifyContent: 'center',
+  unreadContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  unreadMention: {
+    marginRight: 4,
   },
   separator: {
     position: 'absolute',

packages/uikit-react-native/src/containers/GroupChannelPreviewContainer.tsx

@@ -32,7 +32,7 @@ type Props = {
   onLongPress: () => void;
 };
 const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props) => {
-  const { currentUser, sdk, features } = useSendbirdChat();
+  const { currentUser, sdk, features, mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
 
@@ -100,6 +100,8 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         body={bodyText}
         bodyIcon={bodyIcon}
         badgeCount={channel.unreadMessageCount}
+        mentioned={channel.unreadMentionCount > 0}
+        mentionTrigger={mentionManager.config.trigger}
         memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
         frozen={channel.isFrozen}
         broadcast={channel.isBroadcast}