react-restyle-components 0.4.47 → 0.4.48

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

@@ -1,11 +1,40 @@
-"use strict";import{jsx as N,jsxs as T}from"react/jsx-runtime";import{useRef as b,useState as R,useCallback as l,useEffect as U,useMemo as V}from"react";import{styled as Y,css as B,keyframes as M}from"styled-components";const J=M`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Column Resize Feature
+ *
+ * This file contains the column resizing functionality for the Table component.
+ * It can be easily enabled/disabled via props without affecting core table logic.
+ *
+ * Features:
+ * - Drag to resize columns
+ * - Min/Max width constraints
+ * - Double-click to auto-fit column width
+ * - Persist column widths (optional)
+ *
+ * Usage:
+ * <Table
+ *   resizable={true}
+ *   resizeConfig={{
+ *     minWidth: 50,
+ *     maxWidth: 500,
+ *     onResize: (columnWidths) => console.log(columnWidths),
+ *   }}
+ * />
+ */
+import { useRef, useState, useCallback, useEffect, useMemo, } from 'react';
+import { styled, css, keyframes } from 'styled-components';
+// ============================================================================
+// Animations
+// ============================================================================
+const pulseGlow = keyframes `
   0%, 100% { 
     box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
   }
   50% { 
     box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.6);
   }
-`,K=M`
+`;
+const slideIn = keyframes `
   from { 
     transform: scaleY(0);
     opacity: 0;
@@ -14,14 +43,19 @@
     transform: scaleY(1);
     opacity: 1;
   }
-`,tt=M`
+`;
+const shimmer = keyframes `
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
-`;export const ResizeHandle=Y.div`
+`;
+// ============================================================================
+// Styled Components
+// ============================================================================
+export const ResizeHandle = styled.div `
   position: absolute;
   top: 0;
   right: -2px;
-  width: ${({$handleWidth:t})=>(t||8)+4}px;
+  width: ${({ $handleWidth }) => ($handleWidth || 8) + 4}px;
   height: 100%;
   cursor: col-resize;
   background: transparent;
@@ -39,23 +73,26 @@
     top: 20%;
     width: 3px;
     height: 60%;
-    background: ${({$isResizing:t,$handleColor:h,$handleHoverColor:s})=>t?s||"#3b82f6":h||"rgba(255, 255, 255, 0.25)"};
+    background: ${({ $isResizing, $handleColor, $handleHoverColor }) => $isResizing
+    ? $handleHoverColor || '#3b82f6'
+    : $handleColor || 'rgba(255, 255, 255, 0.25)'};
     border-radius: 2px;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    transform: scaleY(${({$isResizing:t})=>t?1:.7});
+    transform: scaleY(${({ $isResizing }) => ($isResizing ? 1 : 0.7)});
   }
 
   /* Hover effect - expand and glow */
   &:hover::after {
-    background: ${({$handleHoverColor:t})=>t||"#3b82f6"};
+    background: ${({ $handleHoverColor }) => $handleHoverColor || '#3b82f6'};
     transform: scaleY(1);
     box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
   }
 
   /* Active/resizing state */
-  ${({$isResizing:t})=>t&&B`
+  ${({ $isResizing }) => $isResizing &&
+    css `
       &::after {
-        animation: ${J} 1s ease-in-out infinite;
+        animation: ${pulseGlow} 1s ease-in-out infinite;
         transform: scaleY(1.1);
       }
 
@@ -91,31 +128,32 @@
   &:hover::before {
     opacity: 1;
   }
-`,ResizeLine=Y.div`
+`;
+export const ResizeLine = styled.div `
   position: fixed;
   top: 0;
-  left: ${({$left:t})=>t}px;
+  left: ${({ $left }) => $left}px;
   width: 2px;
   height: 100vh;
   pointer-events: none;
   z-index: 10000;
-  opacity: ${({$visible:t})=>t?1:0};
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
   transition: opacity 0.15s ease, transform 0.1s ease;
-  transform: ${({$visible:t})=>t?"scaleX(1)":"scaleX(0)"};
+  transform: ${({ $visible }) => ($visible ? 'scaleX(1)' : 'scaleX(0)')};
   transform-origin: center;
 
   /* Gradient line with glow effect */
   background: linear-gradient(
     to bottom,
     transparent 0%,
-    ${({$color:t})=>t||"#3b82f6"} 5%,
-    ${({$color:t})=>t||"#3b82f6"} 95%,
+    ${({ $color }) => $color || '#3b82f6'} 5%,
+    ${({ $color }) => $color || '#3b82f6'} 95%,
     transparent 100%
   );
   box-shadow: 
-    0 0 10px ${({$color:t})=>t||"#3b82f6"},
-    0 0 20px ${({$color:t})=>(t||"#3b82f6")+"80"},
-    0 0 30px ${({$color:t})=>(t||"#3b82f6")+"40"};
+    0 0 10px ${({ $color }) => $color || '#3b82f6'},
+    0 0 20px ${({ $color }) => ($color || '#3b82f6') + '80'},
+    0 0 30px ${({ $color }) => ($color || '#3b82f6') + '40'};
 
   /* Animated shimmer effect */
   &::after {
@@ -131,6 +169,231 @@
       rgba(255, 255, 255, 0.3),
       transparent
     );
-    animation: ${K} 0.3s ease-out;
+    animation: ${slideIn} 0.3s ease-out;
   }
-`;export function useColumnResize({columns:t,config:h={},enabled:s=!0,tableId:g}){const{minWidth:r=50,maxWidth:c=800,autoFit:m=!0,onResize:u,onResizeStart:k,onResizeEnd:W,defaultWidths:f={},handleColor:E,handleHoverColor:F,handleWidth:S=4}=h,w=V(()=>{const i={};return t.forEach(e=>{typeof e.width=="number"?i[e.dataField]=e.width:typeof e.width=="string"&&e.width.endsWith("px")?i[e.dataField]=parseInt(e.width,10):f[e.dataField]&&(i[e.dataField]=f[e.dataField])}),i},[t,f]),[y,x]=R(w),[A,I]=R(!1),[z,D]=R(null),H=b(0),X=b(0),p=b(null),G=b(new Map);U(()=>{x(i=>{const e={...i};return t.forEach(n=>{n.dataField in e||(typeof n.width=="number"?e[n.dataField]=n.width:typeof n.width=="string"&&n.width.endsWith("px")?e[n.dataField]=parseInt(n.width,10):f[n.dataField]&&(e[n.dataField]=f[n.dataField]))}),e})},[t,f]);const v=l(i=>{if(!p.current)return;const e=i.clientX-H.current;let n=X.current+e;const o=t.find($=>$.dataField===p.current),d=typeof o?.minWidth=="number"?o.minWidth:typeof o?.minWidth=="string"&&o.minWidth.endsWith("px")?parseInt(o.minWidth,10):r,a=typeof o?.maxWidth=="number"?o.maxWidth:typeof o?.maxWidth=="string"&&o.maxWidth.endsWith("px")?parseInt(o.maxWidth,10):c;n=Math.max(d,Math.min(a,n)),x($=>({...$,[p.current]:n}))},[t,r,c]),C=l(()=>{if(p.current){const i=y[p.current];W?.(p.current,i),u?.(y)}I(!1),D(null),p.current=null,document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",C),document.body.style.cursor="",document.body.style.userSelect=""},[y,v,u,W]),j=l((i,e,n)=>{if(!s)return;i.preventDefault(),i.stopPropagation();const o=n.current;if(!o)return;const d=o.offsetWidth;H.current=i.clientX,X.current=d,p.current=e,I(!0),D(e),k?.(e,d),document.addEventListener("mousemove",v),document.addEventListener("mouseup",C),document.body.style.cursor="col-resize",document.body.style.userSelect="none"},[s,v,C,k]),L=l((i,e)=>{if(!s||!m)return;i.preventDefault(),i.stopPropagation();const n=document.querySelectorAll(`[data-column="${e}"]`);let o=r;n.forEach(d=>{const a=document.createElement("span");a.style.visibility="hidden",a.style.position="absolute",a.style.whiteSpace="nowrap",a.style.font=window.getComputedStyle(d).font,a.textContent=d.innerText,document.body.appendChild(a),o=Math.max(o,a.offsetWidth+24),document.body.removeChild(a)}),o=Math.min(o,c),x(d=>{const a={...d,[e]:o};return u?.(a),a}),W?.(e,o)},[s,m,r,c,u,W]),P=l((i,e)=>s?(G.current.set(i,e),N(ResizeHandle,{$isResizing:z===i,$handleColor:E,$handleHoverColor:F,$handleWidth:S,onMouseDown:n=>j(n,i,e),onDoubleClick:n=>L(n,i),onClick:n=>n.stopPropagation()})):null,[s,z,E,F,S,j,L]),_=l(()=>{x(w),u?.(w)},[w,u]),q=l((i,e)=>{const n=Math.max(r,Math.min(c,e));x(o=>{const d={...o,[i]:n};return u?.(d),d})},[r,c,u]);return{columnWidths:y,getResizeHandle:P,resetWidths:_,setColumnWidth:q,isResizing:A,resizingColumn:z}}export function getColumnStyle(t,h,s,g){const r={};return s&&h[t.dataField]?(r.width=h[t.dataField],r.minWidth=h[t.dataField],r.maxWidth=h[t.dataField]):(t.width&&(r.width=t.width),t.minWidth&&(r.minWidth=t.minWidth),t.maxWidth&&(r.maxWidth=t.maxWidth)),s&&!g&&(r.transition="width 0.2s cubic-bezier(0.4, 0, 0.2, 1)"),r}export const ResizableHeaderCell=({children:t,dataField:h,resizable:s,getResizeHandle:g,style:r,className:c})=>{const m=b(null);return T("th",{ref:m,style:{...r,position:"relative"},className:c,"data-column":h,children:[t,s&&g(h,m)]})};export default{useColumnResize,getColumnStyle,ResizeHandle,ResizeLine,ResizableHeaderCell};
+`;
+// ============================================================================
+// Hook: useColumnResize
+// ============================================================================
+export function useColumnResize({ columns, config = {}, enabled = true, tableId, }) {
+    const { minWidth = 50, maxWidth = 800, autoFit = true, onResize, onResizeStart, onResizeEnd, defaultWidths = {}, handleColor, handleHoverColor, handleWidth = 4, } = config;
+    // Initialize column widths - Column-level width takes FIRST priority
+    const initialWidths = useMemo(() => {
+        const widths = {};
+        columns.forEach((col) => {
+            // Priority 1: Column-level width (user-defined in column)
+            if (typeof col.width === 'number') {
+                widths[col.dataField] = col.width;
+            }
+            else if (typeof col.width === 'string' && col.width.endsWith('px')) {
+                widths[col.dataField] = parseInt(col.width, 10);
+            }
+            // Priority 2: defaultWidths from resizeConfig (only if column width not set)
+            else if (defaultWidths[col.dataField]) {
+                widths[col.dataField] = defaultWidths[col.dataField];
+            }
+        });
+        return widths;
+    }, [columns, defaultWidths]);
+    const [columnWidths, setColumnWidths] = useState(initialWidths);
+    const [isResizing, setIsResizing] = useState(false);
+    const [resizingColumn, setResizingColumn] = useState(null);
+    // Refs for drag tracking
+    const startXRef = useRef(0);
+    const startWidthRef = useRef(0);
+    const currentColumnRef = useRef(null);
+    const headerRefMap = useRef(new Map());
+    // Update widths when columns change - Column-level width takes FIRST priority
+    useEffect(() => {
+        setColumnWidths((prev) => {
+            const newWidths = { ...prev };
+            columns.forEach((col) => {
+                // Only add if not already set (user hasn't resized it)
+                if (!(col.dataField in newWidths)) {
+                    // Priority 1: Column-level width
+                    if (typeof col.width === 'number') {
+                        newWidths[col.dataField] = col.width;
+                    }
+                    else if (typeof col.width === 'string' && col.width.endsWith('px')) {
+                        newWidths[col.dataField] = parseInt(col.width, 10);
+                    }
+                    // Priority 2: defaultWidths from resizeConfig
+                    else if (defaultWidths[col.dataField]) {
+                        newWidths[col.dataField] = defaultWidths[col.dataField];
+                    }
+                }
+            });
+            return newWidths;
+        });
+    }, [columns, defaultWidths]);
+    // Handle mouse move during resize
+    const handleMouseMove = useCallback((e) => {
+        if (!currentColumnRef.current)
+            return;
+        const deltaX = e.clientX - startXRef.current;
+        let newWidth = startWidthRef.current + deltaX;
+        // Apply min/max constraints
+        const column = columns.find((col) => col.dataField === currentColumnRef.current);
+        const colMinWidth = typeof column?.minWidth === 'number'
+            ? column.minWidth
+            : typeof column?.minWidth === 'string' && column.minWidth.endsWith('px')
+                ? parseInt(column.minWidth, 10)
+                : minWidth;
+        const colMaxWidth = typeof column?.maxWidth === 'number'
+            ? column.maxWidth
+            : typeof column?.maxWidth === 'string' && column.maxWidth.endsWith('px')
+                ? parseInt(column.maxWidth, 10)
+                : maxWidth;
+        newWidth = Math.max(colMinWidth, Math.min(colMaxWidth, newWidth));
+        setColumnWidths((prev) => ({
+            ...prev,
+            [currentColumnRef.current]: newWidth,
+        }));
+    }, [columns, minWidth, maxWidth]);
+    // Handle mouse up (end resize)
+    const handleMouseUp = useCallback(() => {
+        if (currentColumnRef.current) {
+            const finalWidth = columnWidths[currentColumnRef.current];
+            onResizeEnd?.(currentColumnRef.current, finalWidth);
+            onResize?.(columnWidths);
+        }
+        setIsResizing(false);
+        setResizingColumn(null);
+        currentColumnRef.current = null;
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, [columnWidths, handleMouseMove, onResize, onResizeEnd]);
+    // Handle mouse down (start resize)
+    const handleMouseDown = useCallback((e, dataField, headerRef) => {
+        if (!enabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const headerEl = headerRef.current;
+        if (!headerEl)
+            return;
+        const currentWidth = headerEl.offsetWidth;
+        startXRef.current = e.clientX;
+        startWidthRef.current = currentWidth;
+        currentColumnRef.current = dataField;
+        setIsResizing(true);
+        setResizingColumn(dataField);
+        onResizeStart?.(dataField, currentWidth);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }, [enabled, handleMouseMove, handleMouseUp, onResizeStart]);
+    // Handle double-click for auto-fit
+    const handleDoubleClick = useCallback((e, dataField) => {
+        if (!enabled || !autoFit)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // Get all cells for this column and find the max content width
+        const cells = document.querySelectorAll(`[data-column="${dataField}"]`);
+        let maxContentWidth = minWidth;
+        cells.forEach((cell) => {
+            // Create a temporary span to measure text width
+            const span = document.createElement('span');
+            span.style.visibility = 'hidden';
+            span.style.position = 'absolute';
+            span.style.whiteSpace = 'nowrap';
+            span.style.font = window.getComputedStyle(cell).font;
+            span.textContent = cell.innerText;
+            document.body.appendChild(span);
+            maxContentWidth = Math.max(maxContentWidth, span.offsetWidth + 24); // Add padding
+            document.body.removeChild(span);
+        });
+        // Apply constraints
+        maxContentWidth = Math.min(maxContentWidth, maxWidth);
+        setColumnWidths((prev) => {
+            const newWidths = { ...prev, [dataField]: maxContentWidth };
+            onResize?.(newWidths);
+            return newWidths;
+        });
+        onResizeEnd?.(dataField, maxContentWidth);
+    }, [enabled, autoFit, minWidth, maxWidth, onResize, onResizeEnd]);
+    // Get resize handle component
+    const getResizeHandle = useCallback((dataField, headerRef) => {
+        if (!enabled)
+            return null;
+        headerRefMap.current.set(dataField, headerRef);
+        return (_jsx(ResizeHandle, { "$isResizing": resizingColumn === dataField, "$handleColor": handleColor, "$handleHoverColor": handleHoverColor, "$handleWidth": handleWidth, onMouseDown: (e) => handleMouseDown(e, dataField, headerRef), onDoubleClick: (e) => handleDoubleClick(e, dataField), onClick: (e) => e.stopPropagation() }));
+    }, [
+        enabled,
+        resizingColumn,
+        handleColor,
+        handleHoverColor,
+        handleWidth,
+        handleMouseDown,
+        handleDoubleClick,
+    ]);
+    // Reset all widths
+    const resetWidths = useCallback(() => {
+        setColumnWidths(initialWidths);
+        onResize?.(initialWidths);
+    }, [initialWidths, onResize]);
+    // Set specific column width
+    const setColumnWidth = useCallback((dataField, width) => {
+        const constrainedWidth = Math.max(minWidth, Math.min(maxWidth, width));
+        setColumnWidths((prev) => {
+            const newWidths = { ...prev, [dataField]: constrainedWidth };
+            onResize?.(newWidths);
+            return newWidths;
+        });
+    }, [minWidth, maxWidth, onResize]);
+    return {
+        columnWidths,
+        getResizeHandle,
+        resetWidths,
+        setColumnWidth,
+        isResizing,
+        resizingColumn,
+    };
+}
+// ============================================================================
+// Helper: Get column style with resize width
+// ============================================================================
+export function getColumnStyle(column, columnWidths, resizable, isResizing) {
+    const style = {};
+    // Use resized width if available
+    if (resizable && columnWidths[column.dataField]) {
+        style.width = columnWidths[column.dataField];
+        style.minWidth = columnWidths[column.dataField];
+        style.maxWidth = columnWidths[column.dataField];
+    }
+    else {
+        // Use column-defined widths
+        if (column.width) {
+            style.width = column.width;
+        }
+        if (column.minWidth) {
+            style.minWidth = column.minWidth;
+        }
+        if (column.maxWidth) {
+            style.maxWidth = column.maxWidth;
+        }
+    }
+    // Add smooth transition when not actively resizing (for auto-fit double-click)
+    if (resizable && !isResizing) {
+        style.transition = 'width 0.2s cubic-bezier(0.4, 0, 0.2, 1)';
+    }
+    return style;
+}
+export const ResizableHeaderCell = ({ children, dataField, resizable, getResizeHandle, style, className, }) => {
+    const headerRef = useRef(null);
+    return (_jsxs("th", { ref: headerRef, style: { ...style, position: 'relative' }, className: className, "data-column": dataField, children: [children, resizable && getResizeHandle(dataField, headerRef)] }));
+};
+// ============================================================================
+// Export
+// ============================================================================
+export default {
+    useColumnResize,
+    getColumnStyle,
+    ResizeHandle,
+    ResizeLine,
+    ResizableHeaderCell,
+};