fix: add size theme and prop for the ChannelAvatar component

GetStream · Jan 8, 2025 · 2877920 · 2877920
1 parent 6febc5b
commit 2877920
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/package/src/components/ChannelPreview/ChannelAvatar.tsx b/package/src/components/ChannelPreview/ChannelAvatar.tsx
@@ -5,13 +5,19 @@ import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplay
 import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';
 
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { Avatar } from '../Avatar/Avatar';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
 
 export type ChannelAvatarProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
+  /**
+   * The size of the avatar
+   */
+  size: number;
+};
 
 /**
  * This UI component displays an avatar for a particular channel.
@@ -21,7 +27,15 @@ export const ChannelAvatarWithContext = <
 >(
   props: ChannelAvatarProps<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
 ) => {
-  const { channel, ImageComponent } = props;
+  const { channel, ImageComponent, size: propSize } = props;
+  const {
+    theme: {
+      channelPreview: {
+        avatar: { size: themeSize },
+      },
+    },
+  } = useTheme();
+  const size = propSize || themeSize;
 
   const displayAvatar = useChannelPreviewDisplayAvatar(channel);
   const displayPresence = useChannelPreviewDisplayPresence(channel);
@@ -32,7 +46,7 @@ export const ChannelAvatarWithContext = <
         ImageComponent={ImageComponent}
         images={displayAvatar.images}
         names={displayAvatar.names}
-        size={40}
+        size={size}
       />
     );
   }
@@ -43,7 +57,7 @@ export const ChannelAvatarWithContext = <
       ImageComponent={ImageComponent}
       name={displayAvatar.name}
       online={displayPresence}
-      size={40}
+      size={size}
     />
   );
 };

diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
@@ -152,6 +152,9 @@ export type Theme = {
     maskFillColor?: ColorValue;
   };
   channelPreview: {
+    avatar: {
+      size: number;
+    };
     checkAllIcon: IconProps;
     checkIcon: IconProps;
     container: ViewStyle;
@@ -875,6 +878,9 @@ export const defaultTheme: Theme = {
     height: 64,
   },
   channelPreview: {
+    avatar: {
+      size: 40,
+    },
     checkAllIcon: {
       height: DEFAULT_STATUS_ICON_SIZE,
       width: DEFAULT_STATUS_ICON_SIZE,