128 lines
3.1 KiB
TypeScript
128 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import { TextField } from "@mui/material";
|
|
import type { FieldConfig } from "../../types";
|
|
import { StringField } from "./renderers/StringField";
|
|
import { NumberField } from "./renderers/NumberField";
|
|
import { DateField } from "./renderers/DateField";
|
|
import { BooleanField } from "./renderers/BooleanField";
|
|
import { EnumField } from "./renderers/EnumField";
|
|
import { FkSelectField } from "./renderers/FkSelectField";
|
|
import { FkMultiSelectField } from "./renderers/FkMultiSelectField";
|
|
import { ImageField } from "./renderers/ImageField";
|
|
import { JsonField } from "./renderers/JsonField";
|
|
|
|
interface FormFieldProps {
|
|
field: FieldConfig;
|
|
value: any;
|
|
onChange: (value: any) => void;
|
|
error?: string;
|
|
fkOptions?: { value: any; label: string }[];
|
|
fkLoading?: boolean;
|
|
recordId?: string | number;
|
|
onFkOpen?: (fieldName: string) => void;
|
|
}
|
|
|
|
export function FormFieldRenderer({ field, value, onChange, error, fkOptions, fkLoading, recordId, onFkOpen }: FormFieldProps) {
|
|
if (field.hidden?.form) return null;
|
|
|
|
if (field.readOnly && field.uiType !== "image") {
|
|
return (
|
|
<StringField field={field} value={value} onChange={onChange} error={error} />
|
|
);
|
|
}
|
|
|
|
if (field.uiType === "image") {
|
|
return (
|
|
<ImageField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
id={recordId}
|
|
uploadUrl={field.uploadUrl}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.fk) {
|
|
console.log(`[FormFieldRenderer] FK field="${field.name}" fkOptions=${fkOptions ? `${fkOptions.length} items` : "undefined"} fkLoading=${fkLoading} isArray=${field.isArray}`);
|
|
if (field.isArray) {
|
|
return (
|
|
<FkMultiSelectField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
fkOptions={fkOptions}
|
|
fkLoading={fkLoading}
|
|
onOpen={() => onFkOpen?.(field.name)}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<FkSelectField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
error={error}
|
|
fkOptions={fkOptions}
|
|
onOpen={() => onFkOpen?.(field.name)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.enumValues) {
|
|
return (
|
|
<EnumField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
error={error}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.type === "boolean") {
|
|
return <BooleanField field={field} value={value} onChange={onChange} />;
|
|
}
|
|
|
|
if (field.type === "integer" || field.type === "number") {
|
|
return (
|
|
<NumberField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
error={error}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.format === "date" || field.format === "date-time") {
|
|
return (
|
|
<DateField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
error={error}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (field.refSchema && !field.fk) {
|
|
return (
|
|
<JsonField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<StringField
|
|
field={field}
|
|
value={value}
|
|
onChange={onChange}
|
|
error={error}
|
|
/>
|
|
);
|
|
}
|