@42.nl/final-form-field-validation/lib/Field.js

Validating final forms.

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __rest = (this && this.__rest) || function (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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Field = Field;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_final_form_1 = require("react-final-form");
/**
 * Field wraps final-form's Field, and adds async validation.
 *
 * It is possible to add custom field validators and async validators
 * via the `validators` and `asyncValidators` props. The `asyncValidators`
 * are only ran when all synchronous `validators` pass.
 */
function Field(props) {
    const { validators, asyncValidators, asyncValidatorsDebounce = 200 } = props, fieldProps = __rest(props, ["validators", "asyncValidators", "asyncValidatorsDebounce"]);
    const debounceResolver = (0, react_1.useRef)(() => undefined);
    const validate = (0, react_1.useCallback)((value, allValues, meta) => __awaiter(this, void 0, void 0, function* () {
        // Prevent the previous async check from occurring if possible
        debounceResolver.current(false);
        const validatorFunctions = Array.isArray(validators) && validators ? [...validators] : [];
        if (validatorFunctions.length > 0) {
            // Perform synchronous validation
            const results = yield Promise.all(validatorFunctions.map((validator) => validator(value, allValues, meta)));
            const errors = results.filter((v) => v !== undefined);
            // If there are no synchronous errors, asynchronous validation will be prepared
            if (errors.length > 0) {
                return errors;
            }
        }
        const asyncValidatorFunctions = Array.isArray(asyncValidators) && asyncValidators
            ? [...asyncValidators]
            : [];
        if (asyncValidatorFunctions.length === 0) {
            return undefined;
        }
        const promise = new Promise((resolve) => {
            // Prevent the previous async check from occurring if possible
            debounceResolver.current(false);
            debounceResolver.current = resolve;
            setTimeout(() => resolve(true), asyncValidatorsDebounce);
        });
        const shouldPerformAsyncValidation = yield promise;
        if (!shouldPerformAsyncValidation) {
            return undefined;
        }
        const asyncResults = yield Promise.all(asyncValidatorFunctions.map((validator) => validator(value, allValues, meta)));
        const asyncErrors = asyncResults.filter((v) => v !== undefined);
        // If there are no errors, return undefined to indicate that everything is a-ok.
        return asyncErrors.length === 0 ? undefined : asyncErrors;
    }), [validators, asyncValidators, asyncValidatorsDebounce]);
    return (0, jsx_runtime_1.jsx)(react_final_form_1.Field, Object.assign({}, fieldProps, { validate: validate }));
}