@rjsf/mui
Version:
Material UI 7 theme, fields and widgets for react-jsonschema-form
22 lines • 2.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import { getTemplate, getUiOptions, buttonId, } from '@rjsf/utils';
import { computeSxProps, getMuiProps } from '../util.js';
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
*
* @param props - The `ArrayFieldTemplateProps` props for the component
*/
export default function ArrayFieldTemplate(props) {
const { canAdd, disabled, fieldPathId, uiSchema, items, optionalDataControl, onAddClick, readonly, registry, required, schema, title, } = props;
const uiOptions = getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
const ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
const showOptionalDataControlInTitle = !readonly && !disabled;
// Button templates are not overridden in the uiSchema
const { ButtonTemplates: { AddButton }, } = registry.templates;
const { rjsfSlotProps: { arrayPaper, arrayBox, arrayAddButtonGridContainer, arrayAddButtonGridItem, arrayAddButtonBox, } = {}, } = getMuiProps(uiOptions);
return (_jsx(Paper, { elevation: 2, ...arrayPaper, children: _jsxs(Box, { ...arrayBox, sx: computeSxProps({ p: 2 }, arrayBox), children: [_jsx(ArrayFieldTitleTemplate, { fieldPathId: fieldPathId, title: uiOptions.title || title, schema: schema, uiSchema: uiSchema, required: required, registry: registry, optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : undefined }), _jsx(ArrayFieldDescriptionTemplate, { fieldPathId: fieldPathId, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry }), !showOptionalDataControlInTitle ? optionalDataControl : undefined, items, canAdd && (_jsx(Grid, { container: true, ...arrayAddButtonGridContainer, sx: computeSxProps({ justifyContent: 'flex-end' }, arrayAddButtonGridContainer), children: _jsx(Grid, { ...arrayAddButtonGridItem, children: _jsx(Box, { ...arrayAddButtonBox, sx: computeSxProps({ mt: 2 }, arrayAddButtonBox), children: _jsx(AddButton, { id: buttonId(fieldPathId, 'add'), className: 'rjsf-array-item-add', onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }) }))] }) }));
}
//# sourceMappingURL=ArrayFieldTemplate.js.map