UNPKG

@chris-bellman/rjsf-mantine-5-theme

Version:

Mantine 5 theme, fields and widgets for react-jsonschema-form. Based on @aokiapp/rjsf-mantine-theme

22 lines 1.98 kB
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { getTemplate, getUiOptions, } from '@rjsf/utils'; import { Group, Box, Stack } from '@mantine/core'; /** 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(props) { const { canAdd, className, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title, } = props; const uiOptions = getUiOptions(uiSchema); const ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions); const ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions); const ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions); // Button templates are not overridden in the uiSchema const { ButtonTemplates: { AddButton }, } = registry.templates; const _title = uiOptions.title || title; return (_jsx(Box, { id: idSchema.$id, style: { width: '100%', }, className: `armt-template-arrayfield ${className}`, children: _jsxs(Group, { spacing: 'lg', children: [_jsxs("div", { children: [title && (_jsx(ArrayFieldTitleTemplate, { idSchema: idSchema, title: _title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(ArrayFieldDescriptionTemplate, { idSchema: idSchema, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry })] }), _jsxs(Stack, { spacing: 'xs', w: '100%', children: [items && items.map(({ key, ...itemProps }) => (_jsx(ArrayFieldItemTemplate, { ...itemProps }, key))), canAdd && (_jsx(AddButton, { onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }))] })] }) })); } //# sourceMappingURL=ArrayFieldTemplate.js.map