39 lines
982 B
TypeScript
39 lines
982 B
TypeScript
|
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
|
||
|
|
import { PropEdit } from "./PropEdit";
|
||
|
|
|
||
|
|
export interface SelectOption {
|
||
|
|
value: string;
|
||
|
|
label: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PropSelect(p: {
|
||
|
|
value?: string;
|
||
|
|
editing: boolean;
|
||
|
|
label: string;
|
||
|
|
options: SelectOption[];
|
||
|
|
onValueChange: (o?: string) => void;
|
||
|
|
}): React.ReactElement {
|
||
|
|
if (!p.editing && !p.value) return <></>;
|
||
|
|
|
||
|
|
if (!p.editing) {
|
||
|
|
const value = p.options.find((o) => o.value === p.value)?.label;
|
||
|
|
return <PropEdit label={p.label} editable={p.editing} value={value} />;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<FormControl fullWidth variant="filled">
|
||
|
|
<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}>
|
||
|
|
{e.label}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
);
|
||
|
|
}
|