feat: make AttachmentUploadProgressIndicator and AttachmentUploadProgressIndicator overridable

Author: szuperaz

src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx

@@ -4,10 +4,10 @@ import {
   type LocalAudioAttachment,
   type LocalVoiceRecordingAttachment,
 } from 'stream-chat';
-import { useTranslationContext } from '../../../context';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
-import { AttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
+import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
 import { IconExclamationMark, IconExclamationTriangleFill } from '../../Icons';
@@ -20,7 +20,7 @@ import {
 } from '../../AudioPlayback';
 import { useAudioPlayer } from '../../AudioPlayback/WithAudioPlayback';
 import { useStateStore } from '../../../store';
-import { AttachmentUploadedSizeIndicator } from './AttachmentUploadedSizeIndicator';
+import { AttachmentUploadedSizeIndicator as DefaultAttachmentUploadedSizeIndicator } from './AttachmentUploadedSizeIndicator';
 
 export type AudioAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
   UploadAttachmentPreviewProps<
@@ -42,6 +42,10 @@ export const AudioAttachmentPreview = ({
   removeAttachments,
 }: AudioAttachmentPreviewProps) => {
   const { t } = useTranslationContext();
+  const {
+    AttachmentUploadedSizeIndicator = DefaultAttachmentUploadedSizeIndicator,
+    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,
+  } = useComponentContext();
   const { id, previewUri, uploadPermissionCheck, uploadProgress, uploadState } =
     attachment.localMetadata ?? {};
   const url = attachment.asset_url || previewUri;

src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useTranslationContext } from '../../../context';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import { FileIcon } from '../../FileIcon';
-import { AttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
-import { AttachmentUploadedSizeIndicator } from './AttachmentUploadedSizeIndicator';
+import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
+import { AttachmentUploadedSizeIndicator as DefaultAttachmentUploadedSizeIndicator } from './AttachmentUploadedSizeIndicator';
 import type { LocalAudioAttachment, LocalFileAttachment } from 'stream-chat';
 import type { UploadAttachmentPreviewProps } from './types';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
@@ -20,6 +20,10 @@ export const FileAttachmentPreview = ({
   removeAttachments,
 }: FileAttachmentPreviewProps) => {
   const { t } = useTranslationContext('FilePreview');
+  const {
+    AttachmentUploadedSizeIndicator = DefaultAttachmentUploadedSizeIndicator,
+    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,
+  } = useComponentContext();
   const { id, uploadPermissionCheck, uploadProgress, uploadState } =
     attachment.localMetadata ?? {};
 

src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx

@@ -17,7 +17,7 @@ import clsx from 'clsx';
 import { IconExclamationMark, IconRetry, IconVideoFill } from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { Button } from '../../Button';
-import { AttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
+import { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading';
 
@@ -35,8 +35,11 @@ export const MediaAttachmentPreview = ({
   removeAttachments,
 }: MediaAttachmentPreviewProps) => {
   const { t } = useTranslationContext();
-  const { BaseImage = DefaultBaseImage, LoadingIndicator = DefaultLoadingIndicator } =
-    useComponentContext();
+  const {
+    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,
+    BaseImage = DefaultBaseImage,
+    LoadingIndicator = DefaultLoadingIndicator,
+  } = useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);
 
   const { id, uploadPermissionCheck, uploadProgress, uploadState } =

src/context/ComponentContext.tsx

@@ -75,6 +75,8 @@ import type { EditedMessagePreviewProps } from '../components/MessageComposer/Ed
 import type { FileIconProps } from '../components/FileIcon/FileIcon';
 import type { CommandChipProps } from '../components/MessageComposer/CommandChip';
 import type { CircularProgressIndicatorProps } from '../components/Loading/CircularProgressIndicator';
+import type { AttachmentUploadProgressIndicatorProps } from '../components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator';
+import type { AttachmentUploadedSizeIndicatorProps } from '../components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator';
 
 export type ComponentContextValue = {
   /** Custom UI component to display additional message composer action buttons left to the textarea, defaults to and accepts same props as: [AdditionalMessageComposerActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/MessageComposerActions.tsx) */
@@ -87,6 +89,10 @@ export type ComponentContextValue = {
   AttachmentPreviewList?: React.ComponentType<AttachmentPreviewListProps>;
   /** Custom UI component to control adding attachments to MessageComposer, defaults to and accepts same props as: [AttachmentSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentSelector.tsx) */
   AttachmentSelector?: React.ComponentType;
+  /** Custom UI component for upload progress on attachment previews in MessageComposer, defaults to and accepts same props as: [AttachmentUploadProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx) */
+  AttachmentUploadProgressIndicator?: React.ComponentType<AttachmentUploadProgressIndicatorProps>;
+  /** Custom UI component for uploaded/total size on attachment previews in MessageComposer, defaults to and accepts same props as: [AttachmentUploadedSizeIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator.tsx) */
+  AttachmentUploadedSizeIndicator?: React.ComponentType<AttachmentUploadedSizeIndicatorProps>;
   /** Custom UI component for the dedicated voice recording preview slot above composer attachments (REACT-794), defaults to and accepts same props as: [VoiceRecordingPreviewSlot](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.tsx) */
   VoiceRecordingPreviewSlot?: React.ComponentType<VoiceRecordingPreviewSlotProps>;
   /** Custom UI component for contents of attachment selector initiation button */