react-proforma/dist/fieldValid.js

React Proforma helps you build simple to complex web forms with ease in React. -- Simplicity where you want it. Flexibility where you need it.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var ProformaContext_1 = require("./ProformaContext");
function memoCompare(prevProps, nextProps) {
    return prevProps.message === nextProps.message;
}
var _FieldValid = function (props) {
    var Component = props.component, message = props.message;
    return react_1.default.createElement(Component, { message: message });
};
var MemoFieldValid = react_1.default.memo(_FieldValid, memoCompare);
function getContextConsumerProcessor(name, component, message) {
    return function processContextConsumer(_a) {
        var values = _a.values, touched = _a.touched, errors = _a.errors;
        // necessary for type guard to work
        var _touched = touched[name];
        var _errors = errors[name];
        if (_touched === true && _errors === null) {
            return react_1.default.createElement(MemoFieldValid, { component: component, message: message });
        }
        return null;
    };
}
/**
 * Takes a component that you provide and returns that component, passing in the message (which you provide here) as a prop called "message".
 * The message will display if there are no errors in that field, based on the validationObject you provide.
 * Whether the message is displayed only if that field has been touched is dependent on the fourth argument to this function, which defaults to true.
 * (Set it to false if you want to display the message even if the field hasn't been touched).
 * The component you provide must accept a single prop named "message", which you can use to display the message however you like inside the component.
 *
 * @param {string} name - A form element name that corresponds with a property on your "initialValues" object.
 * @param {React.ComponentType<{ error: string }>} component - Any component that accepts a single string prop called "message", which you use to display the message inside your component.
 * @param {string} message - The message you wish to display if there are no errors.
 * @returns {JSX.Element} JSX.Element
 */
function fieldValid(name, component, message) {
    if (!name)
        throw new Error('"fieldValid" will not function without a "name" argument passed to it. Please provide a "name" argument that corresponds with one of the properties on your "initialValues" object.');
    if (!component)
        throw new Error('"fieldValid" will not function without a "component" argument passed to it. Please provide one.');
    if (!message)
        throw new Error('"fieldValid" will not function without a "message" argument passed to it. Please provide one.');
    return (react_1.default.createElement(ProformaContext_1.ProformaContextConsumer, null, getContextConsumerProcessor(name, component, message)));
}
exports.fieldValid = fieldValid;