@aokiapp/rjsf-mantine-corporate/lib/templates/ArrayFieldTemplate.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 { getTemplate, getUiOptions, } from '@rjsf/utils';
import { Group, Box, Divider } from '@mantine/core';
import { DragDropContext, Droppable } from '@hello-pangea/dnd';
import { useState } from 'react';
import classes from './ArrayFieldTemplate.module.css';
import { IconCopy, IconTrash } from '@tabler/icons-react';
import ArrayFieldItemTemplate from './ArrayFieldItemTemplate'; // do not use getTemplate here
/** 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) {
    var _a, _b, _c;
    const { canAdd, className, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title, } = props;
    const uiOptions = getUiOptions(uiSchema);
    const ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
    const ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
    // Button templates are not overridden in the uiSchema
    const { ButtonTemplates: { AddButton }, } = registry.templates;
    const _title = uiOptions.title || title;
    const legendNode = (_jsxs(Group, { gap: 'xs', children: [title && (_jsx(ArrayFieldTitleTemplate, { idSchema: idSchema, title: _title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(ArrayFieldDescriptionTemplate, { idSchema: idSchema, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry })] }));
    const orderable = ((_a = uiOptions.orderable) !== null && _a !== void 0 ? _a : false) && !readonly && !disabled;
    const removable = ((_b = uiOptions.removable) !== null && _b !== void 0 ? _b : true) && !readonly && !disabled;
    const copyable = ((_c = uiOptions.copyable) !== null && _c !== void 0 ? _c : false) && !readonly && !disabled;
    const [isDragging, setIsDragging] = useState(false);
    let arrItems;
    if (items && items.length > 0) {
        arrItems = (_jsxs(_Fragment, { children: [_jsx(Divider, { my: 'xs', label: `${_title || '配列'} の先頭`, labelPosition: 'center' }), _jsxs(DragDropContext, { onBeforeCapture: () => setIsDragging(true), onDragEnd: ({ destination, source }) => {
                        setIsDragging(false);
                        if ((destination === null || destination === void 0 ? void 0 : destination.droppableId) === 'array') {
                            // ad hoc solution for calling onReorderClick
                            items[0].onReorderClick(source.index, (destination === null || destination === void 0 ? void 0 : destination.index) || 0)();
                        }
                        else if ((destination === null || destination === void 0 ? void 0 : destination.droppableId) === 'copy') {
                            items[0].onCopyIndexClick(source.index)();
                        }
                        else if ((destination === null || destination === void 0 ? void 0 : destination.droppableId) === 'remove') {
                            items[0].onDropIndexClick(source.index)();
                        }
                    }, children: [_jsx(Droppable, { droppableId: 'array', direction: 'vertical', children: (provided) => (_jsxs("div", { ...provided.droppableProps, ref: provided.innerRef, children: [items.map(({ key, ...itemProps }) => {
                                        return (_jsx(ArrayFieldItemTemplate, { ...itemProps, orderable: orderable, removable: !!removable }, key));
                                    }), provided.placeholder] })) }), items[0].hasToolbar && isDragging && (_jsxs(Group, { m: 'sm', children: [copyable && (_jsx(DropToAction, { icon: _jsx(IconCopy, {}), label: '\u30B3\u30D4\u30FC', className: classes.dropToCopy, droppableId: 'copy' })), removable && (_jsx(DropToAction, { icon: _jsx(IconTrash, {}), label: '\u524A\u9664', className: classes.dropToRemove, droppableId: 'remove' }))] }))] }), _jsx(Divider, { my: 'xs', label: `${_title || '配列'} の末尾`, labelPosition: 'center' })] }));
    }
    else {
        arrItems = _jsx(Divider, { my: 'xs', label: `${_title || '配列'} は空です`, labelPosition: 'center' });
    }
    return (_jsxs(Box, { id: idSchema.$id, style: {
            width: '100%',
        }, className: `armt-template-arrayfield ${className}`, children: [_jsxs(Group, { gap: 'xs', justify: 'space-between', children: [legendNode, canAdd && (_jsx(AddButton, { onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }))] }), arrItems] }));
}
function DropToAction({ icon, label, className, droppableId, }) {
    return (_jsx(Droppable, { droppableId: droppableId, direction: 'horizontal', children: (provided, snapshot) => (_jsxs("div", { className: `${classes.dropToAction} ${className} ${snapshot.isDraggingOver && classes.dtaDraggingOver}`, ...provided.droppableProps, ref: provided.innerRef, children: [_jsx("div", { className: classes.dtaIcon, children: icon }), _jsx("div", { className: classes.dtaLabel, children: label })] })) }));
}
//# sourceMappingURL=ArrayFieldTemplate.js.map