From b394b3dda6ccedf4573a6ef4760cd961ba2df1e1 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Mon, 23 Oct 2023 12:29:50 +0200
Subject: [PATCH] Feat(web-react): Attachment image preview object fit #DS-1005

- Now accepts cover/contain value for objectFit prop to
`FileUploaderAttachment` component
---
 .../FileUploader/AttachmentImagePreview.tsx   | 16 ++++++++++----
 .../FileUploader/FileUploaderAttachment.tsx   |  5 +++--
 .../src/components/FileUploader/README.md     |  1 +
 .../FileUploader/useFileUploaderStyleProps.ts | 22 +++++++++++++++----
 packages/web-react/src/types/fileUploader.ts  |  1 +
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx b/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
index 919150aa41..f69312c869 100644
--- a/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
+++ b/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
@@ -7,21 +7,29 @@ type AttachmentImagePreviewProps = {
   imagePreview: string;
   label: string;
   meta?: FileMetadata;
+  objectFit?: 'contain' | 'cover';
 };
 
-const AttachmentImagePreview = ({ label, imagePreview, meta }: AttachmentImagePreviewProps) => {
-  const { classProps } = useFileUploaderStyleProps({ meta });
-  const { imageCropStyles } = classProps;
+const AttachmentImagePreview = ({ label, imagePreview, meta, objectFit }: AttachmentImagePreviewProps) => {
+  const { classProps } = useFileUploaderStyleProps({ meta, objectFit });
+  const { imageCropStyles, attachmentStyles } = classProps;
 
   return (
     <span className={classProps.attachment.image}>
-      <img src={imagePreview} width={IMAGE_DIMENSION} height={IMAGE_DIMENSION} alt={label} style={imageCropStyles} />
+      <img
+        src={imagePreview}
+        width={IMAGE_DIMENSION}
+        height={IMAGE_DIMENSION}
+        alt={label}
+        style={{ ...imageCropStyles, ...attachmentStyles }}
+      />
     </span>
   );
 };
 
 AttachmentImagePreview.defaultProps = {
   meta: undefined,
+  objectFit: 'contain',
 };
 
 export default AttachmentImagePreview;
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
index 4996905982..faeaaea671 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
@@ -23,12 +23,13 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
     iconName = DEFAULT_ICON_NAME,
     id,
     label,
+    meta,
     name,
+    objectFit,
     onDismiss,
     onEdit,
     onError,
     removeText,
-    meta,
     ...restProps
   } = props;
   const [imagePreview, setImagePreview] = useState<string>('');
@@ -83,7 +84,7 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
       className={classNames(classProps.attachment.root, styleProps.className)}
     >
       {hasImagePreview && imagePreview ? (
-        <AttachmentImagePreview label={label} imagePreview={imagePreview} meta={meta} />
+        <AttachmentImagePreview label={label} imagePreview={imagePreview} meta={meta} objectFit={objectFit} />
       ) : (
         <Icon name={iconName} aria-hidden="true" />
       )}
diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md
index 701689d1cb..c10865a85e 100644
--- a/packages/web-react/src/components/FileUploader/README.md
+++ b/packages/web-react/src/components/FileUploader/README.md
@@ -422,6 +422,7 @@ The rest of the properties are created from the default `<ul>` element. [More ab
 | `onDismiss`        | `(key: string) => FileQueueMapType`  | —        | ✔        | Callback to delete an item from the queue                                   |
 | `onEdit`           | `(event: Event, file: File) => void` | —        | ✕        | Show and add function to edit button                                        |
 | `onError`          | `FileUploaderErrorCallbackType`      | —        | ✕        | Callback on error condition                                                 |
+| `objectFit`        | [`cover` \| `contain`]               | `cover`  | ✕        | CSS value for image preview in FileUploaderAttachment                       |
 | `removeText`       | `string`                             | `Remove` | ✕        | Dismiss button label                                                        |
 | `UNSAFE_className` | `string`                             | —        | ✕        | FileUploaderAttachment custom class name                                    |
 | `UNSAFE_style`     | `CSSProperties`                      | —        | ✕        | FileUploaderAttachment custom style                                         |
diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts
index a38dbdd10a..d578acae15 100644
--- a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts
+++ b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts
@@ -5,15 +5,16 @@ import { useClassNamePrefix } from '../../hooks';
 import { FileMetadata, FileUploaderQueueLimitBehaviorType, Validation } from '../../types';
 
 export interface FileUploaderStyleProps extends Validation {
-  isDragAndDropSupported?: boolean;
-  isLabelHidden?: boolean;
   isDisabled?: boolean;
   isDisabledByQueueLimitBehavior?: boolean;
+  isDragAndDropSupported?: boolean;
   isDragging?: boolean;
   isDropZoneHidden?: boolean;
   isFluid?: boolean;
-  queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
+  isLabelHidden?: boolean;
   meta?: FileMetadata;
+  objectFit?: 'contain' | 'cover';
+  queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
 }
 
 type ImageCropCSS = {
@@ -23,6 +24,10 @@ type ImageCropCSS = {
   [FileUploaderCropCSS.HEIGHT]?: string;
 } & CSSProperties;
 
+type ImageObjectFit = {
+  '--file-uploader-attachment-image-object-fit': string;
+};
+
 export interface FileUploaderStyleReturn {
   /** className props */
   classProps: {
@@ -49,6 +54,7 @@ export interface FileUploaderStyleReturn {
       slot: string;
     };
     imageCropStyles?: ImageCropCSS;
+    attachmentStyles?: ImageObjectFit;
   };
 }
 
@@ -79,8 +85,9 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
   const fileUploaderAttachmentImageClass = `${fileUploaderAttachmentClass}__image`;
   const fileUploaderAttachmentSlotClass = `${fileUploaderAttachmentClass}__slot`;
 
-  const { meta } = props || {};
+  const { meta, objectFit } = props || {};
   let imageCropCSS: ImageCropCSS | undefined;
+  let imageObjectFitCSS: ImageObjectFit | undefined;
   const hasCoords = meta && meta.x != null && meta.y != null && meta.width != null && meta.height != null;
 
   if (hasCoords) {
@@ -94,6 +101,12 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
     };
   }
 
+  if (objectFit) {
+    imageObjectFitCSS = {
+      '--file-uploader-attachment-image-object-fit': objectFit,
+    };
+  }
+
   return {
     classProps: {
       root: classNames(fileUploaderClass, { [fileUploaderFluidClass]: props?.isFluid }),
@@ -129,6 +142,7 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
         slot: fileUploaderAttachmentSlotClass,
       },
       ...(hasCoords && { imageCropStyles: imageCropCSS }),
+      ...(objectFit && { attachmentStyles: imageObjectFitCSS }),
     },
   };
 };
diff --git a/packages/web-react/src/types/fileUploader.ts b/packages/web-react/src/types/fileUploader.ts
index dc6ef170f1..7aa1527a26 100644
--- a/packages/web-react/src/types/fileUploader.ts
+++ b/packages/web-react/src/types/fileUploader.ts
@@ -100,6 +100,7 @@ export interface FileUploaderAttachmentBaseProps extends Omit<SpiritLItemElement
   label: string;
   meta?: FileMetadata;
   name: string;
+  objectFit?: 'contain' | 'cover';
   onDismiss: (key: string, callback?: (key: string) => void) => FileQueueMapType;
   onEdit?: (event: MouseEvent, file: File) => void;
   onError?: FileUploaderErrorCallbackType;