@aokiapp/rjsf-mantine-corporate/lib/templates/ObjectFieldTemplate.js

Corporational variant of theme, based on @aokiapp/rjsf-mantine-theme

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Group, Box, Collapse, Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { canExpand, descriptionId, titleId, getUiOptions, getTemplate, } from '@rjsf/utils';
import classes from './ObjectFieldTemplate.module.css';
import { IconChevronUp } from '@tabler/icons-react';
/** 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, disabled, formData, idSchema, onAddClick, properties, readonly, registry, required, schema, title, uiSchema, errorSchema, } = props;
    const options = getUiOptions(uiSchema);
    const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
    const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
    // Button templates are not overridden in the uiSchema
    const { ButtonTemplates: { AddButton }, } = registry.templates;
    const [opened, { toggle }] = useDisclosure(true);
    const showLegend = (title || description) && (options === null || options === void 0 ? void 0 : options.hideLegend) !== true;
    const classNames = options.classNames;
    const containError = errorSchema && Object.keys(errorSchema).length > 0;
    const legendInner = (_jsxs(Group, { gap: 'xs', children: [title && (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry }))] }));
    const contentInner = (_jsxs(_Fragment, { children: [_jsx(Box, { className: 'armt-template-objectfield-item', children: properties.map((prop) => prop.content) }), canExpand(schema, uiSchema, formData) && (_jsx(AddButton, { className: 'object-property-expand', onClick: onAddClick(schema), disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }))] }));
    // default setting is uncollapsable
    if (options.collapsable) {
        const legendNode = showLegend ? (_jsxs(Group, { onClick: toggle, justify: 'space-between', wrap: 'nowrap', children: [legendInner, _jsx(IconChevronUp, { size: '1rem' })] })) : null;
        return (_jsxs(Stack, { id: idSchema.$id, role: 'group', gap: 'xs', className: `armt-template-objectfield ${classNames !== null && classNames !== void 0 ? classNames : ''} ${classes.root} ${containError && classes.error}`, children: [legendNode, _jsx(Collapse, { in: opened, className: classes.collapse, children: contentInner })] }));
    }
    else {
        const legendNode = showLegend ? legendInner : null;
        return (_jsxs(Stack, { id: idSchema.$id, role: 'group', gap: 'xs', className: `armt-template-objectfield ${classNames !== null && classNames !== void 0 ? classNames : ''} ${classes.root} ${containError && classes.error}`, children: [legendNode, contentInner] }));
    }
}
//# sourceMappingURL=ObjectFieldTemplate.js.map