@teknim/rjsf-mantine
Version:
Mantine theme, fields and widgets for react-jsonschema-form
12 lines • 1.86 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Flex, Group } from '@mantine/core';
/** 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 { disabled, className, hasCopy, hasMoveDown, hasMoveUp, hasRemove, hasToolbar, index, onCopyIndexClick, onDropIndexClick, onReorderClick, readonly, uiSchema, registry, children, } = props;
const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
return (_jsx(Box, { className: className || 'array-item', mb: 'xs', children: _jsxs(Flex, { gap: 'xs', align: 'end', justify: 'center', children: [_jsx(Box, { w: '100%', children: children }), hasToolbar && (_jsxs(Group, { wrap: 'nowrap', gap: 2, children: [(hasMoveUp || hasMoveDown) && (_jsx(MoveUpButton, { iconType: 'sm', className: 'array-item-move-up', disabled: disabled || readonly || !hasMoveUp, onClick: onReorderClick(index, index - 1), uiSchema: uiSchema, registry: registry })), (hasMoveUp || hasMoveDown) && (_jsx(MoveDownButton, { iconType: 'sm', className: 'array-item-move-down', disabled: disabled || readonly || !hasMoveDown, onClick: onReorderClick(index, index + 1), uiSchema: uiSchema, registry: registry })), hasCopy && (_jsx(CopyButton, { iconType: 'sm', className: 'array-item-copy', disabled: disabled || readonly, onClick: onCopyIndexClick(index), uiSchema: uiSchema, registry: registry })), hasRemove && (_jsx(RemoveButton, { iconType: 'sm', className: 'array-item-remove', disabled: disabled || readonly, onClick: onDropIndexClick(index), uiSchema: uiSchema, registry: registry }))] }))] }) }, `array-item-${index}`));
}
//# sourceMappingURL=ArrayFieldItemTemplate.js.map