61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { FormControl, Input, InputLabel } from "@mui/material";
|
|
import { TextInput } from "./TextInput";
|
|
import { IMaskInput } from "react-imask";
|
|
import React from "react";
|
|
|
|
interface CustomProps {
|
|
onChange: (event: { target: { name: string; value: string } }) => void;
|
|
name: string;
|
|
placeholder: string;
|
|
}
|
|
|
|
const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
|
|
function TextMaskCustom(props, ref) {
|
|
const { onChange, placeholder, ...other } = props;
|
|
return (
|
|
<IMaskInput
|
|
{...other}
|
|
mask={placeholder}
|
|
definitions={{
|
|
"#": /[1-9]/,
|
|
}}
|
|
inputRef={ref}
|
|
onAccept={(value: any) =>
|
|
onChange({ target: { name: props.name, value } })
|
|
}
|
|
overwrite
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
export function TextMaskInput(p: {
|
|
label: string;
|
|
editable: boolean;
|
|
value?: string;
|
|
onValueChange?: (newVal: string | undefined) => void;
|
|
mask: string;
|
|
}): React.ReactElement {
|
|
const id = React.useRef(Math.random());
|
|
|
|
if (!p.editable) return <TextInput {...p} />;
|
|
|
|
return (
|
|
<FormControl variant="standard" fullWidth>
|
|
<InputLabel htmlFor={`mi-${id.current}`}>{p.label}</InputLabel>
|
|
<Input
|
|
fullWidth
|
|
value={p.value ?? ""}
|
|
onChange={(c) =>
|
|
p.onValueChange?.(
|
|
c.target.value.length === 0 ? undefined : c.target.value
|
|
)
|
|
}
|
|
id={`mi-${id.current}`}
|
|
inputComponent={TextMaskCustom as any}
|
|
placeholder={p.mask}
|
|
/>
|
|
</FormControl>
|
|
);
|
|
}
|