refactor: create UploadedSizeIndicator component

Author: szuperaz

src/components/Loading/UploadedSizeIndicator.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { FileSizeIndicator } from '../Attachment';
+
+export type UploadedSizeIndicatorProps = {
+  fullBytes: number;
+  uploadedBytes: number;
+};
+
+export const UploadedSizeIndicator = ({
+  fullBytes,
+  uploadedBytes,
+}: UploadedSizeIndicatorProps) => (
+  <div
+    className='str-chat__attachment-preview-file__upload-size-fraction'
+    data-testid='upload-size-fraction'
+  >
+    <FileSizeIndicator fileSize={uploadedBytes} /> {` / `}
+    <FileSizeIndicator fileSize={fullBytes} />
+  </div>
+);

src/components/Loading/index.ts

@@ -4,3 +4,4 @@ export * from './LoadingErrorIndicator';
 export * from './LoadingIndicator';
 export * from './CircularProgressIndicator';
 export * from './UploadProgressIndicator';
+export * from './UploadedSizeIndicator';

src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+
+import { useComponentContext } from '../../../context';
 import { FileSizeIndicator } from '../../Attachment';
+import { UploadedSizeIndicator as DefaultUploadedSizeIndicator } from '../../Loading/UploadedSizeIndicator';
 
 function resolveAttachmentFullByteSize(attachment: {
   file_size?: number | string;
@@ -32,23 +35,16 @@ export type AttachmentUploadedSizeIndicatorProps = {
 export const AttachmentUploadedSizeIndicator = ({
   attachment,
 }: AttachmentUploadedSizeIndicatorProps) => {
+  const { UploadedSizeIndicator = DefaultUploadedSizeIndicator } = useComponentContext();
   const { uploadProgress, uploadState } = attachment.localMetadata ?? {};
   const fullBytes = resolveAttachmentFullByteSize(attachment);
   const uploaded =
     uploadProgress !== undefined && fullBytes !== undefined
       ? Math.round((uploadProgress / 100) * fullBytes)
       : undefined;
 
-  if (uploadState === 'uploading' && uploaded) {
-    return (
-      <div
-        className='str-chat__attachment-preview-file__upload-size-fraction'
-        data-testid='upload-size-fraction'
-      >
-        <FileSizeIndicator fileSize={uploaded} /> {` / `}
-        <FileSizeIndicator fileSize={fullBytes} />
-      </div>
-    );
+  if (uploadState === 'uploading' && uploaded !== undefined && fullBytes !== undefined) {
+    return <UploadedSizeIndicator fullBytes={fullBytes} uploadedBytes={uploaded} />;
   }
 
   if (uploadState === 'finished') {

src/context/ComponentContext.tsx

@@ -75,6 +75,7 @@ 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 { UploadedSizeIndicatorProps } from '../components/Loading/UploadedSizeIndicator';
 import type { UploadProgressIndicatorProps } from '../components/Loading/UploadProgressIndicator';
 import type { AttachmentUploadedSizeIndicatorProps } from '../components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator';
 
@@ -272,6 +273,8 @@ export type ComponentContextValue = {
   UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
   /** Custom UI component for upload progress (e.g. attachment previews, audio recording), defaults to and accepts same props as: [UploadProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/UploadProgressIndicator.tsx) */
   UploadProgressIndicator?: React.ComponentType<UploadProgressIndicatorProps>;
+  /** Custom UI component for uploaded vs total byte size during attachment upload (MessageComposer previews), defaults to and accepts same props as: [UploadedSizeIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/UploadedSizeIndicator.tsx) */
+  UploadedSizeIndicator?: React.ComponentType<UploadedSizeIndicatorProps>;
   /** Component used to play video. If not provided, ReactPlayer is used as a default video player. */
   VideoPlayer?: React.ComponentType<VideoPlayerProps>;
   /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */