@rolster/react-forms 19.4.12 → 19.4.14

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Rolster Technology
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Rolster Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.cjs

@@ -1,8 +1,175 @@
 'use strict';
 
 var helpers = require('@rolster/forms/helpers');
-var uuid = require('uuid');
 var react = require('react');
+var uuid = require('uuid');
+
+function refactorForValid$2(groups, validators) {
+    const errors = validators ? helpers.formArrayIsValid({ groups, validators }) : [];
+    return {
+        errors,
+        valid: errors.length === 0 && helpers.verifyAllTrueInGroups(groups, 'valid')
+    };
+}
+function refactorForGroups(groups, validators) {
+    return {
+        ...refactorForValid$2(groups, validators),
+        groups,
+        controls: groups.map(({ controls }) => controls),
+        value: groups.map(({ controls }) => helpers.controlsToValue(controls))
+    };
+}
+function refactorForControls$1(action, state, groups) {
+    switch (action) {
+        case 'validators':
+            return refactorForValid$2(groups, state.validators);
+        case 'reset':
+        case 'list':
+        case 'value':
+            return refactorForGroups(groups, state.validators);
+        default:
+            return { groups };
+    }
+}
+function useFormArray(options, validators) {
+    const formArray = helpers.createFormArrayOptions(options, validators);
+    const refArrayValue = react.useRef(formArray.groups || []);
+    const refArrayGroups = react.useRef(new Map());
+    const [state, setState] = react.useState(() => {
+        return {
+            ...refactorForValid$2(refArrayValue.current, formArray.validators),
+            controls: refArrayValue.current.map(({ controls }) => controls),
+            dirty: false,
+            dirties: false,
+            disabled: false,
+            groups: refArrayValue.current,
+            touched: false,
+            toucheds: false,
+            value: refArrayValue.current.map(({ controls }) => helpers.controlsToValue(controls)),
+            validators: formArray.validators
+        };
+    });
+    const subscriber = react.useCallback((action, group) => {
+        setState((state) => {
+            const groups = state.groups.map((currentGroup) => {
+                return currentGroup.uuid === group.uuid ? group : currentGroup;
+            });
+            return {
+                ...state,
+                ...refactorForControls$1(action, state, groups)
+            };
+        });
+    }, []);
+    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 }));
+    }, []);
+    const enable = react.useCallback(() => {
+        setState((state) => ({ ...state, disabled: false }));
+    }, []);
+    const setValue = react.useCallback((groups) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(groups, state.validators)
+        }));
+    }, []);
+    const setStartValue = react.useCallback((groups) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(groups, state.validators)
+        }));
+    }, []);
+    const setDefaultValue = react.useCallback((groups) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(groups, state.validators)
+        }));
+        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 refArrayGroups.current.get(uuid);
+    }, []);
+    const setValidators = react.useCallback((validators) => {
+        setState((state) => ({
+            ...state,
+            ...refactorForValid$2(state.groups, validators),
+            validators
+        }));
+    }, []);
+    const formArrayHasError = react.useCallback((key) => {
+        return helpers.hasError(state.errors, key);
+    }, [state.errors]);
+    const formArraySomeErrors = react.useCallback((keys) => {
+        return helpers.someErrors(state.errors, keys);
+    }, [state.errors]);
+    const reset = react.useCallback(() => {
+        refArrayValue.current.forEach((group) => group.reset());
+        refArrayGroups.current = new Map();
+        setState((state) => ({
+            ...state,
+            ...refactorForGroups(refArrayValue.current, state.validators)
+        }));
+    }, []);
+    return {
+        ...state,
+        disable,
+        enable,
+        enabled: !state.disabled,
+        error: state.errors[0],
+        findByUuid,
+        hasError: formArrayHasError,
+        invalid: !state.valid,
+        merge,
+        pristine: !state.dirty,
+        pristines: !state.dirties,
+        push,
+        remove,
+        reset,
+        setDefaultValue,
+        setStartValue,
+        setValidators,
+        setValue,
+        someErrors: formArraySomeErrors,
+        untouched: !state.touched,
+        untoucheds: !state.toucheds,
+        wrong: state.touched && !state.valid
+    };
+}
 
 class RolsterArrayControl {
     constructor(options) {
@@ -25,19 +192,29 @@ class RolsterArrayControl {
         this.validators = options.validators;
     }
     focus() {
-        this.unfocused && this.refresh('focused', { focused: true });
+        if (this.unfocused) {
+            this.refresh('focused', { focused: true });
+        }
     }
     blur() {
-        this.focused && this.refresh('focused', { focused: false, touched: true });
+        if (this.focused) {
+            this.refresh('focused', { focused: false, touched: true });
+        }
     }
     disable() {
-        this.enabled && this.refresh('disabled', { disabled: true });
+        if (this.enabled) {
+            this.refresh('disabled', { disabled: true });
+        }
     }
     enable() {
-        this.disabled && this.refresh('disabled', { disabled: false });
+        if (this.disabled) {
+            this.refresh('disabled', { disabled: false });
+        }
     }
     touch() {
-        this.untouched && this.refresh('touched', { touched: true });
+        if (this.untouched) {
+            this.refresh('touched', { touched: true });
+        }
     }
     setDefaultValue(value) {
         if (value !== this.defaultValue) {
@@ -139,14 +316,14 @@ function replaceControl(controls, control) {
     }, { ...controls });
 }
 
-function refactorForValid$2(controls, validators) {
+function refactorForValid$1(controls, validators) {
     const errors = validators ? helpers.formGroupIsValid({ controls, validators }) : [];
     return {
         errors,
         valid: errors.length === 0 && helpers.verifyAllTrueInControls(controls, 'valid')
     };
 }
-function refactorForControls$1(action, group, controls) {
+function refactorForControls(action, group, controls) {
     switch (action) {
         case 'focused':
         case 'touched':
@@ -155,10 +332,10 @@ function refactorForControls$1(action, group, controls) {
                 toucheds: helpers.verifyAllTrueInControls(controls, 'touched')
             };
         case 'validators':
-            return refactorForValid$2(controls, group.validators);
+            return refactorForValid$1(controls, group.validators);
         case 'reset':
             return {
-                ...refactorForValid$2(controls, group.validators),
+                ...refactorForValid$1(controls, group.validators),
                 dirty: helpers.verifyAnyTrueInControls(controls, 'dirty'),
                 dirties: helpers.verifyAllTrueInControls(controls, 'dirty'),
                 touched: helpers.verifyAnyTrueInControls(controls, 'touched'),
@@ -168,7 +345,7 @@ function refactorForControls$1(action, group, controls) {
         case 'list':
         case 'value':
             return {
-                ...refactorForValid$2(controls, group.validators),
+                ...refactorForValid$1(controls, group.validators),
                 dirty: helpers.verifyAnyTrueInControls(controls, 'dirty'),
                 dirties: helpers.verifyAllTrueInControls(controls, 'dirty'),
                 value: helpers.controlsToValue(controls)
@@ -201,7 +378,7 @@ class RolsterArrayGroup {
             const controls = replaceControl(this._controls, control);
             this._controls = controls;
             this.refresh(action, {
-                ...refactorForControls$1(action, this, controls),
+                ...refactorForControls(action, this, controls),
                 controls
             });
         };
@@ -217,7 +394,7 @@ class RolsterArrayGroup {
     }
     setValidators(validators) {
         this.refresh('validators', {
-            ...refactorForValid$2(this._controls, validators),
+            ...refactorForValid$1(this._controls, validators),
             validators
         });
     }
@@ -230,12 +407,13 @@ class RolsterArrayGroup {
         });
     }
     refresh(action, options) {
-        this.subscriber &&
+        if (this.subscriber) {
             this.subscriber(action, new RolsterArrayGroup({
                 ...this,
                 ...options,
                 controls: this._controls
             }));
+        }
     }
 }
 class ReactRolsterArrayGroup extends RolsterArrayGroup {
@@ -381,173 +559,6 @@ function formArrayList(options) {
     });
 }
 
-function refactorForValid$1(groups, validators) {
-    const errors = validators ? helpers.formArrayIsValid({ groups, validators }) : [];
-    return {
-        errors,
-        valid: errors.length === 0 && helpers.verifyAllTrueInGroups(groups, 'valid')
-    };
-}
-function refactorForGroups(groups, validators) {
-    return {
-        ...refactorForValid$1(groups, validators),
-        groups,
-        controls: groups.map(({ controls }) => controls),
-        value: groups.map(({ controls }) => helpers.controlsToValue(controls))
-    };
-}
-function refactorForControls(action, state, groups) {
-    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 formArray = helpers.createFormArrayOptions(options, validators);
-    const refArrayValue = react.useRef(formArray.groups || []);
-    const refArrayGroups = react.useRef(new Map());
-    const [state, setState] = react.useState(() => {
-        return {
-            ...refactorForValid$1(refArrayValue.current, formArray.validators),
-            controls: refArrayValue.current.map(({ controls }) => controls),
-            dirty: false,
-            dirties: false,
-            disabled: false,
-            groups: refArrayValue.current,
-            touched: false,
-            toucheds: false,
-            value: refArrayValue.current.map(({ controls }) => helpers.controlsToValue(controls)),
-            validators: formArray.validators
-        };
-    });
-    const subscriber = react.useCallback((action, group) => {
-        setState((state) => {
-            const groups = state.groups.map((currentGroup) => {
-                return currentGroup.uuid === group.uuid ? group : currentGroup;
-            });
-            return {
-                ...state,
-                ...refactorForControls(action, state, groups)
-            };
-        });
-    }, []);
-    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 }));
-    }, []);
-    const enable = react.useCallback(() => {
-        setState((state) => ({ ...state, disabled: false }));
-    }, []);
-    const setValue = react.useCallback((groups) => {
-        setState((state) => ({
-            ...state,
-            ...refactorForGroups(groups, state.validators)
-        }));
-    }, []);
-    const setStartValue = react.useCallback((groups) => {
-        setState((state) => ({
-            ...state,
-            ...refactorForGroups(groups, state.validators)
-        }));
-    }, []);
-    const setDefaultValue = react.useCallback((groups) => {
-        setState((state) => ({
-            ...state,
-            ...refactorForGroups(groups, state.validators)
-        }));
-        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 refArrayGroups.current.get(uuid);
-    }, []);
-    const setValidators = react.useCallback((validators) => {
-        setState((state) => ({
-            ...state,
-            ...refactorForValid$1(state.groups, validators),
-            validators
-        }));
-    }, []);
-    const formArrayHasError = react.useCallback((key) => {
-        return helpers.hasError(state.errors, key);
-    }, [state.errors]);
-    const formArraySomeErrors = react.useCallback((keys) => {
-        return helpers.someErrors(state.errors, keys);
-    }, [state.errors]);
-    const reset = react.useCallback(() => {
-        refArrayValue.current.forEach((group) => group.reset());
-        refArrayGroups.current = new Map();
-        setState((state) => ({
-            ...state,
-            ...refactorForGroups(refArrayValue.current, state.validators)
-        }));
-    }, []);
-    return {
-        ...state,
-        disable,
-        enable,
-        enabled: !state.disabled,
-        error: state.errors[0],
-        findByUuid,
-        hasError: formArrayHasError,
-        invalid: !state.valid,
-        merge,
-        pristine: !state.dirty,
-        pristines: !state.dirties,
-        push,
-        remove,
-        reset,
-        setDefaultValue,
-        setStartValue,
-        setValidators,
-        setValue,
-        someErrors: formArraySomeErrors,
-        untouched: !state.touched,
-        untoucheds: !state.toucheds,
-        wrong: state.touched && !state.valid
-    };
-}
-
 function errorsInControl(value, validators) {
     return validators ? helpers.formControlIsValid({ value, validators }) : [];
 }
@@ -801,6 +812,33 @@ function useFormGroup(options, validators) {
     };
 }
 
+function useReactList(value, validators) {
+    const control = useReactControl(value || [], validators);
+    const push = react.useCallback((item) => {
+        control.setValue([...control.value, item]);
+    }, [control.value, control.setValue]);
+    const remove = react.useCallback((item) => {
+        const value = control.value.filter((current) => current !== item);
+        if (value.length !== control.value.length) {
+            control.setValue(value);
+        }
+    }, [control.value, control.setValue]);
+    const clear = react.useCallback(() => {
+        if (control.value.length > 0) {
+            control.setValue([]);
+        }
+    }, [control.value, control.setValue]);
+    return {
+        ...control,
+        clear,
+        push,
+        remove
+    };
+}
+function useFormList(value, validators) {
+    return useReactList(value, validators);
+}
+
 function useInputRefControl(options) {
     const formRef = useInputControl(options);
     const setValueRef = react.useRef(options.setValue);
@@ -877,8 +915,10 @@ exports.useFormArray = useFormArray;
 exports.useFormArrayGroupSelect = useFormArrayGroupSelect;
 exports.useFormControl = useFormControl;
 exports.useFormGroup = useFormGroup;
+exports.useFormList = useFormList;
 exports.useInputControl = useInputControl;
 exports.useNumberRefControl = useNumberRefControl;
 exports.useReactControl = useReactControl;
+exports.useReactList = useReactList;
 exports.useTextRefControl = useTextRefControl;
 //# sourceMappingURL=index.cjs.map