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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Group, Box, rem } from '@mantine/core';
import { Draggable } from '@hello-pangea/dnd';
import { IconGripVertical } from '@tabler/icons-react';
import classes from './ArrayFieldTemplate.module.css';
import { useId } from 'react';
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
 *
 * @param props - The `ArrayFieldTemplateItemType` props for the component
 */
export default function ArrayFieldItemTemplate(props) {
    const { children, className, disabled, index, readonly, orderable, removable, registry, uiSchema, onDropIndexClick } = props;
    const isDraggable = !disabled && !readonly && orderable;
    const key = useId();
    const { RemoveButton } = registry.templates.ButtonTemplates;
    return (_jsx(Draggable, { index: index, draggableId: key, isDragDisabled: !isDraggable, children: (provided) => (_jsx(Box, { ref: provided.innerRef, ...provided.draggableProps, className: `armt-template-arrayfielditem ${className}`, children: _jsxs(Group, { style: { flexGrow: 1 }, gap: 0, children: [isDraggable ? (_jsx("div", { ...provided.dragHandleProps, className: classes.dragHandle, children: _jsx(IconGripVertical, { style: { width: rem(18), height: rem(18) }, stroke: 1.5 }) })) : removable ? (_jsx(RemoveButton, { className: 'armt-template-afit-remove', disabled: disabled || readonly, onClick: onDropIndexClick(index), uiSchema: uiSchema, registry: registry })) : null, _jsx(Box, { style: { flexGrow: 1 }, children: children })] }) })) }, key));
}
//# sourceMappingURL=ArrayFieldItemTemplate.js.map