@rolster/react-forms 18.11.3 → 18.12.0

package/dist/es/index.js

@@ -1,12 +1,13 @@
 import { createFormControlOptions, createFormGroupOptions, createFormArrayOptions } from '@rolster/forms/arguments';
-import { controlIsValid, hasError, someErrors, groupIsValid, controlsAllChecked, controlsPartialChecked, controlsToValue, groupAllChecked, arrayIsValid, reduceControlsToArray } from '@rolster/forms/helpers';
+import { controlIsValid, hasError, someErrors, groupIsValid, controlsToValue, controlsAllChecked, controlsPartialChecked, arrayIsValid, groupAllChecked, reduceControlsToArray } from '@rolster/forms/helpers';
 import { v4 } from 'uuid';
 import { useRef, useState, useEffect, useCallback } from 'react';
 
-class RolsterReactArrayControl {
+class RolsterArrayControl {
     constructor(options) {
-        this.initialValue = options.initialValue;
         this.uuid = options.uuid;
+        this.value = options.value;
+        this.initialValue = options.initialValue;
         this.focused = !!options.focused;
         this.unfocused = !this.focused;
         this.touched = !!options.touched;
@@ -15,36 +16,42 @@ class RolsterReactArrayControl {
         this.pristine = !this.dirty;
         this.disabled = !!options.disabled;
         this.enabled = !this.disabled;
-        const { value, validators } = options;
-        this.value = value;
-        this.validators = validators;
-        this.errors = validators ? controlIsValid({ value, validators }) : [];
+        this.valid = this.isValid(options.errors);
+        this.invalid = !this.valid;
+        this.wrong = this.touched && this.invalid;
+        this.errors = options.errors;
         this.error = this.errors[0];
+        this.validators = options.validators;
     }
     focus() {
-        this.unfocused && this.refresh({ focused: true });
+        this.unfocused && this.refresh('focused', { focused: true });
     }
     blur() {
-        this.focused && this.refresh({ focused: false, touched: true });
+        this.focused && this.refresh('focused', { focused: false, touched: true });
     }
     disable() {
-        this.enabled && this.refresh({ disabled: true });
+        this.enabled && this.refresh('disabled', { disabled: true });
     }
     enable() {
-        this.disabled && this.refresh({ disabled: false });
+        this.disabled && this.refresh('disabled', { disabled: false });
     }
     touch() {
-        this.untouched && this.refresh({ touched: true });
+        this.untouched && this.refresh('touched', { touched: true });
     }
     setInitialValue(value) {
-        this.initialValue = value;
-        this.setValue(value);
+        const { validators } = this;
+        const errors = validators ? controlIsValid({ value, validators }) : [];
+        this.refresh('value', { dirty: false, errors, initialValue: value, value });
     }
     setValue(value) {
-        this.refresh({ value });
+        const { validators } = this;
+        const errors = validators ? controlIsValid({ value, validators }) : [];
+        this.refresh('value', { dirty: true, errors, value });
     }
     setValidators(validators) {
-        this.refresh({ validators });
+        const { value } = this;
+        const errors = validators ? controlIsValid({ value, validators }) : [];
+        this.refresh('validators', { errors, validators });
     }
     subscribe(subscriber) {
         this.subscriber = subscriber;
@@ -56,37 +63,37 @@ class RolsterReactArrayControl {
         return someErrors(this.errors, keys);
     }
     reset() {
-        this.refresh({
+        const { initialValue: value, validators } = this;
+        const errors = validators ? controlIsValid({ value, validators }) : [];
+        this.refresh('reset', {
             dirty: false,
+            errors,
             touched: false,
-            value: this.initialValue
+            value
         });
     }
-    refresh(changes) {
-        this.subscriber &&
-            this.subscriber({
-                ...this,
-                ...changes,
-                initialValue: this.initialValue
-            });
+    isValid(errors) {
+        return errors.length === 0;
+    }
+    builder(options) {
+        return new RolsterArrayControl({ ...this, ...options });
+    }
+    refresh(action, options) {
+        this.subscriber && this.subscriber(action, this.builder(options));
     }
 }
-class RolsterArrayControl extends RolsterReactArrayControl {
+class ReactRolsterArrayControl extends RolsterArrayControl {
     constructor(options) {
-        super(options);
-        this.valid = this.errors.length === 0;
-        this.invalid = !this.valid;
-        this.wrong = this.touched && this.invalid;
-    }
-    clone(options) {
-        return new RolsterArrayControl(options);
+        const { value, validators } = options;
+        const errors = validators ? controlIsValid({ value, validators }) : [];
+        super({ ...options, errors });
     }
 }
 function rolsterArrayControl(options, validators) {
-    const controlOptions = createFormControlOptions(options, validators);
-    return new RolsterArrayControl({
-        ...controlOptions,
-        initialValue: controlOptions.value,
+    const _options = createFormControlOptions(options, validators);
+    return new ReactRolsterArrayControl({
+        ..._options,
+        initialValue: _options.value,
         uuid: v4()
     });
 }
@@ -100,49 +107,112 @@ function inputArrayControl(options, validators) {
     return rolsterArrayControl(options, validators);
 }
 
-class RolsterArrayGroup {
+function replaceControl(controls, control) {
+    return Object.entries(controls).reduce((controls, [key, _control]) => {
+        if (_control.uuid === control.uuid) {
+            controls[key] = control;
+        }
+        return controls;
+    }, controls);
+}
+
+function refactorForValid$2(controls, validators) {
+    const errors = validators ? groupIsValid({ controls, validators }) : [];
+    return {
+        errors,
+        valid: errors.length === 0 && controlsAllChecked(controls, 'valid')
+    };
+}
+function refactorForControls$1(group, controls, action) {
+    switch (action) {
+        case 'focused':
+        case 'touched':
+            return {
+                touched: controlsPartialChecked(controls, 'touched'),
+                toucheds: controlsAllChecked(controls, 'touched')
+            };
+        case 'validators':
+            return refactorForValid$2(controls, group.validators);
+        case 'reset':
+            return {
+                ...refactorForValid$2(controls, group.validators),
+                dirty: controlsPartialChecked(controls, 'dirty'),
+                dirties: controlsAllChecked(controls, 'dirty'),
+                touched: controlsPartialChecked(controls, 'touched'),
+                toucheds: controlsAllChecked(controls, 'touched'),
+                value: controlsToValue(controls)
+            };
+        case 'list':
+        case 'value':
+            return {
+                ...refactorForValid$2(controls, group.validators),
+                dirty: controlsPartialChecked(controls, 'dirty'),
+                dirties: controlsAllChecked(controls, 'dirty'),
+                value: controlsToValue(controls)
+            };
+        default:
+            return {};
+    }
+}
+class BaseArrayGroup {
     constructor(options) {
-        const { controls, resource, uuid, validators } = options;
-        this.uuid = uuid;
-        this.controls = controls;
-        this.validators = validators;
-        this.resource = resource;
-        this.errors = validators ? groupIsValid({ controls, validators }) : [];
-        this.error = this.errors[0];
-        this.valid =
-            this.errors.length === 0 && controlsAllChecked(controls, 'valid');
-        this.invalid = !this.valid;
-        this.dirty = controlsPartialChecked(controls, 'dirty');
-        this.dirties = controlsAllChecked(controls, 'dirty');
-        this.touched = controlsPartialChecked(controls, 'touched');
-        this.toucheds = controlsAllChecked(controls, 'touched');
+        this.uuid = options.uuid;
+        this.controls = options.controls;
+        this.value = options.value;
+        this.resource = options.resource;
+        this.dirty = !!options.dirty;
+        this.dirties = !!options.dirties;
         this.pristine = !this.dirty;
         this.pristines = !this.dirties;
+        this.touched = !!options.touched;
+        this.toucheds = !!options.toucheds;
         this.untouched = !this.touched;
         this.untoucheds = !this.toucheds;
+        this.valid = !!options.valid;
+        this.invalid = !this.valid;
         this.wrong = this.touched && this.invalid;
-        this.value = controlsToValue(controls);
-        const subscriber = (options) => {
-            this.refresh({
-                controls: Object.entries(this.controls).reduce((controls, [key, control]) => {
-                    controls[key] =
-                        control.uuid === options.uuid ? control.clone(options) : control;
-                    return controls;
-                }, {})
+        this.errors = options.errors;
+        this.error = this.errors[0];
+        this.validators = options.validators;
+        const subscriber = (action, control) => {
+            const controls = replaceControl(this.controls, control);
+            this.refresh(action, {
+                ...refactorForControls$1(this, controls, action),
+                controls
             });
         };
-        Object.values(controls).forEach((control) => {
+        Object.values(this.controls).forEach((control) => {
             control.subscribe(subscriber);
         });
     }
-    setValidators(validators) {
-        this.refresh({ validators });
-    }
     subscribe(subscriber) {
         this.subscriber = subscriber;
     }
-    refresh(changes) {
-        this.subscriber && this.subscriber({ ...this, ...changes });
+    setValidators(validators) {
+        this.refresh('validators', {
+            ...refactorForValid$2(this.controls, validators),
+            validators
+        });
+    }
+    refresh(action, options) {
+        this.subscriber &&
+            this.subscriber(action, new BaseArrayGroup({ ...this, ...options }));
+    }
+}
+class RolsterArrayGroup extends BaseArrayGroup {
+    constructor(options) {
+        const { controls, validators } = options;
+        const errors = validators ? groupIsValid({ controls, validators }) : [];
+        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')
+        });
     }
 }
 function formArrayGroup(options, validators) {
@@ -152,94 +222,102 @@ function formArrayGroup(options, validators) {
     });
 }
 
-class RolsterArrayList extends RolsterReactArrayControl {
+class RolsterArrayList extends RolsterArrayControl {
     constructor(options) {
-        const value = options.controls.map((controls) => controlsToValue(controls));
-        super({ ...options, value });
-        this.valueToControls = options.valueToControls;
-        this.controls = options.controls;
+        const { controls, valueToControls, validators } = options;
+        const value = controls.map((controls) => controlsToValue(controls));
+        const errors = validators ? controlIsValid({ value, validators }) : [];
+        super({ ...options, errors, value });
+        this.valueToControls = valueToControls;
+        this.controls = controls;
         this.valid =
-            this.errors.length === 0 &&
-                this.controls.reduce((valid, controls) => valid && controlsAllChecked(controls, 'valid'), true);
+            errors.length === 0 &&
+                controls.reduce((valid, controls) => valid && controlsAllChecked(controls, 'valid'), true);
         this.invalid = !this.valid;
         this.wrong = this.touched && this.invalid;
-        options.controls.forEach((controls) => {
-            this.subscribeControls(controls);
+        controls.forEach((reactControls) => {
+            this._subscribe(reactControls);
         });
     }
     setValue(value) {
-        this.refresh({
+        this.refresh('list', {
             controls: value.map((value) => this.valueToControls(value))
         });
     }
-    clone(options) {
-        return new RolsterArrayList(options);
-    }
     push(controls) {
-        this.refresh({
+        this.refresh('list', {
             controls: [...this.controls, controls]
         });
     }
     remove(controls) {
-        this.refresh({
-            controls: this.controls.filter((currentControls) => currentControls !== controls)
+        this.refresh('list', {
+            controls: this.controls.filter((_controls) => _controls !== controls)
+        });
+    }
+    builder(options) {
+        return new RolsterArrayList({
+            ...this,
+            ...options,
+            valueToControls: this.valueToControls
         });
     }
-    refresh(changes) {
-        super.refresh(changes);
+    refresh(action, options) {
+        super.refresh(action, options);
     }
-    subscribeControls(newControls) {
-        Object.values(newControls).forEach((control) => {
-            control.subscribe((options) => {
-                const controls = this.controls.map((_controls) => _controls !== newControls
+    _subscribe(reactControls) {
+        Object.values(reactControls).forEach((control) => {
+            control.subscribe((action, _control) => {
+                const _reactControls = this.controls.map((_controls) => reactControls !== _controls
                     ? _controls
-                    : Object.entries(newControls).reduce((controls, [key, control]) => {
-                        controls[key] =
-                            control.uuid === options.uuid
-                                ? control.clone(options)
-                                : control;
-                        return controls;
-                    }, {}));
-                this.refresh({ controls });
+                    : replaceControl(reactControls, _control));
+                this.refresh(action, { controls: _reactControls });
             });
         });
     }
 }
-function formArrayList(valueToControls, options) {
+function formArrayList(options) {
     const value = options?.value || [];
     return new RolsterArrayList({
         ...options,
-        valueToControls,
-        controls: value.map((value) => valueToControls(value)),
+        controls: value.map((value) => options.valueToControls(value)),
         initialValue: value,
         uuid: v4()
     });
 }
 
-function errorsInArray(groups, validators) {
-    return validators ? arrayIsValid({ groups, validators }) : [];
-}
-function validStateInArray(groups, validators) {
-    const errors = errorsInArray(groups, validators);
+function refactorForValid$1(groups, validators) {
+    const errors = validators ? arrayIsValid({ groups, validators }) : [];
     return {
         errors,
         valid: errors.length === 0 && groupAllChecked(groups, 'valid')
     };
 }
-function replaceStateInArray(groups, validators) {
+function refactorForGroups(groups, validators) {
     return {
-        ...validStateInArray(groups, validators),
+        ...refactorForValid$1(groups, validators),
         groups,
         controls: groups.map(({ controls }) => controls),
         value: groups.map(({ controls }) => controlsToValue(controls))
     };
 }
+function refactorForControls(state, groups, action) {
+    switch (action) {
+        case 'validators':
+            return refactorForValid$1(groups, state.validators);
+        case 'reset':
+        case 'list':
+        case 'value':
+            return refactorForGroups(groups, state.validators);
+        default:
+            return { groups };
+    }
+}
 function useFormArray(options, validators) {
     const _options = createFormArrayOptions(options, validators);
     const groups = _options.groups || [];
     const initialValue = useRef(groups);
     const [state, setState] = useState({
-        ...validStateInArray(groups, _options.validators),
+        ...refactorForValid$1(groups, _options.validators),
         controls: groups.map(({ controls }) => controls),
         dirty: false,
         dirties: false,
@@ -251,13 +329,14 @@ function useFormArray(options, validators) {
         validators: _options.validators
     });
     useEffect(() => {
-        const subscriber = (options) => {
-            setState((state) => ({
-                ...state,
-                ...replaceStateInArray(state.groups.map((group) => group.uuid === options.uuid
-                    ? new RolsterArrayGroup(options)
-                    : group), state.validators)
-            }));
+        const subscriber = (action, group) => {
+            setState((state) => {
+                const groups = state.groups.map((_group) => _group.uuid === group.uuid ? group : _group);
+                return {
+                    ...state,
+                    ...refactorForControls(state, groups, action)
+                };
+            });
         };
         state.groups.forEach((group) => {
             group.subscribe(subscriber);
@@ -272,49 +351,49 @@ function useFormArray(options, validators) {
     const setValue = useCallback((groups) => {
         setState((state) => ({
             ...state,
-            ...replaceStateInArray(groups, state.validators)
+            ...refactorForGroups(groups, state.validators)
         }));
     }, []);
     const setInitialValue = useCallback((groups) => {
         setState((state) => ({
             ...state,
-            ...replaceStateInArray(groups, state.validators)
+            ...refactorForGroups(groups, state.validators)
         }));
         initialValue.current = groups;
     }, []);
     const push = useCallback((group) => {
         setState((state) => ({
             ...state,
-            ...replaceStateInArray([...state.groups, group], state.validators)
+            ...refactorForGroups([...state.groups, group], state.validators)
         }));
     }, []);
     const merge = useCallback((groups) => {
         setState((state) => ({
             ...state,
-            ...replaceStateInArray([...state.groups, ...groups], state.validators)
+            ...refactorForGroups([...state.groups, ...groups], state.validators)
         }));
     }, []);
     const remove = useCallback(({ uuid }) => {
         setState((state) => ({
             ...state,
-            ...replaceStateInArray(state.groups.filter((group) => group.uuid !== uuid), state.validators)
-        }));
-    }, []);
-    const reset = useCallback(() => {
-        setState((state) => ({
-            ...state,
-            ...replaceStateInArray(initialValue.current, state.validators)
+            ...refactorForGroups(state.groups.filter((group) => group.uuid !== uuid), state.validators)
         }));
     }, []);
     const setValidators = useCallback((validators) => {
         setState((state) => ({
             ...state,
-            ...validStateInArray(state.groups, validators),
+            ...refactorForValid$1(state.groups, 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 reset = useCallback(() => {
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(initialValue.current, state.validators)
+        }));
+    }, []);
     return {
         ...state,
         disable,
@@ -440,11 +519,8 @@ function useInputControl(options, validators) {
     return useControl(options, validators);
 }
 
-function errorsInGroup(controls, validators) {
-    return validators ? groupIsValid({ controls, validators }) : [];
-}
-function validStateInGroup(controls, validators) {
-    const errors = errorsInGroup(controls, validators);
+function refactorForValid(controls, validators) {
+    const errors = validators ? groupIsValid({ controls, validators }) : [];
     return {
         errors,
         valid: errors.length === 0 && controlsAllChecked(controls, 'valid')
@@ -453,8 +529,14 @@ function validStateInGroup(controls, validators) {
 function useFormGroup(options, validators) {
     const _options = createFormGroupOptions(options, validators);
     const { controls } = _options;
+    const firstEffects = useRef({
+        dirty: true,
+        disabledFocused: true,
+        touched: true,
+        value: true
+    });
     const [state, setState] = useState({
-        ...validStateInGroup(controls, _options.validators),
+        ...refactorForValid(controls, _options.validators),
         controls,
         dirties: controlsAllChecked(controls, 'dirty'),
         dirty: controlsPartialChecked(controls, 'dirty'),
@@ -464,42 +546,62 @@ function useFormGroup(options, validators) {
         validators: _options.validators
     });
     useEffect(() => {
-        setState((state) => ({
-            ...state,
-            ...validStateInGroup(controls, state.validators),
-            controls,
-            value: controlsToValue(controls)
-        }));
+        if (!firstEffects.current.value) {
+            setState((state) => ({
+                ...state,
+                ...refactorForValid(controls, state.validators),
+                controls,
+                value: controlsToValue(controls)
+            }));
+        }
+        else {
+            firstEffects.current.value = false;
+        }
     }, reduceControlsToArray(controls, 'value'));
     useEffect(() => {
-        setState((state) => ({
-            ...state,
-            controls
-        }));
+        if (!firstEffects.current.disabledFocused) {
+            setState((state) => ({
+                ...state,
+                controls
+            }));
+        }
+        else {
+            firstEffects.current.disabledFocused = false;
+        }
     }, [
         ...reduceControlsToArray(controls, 'disabled'),
         ...reduceControlsToArray(controls, 'focused')
     ]);
     useEffect(() => {
-        setState((state) => ({
-            ...state,
-            controls,
-            dirty: controlsPartialChecked(controls, 'dirty'),
-            dirties: controlsAllChecked(controls, 'dirty')
-        }));
+        if (!firstEffects.current.dirty) {
+            setState((state) => ({
+                ...state,
+                controls,
+                dirty: controlsPartialChecked(controls, 'dirty'),
+                dirties: controlsAllChecked(controls, 'dirty')
+            }));
+        }
+        else {
+            firstEffects.current.dirty = false;
+        }
     }, reduceControlsToArray(controls, 'dirty'));
     useEffect(() => {
-        setState((state) => ({
-            ...state,
-            controls,
-            touched: controlsPartialChecked(controls, 'touched'),
-            toucheds: controlsAllChecked(controls, 'touched')
-        }));
+        if (!firstEffects.current.touched) {
+            setState((state) => ({
+                ...state,
+                controls,
+                touched: controlsPartialChecked(controls, 'touched'),
+                toucheds: controlsAllChecked(controls, 'touched')
+            }));
+        }
+        else {
+            firstEffects.current.touched = false;
+        }
     }, reduceControlsToArray(controls, 'touched'));
     const setValidators = useCallback((validators) => {
         setState((state) => ({
             ...state,
-            ...validStateInGroup(state.controls, validators)
+            ...refactorForValid(state.controls, validators)
         }));
     }, []);
     const reset = useCallback(() => {