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

React JSON Schema Form (RJSF) for Primer

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box } from "@primer/react";
import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, } from "@rjsf/utils";
/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
 * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
 * the properties.
 *
 * @param props - The `ObjectFieldTemplateProps` for this component
 */
export default function ObjectFieldTemplate(props) {
    const { description, title, properties, required, disabled, readonly, uiSchema, idSchema, schema, formData, onAddClick, registry, } = props;
    const uiOptions = getUiOptions(uiSchema);
    const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, uiOptions);
    const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions);
    // Button templates are not overridden in the uiSchema
    const { ButtonTemplates: { AddButton }, } = registry.templates;
    return (_jsxs(_Fragment, { children: [(uiOptions.title || title) && (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), (uiOptions.description || description) && (_jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: uiOptions.description || description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs(Box, { sx: { display: 'flex', width: '100%', flexDirection: 'column', flexFlow: 'row wrap' }, style: { marginTop: "10px" }, children: [properties.map((element, index) => 
                    // Remove the <Grid> if the inner element is hidden as the <Grid>
                    // itself would otherwise still take up space.
                    element.hidden ? (element.content) : (_jsx(Box, { sx: { flexBasis: '100%', flexGrow: 0, maxWidth: '100%' }, mb: 1, children: element.content }, index))), canExpand(schema, uiSchema, formData) && (_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(AddButton, { className: "object-property-expand", onClick: (e) => {
                                    e.preventDefault();
                                    onAddClick(schema)();
                                }, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }))] })] }));
}