@rjsf/core
Version:
A simple React component capable of building HTML forms out of a JSON schema.
17 lines (16 loc) • 1.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getTemplate, getUiOptions, buttonId, } from '@rjsf/utils';
/** 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, className, 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);
// Button templates are not overridden in the uiSchema
const showOptionalDataControlInTitle = !readonly && !disabled;
const { ButtonTemplates: { AddButton }, } = registry.templates;
return (_jsxs("fieldset", { className: className, id: fieldPathId.$id, children: [_jsx(ArrayFieldTitleTemplate, { fieldPathId: fieldPathId, title: uiOptions.title || title, required: required, schema: schema, uiSchema: uiSchema, registry: registry, optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : undefined }), _jsx(ArrayFieldDescriptionTemplate, { fieldPathId: fieldPathId, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry }), !showOptionalDataControlInTitle ? optionalDataControl : undefined, _jsx("div", { className: 'row array-item-list', children: items }), canAdd && (_jsx(AddButton, { id: buttonId(fieldPathId, 'add'), className: 'rjsf-array-item-add', onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }))] }));
}