@etsoo/materialui
Version:
TypeScript Material-UI Implementation
46 lines (45 loc) • 2.04 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MaskInput = MaskInput;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const MUGlobal_1 = require("./MUGlobal");
const TextField_1 = __importDefault(require("@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
*/
function MaskInput(props) {
// Destruct
const { defaultValue, mask, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal_1.MUGlobal.searchFieldSize : MUGlobal_1.MUGlobal.inputFieldSize, slotProps, value, variant = search ? MUGlobal_1.MUGlobal.searchFieldVariant : MUGlobal_1.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_1.default.useEffect(() => {
if (maskRef.current == null || localValue == null)
return;
maskRef.current.value = String(localValue);
maskRef.current.updateValue();
}, [maskRef.current, localValue]);
// Layout
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: {
htmlInput: { readOnly, ...slotProps?.htmlInput },
inputLabel: { shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : MUGlobal_1.MUGlobal.inputFieldShrink, ...slotProps?.inputLabel }
}, size: size, variant: variant, inputRef: ref, ...rest }));
}