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

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { MUGlobal } from "./MUGlobal";
import TextField from "@mui/material/TextField";
// Currently CommonJS modules are not supported by "react-imask" package
let useIMask;
import("react-imask").then((module) => useIMask = module.useIMask);
/**
 * Mask input
 * https://imask.js.org/
 * @param props Props
 * @returns Component
 */
export function MaskInput(props) {
    // Destruct
    const { defaultValue, mask, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, slotProps, value, variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant, ...rest } = props;
    const { ref, maskRef } = useIMask(mask, {
        onAccept: (value, maskRef, event) => {
            if (onAccept)
                onAccept(value, maskRef, event);
        },
        onComplete: (value, maskRef, event) => {
            if (onComplete)
                onComplete(value, maskRef, event);
        }
    });
    const localValue = defaultValue ?? value;
    React.useEffect(() => {
        if (maskRef.current == null || localValue == null)
            return;
        maskRef.current.value = String(localValue);
        maskRef.current.updateValue();
    }, [maskRef.current, localValue]);
    // Layout
    return (_jsx(TextField, { slotProps: {
            htmlInput: { readOnly, ...slotProps?.htmlInput },
            inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink, ...slotProps?.inputLabel }
        }, size: size, variant: variant, inputRef: ref, ...rest }));
}