import { useDrop } from 'react-dnd'; export default function useRowDrop(type, index, dropRef, moveRow) { return useDrop({ accept: type, hover(item, monitor) { if (!dropRef.current) { return; } const dragIndex = item.index; const hoverIndex = index; // Don't replace items with themselves if (dragIndex === hoverIndex) { return; } const hoverBoundingRect = dropRef.current.getBoundingClientRect(); const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; const clientOffset = monitor.getClientOffset(); const hoverClientY = clientOffset.y - hoverBoundingRect.top; // Dragging downwards if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { return; } // Dragging upwards if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { return; } moveRow(dragIndex, hoverIndex); // Mutating the state is actually a perf improvement here to avoid regenerating indexes // eslint-disable-next-line no-param-reassign item.index = hoverIndex; }, }); }