@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/hooks/useRowReorder.ts

@@ -1,8 +1,14 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import type { GridRowId, GridRowModel, GridRowOrderChangeParams } from '../types';
+import { ROW_DRAG_MIME, hasDragToken, onNativeDragEnd, setDragToken } from '../utils/dragData';
 
 export interface UseRowReorderProps<R extends GridRowModel = GridRowModel> {
     onRowOrderChange?: (params: GridRowOrderChangeParams<R>) => void;
+    /**
+     * The consumer's rows, in the order the consumer gave them (not the sorted, filtered or
+     * paginated view). `oldIndex` / `targetIndex` are positions in this array, and only rows in it
+     * can be dragged or dropped on, so grid-made rows (group rows, generated tree parents) cannot.
+     */
     rows: R[];
     getRowId?: (row: R) => GridRowId;
     rowReordering?: boolean;
@@ -11,6 +17,8 @@ export interface UseRowReorderProps<R extends GridRowModel = GridRowModel> {
 export interface UseRowReorderReturn {
     draggedRowId: GridRowId | null;
     dragOverRowId: GridRowId | null;
+    /** Whether the row with this id can be dragged and dropped on. */
+    canReorderRow: (id: GridRowId) => boolean;
     onDragStart: ((id: GridRowId) => (event: React.DragEvent) => void) | undefined;
     onDragOver: ((id: GridRowId) => (event: React.DragEvent) => void) | undefined;
     onDragEnd: (() => void) | undefined;
@@ -23,58 +31,81 @@ export function useRowReorder<R extends GridRowModel = GridRowModel>(
     const { onRowOrderChange, rows, getRowId, rowReordering = false } = props;
     const [draggedRowId, setDraggedRowId] = useState<GridRowId | null>(null);
     const [dragOverRowId, setDragOverRowId] = useState<GridRowId | null>(null);
+    const detachDragEndRef = useRef<() => void>(() => {});
 
-    const getRowIdInternal = useCallback((row: R) => {
-        return getRowId ? getRowId(row) : row.id;
-    }, [getRowId]);
+    const indexById = useMemo(() => {
+        const map = new Map<GridRowId, number>();
+        rows.forEach((row, index) => map.set(getRowId ? getRowId(row) : row.id, index));
+        return map;
+    }, [rows, getRowId]);
+
+    const canReorderRow = useCallback((id: GridRowId) => indexById.has(id), [indexById]);
+
+    const handleDragEnd = useCallback(() => {
+        detachDragEndRef.current();
+        detachDragEndRef.current = () => {};
+        setDraggedRowId(null);
+        setDragOverRowId(null);
+    }, []);
+
+    useEffect(() => () => detachDragEndRef.current(), []);
 
     const handleDragStart = useCallback((id: GridRowId) => (event: React.DragEvent) => {
         if (!rowReordering) return;
+        if (!indexById.has(id)) {
+            event.preventDefault();
+            return;
+        }
+        detachDragEndRef.current();
+        // Ends the drag even if the source row unmounts before the browser's dragend.
+        detachDragEndRef.current = onNativeDragEnd(event.currentTarget, handleDragEnd);
         setDraggedRowId(id);
-        event.dataTransfer.effectAllowed = 'move';
-
-    }, [rowReordering]);
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            setDragToken(event, ROW_DRAG_MIME, String(id));
+        }
+    }, [rowReordering, indexById, handleDragEnd]);
 
     const handleDragOver = useCallback((id: GridRowId) => (event: React.DragEvent) => {
-        if (!rowReordering || !draggedRowId) return;
-        event.preventDefault(); 
-        event.dataTransfer.dropEffect = 'move';
+        if (!rowReordering || draggedRowId === null) return;
+        if (!hasDragToken(event, ROW_DRAG_MIME)) {
+            // Some other drag (a file, text, a column): any row drag we remember is over.
+            handleDragEnd();
+            return;
+        }
+        if (!indexById.has(id)) return;
+        event.preventDefault();
+        if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
 
         if (dragOverRowId !== id) {
             setDragOverRowId(id);
         }
-    }, [rowReordering, draggedRowId, dragOverRowId]);
-
-    const handleDragEnd = useCallback(() => {
-        setDraggedRowId(null);
-        setDragOverRowId(null);
-    }, []);
+    }, [rowReordering, draggedRowId, dragOverRowId, indexById, handleDragEnd]);
 
     const handleDrop = useCallback((targetId: GridRowId) => (event: React.DragEvent) => {
         event.preventDefault();
-
-        if (!draggedRowId || !onRowOrderChange) {
-             handleDragEnd();
-             return;
+        if (draggedRowId === null || !hasDragToken(event, ROW_DRAG_MIME)) {
+            handleDragEnd();
+            return;
         }
 
-        const oldIndex = rows.findIndex(r => getRowIdInternal(r) === draggedRowId);
-        const targetIndex = rows.findIndex(r => getRowIdInternal(r) === targetId);
+        const oldIndex = indexById.get(draggedRowId);
+        const targetIndex = indexById.get(targetId);
+        handleDragEnd();
 
-        if (oldIndex !== -1 && targetIndex !== -1 && oldIndex !== targetIndex) {
-             onRowOrderChange({
-                 row: rows[oldIndex],
-                 oldIndex,
-                 targetIndex
-             });
+        if (onRowOrderChange && oldIndex !== undefined && targetIndex !== undefined && oldIndex !== targetIndex) {
+            onRowOrderChange({
+                row: rows[oldIndex],
+                oldIndex,
+                targetIndex
+            });
         }
-
-        handleDragEnd();
-    }, [draggedRowId, onRowOrderChange, rows, getRowIdInternal, handleDragEnd]);
+    }, [draggedRowId, onRowOrderChange, rows, indexById, handleDragEnd]);
 
     return {
         draggedRowId,
         dragOverRowId,
+        canReorderRow,
         onDragStart: rowReordering ? handleDragStart : undefined,
         onDragOver: rowReordering ? handleDragOver : undefined,
         onDragEnd: rowReordering ? handleDragEnd : undefined,