@rjsf/semantic-ui/lib/ArrayFieldTemplate/ArrayFieldTemplate.js

Semantic UI theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getTemplate, getUiOptions, isFixedItems, UI_OPTIONS_KEY, } from '@rjsf/utils';
import { cleanClassNames, getSemanticProps } from '../util.js';
/** 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 { uiSchema, idSchema, canAdd, className, 
    // classNames, This is not part of the type, so it is likely never passed in
    disabled, formContext, items, onAddClick, 
    // options, This is not part of the type, so it is likely never passed in
    readonly, required, schema, title, registry, } = props;
    const semanticProps = getSemanticProps({
        uiSchema,
        formContext,
        defaultSchemaProps: { horizontalButtons: true, wrapItem: false },
    });
    const { horizontalButtons, wrapItem } = semanticProps;
    const semantic = { horizontalButtons, wrapItem };
    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("div", { className: cleanClassNames([className, isFixedItems(schema) ? '' : 'sortable-form-fields']), 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("div", { children: [_jsx("div", { className: 'row array-item-list', children: items &&
                            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }) => {
                                // Merge in the semantic props from the ArrayFieldTemplate into each of the items
                                const mergedUiSchema = {
                                    ...itemUiSchema,
                                    [UI_OPTIONS_KEY]: {
                                        ...itemUiSchema[UI_OPTIONS_KEY],
                                        semantic,
                                    },
                                };
                                return _jsx(ArrayFieldItemTemplate, { ...props, uiSchema: mergedUiSchema }, key);
                            }) }), canAdd && (_jsx("div", { style: {
                            marginTop: '1rem',
                            position: 'relative',
                            textAlign: 'right',
                        }, children: _jsx(AddButton, { onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }))] }, `array-item-list-${idSchema.$id}`)] }));
}
//# sourceMappingURL=ArrayFieldTemplate.js.map