@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 const InputField = React.forwardRef((props, ref) => {
    // Destruct
    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
    // Shrink
    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
    // Read only
    if (readOnly != null)
        InputProps.readOnly = readOnly;
    // Min characters
    inputProps["data-min-chars"] = minChars;
    const isMounted = React.useRef(true);
    const createDelayed = () => {
        if (changeDelay != null && changeDelay >= 1) {
            const changeHandler = onChangeDelay ?? onChange;
            if (changeHandler)
                return useDelayedExecutor(changeHandler, changeDelay);
        }
        return undefined;
    };
    const delayed = createDelayed();
    const onChangeEx = (event) => {
        // Min characters check
        const len = event.target.value.length;
        if (len > 0 && len < minChars) {
            // Avoid to trigger the form change event
            event.stopPropagation();
            event.preventDefault();
            return;
        }
        if (onChange && (delayed == null || onChangeDelay != null))
            onChange(event);
        delayed?.call(undefined, event);
    };
    React.useEffect(() => {
        return () => {
            isMounted.current = false;
            delayed?.clear();
        };
    }, []);
    // Layout
    return (_jsx(TextField, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
});