@rjsf/antd/lib/templates/ArrayFieldTemplate/index.js

Ant Design theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getTemplate, getUiOptions, } from '@rjsf/utils';
import classNames from 'classnames';
import { Col, Row, ConfigProvider } from 'antd';
import { useContext } from 'react';
const DESCRIPTION_COL_STYLE = {
    paddingBottom: '8px',
};
/** 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, className, disabled, formContext, idSchema, items, onAddClick, readonly, registry, required, schema, title, uiSchema, } = 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;
    const { labelAlign = 'right', rowGutter = 24 } = formContext;
    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
    const prefixCls = getPrefixCls('form');
    const labelClsBasic = `${prefixCls}-item-label`;
    const labelColClassName = classNames(labelClsBasic, labelAlign === 'left' && `${labelClsBasic}-left`
    // labelCol.className,
    );
    return (_jsx("fieldset", { className: className, id: idSchema.$id, children: _jsxs(Row, { gutter: rowGutter, children: [(uiOptions.title || title) && (_jsx(Col, { className: labelColClassName, span: 24, children: _jsx(ArrayFieldTitleTemplate, { idSchema: idSchema, required: required, title: uiOptions.title || title, schema: schema, uiSchema: uiSchema, registry: registry }) })), (uiOptions.description || schema.description) && (_jsx(Col, { span: 24, style: DESCRIPTION_COL_STYLE, children: _jsx(ArrayFieldDescriptionTemplate, { description: uiOptions.description || schema.description, idSchema: idSchema, schema: schema, uiSchema: uiSchema, registry: registry }) })), _jsx(Col, { className: 'row array-item-list', span: 24, children: items &&
                        items.map(({ key, ...itemProps }) => (_jsx(ArrayFieldItemTemplate, { ...itemProps }, key))) }), canAdd && (_jsx(Col, { span: 24, children: _jsx(Row, { gutter: rowGutter, justify: 'end', children: _jsx(Col, { flex: '192px', children: _jsx(AddButton, { className: 'array-item-add', disabled: disabled || readonly, onClick: onAddClick, uiSchema: uiSchema, registry: registry }) }) }) }))] }) }));
}
//# sourceMappingURL=index.js.map