mui-extended/dist/form/FormField.js

Extended UI Components built on Material UI

import { __assign, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { capitalize, isEqualWith, snakeCase, words } from "lodash";
import { forwardRef, memo, useMemo } from "react";
import { debugPropChanges } from "./debug";
import { useFormContext } from "./FormContext";
var labelFromName = function (name) {
    return words(snakeCase(name)).map(capitalize).join(" ");
};
export var withFormField = function (FormFieldComponent) {
    var PureFormFieldComponent = memo(FormFieldComponent, function (prevProps, nextProps) {
        debugPropChanges(prevProps, nextProps);
        return isEqualWith(prevProps, nextProps, function (value, other, propName) {
            if (propName == "onChange" || propName == "onBlur") {
                return true;
            }
        });
    });
    var DecoratedFormField = forwardRef(function FormField(_a, ref) {
        var children = _a.children, name = _a.name, label = _a.label, props = __rest(_a, ["children", "name", "label"]);
        var formContext = useFormContext();
        if (!formContext) {
            throw new Error("FormField is rendered with out Form");
        }
        var _label = label || labelFromName(name);
        var value = formContext.values[name];
        var onChange = useMemo(function () { return function (name, value) {
            formContext.onFieldChange(name, value);
            if (props.onChange) {
                props.onChange(name, value);
            }
        }; }, 
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [props.onChange]);
        var onBlur = useMemo(function () { return function (name) {
            formContext.onFieldBlur(name);
            if (props.onBlur) {
                props.onBlur(name);
            }
        }; }, 
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [props.onBlur]);
        var error = formContext.errors[name];
        var disabled = props.disabled || formContext.isSubmitting;
        var helperText = error || props.helperText;
        return (_jsx(PureFormFieldComponent, __assign({}, props, { name: name, label: _label, value: value, onChange: onChange, onBlur: onBlur, error: !!error, disabled: disabled, helperText: error || helperText, ref: ref, children: children })));
    });
    return DecoratedFormField;
};