fixup! Feat(web-react): FileUploader - Support for crop image #DS-954

lmc-eu · Oct 10, 2023 · 8f3e01b · 8f3e01b
1 parent 13c1241
commit 8f3e01b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/packages/web-react/docs/stories/examples/FileUploaderWithImagePreview.stories.tsx b/packages/web-react/docs/stories/examples/FileUploaderWithImagePreview.stories.tsx
@@ -47,7 +47,7 @@ export const FileUploaderWithModalImagePreview = (args) => {
   };
 
   const confirmPreview = () => {
-    const meta = { x: 10, y: 10, width: 50, height: 50 };
+    const meta = { x: 10, y: 10, width: 80, height: 80 };
 
     setIsModalOpen(false);
     addToQueue(fileToPreview?.name || '', fileToPreview as File, meta);

diff --git a/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx b/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
@@ -10,26 +10,12 @@ type AttachmentImagePreviewProps = {
 };
 
 const AttachmentImagePreview = ({ label, imagePreview, meta }: AttachmentImagePreviewProps) => {
-  const { classProps } = useFileUploaderStyleProps();
-
-  // TODO: Add CSS styles for crop
-  const { x, y, width, height } = meta || {};
-  console.log('x:', x, 'y:', y, 'width:', width, 'height:', height);
+  const { classProps } = useFileUploaderStyleProps({ meta });
+  const { imageCropStyles } = classProps;
 
   return (
     <span className={classProps.attachment.image}>
-      <img
-        src={imagePreview}
-        width={IMAGE_DIMENSION}
-        height={IMAGE_DIMENSION}
-        alt={label}
-        style={{
-          '--file-uploader-attachment-image-top': `-${y}px`,
-          '--file-uploader-attachment-image-left': `-${x}px`,
-          '--file-uploader-attachment-image-width': `${width}px`,
-          '--file-uploader-attachment-image-height': `${height}px`,
-        }}
-      />
+      <img src={imagePreview} width={IMAGE_DIMENSION} height={IMAGE_DIMENSION} alt={label} style={imageCropStyles} />
     </span>
   );
 };

diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts
@@ -1,6 +1,7 @@
+import { CSSProperties } from 'react';
 import classNames from 'classnames';
 import { useClassNamePrefix } from '../../hooks';
-import { FileUploaderQueueLimitBehaviorType, Validation } from '../../types';
+import { FileQueueValueMetaType, FileUploaderQueueLimitBehaviorType, Validation } from '../../types';
 
 export interface FileUploaderStyleProps extends Validation {
   isDragAndDropSupported?: boolean;
@@ -11,6 +12,14 @@ export interface FileUploaderStyleProps extends Validation {
   isDropZoneHidden?: boolean;
   isFluid?: boolean;
   queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
+  meta?: FileQueueValueMetaType;
+}
+
+interface ImageCropCSS extends CSSProperties {
+  '--file-uploader-attachment-image-top'?: string;
+  '--file-uploader-attachment-image-left'?: string;
+  '--file-uploader-attachment-image-width'?: string;
+  '--file-uploader-attachment-image-height'?: string;
 }
 
 export interface FileUploaderStyleReturn {
@@ -38,6 +47,7 @@ export interface FileUploaderStyleReturn {
       image: string;
       slot: string;
     };
+    imageCropStyles: ImageCropCSS | undefined;
   };
 }
 
@@ -68,6 +78,15 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
   const fileUploaderAttachmentImageClass = `${fileUploaderAttachmentClass}__image`;
   const fileUploaderAttachmentSlotClass = `${fileUploaderAttachmentClass}__slot`;
 
+  const { x, y, width, height } = props?.meta || {};
+  const hasCoords = x && y && width && height;
+  const imageCropCSS: ImageCropCSS = {
+    '--file-uploader-attachment-image-top': `-${props?.meta?.y}px`,
+    '--file-uploader-attachment-image-left': `-${props?.meta?.x}px`,
+    '--file-uploader-attachment-image-width': `${props?.meta?.width}px`,
+    '--file-uploader-attachment-image-height': `${props?.meta?.height}px`,
+  };
+
   return {
     classProps: {
       root: classNames(fileUploaderClass, { [fileUploaderFluidClass]: props?.isFluid }),
@@ -102,6 +121,7 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
         image: fileUploaderAttachmentImageClass,
         slot: fileUploaderAttachmentSlotClass,
       },
+      imageCropStyles: hasCoords ? imageCropCSS : undefined,
     },
   };
 };