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

packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { FileQueueValueMetaType } from '../../types/fileUploader';
+import { FileMetadata } from '../../types/fileUploader';
 import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
 import { IMAGE_DIMENSION } from './constants';
 
 type AttachmentImagePreviewProps = {
   label: string;
   imagePreview: string;
-  meta?: FileQueueValueMetaType;
+  meta?: FileMetadata;
 };
 
 const AttachmentImagePreview = ({ label, imagePreview, meta }: AttachmentImagePreviewProps) => {

packages/web-react/src/components/FileUploader/README.md

@@ -300,22 +300,22 @@ const resetStateHandler = () => {
 
 ## FileUploader Props
 
-| Name                                  | Type                                                                           | Default | Required | Description                                                         |
-| ------------------------------------- | ------------------------------------------------------------------------------ | ------- | -------- | ------------------------------------------------------------------- |
-| `addToQueue`                          | `(key: string, file: File, meta?: FileQueueValueMetaType) => FileQueueMapType` | —       | ✔        | Callback to add an item to the queue                                |
-| `clearQueue`                          | `() => void`                                                                   | —       | ✔        | Callback to clear the queue                                         |
-| `errorMessages.errorFileDuplicity`    | `string`                                                                       | —       | ✕        | Translation for the error message: Duplicate file in queue          |
-| `errorMessages.errorMaxFileSize`      | `string`                                                                       | —       | ✕        | Translation for the error message: Maximum file size                |
-| `errorMessages.errorMaxUploadedFiles` | `string`                                                                       | —       | ✕        | Translation for the error message: Maximum number of uploaded files |
-| `fileQueue`                           | `FileQueueMapType`                                                             | —       | ✔        | Queue of items to upload                                            |
-| `findInQueue`                         | `(key: string) => FileQueueMapType`                                            | —       | ✔        | A callback to find a particular item in the queue                   |
-| `id`                                  | `string`                                                                       | —       | ✔        | FileUploader id                                                     |
-| `isDisabled`                          | `bool`                                                                         | —       | ✕        | When the field is supposed to be disabled                           |
-| `isFluid`                             | `bool`                                                                         | —       | ✕        | When the field is supposed to be fluid                              |
-| `onDismiss`                           | `(key: string) => FileQueueMapType`                                            | —       | ✔        | A callback to delete a particular item from the queue               |
-| `UNSAFE_className`                    | `string`                                                                       | —       | ✕        | FileUploader custom class name                                      |
-| `UNSAFE_style`                        | `CSSProperties`                                                                | —       | ✕        | FileUploader custom style                                           |
-| `updateQueue`                         | `(key: string, file: File, meta?: FileQueueValueMetaType) => FileQueueMapType` | —       | ✔        | A callback to update a particular item in the queue                 |
+| Name                                  | Type                                                                 | Default | Required | Description                                                         |
+| ------------------------------------- | -------------------------------------------------------------------- | ------- | -------- | ------------------------------------------------------------------- |
+| `addToQueue`                          | `(key: string, file: File, meta?: FileMetadata) => FileQueueMapType` | —       | ✔        | Callback to add an item to the queue                                |
+| `clearQueue`                          | `() => void`                                                         | —       | ✔        | Callback to clear the queue                                         |
+| `errorMessages.errorFileDuplicity`    | `string`                                                             | —       | ✕        | Translation for the error message: Duplicate file in queue          |
+| `errorMessages.errorMaxFileSize`      | `string`                                                             | —       | ✕        | Translation for the error message: Maximum file size                |
+| `errorMessages.errorMaxUploadedFiles` | `string`                                                             | —       | ✕        | Translation for the error message: Maximum number of uploaded files |
+| `fileQueue`                           | `FileQueueMapType`                                                   | —       | ✔        | Queue of items to upload                                            |
+| `findInQueue`                         | `(key: string) => FileQueueMapType`                                  | —       | ✔        | A callback to find a particular item in the queue                   |
+| `id`                                  | `string`                                                             | —       | ✔        | FileUploader id                                                     |
+| `isDisabled`                          | `bool`                                                               | —       | ✕        | When the field is supposed to be disabled                           |
+| `isFluid`                             | `bool`                                                               | —       | ✕        | When the field is supposed to be fluid                              |
+| `onDismiss`                           | `(key: string) => FileQueueMapType`                                  | —       | ✔        | A callback to delete a particular item from the queue               |
+| `UNSAFE_className`                    | `string`                                                             | —       | ✕        | FileUploader custom class name                                      |
+| `UNSAFE_style`                        | `CSSProperties`                                                      | —       | ✕        | FileUploader custom style                                           |
+| `updateQueue`                         | `(key: string, file: File, meta?: FileMetadata) => FileQueueMapType` | —       | ✔        | A callback to update a particular item in the queue                 |
 
 The rest of the properties are created from the default `<div>` element. [More about the element][DivElementDocs]
 

packages/web-react/src/components/FileUploader/__tests__/useFileQueue.test.ts

@@ -82,21 +82,27 @@ describe('useFileQueue', () => {
 
   it('should update queue', () => {
     const { result } = renderHook(() => useFileQueue());
+    const testMeta = { test: 'test' };
+    const testUpdateMeta = { test: 'test updated' };
 
     act(() => {
       result.current.addToQueue('test1_txt', file1);
       result.current.addToQueue('test2_txt', file2);
+      result.current.addToQueue('test3_txt', file2, testMeta);
     });
 
-    expect(result.current.fileQueue.size).toBe(2);
+    expect(result.current.fileQueue.size).toBe(3);
+    expect(result.current.fileQueue.get('test3_txt')).toEqual({ file: file2, meta: testMeta });
 
     act(() => {
       result.current.updateQueue('test1_txt', file2);
       result.current.updateQueue('test2_txt', file1);
+      result.current.updateQueue('test3_txt', file2, testUpdateMeta);
     });
 
-    expect(result.current.fileQueue.size).toBe(2);
+    expect(result.current.fileQueue.size).toBe(3);
     expect(result.current.fileQueue.get('test1_txt')).toEqual({ file: file2 });
     expect(result.current.fileQueue.get('test2_txt')).toEqual({ file: file1 });
+    expect(result.current.fileQueue.get('test3_txt')).toEqual({ file: file2, meta: testUpdateMeta });
   });
 });

packages/web-react/src/components/FileUploader/__tests__/useFileUploaderStyleProps.test.ts

@@ -52,4 +52,14 @@ describe('useFileUploaderStyleProps', () => {
 
     expect(result.current.classProps.input.root).toBe('FileUploaderInput FileUploaderInput--disabled');
   });
+
+  it('should have CSS for crop image', () => {
+    const { result } = renderHook(() =>
+      useFileUploaderStyleProps({
+        meta: { x: 1, y: 2, width: 3, height: 4 },
+      }),
+    );
+
+    expect(result.current.classProps.imageCropStyles).toBeDefined();
+  });
 });

packages/web-react/src/components/FileUploader/useFileQueue.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FileQueueValueMetaType, FileQueueValueType, FileUploaderHandlingProps } from '../../types';
+import { FileMetadata, FileQueueValueType, FileUploaderHandlingProps } from '../../types';
 
 export interface FileQueueReturn extends FileUploaderHandlingProps {}
 
@@ -17,7 +17,7 @@ export const useFileQueue = (): FileQueueReturn => {
     return queue;
   };
 
-  const addToQueueHandler = (key: string, file: File, meta?: FileQueueValueMetaType) => {
+  const addToQueueHandler = (key: string, file: File, meta?: FileMetadata) => {
     setQueue((prev) => {
       const newValue: FileQueueValueType = { file };
       if (meta != null) {
@@ -32,7 +32,7 @@ export const useFileQueue = (): FileQueueReturn => {
 
   const findInQueueHandler = (key: string) => queue.get(key) || null;
 
-  const updateQueueHandler = (key: string, file: File, meta?: FileQueueValueMetaType) => {
+  const updateQueueHandler = (key: string, file: File, meta?: FileMetadata) => {
     setQueue((prev) => {
       const newState = new Map(prev);
       const newValue: FileQueueValueType = { file };

packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts

@@ -1,11 +1,11 @@
 import { RefObject, useLayoutEffect } from 'react';
-import { FileQueueValueMetaType } from '../../types/fileUploader';
+import { FileMetadata } from '../../types/fileUploader';
 import { getAttachmentInput, getAttachmentMetaInput } from './utils';
 
 export interface UseFileUploaderAttachmentProps {
   attachmentRef: RefObject<HTMLLIElement>;
   file: File;
-  meta?: FileQueueValueMetaType;
+  meta?: FileMetadata;
   name: string;
   onError?: (error: string) => void;
 }
@@ -18,13 +18,13 @@ export const useFileUploaderAttachment = ({
   onError,
 }: UseFileUploaderAttachmentProps) => {
   useLayoutEffect(() => {
-    const createAttachmentInput = (metadata: FileQueueValueMetaType) => {
+    const createAttachmentInput = (metadata: FileMetadata) => {
       attachmentRef.current?.querySelectorAll('input').forEach((element) => element.remove());
-      const attachmentInputElement = getAttachmentInput(file, name, onError) as Node;
-      attachmentRef.current?.appendChild(attachmentInputElement);
+      const attachmentInputElement = getAttachmentInput(file, name, onError);
+      attachmentInputElement && attachmentRef.current?.appendChild(attachmentInputElement);
 
       if (metadata) {
-        const attachmentInputMetaElement = getAttachmentMetaInput(file, name, metadata) as Node;
+        const attachmentInputMetaElement = getAttachmentMetaInput(file, name, metadata);
         attachmentRef.current?.appendChild(attachmentInputMetaElement);
       }
     };

packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts

@@ -1,7 +1,8 @@
 import { CSSProperties } from 'react';
 import classNames from 'classnames';
+import { FileUploaderCropCSS } from '../../constants/dictionaries';
 import { useClassNamePrefix } from '../../hooks';
-import { FileQueueValueMetaType, FileUploaderQueueLimitBehaviorType, Validation } from '../../types';
+import { FileMetadata, FileUploaderQueueLimitBehaviorType, Validation } from '../../types';
 
 export interface FileUploaderStyleProps extends Validation {
   isDragAndDropSupported?: boolean;
@@ -12,15 +13,15 @@ export interface FileUploaderStyleProps extends Validation {
   isDropZoneHidden?: boolean;
   isFluid?: boolean;
   queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
-  meta?: FileQueueValueMetaType;
+  meta?: FileMetadata;
 }
 
-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;
-}
+type ImageCropCSS = {
+  [FileUploaderCropCSS.TOP]?: string;
+  [FileUploaderCropCSS.LEFT]?: string;
+  [FileUploaderCropCSS.WIDTH]?: string;
+  [FileUploaderCropCSS.HEIGHT]?: string;
+} & CSSProperties;
 
 export interface FileUploaderStyleReturn {
   /** className props */
@@ -81,10 +82,10 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
   const { x, y, width, height } = props?.meta || {};
   const hasCoords = x != null && y != null && width != null && height != null;
   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`,
+    [FileUploaderCropCSS.TOP]: `-${props?.meta?.y}px`,
+    [FileUploaderCropCSS.LEFT]: `-${props?.meta?.x}px`,
+    [FileUploaderCropCSS.WIDTH]: `${props?.meta?.width}px`,
+    [FileUploaderCropCSS.HEIGHT]: `${props?.meta?.height}px`,
   };
 
   return {

packages/web-react/src/components/FileUploader/utils.ts

@@ -1,6 +1,10 @@
-import { FileQueueValueMetaType } from '../../types/fileUploader';
+import { FileMetadata } from '../../types/fileUploader';
 
-const getAttachmentInput = (file: File, name: string, onError?: (error: string) => void) => {
+const getAttachmentInput = (
+  file: File,
+  name: string,
+  onError?: (error: string) => void,
+): HTMLInputElement | undefined => {
   const attachmentInputElement = document.createElement('input');
   const dataContainer = new DataTransfer();
 
@@ -27,7 +31,7 @@ const getAttachmentInput = (file: File, name: string, onError?: (error: string)
   return attachmentInputElement;
 };
 
-const getAttachmentMetaInput = (file: File, name: string, meta: FileQueueValueMetaType) => {
+const getAttachmentMetaInput = (file: File, name: string, meta: FileMetadata): HTMLInputElement => {
   const attachmentInputElement = document.createElement('input');
 
   attachmentInputElement.setAttribute('type', 'text');

packages/web-react/src/constants/dictionaries.ts

@@ -52,3 +52,11 @@ export const ValidationStates = {
   WARNING: 'warning',
   DANGER: 'danger',
 } as const;
+
+/* FileUploader CSS crop */
+export const FileUploaderCropCSS = {
+  TOP: '--file-uploader-attachment-image-top',
+  LEFT: '--file-uploader-attachment-image-left',
+  WIDTH: '--file-uploader-attachment-image-width',
+  HEIGHT: '--file-uploader-attachment-image-height',
+} as const;

packages/web-react/src/types/fileUploader.ts

@@ -20,28 +20,26 @@ export interface FileUploaderTextProps {
   linkText?: string;
 }
 
-export interface FileQueueValueMetaType {
+export interface FileMetadata {
   [key: string | number]: unknown;
 }
 
 export interface FileQueueValueType {
   file: File;
-  meta?: FileQueueValueMetaType;
+  meta?: FileMetadata;
 }
 
-export interface UpdateQueueBaseType {
+export interface UpdateQueueBaseType extends FileQueueValueType {
   key: string;
-  file: File;
-  meta?: FileQueueValueMetaType;
 }
 
 export interface FileUploaderHandlingProps {
-  addToQueue: (key: string, file: File, meta?: FileQueueValueMetaType) => FileQueueMapType;
+  addToQueue: (key: string, file: File, meta?: FileMetadata) => FileQueueMapType;
   clearQueue: () => void;
   fileQueue: FileQueueMapType;
   findInQueue: (key: string) => FileQueueValueType | null;
   onDismiss: (key: string) => FileQueueMapType;
-  updateQueue: (key: string, file: File, meta?: FileQueueValueMetaType) => FileQueueMapType;
+  updateQueue: (key: string, file: File, meta?: FileMetadata) => FileQueueMapType;
 }
 
 export interface FileUploaderErrorMessagesProps {
@@ -100,7 +98,7 @@ export interface FileUploaderAttachmentBaseProps extends Omit<SpiritLItemElement
   iconName?: string;
   id: string;
   label: string;
-  meta?: FileQueueValueMetaType;
+  meta?: FileMetadata;
   name: string;
   onDismiss: (key: string, callback?: (key: string) => void) => FileQueueMapType;
   onEdit?: (event: MouseEvent, file: File) => void;