ar-design
Version:
AR Design is a (react | nextjs) ui library.
87 lines (86 loc) • 4.08 kB
JavaScript
"use client";
import React, { useEffect, useRef } from "react";
import "../../../assets/css/components/data-display/dnd/dnd.css";
const DnD = function ({ data, renderItem, onChange }) {
// refs
const _arDnD = useRef(null);
const _dragItem = useRef();
useEffect(() => {
if (!_arDnD.current || data.length === 0)
return;
_arDnD.current.childNodes.forEach((item) => {
const targetItem = item;
// Events
targetItem.ondragstart = (event) => {
const dragItem = event.currentTarget;
_dragItem.current = dragItem;
dragItem.classList.add("drag-item");
// Korumaya başla
if (_arDnD.current) {
_arDnD.current.childNodes.forEach((item) => {
const firewall = document.createElement("div");
firewall.setAttribute("data-id", "ar-firewall");
firewall.style.position = "absolute";
firewall.style.inset = "0";
item.appendChild(firewall);
});
}
};
targetItem.ondragover = (event) => {
event.preventDefault();
const overItem = event.currentTarget;
const rect = overItem.getBoundingClientRect();
if (rect.top < 250)
window.scrollBy(0, -20);
if (rect.bottom > window.innerHeight - 150)
window.scrollBy(0, 20);
if (!overItem.classList.contains("over-item")) {
overItem.classList.add("over-item");
}
};
targetItem.ondragleave = (event) => {
const leaveItem = event.currentTarget;
leaveItem.classList.remove("over-item");
};
targetItem.ondrop = (event) => {
event.preventDefault();
const dropItem = event.currentTarget;
// Cleaner...
dropItem.classList.remove("over-item");
const nodes = document.querySelectorAll("[data-id='ar-firewall']");
nodes.forEach((node) => node.remove());
if (_dragItem.current !== dropItem) {
if (_arDnD.current && _dragItem.current) {
const dragItemIndex = [..._arDnD.current.children].indexOf(_dragItem.current);
const dropItemIndex = [..._arDnD.current.children].indexOf(dropItem);
if (dragItemIndex < dropItemIndex) {
// Render Order
_arDnD.current.insertBefore(_dragItem.current, dropItem.nextSibling);
}
else {
// Render Order
_arDnD.current.insertBefore(_dragItem.current, dropItem);
}
// Data Order
data.splice(dropItemIndex, 0, data.splice(dragItemIndex, 1)[0]);
}
onChange(data);
}
};
targetItem.ondragend = (event) => {
const item = event.currentTarget;
item.classList.remove("drag-item");
item.classList.add("end-item");
setTimeout(() => item.classList.remove("end-item"), 1000);
};
});
_arDnD.current.ondragover = (event) => event.preventDefault();
}, [data]);
return (React.createElement("div", { ref: _arDnD, className: "ar-dnd" }, data.map((item, index) => (React.createElement("div", { key: index, draggable: true },
React.createElement("div", { className: "move" },
React.createElement("span", null),
React.createElement("span", null),
React.createElement("span", null)),
React.createElement("div", { className: "content" }, renderItem(item, index)))))));
};
export default DnD;