@rolster/react-forms 19.4.3 → 19.4.7

package/dist/cjs/index.cjs

@@ -133,7 +133,7 @@ function replaceControl(controls, control) {
             controls[key] = control;
         }
         return controls;
-    }, controls);
+    }, { ...controls });
 }
 
 function refactorForValid$2(controls, validators) {
@@ -217,6 +217,11 @@ class RolsterArrayGroup {
     setResource(resource) {
         this.refresh('resource', { resource });
     }
+    reset() {
+        Object.values(this.controls).forEach((control) => {
+            control.reset();
+        });
+    }
     refresh(action, options) {
         this.subscriber &&
             this.subscriber(action, new RolsterArrayGroup({ ...this, ...options }));
@@ -251,12 +256,14 @@ function formArrayGroup(options, validators) {
 
 class RolsterArrayList extends RolsterArrayControl {
     constructor(options) {
-        const { controls, valueToControls, validators } = options;
+        const { controls, controlsUuid, valueToControls, valueToUuid, validators } = options;
         const value = controls.map(helpers.controlsToValue);
         const errors = validators ? helpers.formControlIsValid({ value, validators }) : [];
         super({ ...options, errors, value });
         this.valueToControls = valueToControls;
+        this.valueToUuid = valueToUuid;
         this.controls = controls;
+        this.controlsUuid = controlsUuid ?? controls.map(() => uuid.v4());
         this.valid =
             errors.length === 0 &&
                 controls.reduce((valid, controls) => valid && helpers.verifyAllTrueInControls(controls, 'valid'), true);
@@ -267,49 +274,76 @@ class RolsterArrayList extends RolsterArrayControl {
         });
     }
     setDefaultValue(value) {
+        console.log(value);
+        console.log(this.generateControlsUuid(value));
         this.refresh('list', {
             controls: value.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(value),
             defaultValue: value
         });
     }
     setStartValue(value) {
         this.refresh('list', {
-            controls: value.map(this.valueToControls)
+            controls: value.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(value)
         });
     }
     setValue(value) {
+        console.log(value);
+        console.log(this.generateControlsUuid(value));
         this.refresh('list', {
             controls: value.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(value),
             dirty: true
         });
     }
     reset() {
         this.refresh('list', {
             controls: this.defaultValue.map(this.valueToControls),
+            controlsUuid: this.generateControlsUuid(this.defaultValue),
             dirty: false,
             touched: false
         });
     }
     push(controls) {
+        const _uuid = this.valueToUuid?.(helpers.controlsToValue(controls)) ?? uuid.v4();
         this.refresh('list', {
-            controls: [...this.controls, controls]
+            controls: [...this.controls, controls],
+            controlsUuid: [...this.controlsUuid, _uuid]
         });
     }
     remove(controls) {
+        const _controls = [];
+        const _controlsUuid = [];
+        this.controls.forEach((currentControls, index) => {
+            if (currentControls !== controls) {
+                _controls.push(currentControls);
+                _controlsUuid.push(this.controlsUuid[index]);
+            }
+        });
         this.refresh('list', {
-            controls: this.controls.filter((_controls) => _controls !== controls)
+            controls: _controls,
+            controlsUuid: _controlsUuid
         });
     }
+    findControlsByUuid(uuid) {
+        const index = this.controlsUuid.indexOf(uuid);
+        return index >= 0 ? this.controls[index] : undefined;
+    }
     builder(options) {
         return new RolsterArrayList({
             ...this,
             ...options,
-            valueToControls: this.valueToControls
+            valueToControls: this.valueToControls,
+            valueToUuid: this.valueToUuid
         });
     }
     refresh(action, options) {
         super.refresh(action, options);
     }
+    generateControlsUuid(values) {
+        return values.map((value) => this.valueToUuid?.(value) ?? uuid.v4());
+    }
     _subscribe(reactControls) {
         Object.values(reactControls).forEach((control) => {
             control.subscribe((action, _control) => {
@@ -322,10 +356,12 @@ class RolsterArrayList extends RolsterArrayControl {
     }
 }
 function formArrayList(options) {
+    const { valueToControls, valueToUuid } = options;
     const value = options?.value || [];
     return new RolsterArrayList({
         ...options,
-        controls: value.map((value) => options.valueToControls(value)),
+        controls: value.map(valueToControls),
+        controlsUuid: value.map((v) => valueToUuid?.(v) ?? uuid.v4()),
         defaultValue: value,
         uuid: uuid.v4()
     });
@@ -360,29 +396,22 @@ function refactorForControls(action, state, groups) {
 }
 function useFormArray(options, validators) {
     const formArray = helpers.createFormArrayOptions(options, validators);
-    const defaultValue = react.useRef(formArray.groups || []);
-    const formGroups = react.useRef(new Map());
+    const refArrayValue = react.useRef(formArray.groups || []);
+    const refArrayGroups = react.useRef(new Map());
     const [state, setState] = react.useState(() => {
         return {
-            ...refactorForValid$1(defaultValue.current, formArray.validators),
-            controls: defaultValue.current.map(({ controls }) => controls),
+            ...refactorForValid$1(refArrayValue.current, formArray.validators),
+            controls: refArrayValue.current.map(({ controls }) => controls),
             dirty: false,
             dirties: false,
             disabled: false,
-            groups: defaultValue.current,
+            groups: refArrayValue.current,
             touched: false,
             toucheds: false,
-            value: defaultValue.current.map(({ controls }) => helpers.controlsToValue(controls)),
+            value: refArrayValue.current.map(({ controls }) => helpers.controlsToValue(controls)),
             validators: formArray.validators
         };
     });
-    react.useEffect(() => {
-        formGroups.current.clear();
-        state.groups.forEach((group) => {
-            formGroups.current.set(group.uuid, group);
-            group.subscribe(subscriber);
-        });
-    }, [state.groups]);
     const subscriber = react.useCallback((action, group) => {
         setState((state) => {
             const groups = state.groups.map((currentGroup) => {
@@ -394,6 +423,17 @@ function useFormArray(options, validators) {
             };
         });
     }, []);
+    react.useEffect(() => {
+        const previousGroups = refArrayGroups.current;
+        const currentGroups = new Map();
+        state.groups.forEach((group) => {
+            currentGroups.set(group.uuid, group);
+            if (previousGroups.get(group.uuid) !== group) {
+                group.subscribe(subscriber);
+            }
+        });
+        refArrayGroups.current = currentGroups;
+    }, [state.groups]);
     const disable = react.useCallback(() => {
         setState((state) => ({ ...state, disabled: true }));
     }, []);
@@ -417,29 +457,36 @@ function useFormArray(options, validators) {
             ...state,
             ...refactorForGroups(groups, state.validators)
         }));
-        defaultValue.current = groups;
+        refArrayValue.current = groups;
     }, []);
     const push = react.useCallback((group) => {
+        refArrayGroups.current.set(group.uuid, group);
+        group.subscribe(subscriber);
         setState((state) => ({
             ...state,
             ...refactorForGroups([...state.groups, group], state.validators)
         }));
     }, []);
     const merge = react.useCallback((groups) => {
+        groups.forEach((group) => {
+            group.subscribe(subscriber);
+            refArrayGroups.current.set(group.uuid, group);
+        });
         setState((state) => ({
             ...state,
             ...refactorForGroups([...state.groups, ...groups], state.validators)
         }));
     }, []);
     const remove = react.useCallback(({ uuid }) => {
+        refArrayGroups.current.delete(uuid);
         setState((state) => ({
             ...state,
             ...refactorForGroups(state.groups.filter((group) => group.uuid !== uuid), state.validators)
         }));
     }, []);
     const findByUuid = react.useCallback((uuid) => {
-        return formGroups.current.get(uuid);
-    }, [state.groups]);
+        return refArrayGroups.current.get(uuid);
+    }, []);
     const setValidators = react.useCallback((validators) => {
         setState((state) => ({
             ...state,
@@ -454,9 +501,10 @@ function useFormArray(options, validators) {
         return helpers.someErrors(state.errors, keys);
     }, [state.errors]);
     const reset = react.useCallback(() => {
+        refArrayValue.current.forEach((group) => group.reset());
         setState((state) => ({
             ...state,
-            ...refactorForGroups(defaultValue.current, state.validators)
+            ...refactorForGroups(refArrayValue.current, state.validators)
         }));
     }, []);
     return {
@@ -608,42 +656,53 @@ function refactorForValid(controls, validators) {
     };
 }
 function checkAllSuccess(status) {
-    return status.reduce((success, status) => success && status, true);
+    return status.every((value) => value);
 }
 function checkPartialSuccess(status) {
-    return status.reduce((success, status) => success || status, false);
+    return status.some((value) => value);
+}
+function arraysShallowEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+            return false;
+        }
+    }
+    return true;
 }
 function useFormGroup(options, validators) {
     const formGroup = helpers.createFormGroupOptions(options, validators);
-    const formInitialized = react.useRef({
-        dirty: false,
-        touched: false,
-        value: false,
-        visual: false
-    });
+    const refControls = react.useRef(formGroup.controls);
+    refControls.current = formGroup.controls;
     const formGroupStatus = react.useMemo(() => {
         const dirty = [];
+        const disabled = [];
+        const focused = [];
         const touched = [];
         const value = [];
-        const visual = [];
         Object.values(formGroup.controls).forEach((control) => {
             dirty.push(control.dirty);
+            disabled.push(control.disabled);
+            focused.push(control.focused);
             touched.push(control.touched);
             value.push(control.value);
-            visual.push(control.disabled);
-            visual.push(control.focused);
         });
         return {
             dirty,
+            disabled,
+            focused,
             touched,
-            value,
-            visual
+            value
         };
     }, [formGroup.controls]);
     const [state, setState] = react.useState(() => {
         return {
             ...refactorForValid(formGroup.controls, formGroup.validators),
-            controls: formGroup.controls,
             dirties: checkAllSuccess(formGroupStatus.dirty),
             dirty: checkPartialSuccess(formGroupStatus.dirty),
             touched: checkPartialSuccess(formGroupStatus.touched),
@@ -652,75 +711,65 @@ function useFormGroup(options, validators) {
             value: helpers.controlsToValue(formGroup.controls)
         };
     });
+    const refPrevFormGroupStatus = react.useRef(null);
     react.useEffect(() => {
-        if (formInitialized.current.value) {
-            setState((state) => ({
-                ...state,
-                ...refactorForValid(formGroup.controls, state.validators),
-                controls: formGroup.controls,
-                value: helpers.controlsToValue(formGroup.controls)
-            }));
-        }
-        else {
-            formInitialized.current.value = true;
-        }
-    }, formGroupStatus.value);
-    react.useEffect(() => {
-        if (formInitialized.current.dirty) {
-            setState((state) => ({
-                ...state,
-                controls: formGroup.controls,
-                dirty: checkPartialSuccess(formGroupStatus.dirty),
-                dirties: checkAllSuccess(formGroupStatus.dirty)
-            }));
-        }
-        else {
-            formInitialized.current.dirty = true;
-        }
-    }, formGroupStatus.dirty);
-    react.useEffect(() => {
-        if (formInitialized.current.touched) {
-            setState((state) => ({
-                ...state,
-                controls: formGroup.controls,
-                touched: checkPartialSuccess(formGroupStatus.touched),
-                toucheds: checkAllSuccess(formGroupStatus.touched)
-            }));
-        }
-        else {
-            formInitialized.current.touched = true;
-        }
-    }, formGroupStatus.touched);
-    react.useEffect(() => {
-        if (formInitialized.current.visual) {
-            setState((state) => ({
-                ...state,
-                controls: formGroup.controls
-            }));
+        const formGroupPrev = refPrevFormGroupStatus.current;
+        refPrevFormGroupStatus.current = formGroupStatus;
+        if (!formGroupPrev) {
+            return;
         }
-        else {
-            formInitialized.current.visual = true;
+        const valueChanged = !arraysShallowEqual(formGroupPrev.value, formGroupStatus.value);
+        const dirtyChanged = !arraysShallowEqual(formGroupPrev.dirty, formGroupStatus.dirty);
+        const touchedChanged = !arraysShallowEqual(formGroupPrev.touched, formGroupStatus.touched);
+        const disabledChanged = !arraysShallowEqual(formGroupPrev.disabled, formGroupStatus.disabled);
+        const focusedChanged = !arraysShallowEqual(formGroupPrev.focused, formGroupStatus.focused);
+        if (!valueChanged &&
+            !dirtyChanged &&
+            !touchedChanged &&
+            !disabledChanged &&
+            !focusedChanged) {
+            return;
         }
-    }, formGroupStatus.visual);
+        setState((state) => {
+            const next = { ...state };
+            if (valueChanged) {
+                const validResult = refactorForValid(refControls.current, state.validators);
+                next.errors = validResult.errors;
+                next.valid = validResult.valid;
+                next.value = helpers.controlsToValue(refControls.current);
+            }
+            if (dirtyChanged) {
+                next.dirty = checkPartialSuccess(formGroupStatus.dirty);
+                next.dirties = checkAllSuccess(formGroupStatus.dirty);
+            }
+            if (touchedChanged) {
+                next.touched = checkPartialSuccess(formGroupStatus.touched);
+                next.toucheds = checkAllSuccess(formGroupStatus.touched);
+            }
+            return next;
+        });
+    });
     const setValidators = react.useCallback((validators) => {
         setState((state) => ({
             ...state,
-            ...refactorForValid(state.controls, validators)
+            ...refactorForValid(refControls.current, validators),
+            validators
         }));
     }, []);
     const setValue = react.useCallback((value) => {
         Object.entries(value).forEach(([key, valueControl]) => {
-            const formControl = formGroup.controls[key];
+            const formControl = refControls.current[key];
             formControl?.setValue(valueControl);
         });
     }, []);
     const reset = react.useCallback(() => {
-        Object.values(formGroup.controls).forEach((control) => {
+        Object.values(refControls.current).forEach((control) => {
             control.reset();
         });
     }, []);
     return {
         ...state,
+        controls: formGroup.controls,
         error: state.errors[0],
         invalid: !state.valid,
         pristine: !state.dirty,
@@ -736,16 +785,31 @@ function useFormGroup(options, validators) {
 
 function useInputRefControl(options) {
     const formRef = useInputControl(options);
+    const setValueRef = react.useRef(options.setValue);
+    setValueRef.current = options.setValue;
     react.useEffect(() => {
-        formRef.elementRef?.current?.addEventListener('focus', () => {
+        const element = formRef.elementRef?.current;
+        if (!element) {
+            return;
+        }
+        const handleFocus = () => {
             formRef.focus();
-        });
-        formRef.elementRef?.current?.addEventListener('blur', () => {
+        };
+        const handleBlur = () => {
             formRef.blur();
-        });
-        formRef.elementRef?.current?.addEventListener('change', ({ target }) => {
-            options.setValue(formRef, target.value);
-        });
+        };
+        const handleChange = (event) => {
+            const target = event.target;
+            setValueRef.current(formRef, target.value);
+        };
+        element.addEventListener('focus', handleFocus);
+        element.addEventListener('blur', handleBlur);
+        element.addEventListener('change', handleChange);
+        return () => {
+            element.removeEventListener('focus', handleFocus);
+            element.removeEventListener('blur', handleBlur);
+            element.removeEventListener('change', handleChange);
+        };
     }, []);
     return formRef;
 }