feat(manager): implement fileInput features

Author: rvsia

packages/form-state-manager/src/files/use-field.ts

@@ -18,6 +18,13 @@ const sanitizeValue = (event: OnChangeEvent): any => {
       return event;
     }
 
+    if (event.target.type === 'file') {
+      return {
+        inputValue: event.target.value,
+        inputFiles: event.target.files
+      };
+    }
+
     return event?.target.type === 'checkbox' ? event.target.checked : event?.target.value;
   }
 
@@ -123,7 +130,15 @@ const useField = ({
     () => {
       formOptions().afterSilentRegistration({ name, internalId: id });
 
+      if (type === 'file') {
+        formOptions().registerInputFile(name);
+      }
+
       return () => {
+        if (type === 'file') {
+          formOptions().unregisterInputFile(name);
+        }
+
         unregisterField({ name, clearOnUnmount, internalId: id, value: finalClearedValue });
       };
     },
@@ -171,6 +186,10 @@ const useField = ({
     valueToReturn = [];
   }
 
+  if (type === 'file' && typeof valueToReturn === 'object') {
+    valueToReturn = valueToReturn.inputValue;
+  }
+
   return {
     input: {
       value: valueToReturn,

packages/form-state-manager/src/tests/files/use-field.test.js

@@ -1366,4 +1366,72 @@ describe('useField', () => {
       expect(wrapper.find('select').props().value).toEqual(['hamsters']);
     });
   });
+
+  describe('fileInput', () => {
+    let Dummy;
+    let wrapper;
+
+    beforeEach(() => {
+      managerApi = createManagerApi({});
+
+      Dummy = (props) => {
+        const {
+          input: { value, ...rest }
+        } = useField(props);
+        return (
+          <React.Fragment>
+            <input {...rest} />
+            <span>{value}</span>
+          </React.Fragment>
+        );
+      };
+    });
+
+    it('register inputFile name and uregister', async () => {
+      expect(managerApi().fileInputs).toEqual([]);
+      wrapper = mount(
+        <FormManagerContext.Provider value={{ ...managerApi(), formOptions: managerApi }}>
+          <Dummy name="field" type="file" />
+        </FormManagerContext.Provider>
+      );
+      expect(managerApi().fileInputs).toEqual(['field']);
+
+      await act(async () => {
+        wrapper.unmount();
+      });
+      wrapper.update();
+
+      expect(managerApi().fileInputs).toEqual([]);
+    });
+
+    it('sanitize value', async () => {
+      wrapper = mount(
+        <FormManagerContext.Provider value={{ ...managerApi(), formOptions: managerApi }}>
+          <Dummy name="field" type="file" />
+        </FormManagerContext.Provider>
+      );
+
+      await act(async () => {
+        wrapper
+          .find('input')
+          .first()
+          .simulate('change', {
+            target: {
+              value: '/path/',
+              files: ['blabla'],
+              type: 'file'
+            }
+          });
+      });
+      wrapper.update();
+
+      expect(managerApi().getState().values).toEqual({
+        field: {
+          inputFiles: ['blabla'],
+          inputValue: '/path/'
+        }
+      });
+      expect(wrapper.find('span').text()).toEqual('/path/');
+    });
+  });
 });

packages/form-state-manager/src/tests/utils/manager-api.test.js

@@ -2283,4 +2283,26 @@ describe('managerApi', () => {
     expect(managerApi().getState().pristine).toEqual(true);
     expect(managerApi().getState().dirty).toEqual(false);
   });
+
+  describe('fileInput', () => {
+    const managerApi = createManagerApi({ onSubmit: jest.fn() });
+
+    expect(managerApi().fileInputs).toEqual([]);
+
+    managerApi().registerInputFile('name');
+
+    expect(managerApi().fileInputs).toEqual(['name']);
+
+    managerApi().registerInputFile('name');
+
+    expect(managerApi().fileInputs).toEqual(['name', 'name']);
+
+    managerApi().unregisterInputFile('name');
+
+    expect(managerApi().fileInputs).toEqual(['name']);
+
+    managerApi().unregisterInputFile('name');
+
+    expect(managerApi().fileInputs).toEqual([]);
+  });
 });

packages/form-state-manager/src/types/manager-api.d.ts

@@ -45,7 +45,8 @@ export type PauseValidation = () => void;
 export type ResumeValidation = () => void;
 export type SetConfig = (attribute: keyof CreateManagerApiConfig, value: any) => void;
 export type AfterSilentRegistration = (field: Omit<FieldConfig, 'render'>) => void;
-
+export type RegisterInputFile = (name: string) => void;
+export type UnregisterInputFile = (name: string) => void;
 export interface AsyncWatcherRecord {
   [key: number]: Promise<unknown>;
 }
@@ -116,7 +117,9 @@ export type ManagerApiFunctions =
   | 'pauseValidation'
   | 'resumeValidation'
   | 'setConfig'
-  | 'afterSilentRegistration';
+  | 'afterSilentRegistration'
+  | 'registerInputFile'
+  | 'unregisterInputFile';
 
 export interface ManagerState {
   values: AnyObject;
@@ -173,6 +176,9 @@ export interface ManagerState {
   validating: boolean;
   visited: AnyBooleanObject;
   destroyOnUnregister: boolean | undefined;
+  fileInputs: Array<any>;
+  registerInputFile: RegisterInputFile;
+  unregisterInputFile: UnregisterInputFile;
 }
 
 export type ManagerApi = () => ManagerState;

packages/form-state-manager/src/utils/manager-api.ts

@@ -182,7 +182,8 @@ export const initialFormState = (initialValues: AnyObject = {}): Omit<ManagerSta
   touched: {},
   valid: true,
   validating: false,
-  visited: {}
+  visited: {},
+  fileInputs: []
 });
 
 const createManagerApi: CreateManagerApi = ({
@@ -238,6 +239,8 @@ const createManagerApi: CreateManagerApi = ({
     setConfig,
     afterSilentRegistration,
     destroyOnUnregister,
+    registerInputFile,
+    unregisterInputFile,
     ...initialFormState(initialValues)
   };
   let inBatch = 0;
@@ -992,6 +995,14 @@ const createManagerApi: CreateManagerApi = ({
     });
   }
 
+  function registerInputFile(name: string): void {
+    state.fileInputs.push(name);
+  }
+
+  function unregisterInputFile(name: string): void {
+    state.fileInputs.splice(state.fileInputs.indexOf(name), 1);
+  }
+
   return managerApi;
 };