ra-core/dist/form/useAugmentedForm.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.useAugmentedForm = void 0;
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const merge_js_1 = __importDefault(require("lodash/merge.js"));
const controller_1 = require("../controller/index.cjs");
const getFormInitialValues_1 = __importDefault(require("./getFormInitialValues.cjs"));
const getSimpleValidationResolver_1 = require("./validation/getSimpleValidationResolver.cjs");
const setSubmissionErrors_1 = require("./validation/setSubmissionErrors.cjs");
const useNotifyIsFormInvalid_1 = require("./validation/useNotifyIsFormInvalid.cjs");
const sanitizeEmptyValues_1 = require("./sanitizeEmptyValues.cjs");
const useRecordFromLocation_1 = require("./useRecordFromLocation.cjs");
/**
 * Wrapper around react-hook-form's useForm
 *
 * This hook adds the following features to react-hook-form's useForm:
 *
 * - form initialization based on RecordContext
 * - validation based on a validate function
 * - sanitization of empty values
 * - notification on invalid form
 * - stop form submission event propagation
 */
const useAugmentedForm = (props) => {
    const { criteriaMode = 'firstError', defaultValues, formRootPathname, resolver, resetOptions, reValidateMode = 'onChange', onSubmit, sanitizeEmptyValues, validate, disableInvalidFormNotification, ...rest } = props;
    const saveContext = (0, controller_1.useSaveContext)();
    const record = (0, controller_1.useRecordContext)(props);
    const defaultValuesIncludingRecord = (0, react_1.useMemo)(() => (0, getFormInitialValues_1.default)(defaultValues, record), 
    // eslint-disable-next-line
    [
        // eslint-disable-next-line
        JSON.stringify({
            defaultValues: typeof defaultValues === 'function'
                ? 'function'
                : defaultValues,
            record,
        }),
    ]);
    const finalResolver = resolver
        ? resolver
        : validate
            ? (0, getSimpleValidationResolver_1.getSimpleValidationResolver)(validate)
            : undefined;
    const form = (0, react_hook_form_1.useForm)({
        criteriaMode,
        defaultValues: defaultValuesIncludingRecord,
        reValidateMode,
        resolver: finalResolver,
        ...rest,
    });
    const formRef = (0, react_1.useRef)(form);
    const { reset, formState } = form;
    const { isReady } = formState;
    const previousRecordId = (0, react_1.useRef)(record?.id);
    (0, react_1.useEffect)(() => {
        const recordIdChanged = record?.id !== previousRecordId.current;
        previousRecordId.current = record?.id;
        reset(defaultValuesIncludingRecord, recordIdChanged ? undefined : resetOptions);
    }, [defaultValuesIncludingRecord, reset, resetOptions, record?.id]);
    // notify on invalid form
    (0, useNotifyIsFormInvalid_1.useNotifyIsFormInvalid)(form.control, !disableInvalidFormNotification);
    const recordFromLocation = (0, useRecordFromLocation_1.useRecordFromLocation)();
    const recordFromLocationApplied = (0, react_1.useRef)(false);
    (0, react_1.useEffect)(() => {
        if (!isReady)
            return;
        if (recordFromLocation && !recordFromLocationApplied.current) {
            reset((0, merge_js_1.default)({}, defaultValuesIncludingRecord, recordFromLocation), {
                keepDefaultValues: true,
            });
            recordFromLocationApplied.current = true;
        }
    }, [defaultValuesIncludingRecord, recordFromLocation, reset, isReady]);
    // submit callbacks
    const handleSubmit = (0, react_1.useCallback)(async (values, event) => {
        let errors;
        const finalValues = sanitizeEmptyValues
            ? (0, sanitizeEmptyValues_1.sanitizeEmptyValues)(values, record)
            : values;
        if (onSubmit) {
            errors = await onSubmit(finalValues, event);
        }
        if (onSubmit == null && saveContext?.save) {
            errors = await saveContext.save(finalValues, event);
        }
        if (errors != null) {
            (0, setSubmissionErrors_1.setSubmissionErrors)(errors, formRef.current.setError);
        }
    }, [onSubmit, saveContext, sanitizeEmptyValues, record]);
    const formHandleSubmit = (0, react_1.useCallback)((event) => {
        if (!event.defaultPrevented) {
            // Prevent outer forms to receive the event
            event.stopPropagation();
            form.handleSubmit(handleSubmit)(event);
        }
        return;
    }, [form, handleSubmit]);
    return {
        form,
        handleSubmit,
        formHandleSubmit,
    };
};
exports.useAugmentedForm = useAugmentedForm;
//# sourceMappingURL=useAugmentedForm.js.map