use-validation-form/dist/index.es.js

React hook for form input handling and validation

import { useState, useMemo, useEffect } from 'react';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */

var __assign = function() {
    __assign = Object.assign || function __assign(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};

function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
}

function __spreadArrays() {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
}

function useValidationForm(_a) {
    var defaultValues = _a.defaultValues, validators = _a.validators, callback = _a.callback;
    var _b = useState(defaultValues), values = _b[0], setValues = _b[1];
    var _c = useState({}), errors = _c[0], setErrors = _c[1];
    var _d = useState(false), isDirty = _d[0], setIsDirty = _d[1];
    var _e = useState(false), isSubmitting = _e[0], setIsSubmitting = _e[1];
    var isValid = useMemo(function () { return Object.keys(errors).length === 0; }, [errors]);
    var onChange = function (e) {
        e.persist();
        var _a = e.target, type = _a.type, name = _a.name, value = _a.value;
        if (type === 'checkbox') {
            setValues(function (v) {
                var _a;
                return (__assign(__assign({}, v), (_a = {}, _a[name] = !v[name], _a)));
            });
        }
        else if (e.target.localName === 'select' && e.target.multiple) {
            var cur_1 = __spreadArrays(e.target.options).filter(function (o) { return o.selected; })
                .map(function (o) { return o.value; });
            setValues(function (v) {
                var _a;
                return (__assign(__assign({}, v), (_a = {}, _a[name] = cur_1, _a)));
            });
        }
        else {
            setValues(function (v) {
                var _a;
                return (__assign(__assign({}, v), (_a = {}, _a[name] = value, _a)));
            });
        }
        setIsDirty(true);
        var errMsg = validators && validators[name] && validators[name](value);
        if (errMsg) {
            setErrors(function (e) {
                var _a;
                return (__assign(__assign({}, e), (_a = {}, _a[name] = errMsg, _a)));
            });
        }
        else {
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            var _b = name, _ = errors[_b], other = __rest(errors, [typeof _b === "symbol" ? _b : _b + ""]);
            setErrors(other);
        }
    };
    var validateAll = function () {
        if (validators) {
            setErrors(Object.keys(validators).reduce(function (prev, next) {
                var _a;
                var err = validators[next](values[next]);
                return err
                    ? __assign(__assign({}, prev), (_a = {}, _a[next] = validators[next](values[next]), _a)) : __assign({}, prev);
            }, {}));
        }
    };
    var onSubmit = function (e) {
        e.preventDefault();
        validateAll();
        setIsSubmitting(true);
    };
    useEffect(function () {
        if (isSubmitting) {
            if (isValid && typeof callback === 'function')
                callback();
            setIsSubmitting(false);
        }
    }, [errors]);
    return {
        values: values,
        errors: errors,
        isValid: isValid,
        isDirty: isDirty,
        isSubmitting: isSubmitting,
        validateAll: validateAll,
        onChange: onChange,
        onSubmit: onSubmit,
    };
}

export { useValidationForm };
//# sourceMappingURL=index.es.js.map