@etsoo/materialui/lib/cjs/InputField.js

TypeScript Material-UI Implementation

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputField = InputField;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const react_2 = __importDefault(require("react"));
const MUGlobal_1 = require("./MUGlobal");
const TextField_1 = __importDefault(require("@mui/material/TextField"));
/**
 * Input field
 * @param props Props
 * @returns Component
 */
function InputField(props) {
    // Destruct
    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
    // Slot props
    const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
    const isMounted = react_2.default.useRef(true);
    const createDelayed = () => {
        if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
            return (0, react_1.useDelayedExecutor)(onChangeDelay, changeDelay[0]);
        }
        return undefined;
    };
    const delayed = createDelayed();
    const onChangeEx = (event) => {
        // Change handler
        onChange?.(event);
        if (onChangeDelay && changeDelay && delayed) {
            const [_, minChars = 0] = changeDelay;
            if (minChars > 0) {
                const len = event.target.value.length;
                if (len < minChars)
                    return;
            }
            delayed.call(undefined, event);
        }
    };
    react_2.default.useEffect(() => {
        return () => {
            isMounted.current = false;
            delayed?.clear();
        };
    }, []);
    // Layout
    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: {
            htmlInput: {
                ["data-min-chars"]: changeDelay?.[1],
                ...htmlInput,
                ...inputProps
            },
            input: { readOnly, ...input, ...InputProps },
            inputLabel: {
                shrink: MUGlobal_1.MUGlobal.inputFieldShrink,
                ...inputLabel
            },
            ...restSlotProps
        }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
}