fix: fix state updates by mutators

src/lib/core/components/Form/Controller.tsx

@@ -1,17 +1,15 @@
-import React from 'react';
-
 import _ from 'lodash';
 
 import {Spec} from '../../types';
 
-import {EMPTY_MUTATOR} from './constants';
 import {
     useComponents,
     useControllerMirror,
     useDynamicFormsCtx,
     useField,
     useRender,
     useSearch,
+    useSpec,
     useValidate,
 } from './hooks';
 import {ControllerMirror, FieldValue, ValidateError} from './types';
@@ -38,17 +36,7 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
     parentOnUnmount,
 }: ControllerProps<Value, SpecType>) => {
     const {tools, mutators, __mirror} = useDynamicFormsCtx();
-
-    const spec = React.useMemo(() => {
-        const specMutator = _.get(mutators.spec, name, EMPTY_MUTATOR);
-
-        if (specMutator !== EMPTY_MUTATOR) {
-            return _.merge(_spec, specMutator);
-        }
-
-        return _spec;
-    }, [_spec, mutators.spec, name]);
-
+    const spec = useSpec({name, spec: _spec, mutators});
     const {inputEntity, Layout} = useComponents(spec);
     const render = useRender({name, spec, inputEntity, Layout});
     const validate = useValidate(spec);
@@ -57,6 +45,7 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
         initialValue: _.get(tools.initialValue, name),
         value,
         spec,
+        originalSpec: _spec,
         validate,
         tools,
         parentOnChange,

src/lib/core/components/Form/hooks/index.tsx

@@ -16,4 +16,5 @@ export * from './useMonaco';
 export * from './useSearchStore';
 export * from './useSearchContext';
 export * from './useSearch';
+export * from './useSpec';
 export * from './useCreateSearchContext';

src/lib/core/components/Form/hooks/useField.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import _ from 'lodash';
 
-import {isArraySpec, isNumberSpec, isObjectSpec} from '../../../helpers';
+import {isArraySpec, isCorrectSpec, isNumberSpec, isObjectSpec} from '../../../helpers';
 import {Spec} from '../../../types';
 import {EMPTY_MUTATOR, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG} from '../constants';
 import {
@@ -13,18 +13,23 @@ import {
     FieldRenderProps,
     FieldValue,
     ValidateError,
+    ValidatorsMap,
 } from '../types';
 import {
     isArrayItem,
+    isCorrectConfig,
     isErrorMutatorCorrect,
     isValueMutatorCorrect,
     transformArrIn,
     transformArrOut,
 } from '../utils';
 
+import {useDynamicFormsCtx} from './useDynamicFormsCtx';
+
 export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec> {
     name: string;
     spec: SpecType;
+    originalSpec: SpecType;
     initialValue: Value;
     value: Value;
     validate?: (value?: Value) => ValidateError;
@@ -39,10 +44,58 @@ export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec>
     parentOnUnmount: ((childName: string) => void) | null;
     mutators: DynamicFormMutators;
 }
+// TODO: remove
+const useExtraValidator = <Value extends FieldValue, SpecType extends Spec>({
+    name,
+    spec,
+}: {
+    name: string;
+    spec: SpecType;
+}) => {
+    const {mutators, config} = useDynamicFormsCtx();
+
+    const nextSpec = (() => {
+        const specMutator = _.get(mutators.spec, name, EMPTY_MUTATOR);
+
+        if (specMutator !== EMPTY_MUTATOR) {
+            return _.merge(_.cloneDeep(spec), specMutator);
+        }
+
+        return spec;
+    })();
+    const validator = (() => {
+        if (isCorrectConfig(config) && isCorrectSpec(nextSpec)) {
+            const {validators} = config[nextSpec.type] as unknown as {
+                validators: ValidatorsMap<Value, SpecType>;
+            };
+
+            if (validators) {
+                if (
+                    (!_.isString(nextSpec.validator) || !nextSpec.validator.length) &&
+                    _.isFunction(validators.base)
+                ) {
+                    return (value?: Value) => validators.base(nextSpec, value);
+                }
+
+                if (
+                    _.isString(nextSpec.validator) &&
+                    _.isFunction(validators[nextSpec.validator])
+                ) {
+                    return (value?: Value) => validators[nextSpec.validator!]!(nextSpec, value);
+                }
+            }
+        }
+
+        return;
+    })();
+
+    return validator;
+};
 
 export const useField = <Value extends FieldValue, SpecType extends Spec>({
     name,
     spec,
+    originalSpec,
     initialValue,
     value: externalValue,
     validate: propsValidate,
@@ -52,6 +105,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
     mutators,
 }: UseFieldProps<Value, SpecType>): FieldRenderProps<Value> => {
     const firstRenderRef = React.useRef(true);
+    const extraValidator = useExtraValidator<Value, SpecType>({name, spec: originalSpec});
 
     const validate = React.useCallback(
         (value: Value) => propsValidate?.(transformArrOut(value)),
@@ -112,10 +166,12 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
             valOrSetter: Value | ((currentValue: Value) => Value),
             childErrors?: Record<string, ValidateError>,
             errorMutator?: ValidateError,
+            extraValidator?: ReturnType<typeof useExtraValidator<Value, SpecType>>,
         ) => {
             setState((state) => {
                 const _value = _.isFunction(valOrSetter) ? valOrSetter(state.value) : valOrSetter;
-                const error = validate?.(_value) || errorMutator;
+                const error =
+                    (extraValidator ? extraValidator(_value) : validate?.(_value)) || errorMutator;
                 let value = transformArrIn(_value);
 
                 if (isNumberSpec(spec) && !error) {
@@ -298,7 +354,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
                 valueMutator !== state.value &&
                 valueMutator !== EMPTY_MUTATOR
             ) {
-                onLocalChange(valueMutator, undefined, errorMutator);
+                onLocalChange(valueMutator, undefined, errorMutator, extraValidator);
             } else if (state.error !== errorMutator && !(state.error && !errorMutator)) {
                 setState({...state, error: errorMutator});
                 (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, {

src/lib/core/components/Form/hooks/useMutators.ts

@@ -2,19 +2,45 @@ import React from 'react';
 
 import _ from 'lodash';
 
-import {DynamicFormMutators} from '../types';
+import {DynamicFormMutators, SpecMutator} from '../types';
 
 export const useMutators = (externalMutators?: DynamicFormMutators) => {
     const firstRenderRef = React.useRef(true);
     const [store, setStore] = React.useState<DynamicFormMutators>(externalMutators || {});
 
     const mutateDFState = React.useCallback(
         (mutators: DynamicFormMutators) => {
+            const mergeSpec = (a: Record<string, SpecMutator>, b: Record<string, SpecMutator>) => {
+                const result = _.cloneDeep(a);
+
+                const getKeys = (parent: any): string[][] => {
+                    if (_.isObjectLike(parent)) {
+                        return _.keys(parent).reduce((acc: string[][], parentKey) => {
+                            const childKeys = getKeys(parent[parentKey]);
+
+                            return [
+                                ...acc,
+                                ...(childKeys.length ? [] : [[parentKey]]),
+                                ...childKeys.map((childKey) => [parentKey, ...childKey]),
+                            ];
+                        }, []);
+                    }
+
+                    return [];
+                };
+
+                getKeys(b).forEach((key) => {
+                    _.set(result, key, _.get(b, key));
+                });
+
+                return result;
+            };
+
             setStore((store) => ({
                 ...store,
                 ...(mutators.errors ? {errors: _.merge(store.errors, mutators.errors)} : {}),
                 ...(mutators.values ? {values: _.merge(store.values, mutators.values)} : {}),
-                ...(mutators.spec ? {spec: _.merge(store.spec, mutators.spec)} : {}),
+                ...(mutators.spec ? {spec: mergeSpec(store.spec || {}, mutators.spec)} : {}),
             }));
         },
         [setStore],

src/lib/core/components/Form/hooks/useSpec.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import _ from 'lodash';
+
+import {Spec} from '../../../types';
+import {EMPTY_MUTATOR} from '../constants';
+import {DynamicFormMutators} from '../types';
+
+export interface UseSpecParams {
+    name: string;
+    spec: Spec;
+    mutators: DynamicFormMutators;
+}
+
+export const useSpec = ({spec: _spec, mutators, name}: UseSpecParams) => {
+    const firstRenderRef = React.useRef(true);
+    const [spec, setSpec] = React.useState(() => {
+        const specMutator = _.get(mutators.spec, name, EMPTY_MUTATOR);
+
+        if (specMutator !== EMPTY_MUTATOR) {
+            return _.merge(_.cloneDeep(_spec), specMutator);
+        }
+
+        return _spec;
+    });
+
+    React.useEffect(() => {
+        if (!firstRenderRef.current) {
+            const specMutator = _.get(mutators.spec, name, EMPTY_MUTATOR);
+
+            if (specMutator === EMPTY_MUTATOR) {
+                if (!_.isEqual(spec, _spec)) {
+                    setSpec(_spec);
+                }
+            } else {
+                const nextSpec = _.merge(_.cloneDeep(_spec), specMutator);
+
+                if (!_.isEqual(spec, nextSpec)) {
+                    setSpec(nextSpec);
+                }
+            }
+        }
+    }, [_spec, mutators, name]);
+
+    React.useEffect(() => {
+        firstRenderRef.current = false;
+    }, []);
+
+    return spec;
+};

src/lib/core/components/Form/types/mutators.ts

@@ -1,9 +1,24 @@
-import {FormValue, Spec} from '../../../types';
+import {
+    ArraySpec,
+    BooleanSpec,
+    FormValue,
+    NumberSpec,
+    ObjectSpec,
+    StringSpec,
+} from '../../../types';
 
 import {BaseValidateError} from './';
 
+export type SpecMutator = Partial<
+    | (Omit<ArraySpec, 'viewSpec'> & {viewSpec: Partial<ArraySpec['viewSpec']>})
+    | (Omit<BooleanSpec, 'viewSpec'> & {viewSpec: Partial<BooleanSpec['viewSpec']>})
+    | (Omit<NumberSpec, 'viewSpec'> & {viewSpec: Partial<NumberSpec['viewSpec']>})
+    | (Omit<ObjectSpec, 'viewSpec'> & {viewSpec: Partial<ObjectSpec['viewSpec']>})
+    | (Omit<StringSpec, 'viewSpec'> & {viewSpec: Partial<StringSpec['viewSpec']>})
+>;
+
 export interface DynamicFormMutators {
     errors?: Record<string, BaseValidateError>;
     values?: Record<string, FormValue>;
-    spec?: Record<string, Partial<Spec>>;
+    spec?: Record<string, SpecMutator>;
 }