infinity-forge
Version:
78 lines • 4.4 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DragAndDropList = DragAndDropList;
exports.SortableItem = SortableItem;
var jsx_runtime_1 = require("react/jsx-runtime");
var core_1 = require("@dnd-kit/core");
var sortable_1 = require("@dnd-kit/sortable");
var modifiers_1 = require("@dnd-kit/modifiers");
var utilities_1 = require("@dnd-kit/utilities");
function DragAndDropList(_a) {
var items = _a.items, onReorder = _a.onReorder, renderItem = _a.renderItem, getItemId = _a.getItemId, _b = _a.maxItemWidth, maxItemWidth = _b === void 0 ? 290 : _b, gridColumns = _a.gridColumns;
var sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, {
activationConstraint: { distance: 15 },
}));
var itemMinWidth = "min(100%, ".concat(typeof maxItemWidth === 'number' ? "".concat(maxItemWidth, "px") : maxItemWidth, ")");
var gridTemplateColumns = "repeat(".concat(gridColumns || 'auto-fit', ", minmax(").concat(itemMinWidth, ", 1fr))");
function arrayMove(array, from, to) {
var newArray = __spreadArray([], array, true);
if (from < 0 || from >= newArray.length || to < 0 || to >= newArray.length) {
console.warn('Índices fora do intervalo');
return newArray;
}
var movedItem = newArray.splice(from, 1)[0];
newArray.splice(to, 0, movedItem);
return newArray;
}
function handleDragEnd(event) {
var active = event.active, over = event.over;
if (!over || active.id === over.id)
return;
var oldIndex = items.findIndex(function (item) { return getItemId(item) === String(active.id); });
var newIndex = items.findIndex(function (item) { return getItemId(item) === String(over.id); });
if (oldIndex !== -1 && newIndex !== -1) {
var newItems = arrayMove(items, oldIndex, newIndex);
onReorder(newItems);
}
}
return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, modifiers: [modifiers_1.restrictToParentElement], children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map(getItemId), strategy: sortable_1.rectSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { style: {
display: 'grid',
gridTemplateColumns: gridTemplateColumns,
gap: '16px',
width: '100%',
overflow: 'hidden',
}, children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(SortableItem, { id: getItemId(item), children: function (provided) { return renderItem(item, index, provided); } }, getItemId(item))); }) }) }) }));
}
function SortableItem(_a) {
var id = _a.id, children = _a.children;
var _b = (0, sortable_1.useSortable)({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition, isDragging = _b.isDragging;
var style = {
transform: utilities_1.CSS.Transform.toString(transform),
transition: transition,
opacity: isDragging ? 0.5 : 1,
width: '100%',
cursor: 'grab',
};
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: setNodeRef, style: style }, attributes, listeners, { children: children({ attributes: attributes, listeners: listeners, setNodeRef: setNodeRef, transform: transform, transition: transition, isDragging: isDragging }) })));
}
//# sourceMappingURL=index.js.map