@datalayer/primer-rjsf/lib/primer/ArrayFieldTemplate/ArrayFieldTemplate.js

React JSON Schema Form (RJSF) for Primer

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from "@primer/react";
import { getTemplate, getUiOptions, } from "@rjsf/utils";
/** 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, 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;
    return (_jsxs(Box, { p: 3, sx: { display: 'flex', width: '100%', flexFlow: 'row wrap', borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default', borderRadius: 2 }, children: [_jsx(ArrayFieldTitleTemplate, { idSchema: idSchema, title: uiOptions.title || title, schema: schema, uiSchema: uiSchema, required: required, registry: registry }), _jsx(ArrayFieldDescriptionTemplate, { idSchema: idSchema, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry }), _jsxs(Box, { sx: { display: 'flex', width: '100%', flexFlow: 'row wrap' }, children: [items &&
                        items.map(({ key, ...itemProps }) => (_jsx(ArrayFieldItemTemplate, { ...itemProps }, key))), canAdd && (_jsx(Box, { sx: { display: 'flex', width: '100%', flexFlow: 'row wrap' }, justifyContent: "flex-end", children: _jsx(Box, { sx: { flexBasis: 0, flexGrow: 1, maxWidth: '100%' }, children: _jsx(Box, { mt: 2, children: _jsx(AddButton, { className: "array-item-add", onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }) }))] }, `array-item-list-${idSchema.$id}`)] }));
}