GeneIT/geneit_app/src/widgets/forms/PropSelect.tsx

import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import { PropEdit } from "./PropEdit";

export interface SelectOption {
  value: string | undefined;
  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" style={{ marginBottom: "15px" }}>
      <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>
  );
}