feat: add muted channel status in Channel list screen (#1087)

khushal87 · web-flow · commit c9d9211a38fd · 2022-01-20T14:01:21.000+01:00
docs: add channel muted status props documentation and name fixes

fix: markdown lint issues

fix: theming of the ChannelPreviewMutedStatus component
diff --git a/docusaurus/docs/reactnative/common-content/core-components/channel-list/props/preview_muted_status.mdx b/docusaurus/docs/reactnative/common-content/core-components/channel-list/props/preview_muted_status.mdx
@@ -0,0 +1,5 @@
+Channel muted status component rendered within [`Preview`](../../../../ui-components/channel_preview_muted_status.mdx).
+
+| Type      | Default                                                                                 |
+| --------- | --------------------------------------------------------------------------------------- |
+| component | [ChannelPreviewMutedStatus](../../../../ui-components/channel_preview_muted_status.mdx) |
diff --git a/docusaurus/docs/reactnative/core-components/channel_list.mdx b/docusaurus/docs/reactnative/core-components/channel_list.mdx
@@ -37,6 +37,7 @@ import LoadingIndicator from '../common-content/core-components/channel-list/pro
 import Preview from '../common-content/core-components/channel-list/props/preview.mdx';
 import PreviewAvatar from '../common-content/core-components/channel-list/props/preview_avatar.mdx';
 import PreviewMessage from '../common-content/core-components/channel-list/props/preview_message.mdx';
+import PreviewMutedStatus from '../common-content/core-components/channel-list/props/preview_muted_status.mdx';
 import PreviewStatus from '../common-content/core-components/channel-list/props/preview_status.mdx';
 import PreviewTitle from '../common-content/core-components/channel-list/props/preview_title.mdx';
 import PreviewUnreadCount from '../common-content/core-components/channel-list/props/preview_unread_count.mdx';
@@ -236,6 +237,10 @@ const CustomPreviewTitle = ({ channel }) => (
 
 <PreviewMessage />
 
+### PreviewMutedStatus
+
+<PreviewMutedStatus />
+
 ### PreviewStatus
 
 <PreviewStatus />
diff --git a/docusaurus/docs/reactnative/ui-components/channel_preview_muted_status.mdx b/docusaurus/docs/reactnative/ui-components/channel_preview_muted_status.mdx
@@ -0,0 +1,23 @@
+---
+id: channel-preview-muted_status
+title: ChannelPreviewMutedStatus
+---
+
+import Channel from '../common-content/ui-components/channel-preview-messenger/props/channel.mdx';
+
+Component to render the muted status for a channel, within the [`ChannelList`](../core-components/channel_list.mdx) component.
+This is the default component provided to the prop [`PreviewMutedStatus`](../core-components/channel_list.mdx#previewmutedstatus) on the `ChannelList` component.
+
+## Props
+
+### <div class="label required">required</div> **channel**
+
+<Channel />
+
+### <div class="label required">required</div> **muted**
+
+Value which stores the muted status of the Channel
+
+| Type    |
+| ------- |
+| boolean |
diff --git a/docusaurus/docs/reactnative/ui-components/channel_preview_title.mdx b/docusaurus/docs/reactnative/ui-components/channel_preview_title.mdx
@@ -18,6 +18,6 @@ Formatted name for the previewed channel.
 | ------ |
 | string |
 
-### channel
+### <div class="label required">required</div> **channel**
 
 <Channel />
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx
@@ -5,6 +5,7 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { ChannelAvatar } from './ChannelAvatar';
 import type { ChannelPreviewProps } from './ChannelPreview';
 import { ChannelPreviewMessage } from './ChannelPreviewMessage';
+import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewStatus } from './ChannelPreviewStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
 import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
@@ -45,6 +46,10 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingLeft: 8,
   },
+  statusContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
   title: { fontSize: 14, fontWeight: '700' },
 });
 
@@ -65,6 +70,7 @@ export type ChannelPreviewMessengerPropsWithContext<
     | 'onSelect'
     | 'PreviewAvatar'
     | 'PreviewMessage'
+    | 'PreviewMutedStatus'
     | 'PreviewStatus'
     | 'PreviewTitle'
     | 'PreviewUnreadCount'
@@ -125,6 +131,7 @@ const ChannelPreviewMessengerWithContext = <
     PreviewStatus = ChannelPreviewStatus,
     PreviewTitle = ChannelPreviewTitle,
     PreviewUnreadCount = ChannelPreviewUnreadCount,
+    PreviewMutedStatus = ChannelPreviewMutedStatus,
     unread,
   } = props;
 
@@ -140,6 +147,8 @@ const ChannelPreviewMessengerWithContext = <
     Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),
   );
 
+  const isChannelMuted = channel.muteStatus().muted;
+
   return (
     <TouchableOpacity
       onPress={() => {
@@ -161,7 +170,10 @@ const ChannelPreviewMessengerWithContext = <
       >
         <View style={[styles.row, row]}>
           <PreviewTitle channel={channel} displayName={displayName} />
-          <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
+          <View style={[styles.statusContainer, row]}>
+            <PreviewMutedStatus channel={channel} muted={isChannelMuted} />
+            <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
+          </View>
         </View>
         <View style={[styles.row, row]}>
           <PreviewMessage latestMessagePreview={latestMessagePreview} />
@@ -219,6 +231,7 @@ export const ChannelPreviewMessenger = <
     onSelect,
     PreviewAvatar,
     PreviewMessage,
+    PreviewMutedStatus,
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
@@ -230,6 +243,7 @@ export const ChannelPreviewMessenger = <
         onSelect,
         PreviewAvatar,
         PreviewMessage,
+        PreviewMutedStatus,
         PreviewStatus,
         PreviewTitle,
         PreviewUnreadCount,
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx b/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { StyleSheet } from 'react-native';
+
+import type { ChannelPreviewProps } from './ChannelPreview';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Mute } from '../../icons';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
+
+const styles = StyleSheet.create({
+  iconStyle: {
+    marginRight: 8,
+  },
+});
+
+export type ChannelPreviewMutedStatusProps<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType,
+> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'> & {
+  muted: boolean;
+};
+
+/**
+ * This UI component displays an avatar for a particular channel.
+ */
+export const ChannelPreviewMutedStatus = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType,
+>(
+  props: ChannelPreviewMutedStatusProps<At, Ch, Co, Ev, Me, Re, Us>,
+) => {
+  const { muted } = props;
+
+  const {
+    theme: {
+      channelPreview: {
+        mutedStatus: { height, iconStyle, width },
+      },
+      colors: { grey_dark },
+    },
+  } = useTheme();
+
+  return muted ? (
+    <Mute
+      height={height}
+      pathFill={grey_dark}
+      style={[styles.iconStyle, iconStyle]}
+      width={width}
+    />
+  ) : null;
+};
diff --git a/package/src/contexts/channelsContext/ChannelsContext.tsx b/package/src/contexts/channelsContext/ChannelsContext.tsx
@@ -3,6 +3,8 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { FlatListProps } from 'react-native';
 import type { FlatList } from 'react-native-gesture-handler';
 
+import type { ChannelPreviewMutedStatusProps } from 'src/components/ChannelPreview/ChannelPreviewMutedStatus';
+
 import type { Channel } from 'stream-chat';
 
 import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
@@ -194,6 +196,14 @@ export type ChannelsContextValue<
    * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
    */
   PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  /**
+   * Custom UI component to render muted status.
+   *
+   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
+   */
+  PreviewMutedStatus?: React.ComponentType<
+    ChannelPreviewMutedStatusProps<At, Ch, Co, Ev, Me, Re, Us>
+  >;
   /**
    * Custom UI component to render preview avatar.
    *
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
@@ -134,6 +134,11 @@ export type Theme = {
     message: TextStyle & {
       fontWeight: TextStyle['fontWeight'];
     };
+    mutedStatus: {
+      height: number;
+      iconStyle: ViewStyle;
+      width: number;
+    };
     row: ViewStyle;
     title: TextStyle;
     unreadContainer: ViewStyle;
@@ -587,6 +592,11 @@ export const defaultTheme: Theme = {
     message: {
       fontWeight: '400',
     },
+    mutedStatus: {
+      height: 20,
+      iconStyle: {},
+      width: 20,
+    },
     row: {},
     title: {},
     unreadContainer: {},
