94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
import Box from '@mui/material/Box';
|
|
import Grid2 from '@mui/material/Grid2';
|
|
import Paper from '@mui/material/Paper';
|
|
import {
|
|
getTemplate,
|
|
getUiOptions,
|
|
ArrayFieldTemplateProps,
|
|
ArrayFieldTemplateItemType,
|
|
FormContextType,
|
|
} from '@rjsf/utils';
|
|
import { CrudTextRJSFSchema } from "../widgets/crud-text-widget";
|
|
|
|
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
|
|
*
|
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
*/
|
|
export default function ArrayFieldTemplate<
|
|
T = any,
|
|
S extends CrudTextRJSFSchema = CrudTextRJSFSchema,
|
|
F extends FormContextType = any
|
|
>(props: ArrayFieldTemplateProps<T, S, F>) {
|
|
const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
|
|
props;
|
|
|
|
let gridSize = 12;
|
|
if (schema.props) {
|
|
if (schema.props.hasOwnProperty("items_per_row")) {
|
|
gridSize = gridSize / schema.props.items_per_row;
|
|
}
|
|
}
|
|
const uiOptions = getUiOptions<T, S, F>(uiSchema);
|
|
const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
|
|
'ArrayFieldDescriptionTemplate',
|
|
registry,
|
|
uiOptions
|
|
);
|
|
const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
|
|
'ArrayFieldItemTemplate',
|
|
registry,
|
|
uiOptions
|
|
);
|
|
const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
|
|
'ArrayFieldTitleTemplate',
|
|
registry,
|
|
uiOptions
|
|
);
|
|
// Button templates are not overridden in the uiSchema
|
|
const {
|
|
ButtonTemplates: { AddButton },
|
|
} = registry.templates;
|
|
return (
|
|
<Paper elevation={2}>
|
|
<Box p={2}>
|
|
<ArrayFieldTitleTemplate
|
|
idSchema={idSchema}
|
|
title={uiOptions.title || title}
|
|
schema={schema}
|
|
uiSchema={uiSchema}
|
|
required={required}
|
|
registry={registry}
|
|
/>
|
|
<ArrayFieldDescriptionTemplate
|
|
idSchema={idSchema}
|
|
description={uiOptions.description || schema.description}
|
|
schema={schema}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
<Grid2 container justifyContent='flex-end'>
|
|
{items &&
|
|
items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
|
|
<Grid2 key={key} size={gridSize} ><ArrayFieldItemTemplate key={key} {...itemProps} /></Grid2>
|
|
))}
|
|
</Grid2>
|
|
{canAdd && (
|
|
<Grid2 container justifyContent='flex-end'>
|
|
<Grid2>
|
|
<Box mt={2}>
|
|
<AddButton
|
|
className='array-item-add'
|
|
onClick={onAddClick}
|
|
disabled={disabled || readonly}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
</Box>
|
|
</Grid2>
|
|
</Grid2>
|
|
)}
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
}
|