funda-ui 4.7.723 → 4.7.735

package/lib/esm/Table/utils/hooks/useTableDraggable.tsx

@@ -31,7 +31,34 @@ const App = () => {
 
  */
 
-import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Performance Optimizations for Large Data Sets:
+ * 
+ * This hook has been optimized to handle large datasets (1000+ rows) efficiently.
+ * Key optimizations include:
+ * 
+ * 1. RequestAnimationFrame for DOM Updates
+ *    - DOM operations are batched within requestAnimationFrame callbacks
+ *    - Browser executes updates before next frame render, reducing visual lag
+ *    - Pending RAF callbacks are cancelled to prevent accumulation
+ * 
+ * 2. Caching Strategy
+ *    - tbodyRef: Cached to avoid repeated DOM queries
+ *    - colCount: Cached to eliminate repeated queries in placeholderGenerator
+ *    - allRowsCache: Cached with time-based invalidation (100ms)
+ * 
+ * 3. Redundant Operation Prevention
+ *    - Tracks last hovered row order (lastOverOrder)
+ *    - Skips placeholder operations when hovering over the same row
+ *    - Reduces unnecessary DOM manipulations during drag
+ * 
+ * 4. Batch DOM Operations
+ *    - removePlaceholder: Uses cached tbodyRef and batch removal
+ *    - handleDragEnd: Uses DocumentFragment for batch DOM updates
+ *    - Map-based lookups instead of repeated querySelector calls
+ */
+import { useState, useEffect, useCallback, useRef } from 'react';
 
 
 import { getTbody, allRows, insertAfter, sortDataByIndex, initOrderProps, initRowColProps } from '../func';
@@ -54,6 +81,28 @@ function useTableDraggable({
 
     // drag & drop
     const [sortData, setSortData] = useState<any[] | undefined>([]);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
+
+    // Performance optimization: cache for drag operations
+    const dragCacheRef = useRef<{
+        draggedObj: any;
+        overObj: any;
+        allRowsCache: any[] | null;
+        lastUpdateTime: number;
+        tbodyRef: any;
+        colCount: number;
+        lastOverOrder: number | null;
+        rafId: number | null;
+    }>({
+        draggedObj: null,
+        overObj: null,
+        allRowsCache: null,
+        lastUpdateTime: 0,
+        tbodyRef: null,
+        colCount: 0,
+        lastOverOrder: null,
+        rafId: null
+    });
 
 
     // ================================================================
@@ -62,33 +111,107 @@ function useTableDraggable({
     let draggedObj: any = null;
     let overObj: any = null;
 
+    // Helper function to filter out cloned elements and get only real rows
+    const getRealRows = (rows: any[]) => {
+        return rows.filter((row: any) => !row.classList.contains('row-obj-clonelast') && !row.classList.contains('row-obj-lastplaceholder'));
+    };
+
     const placeholderGenerator = (trHeight: number) => {
-        const tbodyRef: any = getTbody(spyElement);
-        if (tbodyRef === null || tbodyRef.querySelector('tr') === null) return;
+        // Use cached tbodyRef and colCount for better performance
+        let tbodyRef = dragCacheRef.current.tbodyRef;
+        if (!tbodyRef) {
+            tbodyRef = getTbody(spyElement);
+            dragCacheRef.current.tbodyRef = tbodyRef;
+        }
+        
+        if (tbodyRef === null) return null;
+        
+        
+        // Cache colCount to avoid repeated queries
+        let colCount = dragCacheRef.current.colCount;
+        if (colCount === 0) {
+            const firstRow = tbodyRef.querySelector('tr');
+            if (firstRow === null) return null;
+            colCount = firstRow.children.length;
+            dragCacheRef.current.colCount = colCount;
+        }
 
         // Insert a row at the "index" of the table
         const newRow = document.createElement('tr');
         newRow.className = 'row-placeholder';
         newRow.dataset.placeholder = 'true';
         newRow.style.height = trHeight + 'px';
+        newRow.style.minHeight = trHeight + 'px'; // Ensure minimum height
 
         // Insert a cell in the row at index
         const newCell = newRow.insertCell(0);
-        newCell.colSpan = tbodyRef.querySelector('tr').children.length;
+        newCell.colSpan = colCount;
+        newCell.style.minHeight = trHeight + 'px'; // Ensure cell has minimum height
+        
+        // Use non-breaking space to ensure proper height rendering
+        // Multiple spaces or a placeholder element helps maintain consistent height
+        newCell.innerHTML = '&nbsp;'; // Use &nbsp; instead of regular space for better height consistency
 
-        // Append a text node to the cell
-        const newText = document.createTextNode(' ');
-        newCell.appendChild(newText);
+        return newRow;
+    };
+
+
+    const lastPlaceholderGenerator = (trHeight: number) => {
+        // Use cached tbodyRef and colCount for better performance
+        let tbodyRef = dragCacheRef.current.tbodyRef;
+        if (!tbodyRef) {
+            tbodyRef = getTbody(spyElement);
+            dragCacheRef.current.tbodyRef = tbodyRef;
+        }
+
+        if (tbodyRef === null) return null;
+
+        const curEl = tbodyRef.querySelector('.row-obj-lastplaceholder');
+        if (curEl !== null) return;
+
+
+        // Cache colCount to avoid repeated queries
+        let colCount = dragCacheRef.current.colCount;
+        if (colCount === 0) {
+            const firstRow = tbodyRef.querySelector('tr');
+            if (firstRow === null) return null;
+            colCount = firstRow.children.length;
+            dragCacheRef.current.colCount = colCount;
+        }
+
+        // Create a dedicated last placeholder row that is kept in DOM but hidden by default
+        const newRow = document.createElement('tr');
+        newRow.className = 'row-obj row-obj-lastplaceholder';
+        // NOTE: Do NOT set data-placeholder here, otherwise it will be removed by removePlaceholder
+        newRow.style.height = trHeight + 'px';
+        newRow.style.minHeight = trHeight + 'px';
+        newRow.style.display = 'none';
+
+        const newCell = newRow.insertCell(0);
+        newCell.colSpan = colCount;
+        newCell.style.minHeight = trHeight + 'px';
+        newCell.innerHTML = '&nbsp;';
+
+        // Insert after the last real row (excluding cloned rows)
+        const rows = getRealRows(allRows(spyElement));
+        const lastRealRow = rows.length > 0 ? rows[rows.length - 1] : null;
+        if (lastRealRow && lastRealRow.parentNode === tbodyRef) {
+            insertAfter(newRow, lastRealRow);
+        } else {
+            tbodyRef.appendChild(newRow);
+        }
 
         return newRow;
     };
 
+
+    // An invisible HELPER element used to trigger the touch of the last element
     const lastRowGenerator = (trHeight: number) => {
         const tbodyRef: any = getTbody(spyElement);
         if (tbodyRef === null || tbodyRef.querySelector('tr') === null) return;
 
-        const cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
-        if (cloneEl !== null) return;
+        const curEl = tbodyRef.querySelector('.row-obj-clonelast');
+        if (curEl !== null) return;
 
 
         // Insert a row at the "index" of the table
@@ -96,7 +219,6 @@ function useTableDraggable({
         newRow.className = 'row-obj row-obj-clonelast';
         newRow.dataset.order = allRows(spyElement).length.toString();
         newRow.style.height = trHeight + 'px';
-        newRow.style.display = 'none';
         
 
         // Insert a cell in the row at index
@@ -107,20 +229,33 @@ function useTableDraggable({
         const newText = document.createTextNode(' ');
         newCell.appendChild(newText);
 
+        //
+        lastPlaceholderGenerator(trHeight);
+
         return newRow;
     };
 
 
     const removePlaceholder = () => {
-        const tbodyRef: any = getTbody(spyElement);
+        // Use cached tbodyRef
+        let tbodyRef = dragCacheRef.current.tbodyRef;
+        if (!tbodyRef) {
+            tbodyRef = getTbody(spyElement);
+            dragCacheRef.current.tbodyRef = tbodyRef;
+        }
+        
         if (tbodyRef === null) return;
 
-        // Delete row at the "index" of the table
-        const placeholder = [].slice.call(tbodyRef.querySelectorAll(`[data-placeholder]`));
-        placeholder.forEach((node: any) => {
-            tbodyRef.removeChild(node);
-        });
-
+        // Optimize: use querySelectorAll and remove in batch
+        const placeholders = tbodyRef.querySelectorAll(`[data-placeholder]`);
+        if (placeholders.length > 0) {
+            // Use DocumentFragment for batch removal (though in this case direct removal is fine)
+            placeholders.forEach((node: any) => {
+                if (node.parentNode) {
+                    node.parentNode.removeChild(node);
+                }
+            });
+        }
     };
 
 
@@ -164,46 +299,131 @@ function useTableDraggable({
     };
 
     // events fired on the drop targets
+    // Optimized with requestAnimationFrame, throttling and caching
     const handledragOver = useCallback((e: any) => {
-        const tbodyRef: any = getTbody(spyElement);
-        if (tbodyRef === null) return;
-
+        // Always prevent default in sync code
         e.preventDefault();
-        if (draggedObj === null) return;
-
-        draggedObj.style.display = 'none';
-
+        
+        // Use cached draggedObj and tbodyRef
+        const currentDraggedObj = dragCacheRef.current.draggedObj || draggedObj;
+        if (currentDraggedObj === null) return;
+
+        let tbodyRef = dragCacheRef.current.tbodyRef;
+        if (!tbodyRef) {
+            tbodyRef = getTbody(spyElement);
+            if (tbodyRef === null) return;
+            dragCacheRef.current.tbodyRef = tbodyRef;
+        }
 
+        // Early return for placeholder targets
         if (e.target.classList.contains('row-placeholder')) return;
 
         const itemsWrapper = e.target.parentNode;
-        if (itemsWrapper.classList.contains('row-obj')) {
-            overObj = itemsWrapper;
+        if (!itemsWrapper || !itemsWrapper.classList || !itemsWrapper.classList.contains('row-obj')) {
+            return;
+        }
+
+        // Skip cloned elements - they should not be valid drop targets
+        if (itemsWrapper.classList.contains('row-obj-lastplaceholder')) {
+            return;
+        }
+
+        // Check if we're still over the same row (avoid unnecessary operations)
+        const currentOrder = Number(itemsWrapper.dataset.order);
+        if (dragCacheRef.current.lastOverOrder === currentOrder) {
+            return; // Same target, skip
+        }
+
+        // console.log(' --> overObj: ', itemsWrapper);
+
+        // Use requestAnimationFrame for smoother DOM updates
+        // Cancel previous frame if pending
+        if (dragCacheRef.current.rafId !== null) {
+            cancelAnimationFrame(dragCacheRef.current.rafId);
+        }
+
+        // Store references for use in RAF callback
+        const targetWrapper = itemsWrapper;
+        const targetOrder = currentOrder;
+
+        dragCacheRef.current.rafId = requestAnimationFrame(() => {
+            overObj = targetWrapper;
+            dragCacheRef.current.overObj = targetWrapper;
+            dragCacheRef.current.lastOverOrder = targetOrder;
+
+            currentDraggedObj.style.display = 'none';
             removePlaceholder();
 
-            if (Number(overObj.dataset.order) === allRows(spyElement).length - 1) {
-                tbodyRef.insertBefore(placeholderGenerator((allRows(spyElement).at(-2) as any).clientHeight), overObj);
-            } else {
-                tbodyRef.insertBefore(placeholderGenerator(overObj.clientHeight), overObj);
+
+            // Cache allRows result to avoid multiple queries
+            let cachedRows = dragCacheRef.current.allRowsCache;
+            const now = Date.now();
+            if (!cachedRows || now - dragCacheRef.current.lastUpdateTime > 100) {
+                cachedRows = allRows(spyElement);
+                dragCacheRef.current.allRowsCache = cachedRows;
+                dragCacheRef.current.lastUpdateTime = now;
             }
 
+            // Filter out cloned elements to get real rows count
+            const realRows = getRealRows(cachedRows);
+            const totalRows = realRows.length;
+            const overOrder = Number(overObj.dataset.order);
+            
+            // When hovering over the last real row, use its height for placeholder
+            // Otherwise use the overObj's height
+            const isOverLastRow = overOrder === totalRows - 1 && realRows.length > 0 && realRows[totalRows - 1];
+            const placeholderHeight = isOverLastRow
+                ? realRows[totalRows - 1].clientHeight
+                : overObj.clientHeight;
+
+            const placeholder = placeholderGenerator(placeholderHeight);
+            
+            if (placeholder) {
+                const draggedOrder = Number(currentDraggedObj.dataset.order);
+                //console.log(' --> drag index list: ', draggedOrder, overOrder, totalRows - 1);
+                tbodyRef.insertBefore(placeholder, overObj);
+            }
 
-        }
+            dragCacheRef.current.rafId = null;
+        });
 
-    }, [sortData]);
+    }, [sortData, spyElement]);
 
 
     const handleDragStart = useCallback((e: any) => {
         const tbodyRef: any = getTbody(spyElement);
         if (tbodyRef === null) return;
 
+        setIsDragging(true);
+
         draggedObj = e.currentTarget;
+        // Cache draggedObj and tbodyRef for performance
+        dragCacheRef.current.draggedObj = draggedObj;
+        dragCacheRef.current.tbodyRef = tbodyRef;
+        dragCacheRef.current.lastOverOrder = null; // Reset
+        
         e.dataTransfer.effectAllowed = 'move';
         e.dataTransfer.setData('text/html', draggedObj);
 
         draggedObj.classList.add('dragging');
-        (allRows(spyElement).at(-1) as any).style.setProperty('display', 'table-row', "important");
-
+        
+        // Cache allRows and use cached result
+        const cachedRows = allRows(spyElement);
+        dragCacheRef.current.allRowsCache = cachedRows;
+        dragCacheRef.current.lastUpdateTime = Date.now();
+        
+        // Cache colCount if not already cached
+        if (dragCacheRef.current.colCount === 0) {
+            const firstRow = tbodyRef.querySelector('tr');
+            if (firstRow) {
+                dragCacheRef.current.colCount = firstRow.children.length;
+            }
+        }
+        
+        const lastRow: any = cachedRows[cachedRows.length - 1];
+        if (lastRow && !lastRow.classList.contains('row-obj-lastplaceholder')) {
+            lastRow.style.setProperty('display', 'table-row', "important");
+        }
 
         // callback
         const dragStart: Function = (callback: Function) => {
@@ -212,99 +432,184 @@ function useTableDraggable({
         onRowDrag?.(dragStart, null);
 
 
-        // init clone <tr>
-        // !!! It needs to be put at the end of the code to fix the location of the clone element
-        const cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
-        if (cloneEl !== null) {
-            cloneEl.style.display = 'none';
-        }
-
-
-    }, [handledragOver]);
+    }, [handledragOver, sortData, data, spyElement, onRowDrag]);
 
     const handleDragEnd = useCallback((e: any) => {
         const tbodyRef: any = getTbody(spyElement);
         if (tbodyRef === null) return;
 
-        draggedObj.style.display = 'table-row';
-        removePlaceholder();
+        setIsDragging(false);
 
-        draggedObj.classList.remove('dragging');
+        // Use cached draggedObj if available
+        const currentDraggedObj = dragCacheRef.current.draggedObj || draggedObj;
+        const currentOverObj = dragCacheRef.current.overObj || overObj;
+        
+        if (currentDraggedObj) {
+            currentDraggedObj.style.display = 'table-row';
+            currentDraggedObj.classList.remove('dragging');
+        }
+        
+        removePlaceholder();
         tbodyRef?.classList.remove('drag-trigger-mousedown');
 
+        // Cancel any pending animation frame
+        if (dragCacheRef.current.rafId !== null) {
+            cancelAnimationFrame(dragCacheRef.current.rafId);
+            dragCacheRef.current.rafId = null;
+        }
 
-        if (overObj === null) return;
+        if (currentOverObj === null) {
+            // Reset cache
+            dragCacheRef.current.draggedObj = null;
+            dragCacheRef.current.overObj = null;
+            dragCacheRef.current.allRowsCache = null;
+            dragCacheRef.current.lastOverOrder = null;
+            return;
+        }
 
         // update state
         let curData: number[] = [];
         curData = JSON.parse(JSON.stringify(sortData));
-        let from = Number(draggedObj.dataset.order);
-        let to = Number(overObj.dataset.order);
-        if (from < to) to--;
-
-
-        //sort data
-        const newData: number[] = [];
-
-        // console.log('--> data1:', curData);
+        let from = Number(currentDraggedObj.dataset.order);
+        let to = Number(currentOverObj.dataset.order);
+        
+        // Get real rows to determine the actual last row index
+        const allRowsForLastIndex = allRows(spyElement);
+        const realRows = getRealRows(allRowsForLastIndex);
+        const actualLastRowIndex = realRows.length - 1;
+        
+        // Standard drag-and-drop logic:
+        // When dragging from a lower index to a higher index, we need to decrement 'to'
+        // because removing the element at 'from' causes all subsequent elements to shift left by 1
+        // However, when dragging to the last position, we want to swap with the last element
+        // After removing 'from', if we want to swap with the last element, we should insert
+        // at the position that will result in the dragged element being at the last position
+        if (from < to) {
+            // Special case: dragging to the last position
+            // We want to swap with the last element, so after removing 'from',
+            // we should insert at the new last position (which is curData.length - 1)
+            // Since 'to' is the original last index, and we're removing 'from' (which is < 'to'),
+            // the new last position after removal is still 'to' (no shift because 'from' is before 'to')
+            // Wait, that's not right. If we remove 'from', elements from 'from+1' to 'to' shift left by 1
+            // So 'to' becomes 'to-1'. But we want to insert at the last position, which is 'to-1'
+            // So we should decrement 'to' as normal. But then the element will be at 'to-1', not 'to'
+            // 
+            // Actually, the issue is: when dragging to the last element, we want to SWAP with it
+            // So the dragged element should end up at the last position, and the last element should
+            // end up at the dragged element's original position
+            // 
+            // Let's think step by step with an example: [A, B, C, D, E], from=1 (B), to=4 (E)
+            // We want result: [A, C, D, E, B] (B and E swapped)
+            // Step 1: Remove B -> [A, C, D, E] (indices 0-3)
+            // Step 2: Insert B at position 4 -> [A, C, D, E, B] ✓
+            // So 'to' should be 4 (not decremented) to get the correct result
+            if (to === actualLastRowIndex) {
+                // Don't decrement 'to' when dragging to the last position
+                // This ensures the element is inserted at the last position after removal
+            } else {
+                // Normal case: dragging forward but not to the last position
+                to--;
+            }
+        }
+        // If from >= to, no adjustment needed (dragging backward)
 
+        // Optimize: simplify the sorting logic (the nested loop was inefficient)
         curData.splice(to, 0, curData.splice(from, 1)[0]);
+        const newData: number[] = [...curData]; // Direct copy instead of nested loop
+
+        setSortData(newData);
 
-        for (let i = 0; i < curData.length; i++) {
-            for (let j = 0; j < curData.length; j++) {
+        // Performance optimization: batch DOM updates using a map
+        const table = spyElement.querySelector('table');
+        if (!table) return;
+        
+        const tbody = table.querySelector('tbody');
+        if (!tbody) return;
 
-                if (curData[i] === curData[j]) {
-                    newData.push(curData[j] as never);
+        // Get all rows once and create a map for faster lookups
+        // Support both data-key attribute (user-provided) and data-order fallback
+        const allRowsElements = Array.from(allRows(spyElement));
+        
+        // Create a map: original index (from sortData) -> row element
+        const rowMap = new Map<number, HTMLElement>();
+        allRowsElements.forEach((row: any) => {
+            // First try to use data-key attribute (if user provided it)
+            const dataKey = row.getAttribute('data-key');
+            if (dataKey) {
+                const match = dataKey.match(/row-(\d+)/);
+                if (match) {
+                    const index = Number(match[1]);
+                    rowMap.set(index, row);
+                    return;
                 }
             }
-        }
-
-
-        // console.log("--> data2: ", newData);
-        setSortData(newData);
+            
+            // Fallback: use data-order to match with sortData indices
+            const currentOrder = Number(row.dataset.order);
+            if (sortData && !isNaN(currentOrder) && currentOrder >= 0 && currentOrder < sortData.length) {
+                const originalIndex = sortData[currentOrder];
+                if (originalIndex !== undefined) {
+                    rowMap.set(originalIndex, row);
+                }
+            }
+        });
 
-        // reset data-id in order to sort data
+        // Update order attributes using the map (batch operation)
         newData.forEach((curId: any, order: number) => {
-            const _el = spyElement.querySelector('table').querySelector(`tbody [data-key="row-${curId}"]`);
-            if (_el !== null) _el.dataset.order = order;
-
+            const _el = rowMap.get(curId);
+            if (_el !== null && _el !== undefined) {
+                _el.dataset.order = order.toString();
+            }
         });
 
+        // Performance optimization: Use DocumentFragment to batch DOM updates
+        // NOTE: Keep the special last placeholder row (`row-obj-lastplaceholder`)
+        // out of the main sort, otherwise it may jump to the top after each drag.
+        const lastPlaceholderRow = allRowsElements.find(
+            (row: any) => row.classList && row.classList.contains('row-obj-lastplaceholder')
+        );
 
-        // sort elements
-        const categoryItemsArray = allRows(spyElement);
-        const sorter = (a: any, b: any) => {
-            let txt1 = Number(a.dataset.order),
-                txt2 = Number(b.dataset.order);
+        const rowsToSort = lastPlaceholderRow
+            ? allRowsElements.filter(row => row !== lastPlaceholderRow)
+            : allRowsElements;
 
+        const sorter = (a: any, b: any) => {
+            const txt1 = Number(a.dataset.order);
+            const txt2 = Number(b.dataset.order);
             return txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
-        }
-        const sorted = categoryItemsArray.sort(sorter).reverse();
-        sorted.forEach(e => spyElement.querySelector('table').querySelector('tbody').appendChild(e));
+        };
+        
+        const sorted = [...rowsToSort].sort(sorter).reverse();
 
+        // Ensure the last placeholder row always stays at the bottom
+        if (lastPlaceholderRow) {
+            sorted.push(lastPlaceholderRow);
+        }
+        
+        // Use DocumentFragment to minimize reflows
+        const fragment = document.createDocumentFragment();
+        sorted.forEach(e => fragment.appendChild(e));
+        tbody.appendChild(fragment);
 
         // callback
         const dragEnd: Function = (callback: Function) => {
-            callback.call(null, draggedObj, newData, sortDataByIndex(newData as never, data as never));
+            callback.call(null, currentDraggedObj, newData, sortDataByIndex(newData as never, data as never));
         };
         onRowDrag?.(null, dragEnd);
 
-
-
         // init clone <tr>
         // !!! It needs to be put at the end of the code to fix the location of the clone element
         const _allRows = allRows(spyElement);
-        const cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
-        if (cloneEl !== null) {
-            if (typeof _allRows.at(-1) !== 'undefined') {
-                insertAfter(cloneEl, _allRows.at(-1));
-                cloneEl.style.display = 'none';
-            }
-        }
-   
+        dragCacheRef.current.allRowsCache = _allRows;
+        dragCacheRef.current.lastUpdateTime = Date.now();
+        
 
+        // Reset cache
+        dragCacheRef.current.draggedObj = null;
+        dragCacheRef.current.overObj = null;
+        dragCacheRef.current.lastOverOrder = null;
 
-    }, [sortData]);
+    }, [sortData, spyElement, data, onRowDrag]);
 
 
 
@@ -329,12 +634,15 @@ function useTableDraggable({
     }, [data, enabled, spyElement, ...deps]);
 
     return {
-        handleDragStart,
-        handleDragEnd,
-        handledragOver,
+        isDragging,
+        dragHandlers: {
+            handleDragStart,
+            handleDragOver: handledragOver,
+            handleDragEnd,
+        },
         handleTbodyEnter,
         handleTbodyLeave
-    }
+    };
 }