Introduce backgroundSize prop to ImageRenderer

Author: git-babel

src/ui/ImageRenderer/index.tsx

@@ -29,6 +29,7 @@ export interface ImageRendererProps {
   height?: string | number | null;
   circle?: boolean;
   fixedSize?: boolean;
+  backgroundSize?: ImageRendererBackgroundSize;
   placeHolder?: ((props: { style: Record<string, string | number> }) => ReactElement) | ReactElement | null;
   defaultComponent?: (() => ReactElement) | ReactElement | null;
   borderRadius?: string | number | null;
@@ -38,6 +39,11 @@ export interface ImageRendererProps {
   isUploaded?: boolean;
 }
 
+export enum ImageRendererBackgroundSize {
+  CONTAIN = 'contain',
+  COVER = 'cover',
+}
+
 /*
   ImageRenderer displays image with url or source
   it checks if the source exist with img tag first
@@ -53,6 +59,7 @@ const ImageRenderer = ({
   height = null,
   circle = false,
   fixedSize = false,
+  backgroundSize = ImageRendererBackgroundSize.COVER,
   placeHolder = null,
   defaultComponent = null,
   borderRadius = null,
@@ -100,7 +107,7 @@ const ImageRenderer = ({
     const backgroundStyle = internalUrl ? {
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
-      backgroundSize: 'contain',
+      backgroundSize: backgroundSize ? backgroundSize : 'cover',
       backgroundImage: `url(${internalUrl})`,
     } : {};
 

src/ui/MultipleFilesMessageItemBody/index.tsx

@@ -4,11 +4,15 @@ import { MultipleFilesMessage, SendingStatus } from '@sendbird/chat/message';
 import type { OnBeforeDownloadFileMessageType } from '../../modules/GroupChannel/context/GroupChannelProvider';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import Icon, { IconColors, IconTypes } from '../Icon';
-import ImageRenderer, { getBorderRadiusForMultipleImageRenderer } from '../ImageRenderer';
+import ImageRenderer, { getBorderRadiusForMultipleImageRenderer, ImageRendererBackgroundSize } from '../ImageRenderer';
 import ImageGrid from '../ImageGrid';
 import FileViewer from '../FileViewer';
 import './index.scss';
-import { MULTIPLE_FILES_IMAGE_BORDER_RADIUS, MULTIPLE_FILES_IMAGE_SIDE_LENGTH, MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH } from './const';
+import {
+  MULTIPLE_FILES_IMAGE_BORDER_RADIUS,
+  MULTIPLE_FILES_IMAGE_SIDE_LENGTH,
+  MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH,
+} from './const';
 import { isGif } from '../../utils';
 import { UploadedFileInfoWithUpload } from '../../types';
 
@@ -91,6 +95,7 @@ export default function MultipleFilesMessageItemBody({
                 <ImageRenderer
                   url={fileInfo.thumbnails?.[0]?.url ?? fileInfo.url ?? ''}
                   fixedSize={false}
+                  backgroundSize={ImageRendererBackgroundSize.CONTAIN}
                   width={MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey]}
                   maxSideLength={MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB}
                   height={MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey]}