@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
150 lines (149 loc) • 5.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Box } from '@mantine/core';
import { DragHandle } from './DragHandle.js';
import { RemoveButton } from './RemoveButton.js';
/**
* Creates a set of item renderers (draggable, static, disabled) for a layout.
* This eliminates the duplication of three nearly identical component variants.
* The renderers are stable function references that don't capture variables in closures.
*/ export const createItemRenderers = ()=>{
/**
* Draggable item/row renderer with drag and drop functionality
*/ const DraggableItem = (props)=>{
const { item, index, id, columns, onRemove, removable, disabled, readOnly, classes, config } = props;
const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
id
});
const cellContext = {
removable,
draggable: true,
disabled,
readOnly,
onRemove
};
const dragHandleProps = {
setActivatorNodeRef,
listeners,
attributes
};
// Use renderDraggableContent if provided (integrates drag handle into content)
if (config.renderDraggableContent) {
return /*#__PURE__*/ _jsx(Box, {
ref: setNodeRef,
"data-testid": `item-${id}`,
className: classes[config.containerSelector],
style: transform ? {
transform: CSS.Transform.toString(transform),
transition
} : undefined,
"data-isdragging": isDragging,
children: config.renderDraggableContent(item, index, columns, cellContext, classes, dragHandleProps)
});
}
// Default behavior: inline drag handle + content + remove button (used by horizontal layout)
return /*#__PURE__*/ _jsxs(Box, {
ref: setNodeRef,
"data-testid": `item-${id}`,
className: classes[config.containerSelector],
style: transform ? {
transform: CSS.Transform.toString(transform),
transition
} : undefined,
"data-isdragging": isDragging,
children: [
/*#__PURE__*/ _jsx(DragHandle, {
setActivatorNodeRef: setActivatorNodeRef,
listeners: listeners,
attributes: attributes
}),
config.renderContent(item, index, columns, cellContext, classes),
config.inlineControls && /*#__PURE__*/ _jsx(RemoveButton, {
removable: removable,
onRemove: onRemove
})
]
});
};
/**
* Static (non-draggable) item/row renderer
*/ const StaticItem = (props)=>{
const { item, index, id, columns, onRemove, removable, disabled, readOnly, classes, config } = props;
const cellContext = {
removable,
draggable: false,
disabled,
readOnly,
onRemove
};
return /*#__PURE__*/ _jsxs(Box, {
"data-testid": `item-${id}`,
className: classes[config.containerSelector],
children: [
config.renderContent(item, index, columns, cellContext, classes),
config.inlineControls && /*#__PURE__*/ _jsx(RemoveButton, {
removable: removable,
onRemove: onRemove
})
]
});
};
/**
* Disabled item/row renderer (no drag, no remove)
*/ const DisabledItem = (props)=>{
const { item, index, id, columns, disabled, readOnly, classes, config } = props;
const cellContext = {
removable: false,
draggable: false,
disabled,
readOnly
};
return /*#__PURE__*/ _jsx(Box, {
"data-testid": `item-${id}`,
className: classes[config.containerSelector],
children: config.renderContent(item, index, columns, cellContext, classes)
});
};
return {
DraggableItem,
StaticItem,
DisabledItem
};
};
/**
* Maps items to their appropriate renderer components based on state.
*/ export const mapItemsToComponents = (items, renderers, config, classes, options)=>{
const { getItemId, onRemove, removable, draggable, disabled, readOnly, columns } = options;
const { DraggableItem, StaticItem, DisabledItem } = renderers;
return items.map((item, index)=>{
const id = getItemId?.(item, index) ?? String(index);
const itemProps = {
item,
index,
id,
columns,
onRemove: onRemove ? ()=>onRemove(index) : undefined,
removable,
draggable,
disabled,
readOnly,
classes,
config
};
if (disabled) {
return /*#__PURE__*/ _jsx(DisabledItem, {
...itemProps
}, id);
}
if (draggable) {
return /*#__PURE__*/ _jsx(DraggableItem, {
...itemProps
}, id);
}
return /*#__PURE__*/ _jsx(StaticItem, {
...itemProps
}, id);
});
};
//# sourceMappingURL=itemRenderer.js.map