39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { FormControl, InputLabel, Select, MenuItem, FormHelperText } from "@mui/material";
|
|
import type { FieldConfig } from "../../../types";
|
|
|
|
interface Props {
|
|
field: FieldConfig;
|
|
value: any;
|
|
onChange: (value: any) => void;
|
|
error?: string;
|
|
fkOptions?: { value: any; label: string }[];
|
|
onOpen?: () => void;
|
|
}
|
|
|
|
export function FkSelectField({ field, value, onChange, error, fkOptions, onOpen }: Props) {
|
|
console.log(`[FkSelectField] render field="${field.name}" fkOptions=${fkOptions ? `${fkOptions.length} items` : "undefined"} value=${value}`);
|
|
return (
|
|
<FormControl fullWidth size="small" error={!!error}>
|
|
<InputLabel>{field.label}</InputLabel>
|
|
<Select
|
|
value={value ?? ""}
|
|
label={field.label}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
onOpen={() => onOpen?.()}
|
|
disabled={field.readOnly}
|
|
>
|
|
<MenuItem value="">
|
|
<em>None</em>
|
|
</MenuItem>
|
|
{(fkOptions ?? []).map((opt) => (
|
|
<MenuItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{field.description && <FormHelperText>{field.description}</FormHelperText>}
|
|
</FormControl>
|
|
);
|
|
}
|