react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,31 +1,4 @@
-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 `
+"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`
   0%, 100% { transform: translateX(0) rotate(0deg); }
   10% { transform: translateX(-2px) rotate(-0.5deg); }
   20% { transform: translateX(2px) rotate(0.5deg); }
@@ -36,8 +9,7 @@ const shake = keyframes `
   70% { transform: translateX(-1px) rotate(-0.2deg); }
   80% { transform: translateX(1px) rotate(0.2deg); }
   90% { transform: translateX(0) rotate(0deg); }
-`;
-const pulse = keyframes `
+`,tt=v`
   0%, 100% { 
     opacity: 1;
     transform: scale(1);
@@ -46,12 +18,10 @@ const pulse = keyframes `
     opacity: 0.7;
     transform: scale(0.98);
   }
-`;
-const float = keyframes `
+`,et=v`
   0%, 100% { transform: translate(-50%, -50%) scale(1.05) rotate(-1deg); }
   50% { transform: translate(-50%, -50%) scale(1.08) rotate(1deg); }
-`;
-const glowPulse = keyframes `
+`,rt=v`
   0%, 100% { 
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                 0 0 0 0 rgba(59, 130, 246, 0);
@@ -60,8 +30,7 @@ const glowPulse = keyframes `
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
                 0 0 20px 4px rgba(59, 130, 246, 0.3);
   }
-`;
-const dropIndicatorPulse = keyframes `
+`,ot=v`
   0%, 100% { 
     opacity: 1;
     transform: scaleY(1);
@@ -70,8 +39,7 @@ const dropIndicatorPulse = keyframes `
     opacity: 0.8;
     transform: scaleY(1.02);
   }
-`;
-const slideDown = keyframes `
+`,nt=v`
   from { 
     transform: translateY(-10px) scaleY(0.5);
     opacity: 0;
@@ -80,18 +48,14 @@ const slideDown = keyframes `
     transform: translateY(0) scaleY(1);
     opacity: 1;
   }
-`;
-// ============================================================================
-// Styled Components
-// ============================================================================
-export const DragGhost = styled.div `
+`;export const DragGhost=G.div`
   position: fixed;
-  top: ${({ $y }) => $y}px;
-  left: ${({ $x }) => $x}px;
+  top: ${({$y:t})=>t}px;
+  left: ${({$x:t})=>t}px;
   z-index: 10000;
   pointer-events: none;
-  opacity: ${({ $visible, $opacity }) => ($visible ? $opacity : 0)};
-  transform: translate(-50%, -50%) scale(${({ $visible }) => ($visible ? 1.05 : 0.8)});
+  opacity: ${({$visible:t,$opacity:s})=>t?s:0};
+  transform: translate(-50%, -50%) scale(${({$visible:t})=>t?1.05:.8});
   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   
   /* Glass morphism effect */
@@ -112,9 +76,8 @@ export const DragGhost = styled.div `
   border: 1px solid rgba(255, 255, 255, 0.2);
 
   /* Floating animation when visible */
-  ${({ $visible }) => $visible &&
-    css `
-      animation: ${float} 2s ease-in-out infinite, ${glowPulse} 1.5s ease-in-out infinite;
+  ${({$visible:t})=>t&&u`
+      animation: ${et} 2s ease-in-out infinite, ${rt} 1.5s ease-in-out infinite;
     `}
 
   /* Icon with animation */
@@ -143,38 +106,34 @@ export const DragGhost = styled.div `
     );
     pointer-events: none;
   }
-`;
-export const DropIndicator = styled.div `
+`,DropIndicator=G.div`
   position: absolute;
   top: -4px;
   bottom: -4px;
   width: 4px;
   z-index: 100;
-  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  opacity: ${({$visible:t})=>t?1:0};
   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: center;
   
-  ${({ $position }) => $position === 'left'
-    ? css `left: -2px;`
-    : css `right: -2px;`}
+  ${({$position:t})=>t==="left"?u`left: -2px;`:u`right: -2px;`}
 
   /* Gradient background with glow */
   background: linear-gradient(
     to bottom,
     transparent 0%,
-    ${({ $color }) => $color} 10%,
-    ${({ $color }) => $color} 90%,
+    ${({$color:t})=>t} 10%,
+    ${({$color:t})=>t} 90%,
     transparent 100%
   );
   border-radius: 2px;
   box-shadow: 
-    0 0 8px ${({ $color }) => $color},
-    0 0 16px ${({ $color }) => $color}80;
+    0 0 8px ${({$color:t})=>t},
+    0 0 16px ${({$color:t})=>t}80;
 
   /* Pulsing animation when visible */
-  ${({ $visible }) => $visible &&
-    css `
-      animation: ${dropIndicatorPulse} 0.8s ease-in-out infinite, ${slideDown} 0.2s ease-out;
+  ${({$visible:t})=>t&&u`
+      animation: ${ot} 0.8s ease-in-out infinite, ${nt} 0.2s ease-out;
     `}
   
   /* Top arrow */
@@ -188,8 +147,8 @@ export const DropIndicator = styled.div `
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-bottom: 8px solid ${({ $color }) => $color};
-    filter: drop-shadow(0 -2px 4px ${({ $color }) => $color}80);
+    border-bottom: 8px solid ${({$color:t})=>t};
+    filter: drop-shadow(0 -2px 4px ${({$color:t})=>t}80);
   }
   
   /* Bottom arrow */
@@ -203,19 +162,17 @@ export const DropIndicator = styled.div `
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
-    border-top: 8px solid ${({ $color }) => $color};
-    filter: drop-shadow(0 2px 4px ${({ $color }) => $color}80);
+    border-top: 8px solid ${({$color:t})=>t};
+    filter: drop-shadow(0 2px 4px ${({$color:t})=>t}80);
   }
-`;
-export const DraggableHeader = styled.div `
+`,DraggableHeader=G.div`
   position: relative;
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'grab')};
+  cursor: ${({$isDisabled:t})=>t?"default":"grab"};
   user-select: none;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   
   /* Dragging state - semi-transparent with scale */
-  ${({ $isDragging }) => $isDragging &&
-    css `
+  ${({$isDragging:t})=>t&&u`
       opacity: 0.35;
       transform: scale(0.95);
       cursor: grabbing;
@@ -238,22 +195,19 @@ export const DraggableHeader = styled.div `
     `}
   
   /* Drag over state - highlight target */
-  ${({ $isDragOver, $animated }) => $isDragOver &&
-    css `
+  ${({$isDragOver:t,$animated:s})=>t&&u`
       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;
       
-      ${$animated &&
-        css `
-          animation: ${pulse} 0.6s ease-in-out infinite;
+      ${s&&u`
+          animation: ${tt} 0.6s ease-in-out infinite;
         `}
     `}
   
   /* Disabled state */
-  ${({ $isDisabled }) => $isDisabled &&
-    css `
+  ${({$isDisabled:t})=>t&&u`
       cursor: not-allowed;
       opacity: 0.6;
       
@@ -268,263 +222,13 @@ export const DraggableHeader = styled.div `
     `}
   
   &:active {
-    cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'grabbing')};
+    cursor: ${({$isDisabled:t})=>t?"not-allowed":"grabbing"};
   }
 
   /* Hover state for grabbable columns */
   &:hover {
-    ${({ $isDisabled, $isDragging }) => !$isDisabled &&
-    !$isDragging &&
-    css `
+    ${({$isDisabled:t,$isDragging:s})=>!t&&!s&&u`
         background: rgba(255, 255, 255, 0.1);
       `}
   }
-`;
-// ============================================================================
-// 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,
-};
+`;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};