@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
160 lines (159 loc) • 7.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: Object.getOwnPropertyDescriptor(all, name).get
});
}
_export(exports, {
get createItemRenderers () {
return createItemRenderers;
},
get mapItemsToComponents () {
return mapItemsToComponents;
}
});
var _object_spread = require("@swc/helpers/_/_object_spread");
var _jsxruntime = require("react/jsx-runtime");
var _sortable = require("@dnd-kit/sortable");
var _utilities = require("@dnd-kit/utilities");
var _core = require("@mantine/core");
var _DragHandle = require("./DragHandle.js");
var _RemoveButton = require("./RemoveButton.js");
var createItemRenderers = function createItemRenderers() {
/**
* Draggable item/row renderer with drag and drop functionality
*/ var DraggableItem = function DraggableItem(props) {
var item = props.item, index = props.index, id = props.id, columns = props.columns, onRemove = props.onRemove, removable = props.removable, disabled = props.disabled, readOnly = props.readOnly, classes = props.classes, config = props.config;
var _useSortable = (0, _sortable.useSortable)({
id: id
}), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging, setActivatorNodeRef = _useSortable.setActivatorNodeRef;
var cellContext = {
removable: removable,
draggable: true,
disabled: disabled,
readOnly: readOnly,
onRemove: onRemove
};
var dragHandleProps = {
setActivatorNodeRef: setActivatorNodeRef,
listeners: listeners,
attributes: attributes
};
// Use renderDraggableContent if provided (integrates drag handle into content)
if (config.renderDraggableContent) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
ref: setNodeRef,
"data-testid": "item-".concat(id),
className: classes[config.containerSelector],
style: transform ? {
transform: _utilities.CSS.Transform.toString(transform),
transition: 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__*/ (0, _jsxruntime.jsxs)(_core.Box, {
ref: setNodeRef,
"data-testid": "item-".concat(id),
className: classes[config.containerSelector],
style: transform ? {
transform: _utilities.CSS.Transform.toString(transform),
transition: transition
} : undefined,
"data-isdragging": isDragging,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_DragHandle.DragHandle, {
setActivatorNodeRef: setActivatorNodeRef,
listeners: listeners,
attributes: attributes
}),
config.renderContent(item, index, columns, cellContext, classes),
config.inlineControls && /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
removable: removable,
onRemove: onRemove
})
]
});
};
/**
* Static (non-draggable) item/row renderer
*/ var StaticItem = function StaticItem(props) {
var item = props.item, index = props.index, id = props.id, columns = props.columns, onRemove = props.onRemove, removable = props.removable, disabled = props.disabled, readOnly = props.readOnly, classes = props.classes, config = props.config;
var cellContext = {
removable: removable,
draggable: false,
disabled: disabled,
readOnly: readOnly,
onRemove: onRemove
};
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
"data-testid": "item-".concat(id),
className: classes[config.containerSelector],
children: [
config.renderContent(item, index, columns, cellContext, classes),
config.inlineControls && /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
removable: removable,
onRemove: onRemove
})
]
});
};
/**
* Disabled item/row renderer (no drag, no remove)
*/ var DisabledItem = function DisabledItem(props) {
var item = props.item, index = props.index, id = props.id, columns = props.columns, disabled = props.disabled, readOnly = props.readOnly, classes = props.classes, config = props.config;
var cellContext = {
removable: false,
draggable: false,
disabled: disabled,
readOnly: readOnly
};
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
"data-testid": "item-".concat(id),
className: classes[config.containerSelector],
children: config.renderContent(item, index, columns, cellContext, classes)
});
};
return {
DraggableItem: DraggableItem,
StaticItem: StaticItem,
DisabledItem: DisabledItem
};
};
var mapItemsToComponents = function mapItemsToComponents(items, renderers, config, classes, options) {
var getItemId = options.getItemId, onRemove = options.onRemove, removable = options.removable, draggable = options.draggable, disabled = options.disabled, readOnly = options.readOnly, columns = options.columns;
var DraggableItem = renderers.DraggableItem, StaticItem = renderers.StaticItem, DisabledItem = renderers.DisabledItem;
return items.map(function(item, index) {
var _ref;
var id = (_ref = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item, index)) !== null && _ref !== void 0 ? _ref : String(index);
var itemProps = {
item: item,
index: index,
id: id,
columns: columns,
onRemove: onRemove ? function() {
return onRemove(index);
} : undefined,
removable: removable,
draggable: draggable,
disabled: disabled,
readOnly: readOnly,
classes: classes,
config: config
};
if (disabled) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(DisabledItem, _object_spread._({}, itemProps), id);
}
if (draggable) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(DraggableItem, _object_spread._({}, itemProps), id);
}
return /*#__PURE__*/ (0, _jsxruntime.jsx)(StaticItem, _object_spread._({}, itemProps), id);
});
};
//# sourceMappingURL=itemRenderer.js.map