funda-ui 4.7.711 → 4.7.730

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -14,6 +14,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import getOs from 'funda-utils//dist/cjs/os';
 
 
+
 export interface EventsValueConfig {
     id: string | number;
     date: string,
@@ -79,7 +80,7 @@ export type EventCalendarTimelineProps = {
     onChangeWeek?: (startDate: string, endDate: string) => void;
     onListRenderComplete?: () => void;
     onChangeAppearanceMode?: (mode: string) => void;
-
+    enableHeaderResize?: boolean; 
 
 
     // modal dialog
@@ -169,6 +170,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         onChangeWeek,
         onListRenderComplete,
         onChangeAppearanceMode,
+        enableHeaderResize,
 
         //
         modalMaskOpacity,
@@ -273,11 +275,17 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const AUTO_SCROLL = autoScroll || false;
     const HEADER_SHOW_WEEK = headerShowWeek || false;
     const BODY_DRAG = draggable || false;
+    const ENABLE_HEADER_RESIZE = enableHeaderResize || false;
     const tableGridRef = useRef<any>(null);
     const tableGridHeaderRef = useRef<any>(null);
     const scrollHeaderRef = useRef(null);
     const scrollBodyRef = useRef(null);
     const scrollListRef = useRef(null);
+    
+    // header resize drag
+    const isResizingRef = useRef<boolean>(false);
+    const resizeStartXRef = useRef<number>(0);
+    const resizeStartWidthRef = useRef<number>(0);
 
     // Temporary date
     const [tempDate, setTempDate] = useState<string>('');
@@ -2121,7 +2129,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
-
     function tableGridReset() {
         if (tableGridRef.current === null) return;
 
@@ -2153,13 +2160,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
-
-
-
-    // ================================================================
-    // 
-    // ================================================================
-    //if user change the selectedYear, then udate the years array that is displayed on year tab view
+    // if user change the selectedYear, then udate the years array that is displayed on year tab view
     useEffect(() => {
         const years: number[] = [];
         for (let y = selectedYear - 10; y < selectedYear + 10; y++) {
@@ -2230,6 +2231,102 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         }
 
     }, []);
+
+    
+    // ================================================================
+    // Handle header resize drag
+    // ================================================================
+    const handleHeaderResizeMove = useCallback((e: MouseEvent | TouchEvent) => {
+        if (!isResizingRef.current || !tableGridRef.current) return;
+        
+        const tableGridEl: any = tableGridRef.current;
+        // Find the header title element that should have the CSS variable
+        const headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle') as HTMLElement;
+        if (!headerTitleEl) return;
+        
+        // Get clientX from either MouseEvent or TouchEvent
+        const clientX = 'touches' in e ? e.touches[0]?.clientX : e.clientX;
+        if (clientX === undefined) return;
+        
+        const deltaX = clientX - resizeStartXRef.current;
+        const newWidth = Math.max(100, resizeStartWidthRef.current + deltaX); // Minimum width 100px
+        
+        // Update CSS variable on the header title element
+        headerTitleEl.style.setProperty('--custom-event-tl-table-header-w', `${newWidth}px`);
+    }, []);
+
+    const handleHeaderResizeEnd = useCallback(() => {
+        if (!isResizingRef.current) return;
+        
+        isResizingRef.current = false;
+        document.removeEventListener('mousemove', handleHeaderResizeMove);
+        document.removeEventListener('mouseup', handleHeaderResizeEnd);
+        document.removeEventListener('touchmove', handleHeaderResizeMove);
+        document.removeEventListener('touchend', handleHeaderResizeEnd);
+        
+        // Recalculate table grid after resize
+        if (tableGridRef.current) {
+            tableGridInit();
+        }
+    }, [handleHeaderResizeMove]);
+
+    const handleHeaderResizeStart = useCallback((e: React.MouseEvent) => {
+        if (!ENABLE_HEADER_RESIZE || !tableGridRef.current) return;
+        
+        e.preventDefault();
+        e.stopPropagation();
+        
+        isResizingRef.current = true;
+        resizeStartXRef.current = e.clientX;
+        
+        const tableGridEl: any = tableGridRef.current;
+        const headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle') as HTMLElement;
+        if (headerTitleEl) {
+            resizeStartWidthRef.current = headerTitleEl.clientWidth;
+        }
+        
+        document.addEventListener('mousemove', handleHeaderResizeMove);
+        document.addEventListener('mouseup', handleHeaderResizeEnd);
+    }, [ENABLE_HEADER_RESIZE, handleHeaderResizeMove, handleHeaderResizeEnd]);
+
+    const handleHeaderResizeTouchStart = useCallback((e: React.TouchEvent) => {
+        if (!ENABLE_HEADER_RESIZE || !tableGridRef.current) return;
+        
+        e.preventDefault();
+        e.stopPropagation();
+        
+        isResizingRef.current = true;
+        const touch = e.touches[0];
+        if (touch) {
+            resizeStartXRef.current = touch.clientX;
+        }
+        
+        const tableGridEl: any = tableGridRef.current;
+        const headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle') as HTMLElement;
+        if (headerTitleEl) {
+            resizeStartWidthRef.current = headerTitleEl.clientWidth;
+        }
+        
+        document.addEventListener('touchmove', handleHeaderResizeMove, { passive: false });
+        document.addEventListener('touchend', handleHeaderResizeEnd);
+    }, [ENABLE_HEADER_RESIZE, handleHeaderResizeMove, handleHeaderResizeEnd]);
+
+
+    
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            document.removeEventListener('mousemove', handleHeaderResizeMove);
+            document.removeEventListener('mouseup', handleHeaderResizeEnd);
+            document.removeEventListener('touchmove', handleHeaderResizeMove);
+            document.removeEventListener('touchend', handleHeaderResizeEnd);
+        };
+    }, [handleHeaderResizeMove, handleHeaderResizeEnd]);
+
+
+
+
+  
     return (
         <>
 
@@ -2417,6 +2514,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                             <thead role="presentation">
                                                 <tr role="row">
                                                     <th role="columnheader">
+                                                        {/**
+                                                         * The width of the left column header is set using ".custom-event-tl-table__cell-cushion-headertitle".
+                                                         */}
                                                         <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle">
                                                             {tableListSectionTitle || ''}
                                                         </div>
@@ -2431,7 +2531,18 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
                                 </th>
-                                <th role="presentation" className="custom-event-tl-table__timeline-divider"><div></div></th>
+                                <th 
+                                    role="presentation" 
+                                    className={combinedCls(
+                                        'custom-event-tl-table__timeline-divider',
+                                        ENABLE_HEADER_RESIZE ? 'custom-event-tl-table__timeline-divider--resizable' : ''
+                                    )}
+                                    onMouseDown={ENABLE_HEADER_RESIZE ? handleHeaderResizeStart : undefined}
+                                    onTouchStart={ENABLE_HEADER_RESIZE ? handleHeaderResizeTouchStart : undefined}
+                                    style={ENABLE_HEADER_RESIZE ? { cursor: 'col-resize', userSelect: 'none' } : undefined}
+                                >
+                                    <div></div>
+                                </th>
                                 <th role="presentation">
                                     <div
                                         ref={scrollHeaderRef}
@@ -2507,12 +2618,20 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
                                 </td>
+
+                                {/**
+                                 * The dividing line between the left title column and the right content
+                                 */}
                                 <td
                                     role="presentation"
                                     className={combinedCls(
                                         'custom-event-tl-table__timeline-divider',
-                                        tableListDividerClassName
+                                        tableListDividerClassName,
+                                        ENABLE_HEADER_RESIZE ? 'custom-event-tl-table__timeline-divider--resizable' : ''
                                     )}
+                                    onMouseDown={ENABLE_HEADER_RESIZE ? handleHeaderResizeStart : undefined}
+                                    onTouchStart={ENABLE_HEADER_RESIZE ? handleHeaderResizeTouchStart : undefined}
+                                    style={ENABLE_HEADER_RESIZE ? { cursor: 'col-resize', userSelect: 'none' } : undefined}
                                 >
                                     <div></div>
                                 </td>

package/lib/esm/ModalDialog/index.tsx

@@ -13,7 +13,6 @@ import {
 } from 'funda-utils/dist/cjs/bodyScrollLock';
 
 
-
 declare global {
     interface Window {
         curVideo?: any;

package/lib/esm/Table/Table.tsx

@@ -5,6 +5,7 @@ import useComId from 'funda-utils/dist/cjs/useComId';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import { TableProvider } from './TableContext';
 import useTableResponsive from './utils/hooks/useTableResponsive';
 import useTableDraggable from './utils/hooks/useTableDraggable';
@@ -148,10 +149,10 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
 
     // initialize drag & drop data
     const {
-        handleDragStart,
-        handleDragEnd,
-        handledragOver,
-        handleTbodyEnter
+        isDragging,
+        dragHandlers,
+        handleTbodyEnter,
+        handleTbodyLeave
     } = useTableDraggable({
         enabled: rowDraggable && rootRef.current,
         data: data,
@@ -268,9 +269,10 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
 
                 // drag & drop
                 rowDraggable,
-                handleDragStart,
-                handleDragEnd,
-                handledragOver,
+                isRowDragging: isDragging,
+                handleDragStart: dragHandlers.handleDragStart,
+                handleDragEnd: dragHandlers.handleDragEnd,
+                handledragOver: dragHandlers.handleDragOver,
                 handleTbodyEnter,
                 
 

package/lib/esm/Table/TableRow.tsx

@@ -44,9 +44,15 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
     // selection
     // ================================================================
     const _res = convertMapToArr(selectedItems);
+    // Performance optimization: stringify itemData only once instead of N times
+    const itemDataStr = itemData ? JSON.stringify(itemData) : '';
     const filteredSelectedItems = _res.map((v: any) => Number(v)).map((rowNum: number) => {
-        if (JSON.stringify(itemData) === JSON.stringify(originData[rowNum])) {
-            return originData[rowNum];
+        const originItem = originData?.[rowNum];
+        // Fast path: reference equality
+        if (itemData === originItem) return originItem;
+        // Fallback: JSON comparison (itemDataStr is cached)
+        if (itemDataStr && itemDataStr === JSON.stringify(originItem)) {
+            return originItem;
         }
     }).filter(Boolean);
     const selectedClassName = activeClassName || 'active';
@@ -64,7 +70,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
                 onDragEnd={rowDraggable ? handleDragEnd : () => void(0)} 
                 data-row-data={`${itemData && typeof itemData === 'object' ? JSON.stringify(itemData) : itemData}`}
                 
-                className={`row-obj ${className || ''} ${active ? selectedClassName : ''} ${itemData && originData ? (filteredData.every((item: any) => filterFieldsData.some((s: string) => !item[s]?.toLowerCase().includes(itemData[s]?.toLowerCase())) ) ? 'd-none' : '') : ''} ${itemData && originData ? (filteredSelectedItems.some((item: any) => JSON.stringify(itemData) === JSON.stringify(item) ) ? selectedClassName : '') : ''}`}
+                className={`row-obj ${className || ''} ${active ? selectedClassName : ''} ${itemData && originData ? (filteredData.every((item: any) => filterFieldsData.some((s: string) => !item[s]?.toLowerCase().includes(itemData[s]?.toLowerCase())) ) ? 'd-none' : '') : ''} ${itemData && originData && filteredSelectedItems.length > 0 ? selectedClassName : ''}`}
             >
                 {children}
             </tr>

package/lib/esm/Table/index.scss

@@ -1,3 +1,5 @@
+
+
 /* ======================================================
     <!-- Table (Synthetic) -->
 /* ====================================================== */
@@ -7,7 +9,7 @@
     --syntable-row-active-bg: #f0f8ff;
     --syntable-scrollbar-color: rgba(0, 0, 0, 0.2);
     --syntable-scrollbar-track: rgba(0, 0, 0, 0);
-    --syntable-scrollbar-h: 3px;
+    --syntable-scrollbar-h: 10px;
     --syntable-scrollbar-w: 10px;
     --syntable-padding-x: 1rem;
     --syntable-padding-y: 0.5rem;
@@ -165,11 +167,13 @@
 
             .row-obj-clonelast {
                 height: 0 !important;
-
+                border-color: transparent !important;
+                padding: 0 !important;
              
                 td {
                     border: none;
                     box-shadow: none;
+                    padding: 0 !important;
                 }
             }
 
@@ -190,11 +194,13 @@
         }
 
         /* placeholder */
+        .row-obj-lastplaceholder,
         .row-placeholder {
             border: 2px dotted #b5ba91;
             background-color: #e4e9c3;
         }
         
+        
         /* trigger */
         .drag-trigger {
             display: inline-block;

package/lib/esm/Table/utils/DragHandleSprite.tsx

@@ -15,7 +15,8 @@ const DragHandleSprite = forwardRef((props: DragHandleSpriteProps, externalRef:
 
     const {
         rowDraggable,
-        handleTbodyEnter
+        handleTbodyEnter,
+        handleTbodyLeave
     } = useContext(TableContext);
 
     return (
@@ -23,7 +24,10 @@ const DragHandleSprite = forwardRef((props: DragHandleSpriteProps, externalRef:
             {rowDraggable ? <span
                 ref={externalRef}
                 className={className || 'drag-trigger'}
-                onMouseEnter={handleTbodyEnter}
+                // Only when mousedown happens on this handle will we allow row dragging.
+                onMouseDown={handleTbodyEnter}
+                onMouseUp={handleTbodyLeave}
+                onMouseLeave={handleTbodyLeave}
             >
                 {icon || <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none">
                     <g>

package/lib/esm/Table/utils/func.ts

@@ -63,6 +63,14 @@ export function initOrderProps(rootElem: any) {
 
 export function initRowColProps(rootElem: any) {
     if (rootElem === null) return;
+
+    // !!! Important, performance optimization for large data renderings
+    // With this protection, it is only performed once
+    if (typeof rootElem.dataset.rowColPropsInit !== 'undefined') return;
+    rootElem.dataset.rowColPropsInit = '1';
+
+
+    //
     const _allRows = allRows(rootElem);
     const _allHeadRows = allHeadRows(rootElem);
 
@@ -167,7 +175,10 @@ export function cellMark(row: number | string | undefined, col: number | string
 
 export function removeCellFocusClassName(root: any) {
     if (root) {
-        [].slice.call(root.querySelectorAll('td, th')).forEach((el: HTMLTableElement) => {
+        // !!! Important, performance optimization for large data renderings
+        // Only query elements with cell-focus classes
+        const focusedCells = root.querySelectorAll('td.cell-focus, th.cell-focus');
+        focusedCells.forEach((el: HTMLElement) => {
             el.classList.remove('cell-focus');
         });
     }