@etsoo/materialui/lib/cjs/SearchField.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.SearchField = SearchField;
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"));
/**
 * Search field
 * @param props Props
 * @returns Component
 */
function SearchField(props) {
    // Destruct
    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
    // Shrink
    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
    // Read only
    if (readOnly != null)
        InputProps.readOnly = readOnly;
    // Min characters
    inputProps["data-min-chars"] = minChars;
    const isMounted = react_2.default.useRef(true);
    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
        ? (0, react_1.useDelayedExecutor)(onChange, changeDelay)
        : undefined;
    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 == null)
            return;
        if (changeDelay == null || changeDelay < 1) {
            onChange(event);
            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, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
}