feat: added clear field functionality

ballerine-io · Sep 5, 2024 · f2d24c7 · f2d24c7
1 parent 778877c
commit f2d24c7
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 10 deletions.
diff --git a/...ponents/organisms/UIRenderer/elements/JSONForm/components/DocumentField/DocumentField.tsx b/...ponents/organisms/UIRenderer/elements/JSONForm/components/DocumentField/DocumentField.tsx
@@ -139,6 +139,7 @@ export const DocumentField = (
             message: response.message as string,
             type: 'warning',
           });
+
           return;
         }
 
@@ -159,7 +160,7 @@ export const DocumentField = (
   );
 
   const handleChange = useCallback(
-    (fileId: string) => {
+    (fileId: string, clear?: boolean) => {
       //@ts-ignore
       const destinationParser = new DocumentValueDestinationParser(definition.valueDestination);
       const pathToDocumentsList = destinationParser.extractRootPath();
@@ -202,8 +203,13 @@ export const DocumentField = (
         ({} as Document['pages'][number]);
 
       // Assigning file properties
+      if (clear) {
+        set(documentPage, pathToFileId!, undefined);
+      } else {
+        set(documentPage, pathToFileId!, fileId);
+      }
+
       //@ts-ignore
-      set(documentPage, pathToFileId, fileId);
       set(documentPage, 'fileName', file?.name);
       set(documentPage, 'type', file?.type);
 

diff --git a/...organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/FileUploaderField.tsx b/...organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/FileUploaderField.tsx
@@ -2,8 +2,8 @@ import { useFileAssigner } from '@/components/organisms/UIRenderer/elements/JSON
 import { useFileRepository } from '@/components/organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/hooks/useFileRepository';
 import { useFileUploading } from '@/components/organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/hooks/useFileUploading';
 import { DocumentUploadFieldProps } from '@/components/organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/types';
-import { Input } from '@ballerine/ui';
-import { Upload } from 'lucide-react';
+import { Button, Input } from '@ballerine/ui';
+import { Upload, XCircle } from 'lucide-react';
 import { useCallback, useRef } from 'react';
 
 export const FileUploaderField = ({
@@ -19,10 +19,11 @@ export const FileUploaderField = ({
   testId,
 }: DocumentUploadFieldProps) => {
   const { isUploading, uploadFile } = useFileUploading(_uploadFile);
-  const { file: registeredFile, registerFile } = useFileRepository(
-    fileStorage,
-    fileId || undefined,
-  );
+  const {
+    file: registeredFile,
+    registerFile,
+    removeFile,
+  } = useFileRepository(fileStorage, fileId || undefined);
   const inputRef = useRef<HTMLInputElement>(null);
   //@ts-ignore
   useFileAssigner(inputRef, registeredFile);
@@ -46,9 +47,23 @@ export const FileUploaderField = ({
     inputRef.current?.click();
   }, [inputRef]);
 
+  const handleClear = useCallback(
+    (event: React.SyntheticEvent) => {
+      event.stopPropagation();
+
+      if (!registeredFile || !fileId || !inputRef.current) return;
+
+      inputRef.current.value = '';
+
+      removeFile(fileId);
+      onChange(fileId, true);
+    },
+    [fileId, inputRef, registeredFile, removeFile, onChange],
+  );
+
   return (
     <div
-      className="flex h-[56px] flex-row items-center gap-3 rounded-[16px] border bg-white px-4"
+      className="relative flex h-[56px] flex-row items-center gap-3 rounded-[16px] border bg-white px-4"
       onClick={handdleContainerClick}
     >
       <div className="flex gap-3 text-[#007AFF]">
@@ -58,6 +73,18 @@ export const FileUploaderField = ({
       <span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
         {registeredFile ? registeredFile.name : 'No File Choosen'}
       </span>
+      {registeredFile && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="top-[calc(50% - 14px)] absolute right-[-36px] h-[28px]  w-[28px] rounded-full"
+          onClick={handleClear}
+        >
+          <div className="rounded-full bg-white">
+            <XCircle />
+          </div>
+        </Button>
+      )}
       <Input
         data-testid={testId}
         type="file"

diff --git a/...ements/JSONForm/components/FileUploaderField/hooks/useFileRepository/useFileRepository.ts b/...ements/JSONForm/components/FileUploaderField/hooks/useFileRepository/useFileRepository.ts
@@ -1,5 +1,6 @@
 import {
   RegisterFileFn,
+  RemoveFileFn,
   UseFileRepositoryResult,
 } from '@/components/organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/hooks/useFileUploading/types';
 import { useRefValue } from '@/hooks/useRefValue';
@@ -26,6 +27,14 @@ export const useFileRepository = (
     [fileRepository],
   );
 
+  const removeFile: RemoveFileFn = useCallback(
+    (fileId: string) => {
+      fileRepository.removeByFileId(fileId);
+      setFile(null);
+    },
+    [fileRepository],
+  );
+
   const repositoryListener: FileRepositoryListener = useCallback(
     (updatedFileId, action) => {
       if (fileId === updatedFileId && action === 'add') {
@@ -48,5 +57,6 @@ export const useFileRepository = (
   return {
     file,
     registerFile,
+    removeFile,
   };
 };
diff --git a/...UIRenderer/elements/JSONForm/components/FileUploaderField/hooks/useFileUploading/types.ts b/...UIRenderer/elements/JSONForm/components/FileUploaderField/hooks/useFileUploading/types.ts
@@ -16,7 +16,10 @@ export type UseFileUploadOnUploadCallback = (fileId: string) => void;
 
 export type RegisterFileFn = (file: File, fileId: string) => File;
 
+export type RemoveFileFn = (fileId: string) => void;
+
 export interface UseFileRepositoryResult {
   file: File | null;
   registerFile: RegisterFileFn;
+  removeFile: RemoveFileFn;
 }
diff --git a/...c/components/organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/types.ts b/...c/components/organisms/UIRenderer/elements/JSONForm/components/FileUploaderField/types.ts
@@ -5,7 +5,7 @@ export type UploadedFileResult = { fileId: string };
 export type UploadFileCallback = (file: File) => Promise<UploadedFileResult>;
 
 export interface DocumentUploadFieldProps {
-  onChange: (fileId: string) => void;
+  onChange: (fileId: string, clear?: boolean) => void;
   uploadFile: UploadFileFn;
   onBlur?: () => void;
   fileRepository: FileRepository;