funda-ui 4.7.723 → 4.7.735

package/lib/esm/Utils/hooks/useBoundedDrag.tsx

@@ -116,6 +116,7 @@ export interface BoundedDragOptions {
     dragHandleSelector?: string;
     onDragStart?: (index: number) => void;
     onDragOver?: (dragIndex: number | null, dropIndex: number | null) => void;
+    onDragUpdate?: (dragIndex: number | null, dropIndex: number | null) => void;
     onDragEnd?: (dragIndex: number | null, dropIndex: number | null) => void;
 }
 
@@ -127,6 +128,7 @@ export const useBoundedDrag = (options: BoundedDragOptions = {}) => {
         dragHandleSelector = '.custom-draggable-list__handle',
         onDragStart,
         onDragOver,
+        onDragUpdate,
         onDragEnd
     } = options;
 
@@ -134,8 +136,31 @@ export const useBoundedDrag = (options: BoundedDragOptions = {}) => {
     const dragItem = useRef<number | null>(null);
     const dragOverItem = useRef<number | null>(null);
     const dragNode = useRef<HTMLElement | null>(null);
+    const draggedElement = useRef<HTMLElement | null>(null);
+    const boundaryElement = useRef<HTMLElement | null>(null);
     const touchOffset = useRef<TouchOffset>({ x: 0, y: 0 });
     const currentHoverItem = useRef<HTMLElement | null>(null);
+    const rafId = useRef<number | null>(null);
+    const lastUpdateDragIndex = useRef<number | null>(null);
+    const lastUpdateDropIndex = useRef<number | null>(null);
+
+    /**
+     * Performance Note:
+     *
+     * Drag-over events can fire at a very high frequency, especially on touch devices
+     * or when dragging quickly. Directly performing DOM read/write operations in the
+     * event handler (e.g. `getBoundingClientRect`, `classList` changes, style updates)
+     * can easily cause layout thrashing and frame drops when there are many items.
+     *
+     * To mitigate this, we:
+     * - Collect the pointer coordinates synchronously in the event handler.
+     * - Schedule all DOM-intensive work inside `requestAnimationFrame`, so the browser
+     *   batches these operations before the next paint.
+     * - Cancel any pending frame (`cancelAnimationFrame`) before scheduling a new one,
+     *   ensuring there is at most one pending DOM update per frame.
+     *
+     * This keeps drag interactions smooth even with large lists.
+     */
 
     const handleDragStart = (e: React.DragEvent | React.TouchEvent, position: number) => {
         const isTouch = 'touches' in e;
@@ -192,14 +217,31 @@ export const useBoundedDrag = (options: BoundedDragOptions = {}) => {
             });
 
             document.body.appendChild(dragNode.current);
+
+            // Keep track of the original element (acts as a placeholder inside the list)
+            draggedElement.current = listItem;
+            boundaryElement.current = boundary as HTMLElement;
             setIsDragging(true);
             listItem.classList.add('dragging-placeholder');
         } else {
-            // ... desktop drag logic remains the same ...
+            // Desktop: use native drag image, but still record dragged element / boundary
+            draggedElement.current = listItem;
+            boundaryElement.current = boundary as HTMLElement;
+            setIsDragging(true);
+
+            const dragEvent = e as React.DragEvent;
+            if (dragEvent.dataTransfer) {
+                dragEvent.dataTransfer.effectAllowed = 'move';
+                // Optional: customize drag preview if needed
+                dragEvent.dataTransfer.setData('text/plain', '');
+            }
+
+            listItem.classList.add('dragging-placeholder');
         }
     };
 
     const handleDragOver = (e: React.DragEvent | React.TouchEvent) => {
+        // Always prevent default synchronously
         e.preventDefault();
         const isTouch = 'touches' in e;
 
@@ -207,56 +249,109 @@ export const useBoundedDrag = (options: BoundedDragOptions = {}) => {
             (e as React.DragEvent).dataTransfer.dropEffect = 'move';
         }
 
-        // Get the current pointer/touch position
-        const point = isTouch ? 
-            (e as React.TouchEvent).touches[0] : 
-            { clientX: (e as React.DragEvent).clientX, clientY: (e as React.DragEvent).clientY };
+        // Extract primitive coordinates synchronously to avoid using pooled events in async callbacks
+        let clientX: number;
+        let clientY: number;
 
-        // Update dragged element position for touch events
-        if (isTouch && isDragging && dragNode.current) {
-            dragNode.current.style.left = `${point.clientX - touchOffset.current.x}px`;
-            dragNode.current.style.top = `${point.clientY - touchOffset.current.y}px`;
+        if (isTouch) {
+            const touch = (e as React.TouchEvent).touches[0];
+            clientX = touch.clientX;
+            clientY = touch.clientY;
+        } else {
+            clientX = (e as React.DragEvent).clientX;
+            clientY = (e as React.DragEvent).clientY;
         }
 
-        // Find the element below the pointer/touch
-        const elemBelow = document.elementFromPoint(
-            point.clientX,
-            point.clientY
-        );
+        // Cancel any pending frame to avoid stacking DOM operations
+        if (rafId.current !== null) {
+            cancelAnimationFrame(rafId.current);
+        }
 
-        if (!elemBelow) return;
+        rafId.current = requestAnimationFrame(() => {
+            // Update dragged element position for touch events
+            if (isTouch && isDragging && dragNode.current) {
+                dragNode.current.style.left = `${clientX - touchOffset.current.x}px`;
+                dragNode.current.style.top = `${clientY - touchOffset.current.y}px`;
+            }
 
-        // Find the closest list item
-        const listItem = elemBelow.closest(itemSelector) as HTMLElement;
-        if (!listItem || listItem === currentHoverItem.current) return;
+            // Find the element below the pointer/touch
+            const elemBelow = document.elementFromPoint(clientX, clientY);
 
-        // Check boundary
-        const boundary = listItem.closest(boundarySelector);
-        if (!boundary) return;
+            if (!elemBelow) return;
 
-        // Update hover states
-        if (currentHoverItem.current) {
-            currentHoverItem.current.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
-        }
+            // Find the closest list item
+            const listItem = elemBelow.closest(itemSelector) as HTMLElement;
+            if (!listItem) return;
 
-        currentHoverItem.current = listItem;
-        listItem.classList.add('drag-over');
+            // Check boundary
+            const boundary =
+                (boundaryElement.current as HTMLElement | null) ||
+                (listItem.closest(boundarySelector) as HTMLElement | null);
+            if (!boundary) return;
 
-        // Calculate position in list
-        const position = Array.from(listItem.parentNode!.children).indexOf(listItem);
-        dragOverItem.current = position;
+            // Update hover states
+            if (currentHoverItem.current && currentHoverItem.current !== listItem) {
+                currentHoverItem.current.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
+            }
 
-        // Determine drop position (top/bottom)
-        const rect = listItem.getBoundingClientRect();
-        const middleY = rect.top + rect.height / 2;
+            currentHoverItem.current = listItem;
+            listItem.classList.add('drag-over');
 
-        if (point.clientY < middleY) {
-            listItem.classList.add('drag-over-top');
-        } else {
-            listItem.classList.add('drag-over-bottom');
-        }
+            const dragEl = draggedElement.current;
+            if (!dragEl || !dragEl.parentNode) return;
 
-        onDragOver?.(dragItem.current, dragOverItem.current);
+            const container = boundary;
+
+            // Collect current ordered items in the container
+            const children = Array.from(container.querySelectorAll<HTMLElement>(itemSelector));
+
+            const currentIndex = children.indexOf(dragEl);
+            let targetIndex = children.indexOf(listItem);
+
+            if (currentIndex === -1 || targetIndex === -1) return;
+
+            // Determine drop position (top/bottom)
+            const rect = listItem.getBoundingClientRect();
+            const middleY = rect.top + rect.height / 2;
+
+            listItem.classList.remove('drag-over-top', 'drag-over-bottom');
+
+            const insertBefore =
+                clientY < middleY
+                    ? listItem
+                    : (listItem.nextElementSibling as HTMLElement | null);
+
+            if (clientY < middleY) {
+                listItem.classList.add('drag-over-top');
+            } else {
+                listItem.classList.add('drag-over-bottom');
+            }
+
+            // Only move in DOM when the effective position changes
+            if (insertBefore !== dragEl && container.contains(dragEl)) {
+                container.insertBefore(dragEl, insertBefore);
+            }
+
+            // Recompute index after DOM move
+            const reorderedChildren = Array.from(container.querySelectorAll<HTMLElement>(itemSelector));
+            const newIndex = reorderedChildren.indexOf(dragEl);
+            dragOverItem.current = newIndex;
+
+            onDragOver?.(dragItem.current, dragOverItem.current);
+
+            // Only fire onDragUpdate when the (dragIndex, dropIndex) pair actually changes.
+            if (
+                onDragUpdate &&
+                (dragItem.current !== lastUpdateDragIndex.current ||
+                    dragOverItem.current !== lastUpdateDropIndex.current)
+            ) {
+                lastUpdateDragIndex.current = dragItem.current;
+                lastUpdateDropIndex.current = dragOverItem.current;
+                onDragUpdate(dragItem.current, dragOverItem.current);
+            }
+
+            rafId.current = null;
+        });
     };
 
     const handleDragEnd = (e: React.DragEvent | React.TouchEvent) => {
@@ -265,6 +360,12 @@ export const useBoundedDrag = (options: BoundedDragOptions = {}) => {
 
         onDragEnd?.(dragItem.current, dragOverItem.current);
 
+        // Cancel any pending animation frame
+        if (rafId.current !== null) {
+            cancelAnimationFrame(rafId.current);
+            rafId.current = null;
+        }
+
         // Cleanup
         if (dragNode.current) {
             dragNode.current.remove();
@@ -286,6 +387,8 @@ export const useBoundedDrag = (options: BoundedDragOptions = {}) => {
         currentHoverItem.current = null;
         dragItem.current = null;
         dragOverItem.current = null;
+        draggedElement.current = null;
+        boundaryElement.current = null;
     };
 
     return {

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.723","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.735","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}