@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
213 lines (212 loc) • 8.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DraggableHeader = DraggableHeader;
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_material_1 = require("@mui/icons-material");
const material_1 = require("@mui/material");
const react_table_1 = require("@tanstack/react-table");
const react_1 = require("react");
const slot_helpers_1 = require("../../utils/slot-helpers");
function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, }) {
const [isDragging, setIsDragging] = (0, react_1.useState)(false);
const [dragOver, setDragOver] = (0, react_1.useState)(false);
const autoScrollIntervalRef = (0, react_1.useRef)(null);
const dragStartPositionRef = (0, react_1.useRef)(null);
const headerElementRef = (0, react_1.useRef)(null);
const SortIconAscSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'sortIconAsc', icons_material_1.ArrowUpwardOutlined);
const SortIconDescSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'sortIconDesc', icons_material_1.ArrowDownwardOutlined);
const AUTO_SCROLL_THRESHOLD = 50;
const AUTO_SCROLL_SPEED = 10;
const AUTO_SCROLL_INTERVAL = 16;
const findScrollableContainer = (0, react_1.useCallback)((element) => {
let searchElement = element;
if (!searchElement) {
if (headerElementRef.current) {
searchElement = headerElementRef.current.closest('table');
}
}
if (!searchElement) {
const tables = Array.from(document.querySelectorAll('table'));
for (const table of tables) {
const headerExists = table.querySelector('th');
if (headerExists) {
searchElement = table;
break;
}
}
}
if (!searchElement) {
searchElement = document.querySelector('table');
}
if (!searchElement)
return null;
let container = searchElement;
while (container && container !== document.body) {
const styles = window.getComputedStyle(container);
if (styles.overflowX === 'auto' || styles.overflowX === 'scroll') {
return container;
}
container = container.parentElement;
}
return null;
}, []);
const startAutoScroll = (0, react_1.useCallback)((direction) => {
if (autoScrollIntervalRef.current) {
clearInterval(autoScrollIntervalRef.current);
}
const container = findScrollableContainer();
if (!container)
return;
autoScrollIntervalRef.current = setInterval(() => {
const scrollAmount = direction === 'left' ? -AUTO_SCROLL_SPEED : AUTO_SCROLL_SPEED;
const newScrollLeft = container.scrollLeft + scrollAmount;
if (direction === 'left' && newScrollLeft <= 0) {
container.scrollLeft = 0;
clearInterval(autoScrollIntervalRef.current);
autoScrollIntervalRef.current = null;
}
else if (direction === 'right' && newScrollLeft >= container.scrollWidth - container.clientWidth) {
container.scrollLeft = container.scrollWidth - container.clientWidth;
clearInterval(autoScrollIntervalRef.current);
autoScrollIntervalRef.current = null;
}
else {
container.scrollLeft = newScrollLeft;
}
}, AUTO_SCROLL_INTERVAL);
}, [findScrollableContainer]);
const stopAutoScroll = (0, react_1.useCallback)(() => {
if (autoScrollIntervalRef.current) {
clearInterval(autoScrollIntervalRef.current);
autoScrollIntervalRef.current = null;
}
}, []);
const checkAutoScroll = (0, react_1.useCallback)((clientX) => {
const container = findScrollableContainer();
if (!container) {
return;
}
const rect = container.getBoundingClientRect();
const distanceFromLeft = clientX - rect.left;
const distanceFromRight = rect.right - clientX;
stopAutoScroll();
if (distanceFromLeft < AUTO_SCROLL_THRESHOLD && container.scrollLeft > 0) {
startAutoScroll('left');
}
else if (distanceFromRight < AUTO_SCROLL_THRESHOLD &&
container.scrollLeft < container.scrollWidth - container.clientWidth) {
startAutoScroll('right');
}
}, [
findScrollableContainer,
startAutoScroll,
stopAutoScroll,
]);
const handleDragStart = (e) => {
if (!draggable)
return;
setIsDragging(true);
dragStartPositionRef.current = {
x: e.clientX,
y: e.clientY,
};
e.dataTransfer.setData('text/plain', header.id);
e.dataTransfer.effectAllowed = 'move';
};
const handleDrag = (0, react_1.useCallback)((e) => {
if (!isDragging || !draggable)
return;
if (e.clientX > 0 && e.clientY > 0) {
checkAutoScroll(e.clientX);
}
}, [
isDragging,
draggable,
checkAutoScroll,
]);
const getSortIcon = () => {
if (!enableSorting)
return null;
const sortDirection = header.column.getIsSorted();
if (sortDirection === 'asc') {
return ((0, jsx_runtime_1.jsx)(SortIconAscSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconAsc)));
}
if (sortDirection === 'desc') {
return ((0, jsx_runtime_1.jsx)(SortIconDescSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconDesc)));
}
return null;
};
const handleDragEnd = () => {
setIsDragging(false);
setDragOver(false);
stopAutoScroll();
dragStartPositionRef.current = null;
};
const handleDragOver = (e) => {
if (!draggable)
return;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
setDragOver(true);
checkAutoScroll(e.clientX);
};
const handleDragLeave = () => {
setDragOver(false);
};
const handleDrop = (e) => {
if (!draggable)
return;
e.preventDefault();
const draggedColumnId = e.dataTransfer.getData('text/plain');
if (draggedColumnId !== header.id && onColumnReorder) {
onColumnReorder(draggedColumnId, header.id);
}
setDragOver(false);
stopAutoScroll();
};
const handleSort = () => {
if (!enableSorting || !header.column.getCanSort())
return;
const currentSort = header.column.getIsSorted();
if (currentSort === false) {
header.column.toggleSorting(false);
}
else if (currentSort === 'asc') {
header.column.toggleSorting(true);
}
else {
header.column.clearSorting();
}
};
const getCursor = () => {
if (draggable)
return 'grab';
if (enableSorting && header.column.getCanSort())
return 'pointer';
return 'default';
};
if (!draggable && !enableSorting) {
return (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext());
}
return ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: headerElementRef, sx: {
display: 'flex',
alignItems: 'center',
gap: 1,
cursor: getCursor(),
userSelect: 'none',
opacity: isDragging ? 0.5 : 1,
backgroundColor: dragOver ? 'rgba(25, 118, 210, 0.08)' : 'transparent',
borderLeft: dragOver ? '2px solid #1976d2' : 'none',
padding: dragOver ? '0 0 0 -2px' : '0',
width: '100%',
height: '100%',
'&:active': {
cursor: draggable ? 'grabbing' : 'pointer',
},
}, draggable: draggable, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: enableSorting ? handleSort : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
flex: 1,
display: 'flex',
alignItems: 'center',
gap: 1,
}, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
}