62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import {
|
|
FormControl,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { TextInput } from "./TextInput";
|
|
|
|
export interface SelectOption {
|
|
value?: string;
|
|
label?: string;
|
|
description?: string;
|
|
}
|
|
|
|
export function SelectInput(p: {
|
|
value?: string;
|
|
editable: boolean;
|
|
label?: string;
|
|
options: SelectOption[];
|
|
onValueChange: (o?: string) => void;
|
|
}): React.ReactElement {
|
|
if (!p.editable && !p.value) return <></>;
|
|
|
|
if (!p.editable) {
|
|
const value = p.options.find((o) => o.value === p.value)?.label ?? p.value;
|
|
return <TextInput label={p.label} editable={p.editable} value={value} />;
|
|
}
|
|
|
|
return (
|
|
<FormControl fullWidth variant="standard" style={{ marginBottom: "15px" }}>
|
|
{p.label && <InputLabel>{p.label}</InputLabel>}
|
|
<Select
|
|
value={p.value ?? ""}
|
|
label={p.label}
|
|
onChange={(e) => { p.onValueChange(e.target.value); }}
|
|
>
|
|
{p.options.map((e) => (
|
|
<MenuItem
|
|
key={e.value}
|
|
value={e.value}
|
|
style={{ fontStyle: e.value === undefined ? "italic" : undefined }}
|
|
>
|
|
<div>
|
|
{e.label ?? e.value}
|
|
{e.description && (
|
|
<Typography
|
|
component={"div"}
|
|
variant="caption"
|
|
style={{ whiteSpace: "normal" }}
|
|
>
|
|
{e.description}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|