fix: fix store errors (#11)

Author: bocembocem

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

@@ -95,6 +95,25 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
                 const error = validate?.(_value);
                 const value = transformArrIn(_value);
 
+                let newChildErrors: Record<string, ValidateError> = {...state.childErrors};
+
+                if (childErrors) {
+                    const nearestChildName = _.keys(childErrors).sort(
+                        (a, b) => a.length - b.length,
+                    )[0];
+
+                    if (nearestChildName) {
+                        const existingСhildNames = _.keys(newChildErrors).filter((childName) =>
+                            childName.startsWith(nearestChildName),
+                        );
+
+                        newChildErrors = {
+                            ..._.omit(newChildErrors, existingСhildNames),
+                            ...childErrors,
+                        };
+                    }
+                }
+
                 return {
                     ...state,
                     dirty: !_.isEqual(value, initialValue),
@@ -106,10 +125,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
                     valid: !error,
                     value,
                     visited: true,
-                    childErrors: {
-                        ...state.childErrors,
-                        ...(childErrors || {}),
-                    },
+                    childErrors: newChildErrors,
                 };
             });
         };
@@ -233,7 +249,7 @@ export const useField = <Value extends FieldValue, SpecType extends Spec>({
         firstRenderRef.current = false;
 
         return () => {
-            tools.onUnmount(name);
+            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, {[name]: false});
         };
     }, []);
 

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

@@ -3,7 +3,6 @@ import React from 'react';
 import _ from 'lodash';
 import {Field as FinalFormField, useForm} from 'react-final-form';
 
-import {REMOVED_ITEM} from '../constants';
 import {transformArrIn, transformArrOut} from '../helpers';
 import {
     AsyncValidateError,
@@ -75,27 +74,8 @@ export const useStore = (name: string) => {
                 setStore((store) => ({
                     ...store,
                     values: _.set({...store.values}, name, value),
-                    errors: {...store.errors, ...(errors || {})},
+                    errors: errors || {},
                 })),
-            onUnmount: (name: string) =>
-                setStore((store) => {
-                    const value = _.get(store.values, name);
-                    const values =
-                        value && value !== REMOVED_ITEM
-                            ? {..._.set(store.values, name, undefined)}
-                            : store.values;
-
-                    return {
-                        ...store,
-                        values,
-                        errors: {
-                            ..._.omit(
-                                store.errors,
-                                Object.keys(store.errors).filter((key) => key.startsWith(name)),
-                            ),
-                        },
-                    };
-                }),
             submitFailed,
         }),
         [store.initialValue, setStore, submitFailed],

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

@@ -10,7 +10,6 @@ export interface DynamicFormsContext {
     tools: {
         initialValue: FieldObjectValue;
         onChange: (name: string, value: FieldValue, errors?: Record<string, ValidateError>) => void;
-        onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
 }