@amaui/ui-react/useForm/useForm.js

UI for React

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const validate_1 = __importDefault(require("./validate"));
const useForm = (props) => {
    const { values: values_ = {}, validate: validate_, rerenderOnUpdate = true, autoValidate, valueDefault, validDefault } = props;
    const [form, setForm] = react_1.default.useState({
        value: valueDefault !== undefined ? valueDefault : {},
        values: (0, utils_1.copy)(values_ || {}),
        valid: validDefault !== undefined ? validDefault : false
    });
    const refs = {
        form: react_1.default.useRef(form),
        value: react_1.default.useRef((0, utils_1.copy)(valueDefault !== undefined ? valueDefault : {})),
        values: react_1.default.useRef((0, utils_1.copy)(values_ || {})),
        valid: react_1.default.useRef(validDefault !== undefined ? validDefault : false)
    };
    refs.form.current = form;
    const init = () => {
        const formNew = Object.assign({}, refs.form.current);
        const { values } = formNew;
        const value = {};
        const properties = Object.keys(values);
        properties.forEach(item => {
            const valueProperty = values[item];
            if ((valueProperty === null || valueProperty === void 0 ? void 0 : valueProperty.value) !== undefined) {
                (0, utils_1.setObjectValue)(value, item, (0, utils_1.copy)(valueProperty.value));
            }
        });
        // update
        refs.value.current = value;
        setForm(previous => {
            return Object.assign(Object.assign({}, previous), { value });
        });
    };
    react_1.default.useEffect(() => {
        // init
        init();
    }, []);
    const onChange = async (...args) => {
        var _a, _b;
        const formNew = Object.assign({}, refs.form.current);
        const value = {};
        const valuesArgs = (0, utils_1.is)('array', args[0]) ? args[0] : [args];
        const options = (valuesArgs[0][3] || {});
        const rerenderOnUpdate_ = options.rerenderOnUpdate !== undefined ? options.rerenderOnUpdate : rerenderOnUpdate;
        const values = refs.values.current;
        for (const arg of valuesArgs) {
            const [property_, value_, propertyNested] = arg;
            let property = values[property_];
            if (!property) {
                values[property_] = {
                    name: (_b = (_a = (propertyNested || property_)) === null || _a === void 0 ? void 0 : _a.split('.')) === null || _b === void 0 ? void 0 : _b.slice(-1)[0],
                    touched: true
                };
                property = values[property_];
            }
            if (!propertyNested)
                property.value = value_;
            else
                (0, utils_1.setObjectValue)(property.value, propertyNested, value_);
            property.touched = true;
            if (autoValidate) {
                // Validate the property
                if (property.required && property.value === undefined) {
                    const name = (0, utils_1.is)('function', property.propertyNameUpdate) ? property.propertyNameUpdate(property.name) : property.capitalize !== false ? (0, utils_1.capitalize)(property.name) : property.name;
                    property.error = `${name} is required`;
                }
                else {
                    property.error = undefined;
                    // validations
                    try {
                        await (0, validate_1.default)(property, property_, formNew);
                    }
                    catch (error) {
                        property.error = error.message;
                    }
                }
            }
        }
        const properties = Object.keys(values);
        let valid = autoValidate ? properties.every((item) => {
            const prop = values[item];
            return (!prop.error &&
                (!prop.required ||
                    prop.value !== undefined));
        }) : refs.valid.current;
        if (autoValidate && (0, utils_1.is)('function', validate_))
            valid = valid && validate_(values, formNew);
        properties.forEach(item => {
            const valueProperty = values[item];
            if ((valueProperty === null || valueProperty === void 0 ? void 0 : valueProperty.value) !== undefined) {
                (0, utils_1.setObjectValue)(value, item, (0, utils_1.copy)(valueProperty.value));
            }
        });
        // update
        refs.value.current = value;
        refs.values.current = values;
        refs.valid.current = valid;
        if (rerenderOnUpdate_) {
            setForm(previous => {
                return Object.assign(Object.assign({}, previous), { value,
                    values,
                    valid });
            });
        }
    };
    const validate = async () => {
        const formNew = Object.assign({}, refs.form.current);
        const values = refs.values.current;
        const value = {};
        const properties = Object.keys(values);
        for (const item of properties) {
            const property = values[item];
            // Validate the property
            if (property.required && property.value === undefined) {
                const name = (0, utils_1.is)('function', property.propertyNameUpdate) ? property.propertyNameUpdate(property.name) : property.capitalize !== false ? (0, utils_1.capitalize)(property.name) : property.name;
                property.error = `${name} is required`;
            }
            else {
                property.error = undefined;
                // validations
                try {
                    await (0, validate_1.default)(property, item, formNew);
                    property.error = undefined;
                }
                catch (error) {
                    property.error = error.message;
                }
            }
        }
        let valid = properties.every((item) => {
            const prop = values[item];
            return (!prop.error &&
                (!prop.required ||
                    prop.value !== undefined));
        });
        if ((0, utils_1.is)('function', validate_))
            valid = valid && validate_(values, formNew);
        // value
        properties.forEach(item => {
            const valueProperty = values[item];
            if ((valueProperty === null || valueProperty === void 0 ? void 0 : valueProperty.value) !== undefined) {
                (0, utils_1.setObjectValue)(value, item, (0, utils_1.copy)(valueProperty.value));
            }
        });
        // update
        refs.value.current = value;
        refs.values.current = values;
        refs.valid.current = valid;
        setForm(previous => {
            return Object.assign(Object.assign({}, previous), { value,
                values,
                valid });
        });
        return valid;
    };
    const clear = () => {
        const formNew = Object.assign(Object.assign({}, refs.form.current), { value: (0, utils_1.copy)(valueDefault !== undefined ? valueDefault : {}), values: (0, utils_1.copy)(values_ || {}), valid: validDefault !== undefined ? validDefault : false });
        // update
        refs.value.current = formNew.value;
        refs.values.current = formNew.values;
        refs.valid.current = formNew.valid;
        setForm(previous => {
            return Object.assign(Object.assign({}, previous), formNew);
        });
    };
    return Object.assign(Object.assign({}, form), { value: rerenderOnUpdate ? form.value : refs.value.current, values: rerenderOnUpdate ? form.values : refs.values.current, valid: rerenderOnUpdate ? form.valid : refs.valid.current, init,
        validate,
        onChange,
        clear, updateForm: setForm });
};
exports.default = useForm;