51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
|
|
import { getFieldOptions } from '../../utils/options';
|
|
import { FieldComponentProps } from '../../types/overrides';
|
|
|
|
export default function RelationField({ field, value, onChange, disabled, relationDataMap = {} }: FieldComponentProps) {
|
|
if (!field.relation || !relationDataMap[field.relation]) {
|
|
return null;
|
|
}
|
|
|
|
const relationData = relationDataMap[field.relation].data;
|
|
const isArrayRelation = field.type === 'array';
|
|
const options = getFieldOptions(field, relationData);
|
|
const keyField = field.enumOption?.key ?? 'id';
|
|
|
|
const normalizedValue = (() => {
|
|
if (isArrayRelation && Array.isArray(value)) {
|
|
return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v)));
|
|
}
|
|
if (value != null && typeof value === 'object') {
|
|
return String(value[keyField] ?? '');
|
|
}
|
|
return value ?? (isArrayRelation ? [] : "");
|
|
})();
|
|
|
|
return (
|
|
<FormControl fullWidth>
|
|
<InputLabel shrink>{field.label}</InputLabel>
|
|
<Select
|
|
multiple={isArrayRelation}
|
|
value={normalizedValue}
|
|
label={field.label}
|
|
displayEmpty
|
|
onChange={(e) => onChange(e.target.value)}
|
|
disabled={disabled}
|
|
renderValue={(selected: any) => {
|
|
if (isArrayRelation) {
|
|
return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
|
|
}
|
|
return options.find(o => o.key === selected)?.value ?? selected;
|
|
}}
|
|
>
|
|
{options.map((opt) => (
|
|
<MenuItem key={opt.key} value={opt.key}>
|
|
{opt.value}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
}
|