ra-core/dist/form/useInput.cjs

Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useInput = void 0;
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const get_js_1 = __importDefault(require("lodash/get.js"));
const controller_1 = require("../controller/index.cjs");
const validation_1 = require("./validation/index.cjs");
const groups_1 = require("./groups/index.cjs");
const useApplyInputDefaultValues_1 = require("./useApplyInputDefaultValues.cjs");
const util_1 = require("../util/index.cjs");
const core_1 = require("../core/index.cjs");
// replace null or undefined values by empty string to avoid controlled/uncontrolled input warning
const defaultFormat = (value) => (value == null ? '' : value);
// parse empty string into null as it's more suitable for a majority of backends
const defaultParse = (value) => (value === '' ? null : value);
const useInput = (props) => {
    const { defaultValue, format = defaultFormat, id, isRequired: isRequiredOption, name, onBlur: initialOnBlur, onChange: initialOnChange, parse: parseProp = defaultParse, source, validate, ...options } = props;
    const finalSource = (0, core_1.useWrappedSource)(source);
    const finalName = name || finalSource;
    const formGroupName = (0, groups_1.useFormGroupContext)();
    const formGroups = (0, groups_1.useFormGroups)();
    const record = (0, controller_1.useRecordContext)();
    // @ts-ignore
    const parse = (0, util_1.useEvent)(parseProp);
    const defaultId = (0, react_1.useId)();
    if (!finalName && process.env.NODE_ENV === 'development') {
        console.warn('Input components require either a source or a name prop.');
    }
    (0, react_1.useEffect)(() => {
        if (!formGroups || formGroupName == null) {
            return;
        }
        formGroups.registerField(finalSource, formGroupName);
        return () => {
            formGroups.unregisterField(finalSource, formGroupName);
        };
    }, [formGroups, formGroupName, finalSource]);
    const sanitizedValidate = Array.isArray(validate)
        ? (0, validation_1.composeValidators)(validate)
        : validate;
    // Fetch the defaultValue from the record if available or apply the provided defaultValue.
    // This ensures dynamically added inputs have their value set correctly (ArrayInput for example).
    // We don't do this for the form level defaultValues so that it works as it should in react-hook-form
    // (i.e. field level defaultValue override form level defaultValues for this field).
    const { field: controllerField, fieldState, formState, } = (0, react_hook_form_1.useController)({
        name: finalName,
        defaultValue: (0, get_js_1.default)(record, finalSource, defaultValue),
        rules: {
            validate: async (value, values) => {
                if (!sanitizedValidate)
                    return true;
                const error = await sanitizedValidate(value, values, {
                    ...props,
                    finalSource,
                });
                if (!error)
                    return true;
                // react-hook-form expects errors to be plain strings but our validators can return objects
                // that have message and args.
                // To avoid double translation for users that validate with a schema instead of our validators
                // we use a special format for our validators errors.
                // The ValidationError component will check for this format and extract the message and args
                // to translate.
                return `@@react-admin@@${JSON.stringify(error)}`;
            },
        },
        ...options,
    });
    // Because our forms may receive an asynchronously loaded record for instance,
    // they may reset their default values which would override the input default value.
    // This hook ensures that the input default value is applied when a new record is loaded but has
    // no value for the input.
    (0, useApplyInputDefaultValues_1.useApplyInputDefaultValues)({ inputProps: props });
    const onBlur = (0, util_1.useEvent)((...event) => {
        controllerField.onBlur();
        if (initialOnBlur) {
            initialOnBlur(...event);
        }
    });
    const onChange = (0, util_1.useEvent)((...event) => {
        const eventOrValue = (props.type === 'checkbox' && event[0]?.target?.value === 'on'
            ? event[0].target.checked
            : event[0]?.target?.value ?? event[0]);
        controllerField.onChange(parse ? parse(eventOrValue) : eventOrValue);
        if (initialOnChange) {
            initialOnChange(...event);
        }
    });
    const field = {
        ...controllerField,
        value: format ? format(controllerField.value) : controllerField.value,
        onBlur,
        onChange,
    };
    return {
        id: id || defaultId,
        field,
        fieldState,
        formState,
        isRequired: isRequiredOption || (0, validation_1.isRequired)(validate),
    };
};
exports.useInput = useInput;
//# sourceMappingURL=useInput.js.map