@rolster/react-forms 19.0.0 → 19.1.1

package/dist/cjs/index.js

@@ -10,8 +10,8 @@ var react = require('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;
@@ -42,17 +42,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
                 ? helpers.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
+                ? helpers.controlIsValid({ value, validators: this.validators })
+                : [];
+            this.refresh('value', { errors, value });
         }
     }
     setValue(value) {
@@ -60,11 +63,7 @@ class RolsterArrayControl {
             const errors = this.validators
                 ? helpers.controlIsValid({ value, validators: this.validators })
                 : [];
-            this.refresh('value', {
-                dirty: true,
-                errors,
-                value
-            });
+            this.refresh('value', { dirty: true, errors, value });
         }
     }
     setValidators(validators) {
@@ -85,7 +84,7 @@ class RolsterArrayControl {
     reset() {
         const errors = this.validators
             ? helpers.controlIsValid({
-                value: this.initialValue,
+                value: this.defaultValue,
                 validators: this.validators
             })
             : [];
@@ -93,7 +92,7 @@ class RolsterArrayControl {
             dirty: false,
             errors,
             touched: false,
-            value: this.initialValue
+            value: this.defaultValue
         });
     }
     isValid(errors) {
@@ -117,7 +116,7 @@ function rolsterArrayControl(options, validators) {
     const formControl = _arguments.createFormControlOptions(options, validators);
     return new ReactRolsterArrayControl({
         ...formControl,
-        initialValue: formControl.value,
+        defaultValue: formControl.value,
         uuid: uuid.v4()
     });
 }
@@ -233,12 +232,12 @@ class ReactRolsterArrayGroup extends RolsterArrayGroup {
         super({
             ...options,
             errors,
-            value: helpers.controlsToValue(controls),
             dirties: helpers.controlsAllChecked(controls, 'dirty'),
             dirty: helpers.controlsPartialChecked(controls, 'dirty'),
             touched: helpers.controlsPartialChecked(controls, 'touched'),
             toucheds: helpers.controlsAllChecked(controls, 'touched'),
-            valid: errors.length === 0 && helpers.controlsAllChecked(controls, 'valid')
+            valid: errors.length === 0 && helpers.controlsAllChecked(controls, 'valid'),
+            value: helpers.controlsToValue(controls)
         });
     }
 }
@@ -256,7 +255,7 @@ function formArrayGroup(options, validators) {
 class RolsterArrayList extends RolsterArrayControl {
     constructor(options) {
         const { controls, valueToControls, validators } = options;
-        const value = controls.map((controls) => helpers.controlsToValue(controls));
+        const value = controls.map(helpers.controlsToValue);
         const errors = validators ? helpers.controlIsValid({ value, validators }) : [];
         super({ ...options, errors, value });
         this.valueToControls = valueToControls;
@@ -270,20 +269,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) {
@@ -322,7 +329,7 @@ function formArrayList(options) {
     return new RolsterArrayList({
         ...options,
         controls: value.map((value) => options.valueToControls(value)),
-        initialValue: value,
+        defaultValue: value,
         uuid: uuid.v4()
     });
 }
@@ -356,20 +363,21 @@ function refactorForControls(action, state, groups) {
 }
 function useFormArray(options, validators) {
     const formArray = _arguments.createFormArrayOptions(options, validators);
-    const groups = formArray.groups || [];
-    const value = react.useRef(groups);
+    const defaultValue = react.useRef(formArray.groups || []);
     const formGroups = react.useRef(new Map());
-    const [state, setState] = react.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 }) => helpers.controlsToValue(controls)),
-        validators: formArray.validators
+    const [state, setState] = react.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 }) => helpers.controlsToValue(controls)),
+            validators: formArray.validators
+        };
     });
     react.useEffect(() => {
         formGroups.current.clear();
@@ -380,8 +388,8 @@ function useFormArray(options, validators) {
     }, [state.groups]);
     const subscriber = react.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,
@@ -401,12 +409,12 @@ function useFormArray(options, validators) {
             ...refactorForGroups(groups, state.validators)
         }));
     }, []);
-    const setInitialValue = react.useCallback((groups) => {
+    const setDefaultValue = react.useCallback((groups) => {
         setState((state) => ({
             ...state,
             ...refactorForGroups(groups, state.validators)
         }));
-        value.current = groups;
+        defaultValue.current = groups;
     }, []);
     const push = react.useCallback((group) => {
         setState((state) => ({
@@ -436,12 +444,16 @@ function useFormArray(options, validators) {
             validators
         }));
     }, []);
-    const hasError = react.useCallback((key) => helpers.hasError(state.errors, key), [state.errors]);
-    const someErrors = react.useCallback((keys) => helpers.someErrors(state.errors, keys), [state.errors]);
+    const hasError = react.useCallback((key) => {
+        return helpers.hasError(state.errors, key);
+    }, [state.errors]);
+    const someErrors = react.useCallback((keys) => {
+        return helpers.someErrors(state.errors, keys);
+    }, [state.errors]);
     const reset = react.useCallback(() => {
         setState((state) => ({
             ...state,
-            ...refactorForGroups(value.current, state.validators)
+            ...refactorForGroups(defaultValue.current, state.validators)
         }));
     }, []);
     return {
@@ -459,7 +471,7 @@ function useFormArray(options, validators) {
         push,
         remove,
         reset,
-        setInitialValue,
+        setDefaultValue,
         setValidators,
         setValue,
         someErrors,
@@ -474,15 +486,17 @@ function errorsInControl(value, validators) {
 }
 function useControl(options, validators) {
     const formControl = _arguments.createFormControlOptions(options, validators);
-    const initialValue = react.useRef(formControl.value);
-    const [state, setState] = react.useState({
-        dirty: false,
-        disabled: false,
-        errors: errorsInControl(formControl.value, formControl.validators),
-        focused: false,
-        touched: !!formControl.touched,
-        value: formControl.value,
-        validators: formControl.validators
+    const defaultValue = react.useRef(formControl.value);
+    const [state, setState] = react.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 = react.useRef(null);
     const focus = react.useCallback(() => {
@@ -500,11 +514,17 @@ function useControl(options, validators) {
     const touch = react.useCallback(() => {
         setState((state) => ({ ...state, touched: true }));
     }, []);
-    const setInitialValue = react.useCallback((value) => {
-        initialValue.current = value;
+    const setDefaultValue = react.useCallback((value) => {
+        defaultValue.current = value;
+        setState((state) => ({
+            ...state,
+            errors: errorsInControl(value, state.validators),
+            value
+        }));
+    }, []);
+    const setStartValue = react.useCallback((value) => {
         setState((state) => ({
             ...state,
-            dirty: true,
             errors: errorsInControl(value, state.validators),
             value
         }));
@@ -528,13 +548,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 = react.useCallback((key) => helpers.hasError(state.errors, key), [state.errors]);
-    const someErrors = react.useCallback((keys) => helpers.someErrors(state.errors, keys), [state.errors]);
+    const hasError = react.useCallback((key) => {
+        return helpers.hasError(state.errors, key);
+    }, [state.errors]);
+    const someErrors = react.useCallback((keys) => {
+        return helpers.someErrors(state.errors, keys);
+    }, [state.errors]);
     const valid = state.errors.length === 0;
     return {
         ...state,
@@ -549,7 +573,8 @@ function useControl(options, validators) {
         invalid: !valid,
         pristine: !state.dirty,
         reset,
-        setInitialValue,
+        setDefaultValue,
+        setStartValue,
         setValidators,
         setValue,
         someErrors,
@@ -577,26 +602,53 @@ function refactorForValid(controls, validators) {
         valid: errors.length === 0 && helpers.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 = _arguments.createFormGroupOptions(options, validators);
-    const firstEffects = react.useRef({
-        dirty: true,
-        disabledFocused: true,
-        touched: true,
-        value: true
+    const formInitialized = react.useRef({
+        dirty: false,
+        touched: false,
+        value: false,
+        visual: false
     });
-    const [state, setState] = react.useState({
-        ...refactorForValid(formGroup.controls, formGroup.validators),
-        controls: formGroup.controls,
-        dirties: helpers.controlsAllChecked(formGroup.controls, 'dirty'),
-        dirty: helpers.controlsPartialChecked(formGroup.controls, 'dirty'),
-        touched: helpers.controlsPartialChecked(formGroup.controls, 'touched'),
-        toucheds: helpers.controlsAllChecked(formGroup.controls, 'touched'),
-        value: helpers.controlsToValue(formGroup.controls),
-        validators: formGroup.validators
+    const formGroupStatus = react.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] = react.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: helpers.controlsToValue(formGroup.controls)
+        };
     });
     react.useEffect(() => {
-        if (!firstEffects.current.value) {
+        if (formInitialized.current.value) {
             setState((state) => ({
                 ...state,
                 ...refactorForValid(formGroup.controls, state.validators),
@@ -605,49 +657,46 @@ function useFormGroup(options, validators) {
             }));
         }
         else {
-            firstEffects.current.value = false;
+            formInitialized.current.value = true;
         }
-    }, helpers.reduceControlsToArray(formGroup.controls, 'value'));
+    }, formGroupStatus.value);
     react.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;
         }
-    }, [
-        ...helpers.reduceControlsToArray(formGroup.controls, 'disabled'),
-        ...helpers.reduceControlsToArray(formGroup.controls, 'focused')
-    ]);
+    }, formGroupStatus.dirty);
     react.useEffect(() => {
-        if (!firstEffects.current.dirty) {
+        if (formInitialized.current.touched) {
             setState((state) => ({
                 ...state,
                 controls: formGroup.controls,
-                dirty: helpers.controlsPartialChecked(formGroup.controls, 'dirty'),
-                dirties: helpers.controlsAllChecked(formGroup.controls, 'dirty')
+                touched: checkPartialSuccess(formGroupStatus.touched),
+                toucheds: checkAllSuccess(formGroupStatus.touched)
             }));
         }
         else {
-            firstEffects.current.dirty = false;
+            formInitialized.current.touched = true;
         }
-    }, helpers.reduceControlsToArray(formGroup.controls, 'dirty'));
+    }, formGroupStatus.touched);
     react.useEffect(() => {
-        if (!firstEffects.current.touched) {
+        if (formInitialized.current.visual) {
             setState((state) => ({
                 ...state,
-                controls: formGroup.controls,
-                touched: helpers.controlsPartialChecked(formGroup.controls, 'touched'),
-                toucheds: helpers.controlsAllChecked(formGroup.controls, 'touched')
+                controls: formGroup.controls
             }));
         }
         else {
-            firstEffects.current.touched = false;
+            formInitialized.current.visual = true;
         }
-    }, helpers.reduceControlsToArray(formGroup.controls, 'touched'));
+    }, formGroupStatus.visual);
     const setValidators = react.useCallback((validators) => {
         setState((state) => ({
             ...state,