Feat(web-react): Attachment image preview object fit #DS-1005

- Now accepts cover/contain value for objectFit prop to `FileUploaderAttachment` component
lmc-eu · Oct 24, 2023 · 9e7539a · 9e7539a
1 parent f339e24
commit 9e7539a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git 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;
+  imageObjectFit?: 'contain' | 'cover';
 };
 
-const AttachmentImagePreview = ({ label, imagePreview, meta }: AttachmentImagePreviewProps) => {
-  const { classProps } = useFileUploaderStyleProps({ meta });
-  const { imageCropStyles } = classProps;
+const AttachmentImagePreview = ({ label, imagePreview, meta, imageObjectFit }: AttachmentImagePreviewProps) => {
+  const { classProps } = useFileUploaderStyleProps({ meta, imageObjectFit });
+  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,
+  imageObjectFit: 'cover',
 };
 
 export default AttachmentImagePreview;
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
@@ -22,13 +22,14 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
     hasImagePreview,
     iconName = DEFAULT_ICON_NAME,
     id,
+    imageObjectFit,
     label,
+    meta,
     name,
     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} imageObjectFit={imageObjectFit} />
       ) : (
         <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
@@ -416,6 +416,7 @@ The rest of the properties are created from the default `<ul>` element. [More ab
 | `hasImagePreview`  | `bool`                               | false    | ✕        | Show image preview                                                          |
 | `iconName`         | `string`                             | `file`   | ✕        | Icon shown along the file                                                   |
 | `id`               | `string`                             | —        | ✔        | FileUploaderAttachment id                                                   |
+| `imageObjectFit`   | [`cover` \| `contain`]               | `cover`  | ✕        | Defines FileUploaderAttachment image fit in container                       |
 | `label`            | `string`                             | —        | ✔        | File name                                                                   |
 | `name`             | `string`                             | —        | ✔        | Input field name                                                            |
 | `onDismiss`        | `(key: string) => FileQueueMapType`  | —        | ✔        | Callback to delete an item from the queue                                   |

diff --git 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;
+  imageObjectFit?: 'contain' | 'cover';
   isDisabled?: boolean;
   isDisabledByQueueLimitBehavior?: boolean;
+  isDragAndDropSupported?: boolean;
   isDragging?: boolean;
   isDropZoneHidden?: boolean;
   isFluid?: boolean;
-  queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
+  isLabelHidden?: boolean;
   meta?: FileMetadata;
+  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, imageObjectFit } = 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 (imageObjectFit) {
+    imageObjectFitCSS = {
+      '--file-uploader-attachment-image-object-fit': imageObjectFit,
+    };
+  }
+
   return {
     classProps: {
       root: classNames(fileUploaderClass, { [fileUploaderFluidClass]: props?.isFluid }),
@@ -129,6 +142,7 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
         slot: fileUploaderAttachmentSlotClass,
       },
       ...(hasCoords && { imageCropStyles: imageCropCSS }),
+      ...(imageObjectFit && { attachmentStyles: imageObjectFitCSS }),
     },
   };
 };
diff --git a/packages/web-react/src/types/fileUploader.ts b/packages/web-react/src/types/fileUploader.ts
@@ -97,6 +97,7 @@ export interface FileUploaderAttachmentBaseProps extends Omit<SpiritLItemElement
   hasImagePreview?: boolean;
   iconName?: string;
   id: string;
+  imageObjectFit?: 'contain' | 'cover';
   label: string;
   meta?: FileMetadata;
   name: string;