@rolster/react-forms 19.0.0 → 19.1.1

package/dist/es/index.js

@@ -1,13 +1,13 @@
 import { createFormControlOptions, createFormGroupOptions, createFormArrayOptions } from '@rolster/forms/arguments';
-import { controlIsValid, hasError, someErrors, groupIsValid, controlsToValue, controlsAllChecked, controlsPartialChecked, arrayIsValid, groupAllChecked, reduceControlsToArray } from '@rolster/forms/helpers';
+import { controlIsValid, hasError, someErrors, groupIsValid, controlsAllChecked, controlsPartialChecked, controlsToValue, arrayIsValid, groupAllChecked, reduceControlsToArray } from '@rolster/forms/helpers';
 import { v4 } from 'uuid';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 
 class RolsterArrayControl {
     constructor(options) {
         this.uuid = options.uuid;
+        this.defaultValue = options.defaultValue;
         this.value = options.value;
-        this.initialValue = options.initialValue;
         this.focused = !!options.focused;
         this.unfocused = !this.focused;
         this.touched = !!options.touched;
@@ -38,17 +38,20 @@ class RolsterArrayControl {
     touch() {
         this.untouched && this.refresh('touched', { touched: true });
     }
-    setInitialValue(value) {
-        if (value !== this.initialValue) {
+    setDefaultValue(value) {
+        if (value !== this.defaultValue) {
             const errors = this.validators
                 ? controlIsValid({ value, validators: this.validators })
                 : [];
-            this.refresh('value', {
-                dirty: false,
-                errors,
-                initialValue: value,
-                value
-            });
+            this.refresh('value', { errors, defaultValue: value, value });
+        }
+    }
+    setStartValue(value) {
+        if (value !== this.value) {
+            const errors = this.validators
+                ? controlIsValid({ value, validators: this.validators })
+                : [];
+            this.refresh('value', { errors, value });
         }
     }
     setValue(value) {
@@ -56,11 +59,7 @@ class RolsterArrayControl {
             const errors = this.validators
                 ? controlIsValid({ value, validators: this.validators })
                 : [];
-            this.refresh('value', {
-                dirty: true,
-                errors,
-                value
-            });
+            this.refresh('value', { dirty: true, errors, value });
         }
     }
     setValidators(validators) {
@@ -81,7 +80,7 @@ class RolsterArrayControl {
     reset() {
         const errors = this.validators
             ? controlIsValid({
-                value: this.initialValue,
+                value: this.defaultValue,
                 validators: this.validators
             })
             : [];
@@ -89,7 +88,7 @@ class RolsterArrayControl {
             dirty: false,
             errors,
             touched: false,
-            value: this.initialValue
+            value: this.defaultValue
         });
     }
     isValid(errors) {
@@ -113,7 +112,7 @@ function rolsterArrayControl(options, validators) {
     const formControl = createFormControlOptions(options, validators);
     return new ReactRolsterArrayControl({
         ...formControl,
-        initialValue: formControl.value,
+        defaultValue: formControl.value,
         uuid: v4()
     });
 }
@@ -229,12 +228,12 @@ class ReactRolsterArrayGroup extends RolsterArrayGroup {
         super({
             ...options,
             errors,
-            value: controlsToValue(controls),
             dirties: controlsAllChecked(controls, 'dirty'),
             dirty: controlsPartialChecked(controls, 'dirty'),
             touched: controlsPartialChecked(controls, 'touched'),
             toucheds: controlsAllChecked(controls, 'touched'),
-            valid: errors.length === 0 && controlsAllChecked(controls, 'valid')
+            valid: errors.length === 0 && controlsAllChecked(controls, 'valid'),
+            value: controlsToValue(controls)
         });
     }
 }
@@ -252,7 +251,7 @@ function formArrayGroup(options, validators) {
 class RolsterArrayList extends RolsterArrayControl {
     constructor(options) {
         const { controls, valueToControls, validators } = options;
-        const value = controls.map((controls) => controlsToValue(controls));
+        const value = controls.map(controlsToValue);
         const errors = validators ? controlIsValid({ value, validators }) : [];
         super({ ...options, errors, value });
         this.valueToControls = valueToControls;
@@ -266,20 +265,28 @@ class RolsterArrayList extends RolsterArrayControl {
             this._subscribe(reactControls);
         });
     }
-    setInitialValue(value) {
+    setDefaultValue(value) {
+        this.refresh('list', {
+            controls: value.map(this.valueToControls),
+            defaultValue: value
+        });
+    }
+    setStartValue(value) {
         this.refresh('list', {
-            controls: value.map((value) => this.valueToControls(value)),
-            initialValue: value
+            controls: value.map(this.valueToControls)
         });
     }
     setValue(value) {
         this.refresh('list', {
-            controls: value.map((value) => this.valueToControls(value))
+            controls: value.map(this.valueToControls),
+            dirty: true
         });
     }
     reset() {
         this.refresh('list', {
-            controls: this.initialValue.map((value) => this.valueToControls(value))
+            controls: this.defaultValue.map(this.valueToControls),
+            dirty: false,
+            touched: false
         });
     }
     push(controls) {
@@ -318,7 +325,7 @@ function formArrayList(options) {
     return new RolsterArrayList({
         ...options,
         controls: value.map((value) => options.valueToControls(value)),
-        initialValue: value,
+        defaultValue: value,
         uuid: v4()
     });
 }
@@ -352,20 +359,21 @@ function refactorForControls(action, state, groups) {
 }
 function useFormArray(options, validators) {
     const formArray = createFormArrayOptions(options, validators);
-    const groups = formArray.groups || [];
-    const value = useRef(groups);
+    const defaultValue = useRef(formArray.groups || []);
     const formGroups = useRef(new Map());
-    const [state, setState] = useState({
-        ...refactorForValid$1(groups, formArray.validators),
-        controls: groups.map(({ controls }) => controls),
-        dirty: false,
-        dirties: false,
-        disabled: false,
-        groups,
-        touched: false,
-        toucheds: false,
-        value: groups.map(({ controls }) => controlsToValue(controls)),
-        validators: formArray.validators
+    const [state, setState] = useState(() => {
+        return {
+            ...refactorForValid$1(defaultValue.current, formArray.validators),
+            controls: defaultValue.current.map(({ controls }) => controls),
+            dirty: false,
+            dirties: false,
+            disabled: false,
+            groups: defaultValue.current,
+            touched: false,
+            toucheds: false,
+            value: defaultValue.current.map(({ controls }) => controlsToValue(controls)),
+            validators: formArray.validators
+        };
     });
     useEffect(() => {
         formGroups.current.clear();
@@ -376,8 +384,8 @@ function useFormArray(options, validators) {
     }, [state.groups]);
     const subscriber = useCallback((action, group) => {
         setState((state) => {
-            const groups = state.groups.map((_group) => {
-                return _group.uuid === group.uuid ? group : _group;
+            const groups = state.groups.map((currentGroup) => {
+                return currentGroup.uuid === group.uuid ? group : currentGroup;
             });
             return {
                 ...state,
@@ -397,12 +405,12 @@ function useFormArray(options, validators) {
             ...refactorForGroups(groups, state.validators)
         }));
     }, []);
-    const setInitialValue = useCallback((groups) => {
+    const setDefaultValue = useCallback((groups) => {
         setState((state) => ({
             ...state,
             ...refactorForGroups(groups, state.validators)
         }));
-        value.current = groups;
+        defaultValue.current = groups;
     }, []);
     const push = useCallback((group) => {
         setState((state) => ({
@@ -432,12 +440,16 @@ function useFormArray(options, validators) {
             validators
         }));
     }, []);
-    const hasError$1 = useCallback((key) => hasError(state.errors, key), [state.errors]);
-    const someErrors$1 = useCallback((keys) => someErrors(state.errors, keys), [state.errors]);
+    const hasError$1 = useCallback((key) => {
+        return hasError(state.errors, key);
+    }, [state.errors]);
+    const someErrors$1 = useCallback((keys) => {
+        return someErrors(state.errors, keys);
+    }, [state.errors]);
     const reset = useCallback(() => {
         setState((state) => ({
             ...state,
-            ...refactorForGroups(value.current, state.validators)
+            ...refactorForGroups(defaultValue.current, state.validators)
         }));
     }, []);
     return {
@@ -455,7 +467,7 @@ function useFormArray(options, validators) {
         push,
         remove,
         reset,
-        setInitialValue,
+        setDefaultValue,
         setValidators,
         setValue,
         someErrors: someErrors$1,
@@ -470,15 +482,17 @@ function errorsInControl(value, validators) {
 }
 function useControl(options, validators) {
     const formControl = createFormControlOptions(options, validators);
-    const initialValue = useRef(formControl.value);
-    const [state, setState] = useState({
-        dirty: false,
-        disabled: false,
-        errors: errorsInControl(formControl.value, formControl.validators),
-        focused: false,
-        touched: !!formControl.touched,
-        value: formControl.value,
-        validators: formControl.validators
+    const defaultValue = useRef(formControl.value);
+    const [state, setState] = useState(() => {
+        return {
+            dirty: false,
+            disabled: false,
+            errors: errorsInControl(formControl.value, formControl.validators),
+            focused: false,
+            touched: !!formControl.touched,
+            value: formControl.value,
+            validators: formControl.validators
+        };
     });
     const elementRef = useRef(null);
     const focus = useCallback(() => {
@@ -496,11 +510,17 @@ function useControl(options, validators) {
     const touch = useCallback(() => {
         setState((state) => ({ ...state, touched: true }));
     }, []);
-    const setInitialValue = useCallback((value) => {
-        initialValue.current = value;
+    const setDefaultValue = useCallback((value) => {
+        defaultValue.current = value;
+        setState((state) => ({
+            ...state,
+            errors: errorsInControl(value, state.validators),
+            value
+        }));
+    }, []);
+    const setStartValue = useCallback((value) => {
         setState((state) => ({
             ...state,
-            dirty: true,
             errors: errorsInControl(value, state.validators),
             value
         }));
@@ -524,13 +544,17 @@ function useControl(options, validators) {
         setState((state) => ({
             ...state,
             dirty: false,
-            errors: errorsInControl(initialValue.current, state.validators),
-            value: initialValue.current,
+            errors: errorsInControl(defaultValue.current, state.validators),
+            value: defaultValue.current,
             touched: false
         }));
     }, []);
-    const hasError$1 = useCallback((key) => hasError(state.errors, key), [state.errors]);
-    const someErrors$1 = useCallback((keys) => someErrors(state.errors, keys), [state.errors]);
+    const hasError$1 = useCallback((key) => {
+        return hasError(state.errors, key);
+    }, [state.errors]);
+    const someErrors$1 = useCallback((keys) => {
+        return someErrors(state.errors, keys);
+    }, [state.errors]);
     const valid = state.errors.length === 0;
     return {
         ...state,
@@ -545,7 +569,8 @@ function useControl(options, validators) {
         invalid: !valid,
         pristine: !state.dirty,
         reset,
-        setInitialValue,
+        setDefaultValue,
+        setStartValue,
         setValidators,
         setValue,
         someErrors: someErrors$1,
@@ -573,26 +598,53 @@ function refactorForValid(controls, validators) {
         valid: errors.length === 0 && controlsAllChecked(controls, 'valid')
     };
 }
+function checkAllSuccess(status) {
+    return status.reduce((success, status) => success && status, true);
+}
+function checkPartialSuccess(status) {
+    return status.reduce((success, status) => success || status, false);
+}
 function useFormGroup(options, validators) {
     const formGroup = createFormGroupOptions(options, validators);
-    const firstEffects = useRef({
-        dirty: true,
-        disabledFocused: true,
-        touched: true,
-        value: true
+    const formInitialized = useRef({
+        dirty: false,
+        touched: false,
+        value: false,
+        visual: false
     });
-    const [state, setState] = useState({
-        ...refactorForValid(formGroup.controls, formGroup.validators),
-        controls: formGroup.controls,
-        dirties: controlsAllChecked(formGroup.controls, 'dirty'),
-        dirty: controlsPartialChecked(formGroup.controls, 'dirty'),
-        touched: controlsPartialChecked(formGroup.controls, 'touched'),
-        toucheds: controlsAllChecked(formGroup.controls, 'touched'),
-        value: controlsToValue(formGroup.controls),
-        validators: formGroup.validators
+    const formGroupStatus = useMemo(() => {
+        const dirty = [];
+        const touched = [];
+        const value = [];
+        const visual = [];
+        Object.values(formGroup.controls).forEach((control) => {
+            dirty.push(control.dirty);
+            touched.push(control.touched);
+            value.push(control.value);
+            visual.push(control.disabled);
+            visual.push(control.focused);
+        });
+        return {
+            dirty,
+            touched,
+            value,
+            visual
+        };
+    }, [formGroup.controls]);
+    const [state, setState] = useState(() => {
+        return {
+            ...refactorForValid(formGroup.controls, formGroup.validators),
+            controls: formGroup.controls,
+            dirties: checkAllSuccess(formGroupStatus.dirty),
+            dirty: checkPartialSuccess(formGroupStatus.dirty),
+            touched: checkPartialSuccess(formGroupStatus.touched),
+            toucheds: checkAllSuccess(formGroupStatus.touched),
+            validators: formGroup.validators,
+            value: controlsToValue(formGroup.controls)
+        };
     });
     useEffect(() => {
-        if (!firstEffects.current.value) {
+        if (formInitialized.current.value) {
             setState((state) => ({
                 ...state,
                 ...refactorForValid(formGroup.controls, state.validators),
@@ -601,49 +653,46 @@ function useFormGroup(options, validators) {
             }));
         }
         else {
-            firstEffects.current.value = false;
+            formInitialized.current.value = true;
         }
-    }, reduceControlsToArray(formGroup.controls, 'value'));
+    }, formGroupStatus.value);
     useEffect(() => {
-        if (!firstEffects.current.disabledFocused) {
+        if (formInitialized.current.dirty) {
             setState((state) => ({
                 ...state,
-                controls: formGroup.controls
+                controls: formGroup.controls,
+                dirty: checkPartialSuccess(formGroupStatus.dirty),
+                dirties: checkAllSuccess(formGroupStatus.dirty)
             }));
         }
         else {
-            firstEffects.current.disabledFocused = false;
+            formInitialized.current.dirty = true;
         }
-    }, [
-        ...reduceControlsToArray(formGroup.controls, 'disabled'),
-        ...reduceControlsToArray(formGroup.controls, 'focused')
-    ]);
+    }, formGroupStatus.dirty);
     useEffect(() => {
-        if (!firstEffects.current.dirty) {
+        if (formInitialized.current.touched) {
             setState((state) => ({
                 ...state,
                 controls: formGroup.controls,
-                dirty: controlsPartialChecked(formGroup.controls, 'dirty'),
-                dirties: controlsAllChecked(formGroup.controls, 'dirty')
+                touched: checkPartialSuccess(formGroupStatus.touched),
+                toucheds: checkAllSuccess(formGroupStatus.touched)
             }));
         }
         else {
-            firstEffects.current.dirty = false;
+            formInitialized.current.touched = true;
         }
-    }, reduceControlsToArray(formGroup.controls, 'dirty'));
+    }, formGroupStatus.touched);
     useEffect(() => {
-        if (!firstEffects.current.touched) {
+        if (formInitialized.current.visual) {
             setState((state) => ({
                 ...state,
-                controls: formGroup.controls,
-                touched: controlsPartialChecked(formGroup.controls, 'touched'),
-                toucheds: controlsAllChecked(formGroup.controls, 'touched')
+                controls: formGroup.controls
             }));
         }
         else {
-            firstEffects.current.touched = false;
+            formInitialized.current.visual = true;
         }
-    }, reduceControlsToArray(formGroup.controls, 'touched'));
+    }, formGroupStatus.visual);
     const setValidators = useCallback((validators) => {
         setState((state) => ({
             ...state,