@rolster/react-forms 18.2.10 → 18.3.0

package/dist/es/index.js

@@ -1,29 +1,131 @@
-import { createFormControlProps, createFormGroupProps, createFormArrayProps } from '@rolster/helpers-forms';
-import { controlIsValid, groupIsValid, controlsAllChecked, controlsPartialChecked, controlsToState, controlsToValue, arrayIsValid, groupAllChecked, groupPartialChecked } from '@rolster/helpers-forms/helpers';
 import { v4 } from 'uuid';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
+
+function itIsFormControlOptions(props) {
+    return (typeof props === 'object' && ('state' in props || 'validators' in props));
+}
+function itIsFormGroupOptions(props) {
+    return typeof props === 'object' && 'controls' in props;
+}
+function itIsFormArrayOptions(props) {
+    return (typeof props === 'object' && ('groups' in props || 'validators' in props));
+}
+function createFormControlOptions(...argsProps) {
+    const [props, validators] = argsProps;
+    if (!props) {
+        return { state: props, validators };
+    }
+    if (!validators && itIsFormControlOptions(props)) {
+        return props;
+    }
+    return {
+        state: props,
+        validators
+    };
+}
+function createFormGroupOptions(...argsProps) {
+    const [props, validators] = argsProps;
+    if (!validators && itIsFormGroupOptions(props)) {
+        return props;
+    }
+    return {
+        controls: props,
+        validators
+    };
+}
+function createFormArrayOptions(...argsProps) {
+    const [props, validators] = argsProps;
+    if (!props) {
+        return { groups: props, validators };
+    }
+    if (!validators && itIsFormArrayOptions(props)) {
+        return props;
+    }
+    return {
+        groups: props,
+        validators
+    };
+}
+
+const FALSY_VALUE = ['false', 'undefined', '0', 0];
+function itIsDefined(object) {
+    return typeof object !== 'undefined' && object !== null;
+}
+function itIsUndefined(object) {
+    return !itIsDefined(object);
+}
+function parseBoolean(value) {
+    return !(itIsUndefined(value) ||
+        value === false ||
+        FALSY_VALUE.includes(value));
+}
+
+const controlIsValid = ({ state, validators }) => {
+    return validators.reduce((errors, validator) => {
+        const error = validator(state);
+        if (error) {
+            errors.push(error);
+        }
+        return errors;
+    }, []);
+};
+const controlsAllChecked = (controls, key) => {
+    return Object.values(controls).reduce((value, control) => value && parseBoolean(control[key]), true);
+};
+const controlsPartialChecked = (controls, key) => {
+    return Object.values(controls).reduce((value, control) => value || parseBoolean(control[key]), false);
+};
+const controlsToState = (controls) => {
+    return Object.entries(controls).reduce((result, [key, { state }]) => {
+        result[key] = state;
+        return result;
+    }, {});
+};
+const groupIsValid = ({ controls, validators }) => {
+    return validators.reduce((errors, validator) => {
+        const error = validator(controls);
+        if (error) {
+            errors.push(error);
+        }
+        return errors;
+    }, []);
+};
+function groupAllChecked(groups, key) {
+    return groups.reduce((value, group) => value && parseBoolean(group[key]), true);
+}
+function groupPartialChecked(groups, key) {
+    return groups.reduce((value, group) => value || parseBoolean(group[key]), false);
+}
+const arrayIsValid = ({ groups, validators }) => {
+    return validators.reduce((errors, validator) => {
+        const error = validator(groups);
+        if (error) {
+            errors.push(error);
+        }
+        return errors;
+    }, []);
+};
 
 class RolsterArrayControl {
-    constructor(props) {
-        const { uuid, focused, dirty, disabled, initialState, state, touched, validators } = props;
-        this.uuid = uuid;
-        this.focused = focused || false;
+    constructor(options) {
+        this.initialState = options.initialState;
+        this.uuid = options.uuid;
+        this.focused = !!options.focused;
         this.unfocused = !this.focused;
-        this.touched = touched || false;
+        this.touched = !!options.touched;
         this.untouched = !this.touched;
-        this.dirty = dirty || false;
+        this.dirty = !!options.dirty;
         this.pristine = !this.dirty;
-        this.disabled = disabled || false;
+        this.disabled = !!options.disabled;
         this.enabled = !this.disabled;
+        const { state, validators } = options;
         this.state = state;
         this.validators = validators;
-        this.initialState = initialState;
         this.errors = validators ? controlIsValid({ state, validators }) : [];
         this.error = this.errors[0];
         this.valid = this.errors.length === 0;
         this.invalid = !this.valid;
         this.wrong = this.touched && this.invalid;
-        this.value = state;
     }
     focus() {
         if (!this.focused) {
@@ -61,37 +163,43 @@ class RolsterArrayControl {
     setValidators(validators) {
         this.update({ validators });
     }
+    subscribe(listener) {
+        this.subscriber = listener;
+    }
     reset() {
         this.update({ state: this.initialState });
     }
     update(changes) {
-        this.group?.parent?.refreshControl(this, {
-            ...changes,
-            initialState: this.initialState
-        });
+        if (this.subscriber) {
+            this.subscriber({
+                ...this,
+                ...changes,
+                initialState: this.initialState
+            });
+        }
     }
 }
-function useFormArrayControl(controlProps, controlValidators) {
-    const props = createFormControlProps(controlProps, controlValidators);
+function useArrayControl(options, validators) {
+    const controlOptions = createFormControlOptions(options, validators);
     return new RolsterArrayControl({
-        ...props,
+        ...controlOptions,
         uuid: v4(),
-        initialState: props.state
+        initialState: controlOptions.state
     });
 }
-function useInputArrayControl(controlProps, controlValidators) {
-    const props = createFormControlProps(controlProps, controlValidators);
-    return new RolsterArrayControl({
-        ...props,
-        uuid: v4(),
-        initialState: props.state
-    });
+function useReactArrayControl(options, validators) {
+    return useArrayControl(options, validators);
+}
+function useFormArrayControl(options, validators) {
+    return useArrayControl(options, validators);
+}
+function useInputArrayControl(options, validators) {
+    return useArrayControl(options, validators);
 }
 
 class RolsterArrayGroup {
-    constructor(props) {
-        const { controls, resource, uuid, validators } = props;
-        Object.values(controls).forEach((control) => (control.group = this));
+    constructor(options) {
+        const { controls, resource, uuid, validators } = options;
         this.uuid = uuid;
         this.controls = controls;
         this.validators = validators;
@@ -101,53 +209,72 @@ class RolsterArrayGroup {
         this.valid =
             this.errors.length === 0 && controlsAllChecked(controls, 'valid');
         this.invalid = !this.valid;
-        this.touched = controlsPartialChecked(controls, 'touched');
-        this.toucheds = controlsAllChecked(controls, 'touched');
         this.dirty = controlsPartialChecked(controls, 'dirty');
         this.dirties = controlsAllChecked(controls, 'dirty');
+        this.touched = controlsPartialChecked(controls, 'touched');
+        this.toucheds = controlsAllChecked(controls, 'touched');
         this.untouched = !this.touched;
         this.untoucheds = !this.toucheds;
         this.pristine = !this.dirty;
         this.pristines = !this.dirties;
         this.wrong = this.touched && this.invalid;
         this.state = controlsToState(controls);
-        this.value = controlsToValue(controls);
+        const subscriber = (options) => {
+            this.update({
+                controls: Object.entries(this.controls).reduce((controls, [key, control]) => {
+                    controls[key] =
+                        control.uuid === options.uuid
+                            ? new RolsterArrayControl(options)
+                            : control;
+                    return controls;
+                }, {})
+            });
+        };
+        Object.values(controls).forEach((control) => {
+            control.subscribe(subscriber);
+        });
     }
     setValidators(validators) {
-        this.parent?.refreshGroup(this, { validators });
+        this.update({ validators });
+    }
+    subscribe(listener) {
+        this.subscriber = listener;
+    }
+    update(changes) {
+        if (this.subscriber) {
+            this.subscriber({ ...this, ...changes });
+        }
     }
 }
-function useFormArrayGroup(groupProps, groupValidators) {
-    const props = createFormGroupProps(groupProps, groupValidators);
-    return new RolsterArrayGroup({ ...props, uuid: v4() });
+function useFormArrayGroup(options, validators) {
+    const groupOptions = createFormGroupOptions(options, validators);
+    return new RolsterArrayGroup({ ...groupOptions, uuid: v4() });
 }
 
-function cloneFormArrayControl(control, changes) {
-    return new RolsterArrayControl({ ...control, ...changes });
-}
-function cloneFormArrayGroup(group, changes) {
-    return new RolsterArrayGroup({ ...group, ...changes });
-}
-function cloneFormControlForArrayGroup(group, control, changes) {
-    const newControl = cloneFormArrayControl(control, changes);
-    const { uuid } = newControl;
-    const controls = Object.entries(group.controls).reduce((controls, [key, control]) => {
-        controls[key] = control.uuid === uuid ? newControl : control;
-        return controls;
-    }, {});
-    return new RolsterArrayGroup({ ...group, controls });
-}
-function useFormArray(arrayProps, arrayValidators) {
-    const props = createFormArrayProps(arrayProps, arrayValidators);
-    const [currentState] = useState(props.groups);
-    const [state, setState] = useState([]);
-    const [validators, setValidators] = useState(props.validators);
-    const [controls, setControls] = useState([]);
-    const [groups, setGroups] = useState(props.groups || []);
+function useFormArray(options, arrayValidators) {
+    const arrayOptions = createFormArrayOptions(options, arrayValidators);
+    const { validators } = arrayOptions;
+    const groups = arrayOptions.groups || [];
+    const [arrayState, setArrayState] = useState({
+        controls: groups.map(({ controls }) => controls),
+        groups,
+        state: groups.map(({ controls }) => controlsToState(controls)),
+        validators
+    });
+    const currentState = useRef(groups);
     useEffect(() => {
-        setControls(groups.map(({ controls }) => controls));
-        setState(groups.map(({ controls }) => controlsToState(controls)));
-    }, [groups]);
+        const subscriber = (options) => {
+            setArrayState((state) => ({
+                ...state,
+                groups: arrayState.groups.map((group) => group.uuid === options.uuid
+                    ? new RolsterArrayGroup(options)
+                    : group)
+            }));
+        };
+        arrayState.groups.forEach((group) => {
+            group.subscribe(subscriber);
+        });
+    }, [arrayState]);
     const errors = validators ? arrayIsValid({ groups, validators }) : [];
     const error = errors[0];
     const valid = errors.length === 0 && groupAllChecked(groups, 'valid');
@@ -155,161 +282,154 @@ function useFormArray(arrayProps, arrayValidators) {
     const toucheds = groupAllChecked(groups, 'touched');
     const dirties = groupAllChecked(groups, 'dirty');
     const dirty = groupPartialChecked(groups, 'dirty');
+    function setGroups(groups) {
+        setArrayState((currentState) => ({
+            ...currentState,
+            groups,
+            controls: groups.map(({ controls }) => controls),
+            state: groups.map(({ controls }) => controlsToState(controls))
+        }));
+    }
     function push(group) {
-        setGroups([...groups, group]);
+        setGroups([...arrayState.groups, group]);
     }
-    function merge(newGroups) {
-        setGroups([...groups, ...newGroups]);
+    function merge(groups) {
+        setGroups([...arrayState.groups, ...groups]);
     }
     function set(groups) {
         setGroups(groups);
     }
-    function refreshControl(control, changes) {
-        if (control.group) {
-            const group = cloneFormControlForArrayGroup(control.group, control, changes);
-            setGroups(groups.map((currentGroup) => currentGroup.uuid === group.uuid ? group : currentGroup));
-        }
-    }
-    function refreshGroup(group, changes) {
-        const newGroup = cloneFormArrayGroup(group, changes);
-        const { uuid } = newGroup;
-        setGroups(groups.map((currentGroup) => currentGroup.uuid === uuid ? newGroup : currentGroup));
-    }
-    function remove(group) {
-        setGroups(groups.filter(({ uuid }) => group.uuid !== uuid));
+    function remove({ uuid }) {
+        setGroups(arrayState.groups.filter((group) => group.uuid !== uuid));
     }
     function reset() {
-        setGroups(currentState || []);
+        setGroups(currentState.current);
     }
-    const formArray = {
-        controls,
+    function setValidators(validators) {
+        setArrayState((state) => ({ ...state, validators }));
+    }
+    return {
+        ...arrayState,
         dirty,
         dirties,
         error,
         errors,
-        groups,
         invalid: !valid,
         merge,
         pristine: !dirty,
         pristines: !dirties,
         push,
-        refreshControl,
-        refreshGroup,
         remove,
         reset,
         set,
         setValidators,
-        state,
         touched,
         toucheds,
         untouched: !touched,
         untoucheds: !toucheds,
         valid,
-        value: state,
         wrong: touched && !valid
     };
-    groups.forEach((group) => (group.parent = formArray));
-    return formArray;
 }
 
-function useControl(controlProps, controlValidators) {
-    const props = createFormControlProps(controlProps, controlValidators);
-    const [state, setCurrentState] = useState(props.state);
-    const [value, setValue] = useState(props.state);
-    const [touched, setTouched] = useState(props.touched || false);
-    const [dirty, setDirty] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const [disabled, setDisabled] = useState(false);
-    const [initialValue] = useState(props.state);
-    const [validators, setValidators] = useState(props.validators);
+function useControl(controlOptions, controlValidators) {
+    const { state, touched, validators } = createFormControlOptions(controlOptions, controlValidators);
+    const [controlState, setControlState] = useState({
+        dirty: false,
+        disabled: false,
+        focused: false,
+        state: state,
+        touched: !!touched,
+        validators: validators
+    });
+    const initialState = useRef(state);
     const elementRef = useRef(null);
     const errors = validators ? controlIsValid({ state, validators }) : [];
-    const error = errors[0];
     const valid = errors.length === 0;
-    useEffect(() => {
-        if (state !== null && state !== undefined) {
-            setValue(state);
-        }
-    }, [state]);
     function focus() {
-        setFocused(true);
+        setControlState((state) => ({ ...state, focused: true }));
     }
     function blur() {
-        setFocused(false);
+        setControlState((state) => ({ ...state, focused: false }));
     }
     function disable() {
-        setDisabled(true);
+        setControlState((state) => ({ ...state, disabled: true }));
     }
     function enable() {
-        setDisabled(false);
+        setControlState((state) => ({ ...state, disabled: false }));
     }
     function touch() {
-        setTouched(true);
+        setControlState((state) => ({ ...state, touched: true }));
     }
     function untouch() {
-        setTouched(false);
+        setControlState((state) => ({ ...state, touched: false }));
     }
     function setState(state) {
-        setDirty(true);
-        setCurrentState(state);
+        setControlState((currentState) => ({
+            ...currentState,
+            dirty: true,
+            state
+        }));
+    }
+    function setValidators(validators) {
+        setControlState((state) => ({ ...state, validators }));
     }
     function reset() {
-        setTouched(false);
-        setDirty(false);
-        setCurrentState(initialValue);
+        setControlState((currentState) => ({
+            ...currentState,
+            dirty: false,
+            state: initialState.current,
+            touched: false
+        }));
     }
     return {
+        ...controlState,
         blur,
-        dirty,
         disable,
-        disabled,
         elementRef,
         enable,
-        enabled: !disabled,
-        error,
+        enabled: !controlState.disabled,
+        error: errors[0],
         errors,
         focus,
-        focused,
         invalid: !valid,
-        pristine: !dirty,
+        pristine: !controlState.dirty,
         reset,
         setState,
         setValidators,
-        state,
         touch,
-        touched,
-        unfocused: !focused,
+        unfocused: !controlState.focused,
         untouch,
-        untouched: !touched,
+        untouched: !controlState.touched,
         valid,
-        value,
-        wrong: touched && !valid
+        wrong: controlState.touched && !valid
     };
 }
-function useReactControl(controlProps, controlValidators) {
-    return useControl(controlProps, controlValidators);
+function useReactControl(options, validators) {
+    return useControl(options, validators);
 }
-function useFormControl(controlProps, controlValidators) {
-    return useControl(controlProps, controlValidators);
+function useFormControl(options, validators) {
+    return useControl(options, validators);
 }
-function useInputControl(controlProps, controlValidators) {
-    return useControl(controlProps, controlValidators);
+function useInputControl(options, validators) {
+    return useControl(options, validators);
 }
 
-function useFormGroup(groupProps, groupValidators) {
-    const props = createFormGroupProps(groupProps, groupValidators);
-    const [validators, setValidators] = useState(props.validators);
-    const { controls } = props;
-    const errors = (() => validators ? groupIsValid({ controls, validators }) : [])();
-    const valid = (() => errors.length === 0 && controlsAllChecked(controls, 'valid'))();
-    const touched = (() => controlsPartialChecked(controls, 'touched'))();
-    const toucheds = (() => controlsAllChecked(controls, 'touched'))();
-    const dirty = (() => controlsPartialChecked(controls, 'dirty'))();
-    const dirties = (() => controlsAllChecked(controls, 'dirty'))();
-    const state = (() => controlsToState(controls))();
-    const value = (() => controlsToValue(controls))();
+function useFormGroup(options, groupValidators) {
+    const groupOptions = createFormGroupOptions(options, groupValidators);
+    const [validators, setValidators] = useState(groupOptions.validators);
+    const { controls } = groupOptions;
+    const errors = validators ? groupIsValid({ controls, validators }) : [];
+    const valid = errors.length === 0 && controlsAllChecked(controls, 'valid');
+    const state = controlsToState(controls);
+    const dirty = controlsPartialChecked(controls, 'dirty');
+    const dirties = controlsAllChecked(controls, 'dirty');
+    const touched = controlsPartialChecked(controls, 'touched');
+    const toucheds = controlsAllChecked(controls, 'touched');
     function reset() {
-        Object.values(controls).forEach((control) => control.reset());
+        Object.values(controls).forEach((control) => {
+            control.reset();
+        });
     }
     return {
         controls,
@@ -321,50 +441,16 @@ function useFormGroup(groupProps, groupValidators) {
         pristine: !dirty,
         pristines: !dirties,
         reset,
-        state,
         setValidators,
+        state,
         touched,
         toucheds,
         untouched: !touched,
         untoucheds: !toucheds,
         valid,
-        value,
         wrong: touched && !valid
     };
 }
 
-function useInputRefControl(props) {
-    const { setValue, state, validators } = props;
-    const inputControl = useInputControl(state, validators);
-    useEffect(() => {
-        const { elementRef } = inputControl;
-        elementRef?.current?.addEventListener('focus', () => {
-            inputControl.focus();
-        });
-        elementRef?.current?.addEventListener('blur', () => {
-            inputControl.blur();
-            if (!inputControl.touched) {
-                inputControl.touch();
-            }
-        });
-        elementRef?.current?.addEventListener('change', ({ target }) => {
-            setValue(inputControl, target.value);
-        });
-    }, []);
-    return inputControl;
-}
-function useTextRefControl(controlProps, controlValidators) {
-    return useInputRefControl({
-        ...createFormControlProps(controlProps, controlValidators),
-        setValue: (inputControl, value) => inputControl.setState(value)
-    });
-}
-function useNumberRefControl(controlProps, controlValidators) {
-    return useInputRefControl({
-        ...createFormControlProps(controlProps, controlValidators),
-        setValue: (inputControl, value) => inputControl.setState(+value)
-    });
-}
-
-export { cloneFormArrayControl, cloneFormArrayGroup, cloneFormControlForArrayGroup, useFormArray, useFormArrayControl, useFormArrayGroup, useFormControl, useFormGroup, useInputArrayControl, useInputControl, useNumberRefControl, useReactControl, useTextRefControl };
+export { useFormArray, useFormArrayControl, useFormArrayGroup, useFormControl, useFormGroup, useInputArrayControl, useInputControl, useReactArrayControl, useReactControl };
 //# sourceMappingURL=index.js.map