Allow to change configration for registered field

Author: rvsia

packages/form-state-manager/src/files/form-manager-context.ts

@@ -39,7 +39,8 @@ const FormManagerContext = createContext<ManagerContextValue>({
   shift: noop,
   swap: noop,
   unshift: noop,
-  update: noop
+  update: noop,
+  updateFieldConfig: noop
 });
 
 export default FormManagerContext;

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

@@ -1,4 +1,4 @@
-import { useEffect, useContext, useReducer, useState } from 'react';
+import { useEffect, useContext, useReducer, useState, useRef } from 'react';
 import FormManagerContext from '../files/form-manager-context';
 import UseField, { OnChangeEvent, UseFieldData, Format } from '../types/use-field';
 import isEmpty from 'lodash/isEmpty';
@@ -78,8 +78,11 @@ const useField = ({
   allowNull,
   ...props
 }: UseField): UseFieldData => {
-  const { registerField, unregisterField, change, getFieldValue, blur, focus, formOptions, ...rest } = useContext(FormManagerContext);
+  const { registerField, unregisterField, change, getFieldValue, blur, focus, formOptions, updateFieldConfig, ...rest } = useContext(
+    FormManagerContext
+  );
   const [, render] = useReducer((count) => count + 1, 0);
+  const mounted = useRef(false);
   const [id] = useState(() => {
     const internalId = generateId();
 
@@ -131,6 +134,23 @@ const useField = ({
     change(name, parse(sanitizedValue, name));
   };
 
+  const validateToCheck = validate ? JSON.stringify(validate) : false;
+
+  useEffect(() => {
+    if (mounted.current) {
+      updateFieldConfig({
+        name,
+        internalId: id,
+        ...(Object.prototype.hasOwnProperty.call(props, 'initialValue') && {
+          initialValue: dataType ? convertValue(props.initialValue, dataType) : props.initialValue
+        }),
+        defaultValue: dataType ? convertValue(defaultValue, dataType) : defaultValue,
+        validate,
+        initializeOnMount
+      });
+    }
+  }, [dataType, validateToCheck, props.initialValue, defaultValue]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(
     () => {
       formOptions.afterSilentRegistration({ name, internalId: id });
@@ -139,6 +159,8 @@ const useField = ({
         formOptions.registerInputFile(name);
       }
 
+      mounted.current = true;
+
       return () => {
         if (type === 'file') {
           formOptions.unregisterInputFile(name);

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

@@ -1,6 +1,6 @@
 import { FormEvent } from 'react';
 import AnyObject from './any-object';
-import { Batch, Change, ManagerState, GetState, Blur, Focus, Unsubscribe, Subscribe } from './manager-api';
+import { Batch, Change, ManagerState, GetState, Blur, Focus, Unsubscribe, Subscribe, UpdateFieldConfig } from './manager-api';
 import FieldConfig from './field-config';
 import FieldArrayApi from './use-field-array-api';
 
@@ -24,6 +24,7 @@ export interface ManagerContextValue extends FieldArrayApi {
   initialValues?: AnyObject;
   subscribe: Subscribe;
   unsubscribe: Unsubscribe;
+  updateFieldConfig: UpdateFieldConfig;
 }
 
 export interface ManagerContext {

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

@@ -48,6 +48,7 @@ export type AfterSilentRegistration = (field: Omit<FieldConfig, 'render'>) => vo
 export type RegisterInputFile = (name: string) => void;
 export type UnregisterInputFile = (name: string) => void;
 export type GetRegisteredFields = () => Array<string>;
+export type UpdateFieldConfig = (field: UpdatedConfig) => void;
 export interface AsyncWatcherRecord {
   [key: number]: Promise<unknown>;
 }
@@ -122,7 +123,8 @@ export type ManagerApiFunctions =
   | 'afterSilentRegistration'
   | 'registerInputFile'
   | 'unregisterInputFile'
-  | 'getRegisteredFields';
+  | 'getRegisteredFields'
+  | 'updateFieldConfig';
 
 export interface ManagerState {
   values: AnyObject;
@@ -156,6 +158,7 @@ export interface ManagerState {
   setConfig: SetConfig;
   afterSilentRegistration: AfterSilentRegistration;
   getRegisteredFields: GetRegisteredFields;
+  updateFieldConfig: UpdateFieldConfig;
   registeredFields: Array<string>;
   fieldListeners: FieldListeners;
   active: string | undefined;
@@ -201,6 +204,15 @@ export interface SubscriberConfig extends AnyObject {
   beforeSubmit?: BeforeSubmit;
 }
 
+export interface UpdatedConfig {
+  validate?: Validator;
+  initialValue?: any;
+  defaultValue?: any;
+  name: string;
+  internalId: number | string;
+  initializeOnMount?: boolean;
+}
+
 export interface CreateManagerApiConfig {
   onSubmit: OnSubmit;
   clearOnUnmount?: boolean;

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

@@ -20,7 +20,8 @@ import CreateManagerApi, {
   ExtendedFieldState,
   InitilizeInputFunction,
   CreateManagerApiConfig,
-  FieldListener
+  FieldListener,
+  UpdatedConfig
 } from '../types/manager-api';
 import AnyObject from '../types/any-object';
 import FieldConfig, { IsEqual } from '../types/field-config';
@@ -244,6 +245,7 @@ const createManagerApi: CreateManagerApi = ({
     registerInputFile,
     unregisterInputFile,
     getRegisteredFields,
+    updateFieldConfig,
     ...initialFormState(initialValues)
   };
   let inBatch = 0;
@@ -389,6 +391,12 @@ const createManagerApi: CreateManagerApi = ({
 
       state.registeredFields.forEach(resetFieldState);
 
+      revalidateFields(state.registeredFields);
+
+      if (config.validate) {
+        validateForm(config.validate);
+      }
+
       render();
     });
   }
@@ -1061,6 +1069,60 @@ const createManagerApi: CreateManagerApi = ({
     return [...state.registeredFields];
   }
 
+  function updateFieldConfig(field: UpdatedConfig): void {
+    const { name, internalId, validate } = field;
+
+    state.fieldListeners[name].fields[internalId] = {
+      ...state.fieldListeners[name].fields[internalId],
+      validate
+    };
+
+    const render = prepareRerender();
+
+    if (
+      shouldExecute(config.initializeOnMount, field.initializeOnMount) ||
+      (!isInitialized(field.name) && typeof field.initialValue !== 'undefined')
+    ) {
+      set(
+        state.values,
+        field.name,
+        Object.prototype.hasOwnProperty.call(field, 'initialValue') ? field.initialValue : get(state.initialValues, field.name)
+      );
+    }
+
+    let setDirty = false;
+    if (!isInitialized(field.name) && typeof field.defaultValue !== 'undefined' && typeof get(state.values, field.name) === 'undefined') {
+      set(state.values, field.name, field.defaultValue);
+      setDirty = true;
+    }
+
+    if (setDirty) {
+      state.pristine = false;
+      state.dirty = true;
+      state.dirtyFields[field.name] = true;
+      state.fieldListeners[field.name].state.meta.dirty = true;
+      state.fieldListeners[field.name].state.meta.pristine = false;
+    }
+
+    setFieldState(name, (prev: FieldState) => ({
+      ...prev,
+      value: get(state.values, name),
+      ...(Object.prototype.hasOwnProperty.call(field, 'initialValue') && {
+        meta: {
+          ...prev.meta,
+          initial: field.initialValue
+        }
+      })
+    }));
+
+    revalidateFields([field.name, ...(state.fieldListeners[field.name]?.validateFields || state.registeredFields.filter((n) => n !== field.name))]);
+    if (config.validate) {
+      validateForm(config.validate);
+    }
+
+    render();
+  }
+
   return managerApi;
 };
 

packages/react-form-renderer/src/tests/form-renderer/use-field-api.test.js

@@ -148,12 +148,19 @@ describe('useFieldApi', () => {
     expect(wrapper.find(Catcher).props().arrayValidator).toEqual(expect.any(Function));
   });
 
-  it('reloads initial value', () => {
-    const wrapper = mount(<WrapperComponent {...initialProps} />);
+  it('reloads initial value', async () => {
+    let wrapper;
+
+    await act(async () => {
+      wrapper = mount(<WrapperComponent {...initialProps} />);
+    });
+    wrapper.update();
 
     expect(wrapper.find(Catcher).props().meta.initial).toEqual(undefined);
 
-    wrapper.setProps({ initialValue: 'pepa' });
+    await act(async () => {
+      wrapper.setProps({ initialValue: 'pepa' });
+    });
     wrapper.update();
 
     expect(wrapper.find(Catcher).props().meta.initial).toEqual('pepa');