react-restyle-components 0.4.47 → 0.4.48

package/lib/src/core-components/src/components/Table/columnReorder.js

@@ -1,4 +1,31 @@
-"use strict";import{jsx as z}from"react/jsx-runtime";import{useRef as R,useState as f,useCallback as l,useEffect as N,useMemo as Z}from"react";import{styled as G,css as u,keyframes as v}from"styled-components";const ut=v`
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Column Reorder Feature
+ *
+ * This file contains the column reordering (drag & drop) functionality for the Table component.
+ * It can be easily enabled/disabled via props without affecting core table logic.
+ *
+ * Features:
+ * - Long press on header to start dragging
+ * - Drag column to new position
+ * - Visual feedback during drag (ghost element, drop indicators)
+ * - Callback when columns are reordered
+ *
+ * Usage:
+ * <Table
+ *   reorderable={true}
+ *   reorderConfig={{
+ *     longPressDelay: 200,
+ *     onReorder: (newColumns, fromIndex, toIndex) => console.log(newColumns),
+ *   }}
+ * />
+ */
+import { useRef, useState, useCallback, useEffect, useMemo, } from 'react';
+import { styled, css, keyframes } from 'styled-components';
+// ============================================================================
+// Animations
+// ============================================================================
+const shake = keyframes `
   0%, 100% { transform: translateX(0) rotate(0deg); }
   10% { transform: translateX(-2px) rotate(-0.5deg); }
   20% { transform: translateX(2px) rotate(0.5deg); }
@@ -9,7 +36,8 @@
   70% { transform: translateX(-1px) rotate(-0.2deg); }
   80% { transform: translateX(1px) rotate(0.2deg); }
   90% { transform: translateX(0) rotate(0deg); }
-`,tt=v`
+`;
+const pulse = keyframes `
   0%, 100% { 
     opacity: 1;
     transform: scale(1);
@@ -18,10 +46,12 @@
     opacity: 0.7;
     transform: scale(0.98);
   }
-`,et=v`
+`;
+const float = keyframes `
   0%, 100% { transform: translate(-50%, -50%) scale(1.05) rotate(-1deg); }
   50% { transform: translate(-50%, -50%) scale(1.08) rotate(1deg); }
-`,rt=v`
+`;
+const glowPulse = keyframes `
   0%, 100% { 
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                 0 0 0 0 rgba(59, 130, 246, 0);
@@ -30,7 +60,8 @@
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
                 0 0 20px 4px rgba(59, 130, 246, 0.3);
   }
-`,ot=v`
+`;
+const dropIndicatorPulse = keyframes `
   0%, 100% { 
     opacity: 1;
     transform: scaleY(1);
@@ -39,7 +70,8 @@
     opacity: 0.8;
     transform: scaleY(1.02);
   }
-`,nt=v`
+`;
+const slideDown = keyframes `
   from { 
     transform: translateY(-10px) scaleY(0.5);
     opacity: 0;
@@ -48,14 +80,18 @@
     transform: translateY(0) scaleY(1);
     opacity: 1;
   }
-`;export const DragGhost=G.div`
+`;
+// ============================================================================
+// Styled Components
+// ============================================================================
+export const DragGhost = styled.div `
   position: fixed;
-  top: ${({$y:t})=>t}px;
-  left: ${({$x:t})=>t}px;
+  top: ${({ $y }) => $y}px;
+  left: ${({ $x }) => $x}px;
   z-index: 10000;
   pointer-events: none;
-  opacity: ${({$visible:t,$opacity:s})=>t?s:0};
-  transform: translate(-50%, -50%) scale(${({$visible:t})=>t?1.05:.8});
+  opacity: ${({ $visible, $opacity }) => ($visible ? $opacity : 0)};
+  transform: translate(-50%, -50%) scale(${({ $visible }) => ($visible ? 1.05 : 0.8)});
   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   
   /* Glass morphism effect */
@@ -76,8 +112,9 @@
   border: 1px solid rgba(255, 255, 255, 0.2);
 
   /* Floating animation when visible */
-  ${({$visible:t})=>t&&u`
-      animation: ${et} 2s ease-in-out infinite, ${rt} 1.5s ease-in-out infinite;
+  ${({ $visible }) => $visible &&
+    css `
+      animation: ${float} 2s ease-in-out infinite, ${glowPulse} 1.5s ease-in-out infinite;
     `}
 
   /* Icon with animation */
@@ -106,34 +143,38 @@
     );
     pointer-events: none;
   }
-`,DropIndicator=G.div`
+`;
+export const DropIndicator = styled.div `
   position: absolute;
   top: -4px;
   bottom: -4px;
   width: 4px;
   z-index: 100;
-  opacity: ${({$visible:t})=>t?1:0};
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: center;
   
-  ${({$position:t})=>t==="left"?u`left: -2px;`:u`right: -2px;`}
+  ${({ $position }) => $position === 'left'
+    ? css `left: -2px;`
+    : css `right: -2px;`}
 
   /* Gradient background with glow */
   background: linear-gradient(
     to bottom,
     transparent 0%,
-    ${({$color:t})=>t} 10%,
-    ${({$color:t})=>t} 90%,
+    ${({ $color }) => $color} 10%,
+    ${({ $color }) => $color} 90%,
     transparent 100%
   );
   border-radius: 2px;
   box-shadow: 
-    0 0 8px ${({$color:t})=>t},
-    0 0 16px ${({$color:t})=>t}80;
+    0 0 8px ${({ $color }) => $color},
+    0 0 16px ${({ $color }) => $color}80;
 
   /* Pulsing animation when visible */
-  ${({$visible:t})=>t&&u`
-      animation: ${ot} 0.8s ease-in-out infinite, ${nt} 0.2s ease-out;
+  ${({ $visible }) => $visible &&
+    css `
+      animation: ${dropIndicatorPulse} 0.8s ease-in-out infinite, ${slideDown} 0.2s ease-out;
     `}
   
   /* Top arrow */
@@ -147,8 +188,8 @@
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-bottom: 8px solid ${({$color:t})=>t};
-    filter: drop-shadow(0 -2px 4px ${({$color:t})=>t}80);
+    border-bottom: 8px solid ${({ $color }) => $color};
+    filter: drop-shadow(0 -2px 4px ${({ $color }) => $color}80);
   }
   
   /* Bottom arrow */
@@ -162,17 +203,19 @@
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-top: 8px solid ${({$color:t})=>t};
-    filter: drop-shadow(0 2px 4px ${({$color:t})=>t}80);
+    border-top: 8px solid ${({ $color }) => $color};
+    filter: drop-shadow(0 2px 4px ${({ $color }) => $color}80);
   }
-`,DraggableHeader=G.div`
+`;
+export const DraggableHeader = styled.div `
   position: relative;
-  cursor: ${({$isDisabled:t})=>t?"default":"grab"};
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'grab')};
   user-select: none;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   
   /* Dragging state - semi-transparent with scale */
-  ${({$isDragging:t})=>t&&u`
+  ${({ $isDragging }) => $isDragging &&
+    css `
       opacity: 0.35;
       transform: scale(0.95);
       cursor: grabbing;
@@ -195,19 +238,22 @@
     `}
   
   /* Drag over state - highlight target */
-  ${({$isDragOver:t,$animated:s})=>t&&u`
+  ${({ $isDragOver, $animated }) => $isDragOver &&
+    css `
       background: rgba(59, 130, 246, 0.15);
       transform: scale(1.02);
       box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.4);
       border-radius: 4px;
       
-      ${s&&u`
-          animation: ${tt} 0.6s ease-in-out infinite;
+      ${$animated &&
+        css `
+          animation: ${pulse} 0.6s ease-in-out infinite;
         `}
     `}
   
   /* Disabled state */
-  ${({$isDisabled:t})=>t&&u`
+  ${({ $isDisabled }) => $isDisabled &&
+    css `
       cursor: not-allowed;
       opacity: 0.6;
       
@@ -222,13 +268,263 @@
     `}
   
   &:active {
-    cursor: ${({$isDisabled:t})=>t?"not-allowed":"grabbing"};
+    cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'grabbing')};
   }
 
   /* Hover state for grabbable columns */
   &:hover {
-    ${({$isDisabled:t,$isDragging:s})=>!t&&!s&&u`
+    ${({ $isDisabled, $isDragging }) => !$isDisabled &&
+    !$isDragging &&
+    css `
         background: rgba(255, 255, 255, 0.1);
       `}
   }
-`;export function useColumnReorder({columns:t,config:s={},enabled:i=!0}){const{longPressDelay:p=200,onReorder:m,onDragStart:w,onDragEnd:D,disabledColumns:d=[],ghostOpacity:O=.8,dropIndicatorColor:at="#3b82f6",animated:st=!0}=s,[y,C]=f(t),[F,S]=f(!1),[g,H]=f(null),[$,j]=f(null),[x,k]=f(null),[X,L]=f({x:0,y:0}),[P,Q]=f(""),n=R(null),T=R({x:0,y:0}),b=R(!1);N(()=>{C(t)},[t]),N(()=>()=>{n.current&&clearTimeout(n.current)},[]);const E=l((e,r,a,o)=>{d.includes(e.dataField)||(b.current=!0,S(!0),H(e.dataField),j(r),L({x:a,y:o}),Q(e.headerText||e.text),w?.(e,r),document.addEventListener("mousemove",I),document.addEventListener("mouseup",q),document.addEventListener("touchmove",M,{passive:!1}),document.addEventListener("touchend",B),document.body.style.cursor="grabbing",document.body.style.userSelect="none")},[d,w]),I=l(e=>{b.current&&(L({x:e.clientX,y:e.clientY}),A(e.clientX,e.clientY))},[]),M=l(e=>{if(!b.current)return;e.preventDefault();const r=e.touches[0];L({x:r.clientX,y:r.clientY}),A(r.clientX,r.clientY)},[]),A=l((e,r)=>{const o=document.elementsFromPoint(e,r).find(c=>c.getAttribute("data-draggable")==="true");if(o){const c=o.getAttribute("data-column");c&&c!==g&&k(c)}else k(null)},[g]),Y=l(()=>{if(!b.current)return;if(b.current=!1,g&&x&&$!==null){const r=$,a=y.findIndex(o=>o.dataField===x);if(r!==a&&a!==-1){const o=[...y],[c]=o.splice(r,1);o.splice(a,0,c),C(o),m?.(o,r,a)}}const e=y.find(r=>r.dataField===g);e&&$!==null&&D?.(e,$),S(!1),H(null),j(null),k(null),document.removeEventListener("mousemove",I),document.removeEventListener("mouseup",q),document.removeEventListener("touchmove",M),document.removeEventListener("touchend",B),document.body.style.cursor="",document.body.style.userSelect=""},[g,x,$,y,m,D,I,M]),q=l(()=>{n.current&&(clearTimeout(n.current),n.current=null),Y()},[Y]),B=l(()=>{n.current&&(clearTimeout(n.current),n.current=null),Y()},[Y]),U=l((e,r,a)=>{if(!i||d.includes(r.dataField))return;e.preventDefault(),T.current={x:e.clientX,y:e.clientY},n.current=setTimeout(()=>{E(r,a,e.clientX,e.clientY)},p);const o=h=>{const J=h.clientX-T.current.x,K=h.clientY-T.current.y;Math.sqrt(J*J+K*K)>10&&(n.current&&(clearTimeout(n.current),n.current=null),document.removeEventListener("mousemove",o))};document.addEventListener("mousemove",o);const c=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",c),n.current&&!b.current&&(clearTimeout(n.current),n.current=null)};document.addEventListener("mouseup",c)},[i,d,p,E]),_=l((e,r,a)=>{if(!i||d.includes(r.dataField))return;const o=e.touches[0];T.current={x:o.clientX,y:o.clientY},n.current=setTimeout(()=>{E(r,a,o.clientX,o.clientY)},p)},[i,d,p,E]),V=l((e,r)=>{const a=d.includes(e.dataField),o=g===e.dataField,c=x===e.dataField;return{onMouseDown:h=>U(h,e,r),onTouchStart:h=>_(h,e,r),"data-draggable":i&&!a,"data-dragging":o,"data-drag-over":c,style:{cursor:i&&!a?"grab":"default",opacity:o?.4:1,transition:"opacity 0.2s ease"}}},[i,d,g,x,U,_]),W=l(()=>{C(t)},[t]),it=Z(()=>z(DragGhost,{$visible:F,$x:X.x,$y:X.y,$opacity:O,children:P}),[F,X,O,P]);return{orderedColumns:y,getDragHandleProps:V,isDragging:F,draggedColumn:g,dragOverColumn:x,ghostPosition:X,ghostText:P,resetOrder:W}}export const ColumnReorderGhost=({visible:t,x:s,y:i,text:p,opacity:m=.8})=>z(DragGhost,{$visible:t,$x:s,$y:i,$opacity:m,children:p}),ColumnDropIndicator=({visible:t,position:s,color:i="#3b82f6"})=>z(DropIndicator,{$visible:t,$position:s,$color:i});export function getReorderableHeaderProps(t,s,i,p,m,w){const D=i(t,s),d=p&&w===t.dataField&&m!==t.dataField;return{wrapperProps:D,showDropIndicator:d,dropPosition:"left"}}export default{useColumnReorder,DragGhost,DropIndicator,DraggableHeader,ColumnReorderGhost,ColumnDropIndicator,getReorderableHeaderProps};
+`;
+// ============================================================================
+// Hook: useColumnReorder
+// ============================================================================
+export function useColumnReorder({ columns, config = {}, enabled = true, }) {
+    const { longPressDelay = 200, onReorder, onDragStart, onDragEnd, disabledColumns = [], ghostOpacity = 0.8, dropIndicatorColor = '#3b82f6', animated = true, } = config;
+    // State
+    const [orderedColumns, setOrderedColumns] = useState(columns);
+    const [isDragging, setIsDragging] = useState(false);
+    const [draggedColumn, setDraggedColumn] = useState(null);
+    const [draggedIndex, setDraggedIndex] = useState(null);
+    const [dragOverColumn, setDragOverColumn] = useState(null);
+    const [ghostPosition, setGhostPosition] = useState({ x: 0, y: 0 });
+    const [ghostText, setGhostText] = useState('');
+    // Refs
+    const longPressTimerRef = useRef(null);
+    const startPosRef = useRef({ x: 0, y: 0 });
+    const isDraggingRef = useRef(false);
+    // Update ordered columns when columns prop changes
+    useEffect(() => {
+        setOrderedColumns(columns);
+    }, [columns]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+            }
+        };
+    }, []);
+    // Start drag after long press
+    const startDrag = useCallback((column, index, x, y) => {
+        if (disabledColumns.includes(column.dataField))
+            return;
+        isDraggingRef.current = true;
+        setIsDragging(true);
+        setDraggedColumn(column.dataField);
+        setDraggedIndex(index);
+        setGhostPosition({ x, y });
+        setGhostText(column.headerText || column.text);
+        onDragStart?.(column, index);
+        // Add global event listeners
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('touchmove', handleTouchMove, { passive: false });
+        document.addEventListener('touchend', handleTouchEnd);
+        document.body.style.cursor = 'grabbing';
+        document.body.style.userSelect = 'none';
+    }, [disabledColumns, onDragStart]);
+    // Handle mouse/touch move during drag
+    const handleMouseMove = useCallback((e) => {
+        if (!isDraggingRef.current)
+            return;
+        setGhostPosition({ x: e.clientX, y: e.clientY });
+        updateDragOver(e.clientX, e.clientY);
+    }, []);
+    const handleTouchMove = useCallback((e) => {
+        if (!isDraggingRef.current)
+            return;
+        e.preventDefault();
+        const touch = e.touches[0];
+        setGhostPosition({ x: touch.clientX, y: touch.clientY });
+        updateDragOver(touch.clientX, touch.clientY);
+    }, []);
+    // Update which column we're hovering over
+    const updateDragOver = useCallback((x, y) => {
+        const elements = document.elementsFromPoint(x, y);
+        const headerCell = elements.find((el) => el.getAttribute('data-draggable') === 'true');
+        if (headerCell) {
+            const dataField = headerCell.getAttribute('data-column');
+            if (dataField && dataField !== draggedColumn) {
+                setDragOverColumn(dataField);
+            }
+        }
+        else {
+            setDragOverColumn(null);
+        }
+    }, [draggedColumn]);
+    // End drag
+    const endDrag = useCallback(() => {
+        if (!isDraggingRef.current)
+            return;
+        isDraggingRef.current = false;
+        // Find the target index
+        if (draggedColumn && dragOverColumn && draggedIndex !== null) {
+            const fromIndex = draggedIndex;
+            const toIndex = orderedColumns.findIndex((c) => c.dataField === dragOverColumn);
+            if (fromIndex !== toIndex && toIndex !== -1) {
+                const newColumns = [...orderedColumns];
+                const [removed] = newColumns.splice(fromIndex, 1);
+                newColumns.splice(toIndex, 0, removed);
+                setOrderedColumns(newColumns);
+                onReorder?.(newColumns, fromIndex, toIndex);
+            }
+        }
+        // Get the column for callback
+        const column = orderedColumns.find((c) => c.dataField === draggedColumn);
+        if (column && draggedIndex !== null) {
+            onDragEnd?.(column, draggedIndex);
+        }
+        // Reset state
+        setIsDragging(false);
+        setDraggedColumn(null);
+        setDraggedIndex(null);
+        setDragOverColumn(null);
+        // Remove global event listeners
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('touchmove', handleTouchMove);
+        document.removeEventListener('touchend', handleTouchEnd);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, [
+        draggedColumn,
+        dragOverColumn,
+        draggedIndex,
+        orderedColumns,
+        onReorder,
+        onDragEnd,
+        handleMouseMove,
+        handleTouchMove,
+    ]);
+    const handleMouseUp = useCallback(() => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        endDrag();
+    }, [endDrag]);
+    const handleTouchEnd = useCallback(() => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        endDrag();
+    }, [endDrag]);
+    // Mouse down handler - starts long press timer
+    const handleMouseDown = useCallback((e, column, index) => {
+        if (!enabled || disabledColumns.includes(column.dataField))
+            return;
+        e.preventDefault();
+        startPosRef.current = { x: e.clientX, y: e.clientY };
+        // Start long press timer
+        longPressTimerRef.current = setTimeout(() => {
+            startDrag(column, index, e.clientX, e.clientY);
+        }, longPressDelay);
+        // Add mouse move listener to cancel if moved too much
+        const handleEarlyMove = (moveEvent) => {
+            const dx = moveEvent.clientX - startPosRef.current.x;
+            const dy = moveEvent.clientY - startPosRef.current.y;
+            if (Math.sqrt(dx * dx + dy * dy) > 10) {
+                if (longPressTimerRef.current) {
+                    clearTimeout(longPressTimerRef.current);
+                    longPressTimerRef.current = null;
+                }
+                document.removeEventListener('mousemove', handleEarlyMove);
+            }
+        };
+        document.addEventListener('mousemove', handleEarlyMove);
+        // Cleanup early move listener on mouse up
+        const cleanup = () => {
+            document.removeEventListener('mousemove', handleEarlyMove);
+            document.removeEventListener('mouseup', cleanup);
+            if (longPressTimerRef.current && !isDraggingRef.current) {
+                clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+        };
+        document.addEventListener('mouseup', cleanup);
+    }, [enabled, disabledColumns, longPressDelay, startDrag]);
+    // Touch start handler
+    const handleTouchStart = useCallback((e, column, index) => {
+        if (!enabled || disabledColumns.includes(column.dataField))
+            return;
+        const touch = e.touches[0];
+        startPosRef.current = { x: touch.clientX, y: touch.clientY };
+        // Start long press timer
+        longPressTimerRef.current = setTimeout(() => {
+            startDrag(column, index, touch.clientX, touch.clientY);
+        }, longPressDelay);
+    }, [enabled, disabledColumns, longPressDelay, startDrag]);
+    // Get drag handle props for a column header
+    const getDragHandleProps = useCallback((column, index) => {
+        const isDisabled = disabledColumns.includes(column.dataField);
+        const isThisDragging = draggedColumn === column.dataField;
+        const isThisDragOver = dragOverColumn === column.dataField;
+        return {
+            onMouseDown: (e) => handleMouseDown(e, column, index),
+            onTouchStart: (e) => handleTouchStart(e, column, index),
+            'data-draggable': enabled && !isDisabled,
+            'data-dragging': isThisDragging,
+            'data-drag-over': isThisDragOver,
+            style: {
+                cursor: enabled && !isDisabled ? 'grab' : 'default',
+                opacity: isThisDragging ? 0.4 : 1,
+                transition: 'opacity 0.2s ease',
+            },
+        };
+    }, [
+        enabled,
+        disabledColumns,
+        draggedColumn,
+        dragOverColumn,
+        handleMouseDown,
+        handleTouchStart,
+    ]);
+    // Reset column order
+    const resetOrder = useCallback(() => {
+        setOrderedColumns(columns);
+    }, [columns]);
+    // Render ghost element (called from Table component)
+    const GhostElement = useMemo(() => (_jsx(DragGhost, { "$visible": isDragging, "$x": ghostPosition.x, "$y": ghostPosition.y, "$opacity": ghostOpacity, children: ghostText })), [isDragging, ghostPosition, ghostOpacity, ghostText]);
+    return {
+        orderedColumns,
+        getDragHandleProps,
+        isDragging,
+        draggedColumn,
+        dragOverColumn,
+        ghostPosition,
+        ghostText,
+        resetOrder,
+    };
+}
+export const ColumnReorderGhost = ({ visible, x, y, text, opacity = 0.8, }) => (_jsx(DragGhost, { "$visible": visible, "$x": x, "$y": y, "$opacity": opacity, children: text }));
+export const ColumnDropIndicator = ({ visible, position, color = '#3b82f6', }) => _jsx(DropIndicator, { "$visible": visible, "$position": position, "$color": color });
+// ============================================================================
+// Helper: Get header cell wrapper props
+// ============================================================================
+export function getReorderableHeaderProps(column, index, getDragHandleProps, isDragging, draggedColumn, dragOverColumn) {
+    const wrapperProps = getDragHandleProps(column, index);
+    const showDropIndicator = isDragging && dragOverColumn === column.dataField && draggedColumn !== column.dataField;
+    return {
+        wrapperProps,
+        showDropIndicator,
+        dropPosition: 'left', // Always show on left side
+    };
+}
+// ============================================================================
+// Export
+// ============================================================================
+export default {
+    useColumnReorder,
+    DragGhost,
+    DropIndicator,
+    DraggableHeader,
+    ColumnReorderGhost,
+    ColumnDropIndicator,
+    getReorderableHeaderProps,
+};