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

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import { useDelayedExecutor } from "@etsoo/react";
import React from "react";
import { MUGlobal } from "./MUGlobal";
import TextField from "@mui/material/TextField";
/**
 * Input field
 * @param props Props
 * @returns Component
 */
export function InputField(props) {
    // Destruct
    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
    // Slot props
    const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
    const isMounted = React.useRef(true);
    const createDelayed = () => {
        if (onChangeDelay && changeDelay && changeDelay[0] >= 1) {
            return 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.useEffect(() => {
        return () => {
            isMounted.current = false;
            delayed?.clear();
        };
    }, []);
    // Layout
    return (_jsx(TextField, { slotProps: {
            htmlInput: {
                ["data-min-chars"]: changeDelay?.[1],
                ...htmlInput,
                ...inputProps
            },
            input: { readOnly, ...input, ...InputProps },
            inputLabel: {
                shrink: MUGlobal.inputFieldShrink,
                ...inputLabel
            },
            ...restSlotProps
        }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
}