68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { TextField } from "@mui/material";
|
|
import { LenConstraint } from "../../api/ServerApi";
|
|
|
|
/**
|
|
* Text input property edition
|
|
*/
|
|
export function TextInput(p: {
|
|
label?: string;
|
|
editable: boolean;
|
|
value?: string;
|
|
onValueChange?: (newVal: string | undefined) => void;
|
|
size?: LenConstraint;
|
|
checkValue?: (s: string) => boolean;
|
|
multiline?: boolean;
|
|
minRows?: number;
|
|
maxRows?: number;
|
|
type?: React.HTMLInputTypeAttribute;
|
|
style?: React.CSSProperties;
|
|
helperText?: string;
|
|
disabled?: boolean;
|
|
endAdornment?: React.ReactNode;
|
|
}): React.ReactElement {
|
|
if (!p.editable && (p.value ?? "") === "") return <></>;
|
|
|
|
let valueError = undefined;
|
|
if (p.value && p.value.length > 0) {
|
|
if (p.size?.min && p.type !== "number" && p.value.length < p.size.min)
|
|
valueError = "Invalid value size";
|
|
if (p.checkValue && !p.checkValue(p.value)) valueError = "Invalid value!";
|
|
if (
|
|
p.type === "number" &&
|
|
p.size &&
|
|
(Number(p.value) > p.size.max || Number(p.value) < p.size.min)
|
|
)
|
|
valueError = "Invalide size range!";
|
|
}
|
|
|
|
return (
|
|
<TextField
|
|
disabled={p.disabled}
|
|
label={p.label}
|
|
value={p.value ?? ""}
|
|
onChange={(e) =>
|
|
p.onValueChange?.(
|
|
e.target.value.length === 0 ? undefined : e.target.value
|
|
)
|
|
}
|
|
slotProps={{
|
|
htmlInput: {
|
|
maxLength: p.size?.max,
|
|
},
|
|
input: {
|
|
readOnly: !p.editable,
|
|
type: p.type,
|
|
endAdornment: p.endAdornment,
|
|
},
|
|
}}
|
|
variant={"standard"}
|
|
style={p.style ?? { width: "100%", marginBottom: "15px" }}
|
|
multiline={p.multiline}
|
|
minRows={p.minRows}
|
|
maxRows={p.maxRows}
|
|
error={valueError !== undefined}
|
|
helperText={valueError ?? p.helperText}
|
|
/>
|
|
);
|
|
}
|