funda-ui 4.7.620 → 4.7.624

package/publish/lib/esm/Table/utils/hooks/useTableDraggable.tsx

@@ -0,0 +1,342 @@
+/**
+ * Handles the event of drag-and-drop sorting
+ * 
+ * @usage:
+
+const App = () => {
+
+    const rowDraggable = true;
+    const data = [{a: 1}, {b: 2}]
+    const rootRef = useRef<any>(null);
+
+    const {
+        handleDragStart,
+        handleDragEnd,
+        handledragOver,
+        handleTbodyEnter
+    } = useTableDraggable({
+        enabled: rowDraggable && spyElement,
+        data: data,
+        spyElement: spyElement
+        onRowDrag: (dragStart: any, dragEnd: any) => void(0)
+    }, [data, rootRef]);
+
+    return (
+        <div 
+            ref={rootRef} 
+        >Test</div>
+    );
+
+};
+
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+
+import { getTbody, allRows, insertAfter, sortDataByIndex, initOrderProps, initRowColProps } from '../func';
+
+
+export interface UseTableDraggableProps {
+    enabled: boolean;
+    data?: any[];
+    spyElement?: any;
+    onRowDrag?: (dragStart: any, dragEnd: any) => void;
+
+}
+
+function useTableDraggable({
+    enabled,
+    data,
+    spyElement,
+    onRowDrag,
+}: UseTableDraggableProps, deps: any[]) {
+
+    // drag & drop
+    const [sortData, setSortData] = useState<any[] | undefined>([]);
+
+
+    // ================================================================
+    // drag & drop
+    // ================================================================
+    let draggedObj: any = null;
+    let overObj: any = null;
+
+    const placeholderGenerator = (trHeight: number) => {
+        const tbodyRef: any = getTbody(spyElement);
+        if (tbodyRef === null || tbodyRef.querySelector('tr') === null) return;
+
+        // Insert a row at the "index" of the table
+        const newRow = document.createElement('tr');
+        newRow.className = 'row-placeholder';
+        newRow.dataset.placeholder = 'true';
+        newRow.style.height = trHeight + 'px';
+
+        // Insert a cell in the row at index
+        const newCell = newRow.insertCell(0);
+        newCell.colSpan = tbodyRef.querySelector('tr').children.length;
+
+        // Append a text node to the cell
+        const newText = document.createTextNode(' ');
+        newCell.appendChild(newText);
+
+        return newRow;
+    };
+
+    const lastRowGenerator = (trHeight: number) => {
+        const tbodyRef: any = getTbody(spyElement);
+        if (tbodyRef === null || tbodyRef.querySelector('tr') === null) return;
+
+        const cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
+        if (cloneEl !== null) return;
+
+
+        // Insert a row at the "index" of the table
+        const newRow = document.createElement('tr');
+        newRow.className = 'row-obj row-obj-clonelast';
+        newRow.dataset.order = allRows(spyElement).length.toString();
+        newRow.style.height = trHeight + 'px';
+        newRow.style.display = 'none';
+        
+
+        // Insert a cell in the row at index
+        const newCell = newRow.insertCell(0);
+        newCell.colSpan = tbodyRef.querySelector('tr').children.length;
+
+        // Append a text node to the cell
+        const newText = document.createTextNode(' ');
+        newCell.appendChild(newText);
+
+        return newRow;
+    };
+
+
+    const removePlaceholder = () => {
+        const tbodyRef: any = getTbody(spyElement);
+        if (tbodyRef === null) return;
+
+        // Delete row at the "index" of the table
+        const placeholder = [].slice.call(tbodyRef.querySelectorAll(`[data-placeholder]`));
+        placeholder.forEach((node: any) => {
+            tbodyRef.removeChild(node);
+        });
+
+    };
+
+
+    // Initialize drag & drop data
+    // !!! Execute it only once
+    const initDragDropData = () => {
+        if (spyElement === null) return;
+        if (typeof spyElement.dataset.dragdropDataInit !== 'undefined') return;
+        spyElement.dataset.dragdropDataInit = 1;
+        
+        const _allRows = allRows(spyElement);
+
+
+        // sort list data
+        const listIndexes: any[] | undefined = _allRows.map((node: any, i: number) => i);
+        setSortData(listIndexes);
+
+        //last placeholder
+        if (_allRows.length > 0) {
+            const lastEl: any = lastRowGenerator((_allRows.at(-1) as any).clientHeight);
+            if (typeof _allRows.at(-1) !== 'undefined') {
+                insertAfter(lastEl, _allRows.at(-1));
+            }
+        }
+
+        
+    };
+
+    const handleTbodyEnter = (e: any) => {
+        const _table: any = e.currentTarget.closest('table');
+        if (_table === null) return;
+
+        _table.querySelector('tbody').classList.add('drag-trigger-mousedown');
+    };
+
+    const handleTbodyLeave = (e: any) => {
+        const tbodyRef: any = getTbody(spyElement);
+        if (tbodyRef === null) return;
+
+        tbodyRef?.classList.remove('drag-trigger-mousedown');
+    };
+
+    // events fired on the drop targets
+    const handledragOver = useCallback((e: any) => {
+        const tbodyRef: any = getTbody(spyElement);
+        if (tbodyRef === null) return;
+
+        e.preventDefault();
+        if (draggedObj === null) return;
+
+        draggedObj.style.display = 'none';
+
+
+        if (e.target.classList.contains('row-placeholder')) return;
+
+        const itemsWrapper = e.target.parentNode;
+        if (itemsWrapper.classList.contains('row-obj')) {
+            overObj = itemsWrapper;
+            removePlaceholder();
+
+            if (Number(overObj.dataset.order) === allRows(spyElement).length - 1) {
+                tbodyRef.insertBefore(placeholderGenerator((allRows(spyElement).at(-2) as any).clientHeight), overObj);
+            } else {
+                tbodyRef.insertBefore(placeholderGenerator(overObj.clientHeight), overObj);
+            }
+
+
+        }
+
+    }, [sortData]);
+
+
+    const handleDragStart = useCallback((e: any) => {
+        const tbodyRef: any = getTbody(spyElement);
+        if (tbodyRef === null) return;
+
+        draggedObj = e.currentTarget;
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/html', draggedObj);
+
+        draggedObj.classList.add('dragging');
+        (allRows(spyElement).at(-1) as any).style.setProperty('display', 'table-row', "important");
+
+
+        // callback
+        const dragStart: Function = (callback: Function) => {
+            callback.call(null, draggedObj, sortData, sortDataByIndex(sortData as never, data as never));
+        };
+        onRowDrag?.(dragStart, null);
+
+
+        // init clone <tr>
+        // !!! It needs to be put at the end of the code to fix the location of the clone element
+        const cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
+        if (cloneEl !== null) {
+            cloneEl.style.display = 'none';
+        }
+
+
+    }, [handledragOver]);
+
+    const handleDragEnd = useCallback((e: any) => {
+        const tbodyRef: any = getTbody(spyElement);
+        if (tbodyRef === null) return;
+
+        draggedObj.style.display = 'table-row';
+        removePlaceholder();
+
+        draggedObj.classList.remove('dragging');
+        tbodyRef?.classList.remove('drag-trigger-mousedown');
+
+
+        if (overObj === null) return;
+
+        // update state
+        let curData: number[] = [];
+        curData = JSON.parse(JSON.stringify(sortData));
+        let from = Number(draggedObj.dataset.order);
+        let to = Number(overObj.dataset.order);
+        if (from < to) to--;
+
+
+        //sort data
+        const newData: number[] = [];
+
+        // console.log('--> data1:', curData);
+
+        curData.splice(to, 0, curData.splice(from, 1)[0]);
+
+        for (let i = 0; i < curData.length; i++) {
+            for (let j = 0; j < curData.length; j++) {
+
+                if (curData[i] === curData[j]) {
+                    newData.push(curData[j] as never);
+                }
+            }
+        }
+
+
+        // console.log("--> data2: ", newData);
+        setSortData(newData);
+
+        // reset data-id in order to sort data
+        newData.forEach((curId: any, order: number) => {
+            const _el = spyElement.querySelector('table').querySelector(`tbody [data-key="row-${curId}"]`);
+            if (_el !== null) _el.dataset.order = order;
+
+        });
+
+
+        // sort elements
+        const categoryItemsArray = allRows(spyElement);
+        const sorter = (a: any, b: any) => {
+            let txt1 = Number(a.dataset.order),
+                txt2 = Number(b.dataset.order);
+
+            return txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
+        }
+        const sorted = categoryItemsArray.sort(sorter).reverse();
+        sorted.forEach(e => spyElement.querySelector('table').querySelector('tbody').appendChild(e));
+
+
+        // callback
+        const dragEnd: Function = (callback: Function) => {
+            callback.call(null, draggedObj, newData, sortDataByIndex(newData as never, data as never));
+        };
+        onRowDrag?.(null, dragEnd);
+
+
+
+        // init clone <tr>
+        // !!! It needs to be put at the end of the code to fix the location of the clone element
+        const _allRows = allRows(spyElement);
+        const cloneEl = tbodyRef.querySelector('.row-obj-clonelast');
+        if (cloneEl !== null) {
+            if (typeof _allRows.at(-1) !== 'undefined') {
+                insertAfter(cloneEl, _allRows.at(-1));
+                cloneEl.style.display = 'none';
+            }
+        }
+   
+
+
+    }, [sortData]);
+
+
+
+    useEffect(() => {
+        if (enabled) {
+            if (Array.isArray(data) && data.length > 0) {  
+                // !!! REQUIRED "data.length > 0" to avoid data-order cannot be assigned when asynchronous data is empty
+                data.forEach((item: any, i: number) => {
+                    item.order = i;
+                });
+
+                // Initialize custom props of table elements
+                initOrderProps(spyElement);
+                initRowColProps(spyElement);
+
+                // Initialize drag & drop data
+                initDragDropData();
+                 
+
+            }
+        }
+    }, [data, enabled, spyElement, ...deps]);
+
+    return {
+        handleDragStart,
+        handleDragEnd,
+        handledragOver,
+        handleTbodyEnter,
+        handleTbodyLeave
+    }
+}
+
+
+export default useTableDraggable;
+

package/publish/lib/esm/Table/utils/hooks/useTableKeyPress.tsx

@@ -0,0 +1,255 @@
+/**
+ * Listens for changes in the pressed state of a given key
+ * 
+ * @usage:
+ *
+ const App = () => {
+     const keyboardFocusable = true;
+     const rootRef = useRef<any>(null);
+     // Effective element movement on keystroke
+ 
+     const refNode = useRef(new Map<string, HTMLTableElement>());
+     const [focusableCellId, setFocusableCellId] = useState<string>('');
+ 
+     // Count the number of columns per row
+     const rootDataInfo = {"totalRow":2,"totalCol":[{"row":0,"colCount":6},{"row":1,"colCount":6},{"row":2,"colCount":6}]};
+
+     // Example: handle cell key press with edge detection
+     const handleCellKeyPressed = (
+         classname: string,
+         elem: HTMLTableCellElement,
+         event: React.KeyboardEvent<Element>,
+         isLeftEdge: boolean,
+         isRightEdge: boolean,
+         isTopEdge: boolean,
+         isBottomEdge: boolean
+     ) => {
+         if (isLeftEdge) {
+             // Handle when at the leftmost cell
+         }
+         if (isRightEdge) {
+             // Handle when at the rightmost cell
+         }
+         if (isTopEdge) {
+             // Handle when at the topmost cell
+         }
+         if (isBottomEdge) {
+             // Handle when at the bottommost cell
+         }
+         // Your business logic here
+     };
+
+     const { handleKeyPressed } = useTableKeyPress({
+         enabled: keyboardFocusable,
+         data: [{ a: 1, b: 2, c: 3 }],
+         spyElement: rootRef.current,
+         rootDataInfo,
+         refNode,
+         focusableCellId,
+         setFocusableCellId,
+         onCellKeyPressed: handleCellKeyPressed,
+         onCellPressEnter: () => {},
+     }, [rootRef]);
+
+     return (
+         <div
+             ref={rootRef}
+             tabIndex={-1}
+             onKeyDown={handleKeyPressed} // require "tabIndex" attribute
+         >Test</div>
+     );
+ };
+ */
+import { useEffect, useCallback, KeyboardEvent, useRef } from "react";
+
+import { initOrderProps, initRowColProps, cellMark, removeCellFocusClassName } from '../func';
+
+export interface UseTableKeyPressProps {
+    enabled?: boolean;
+    data?: any[];
+    spyElement?: any;
+    rootDataInfo: null | { totalRow: number; totalCol: { row: number; colCount: number }[] };
+    refNode: any;
+    focusableCellId: string;
+    setFocusableCellId: (s: string) => void;
+    onCellKeyPressed?: (
+        classname: string,
+        elem: HTMLTableCellElement,
+        event: KeyboardEvent<Element>,
+        isLeftEdge: boolean,
+        isRightEdge: boolean,
+        isTopEdge: boolean,
+        isBottomEdge: boolean
+    ) => void;
+    onCellPressEnter?: (classname: string, elem: HTMLTableCellElement, event: KeyboardEvent<Element>) => void;
+    onKeyDown?: (e: any) => void;
+}
+
+const useTableKeyPress = ({
+    enabled,
+    data,
+    spyElement,
+    rootDataInfo,
+    refNode,
+    focusableCellId,
+    setFocusableCellId,
+    onCellKeyPressed,
+    onCellPressEnter,
+    onKeyDown
+}: UseTableKeyPressProps, deps: any[]) => {
+    const focusableCellIdRef = useRef(focusableCellId);
+    useEffect(() => {
+        focusableCellIdRef.current = focusableCellId;
+    }, [focusableCellId]);
+   
+    const handleKeyPressed = useCallback( async (event: KeyboardEvent<HTMLTableCellElement>) => {
+        const key = event.code;
+        const isNumLockOn = event.getModifierState && event.getModifierState('NumLock');
+
+   
+        // If Enter is pressed and keyboard navigation is disabled, just trigger onCellPressEnter
+        if ((key === 'Enter' || key === 'NumpadEnter') && !enabled) {
+            const currentCell = event.target as HTMLTableCellElement;
+            const row = Number(currentCell.getAttribute('data-table-row'));
+            const col = Number(currentCell.getAttribute('data-table-col'));
+            const nextCellSignal: string = cellMark(row, col);
+            onCellPressEnter?.(nextCellSignal, refNode.current.get(nextCellSignal), event);
+            return;
+        }
+
+        // Guard: Only proceed if all required data and enabled flag are valid
+        if (!Array.isArray(data) || rootDataInfo === null || spyElement === null || typeof enabled === 'undefined' || enabled === false) return;
+
+
+        // Parse the current focused cell's row and column
+        const oldCellSignal = focusableCellIdRef.current?.replace('cell-', '').split('-');
+        let _row = Number(oldCellSignal[0]);
+        let _col = Number(oldCellSignal[1]);
+
+
+        // Move function to handle arrow key navigation
+        const move = (key: string) => {
+            let isLeftEdge = false;
+            let isRightEdge = false;
+            let isTopEdge = false;
+            let isBottomEdge = false;
+            let maxCol = 0;
+            if (rootDataInfo && Array.isArray(rootDataInfo.totalCol)) {
+                const rowInfo = rootDataInfo.totalCol.find(r => r.row === _row);
+                if (rowInfo) {
+                    maxCol = rowInfo.colCount;
+                }
+            }
+
+            
+            // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+            if ((key === 'ArrowLeft') || (key === 'Numpad4' && !isNumLockOn)) {
+                if (_col - 1 < 0) {
+                    isLeftEdge = true;
+                    _col = 0;
+                } else {
+                    _col = _col - 1;
+                }
+            }
+
+            if ((key === 'ArrowRight') || (key === 'Numpad6' && !isNumLockOn)) {
+                if (_col + 1 > maxCol - 1) {
+                    isRightEdge = true;
+                    _col = maxCol - 1;
+                } else {
+                    _col = _col + 1;
+                }
+            }
+
+            if ((key === 'ArrowUp') || (key === 'Numpad8' && !isNumLockOn)) {
+                if (_row - 1 < 0) {
+                    isTopEdge = true;
+                    _row = 0;
+                } else {
+                    _row = _row - 1;
+                }
+            }
+
+            if ((key === 'ArrowDown') || (key === 'Numpad2' && !isNumLockOn)) {
+                if (_row + 1 > rootDataInfo.totalRow - 1) {
+                    isBottomEdge = true;
+                    _row = rootDataInfo.totalRow - 1;
+                } else {
+                    _row = _row + 1;
+                }
+            }
+
+            
+
+            const nextCellSignal: string = cellMark(_row, _col);
+            // Focus the current cell
+            removeCellFocusClassName(spyElement);
+
+
+            const targetCell = refNode.current.get(nextCellSignal);
+            if (typeof targetCell !== 'undefined') {
+                targetCell.classList.add('cell-focus');
+            }
+            
+     
+            setFocusableCellId(nextCellSignal);
+            // Callback with edge detection
+            onCellKeyPressed?.(
+                nextCellSignal,
+                refNode.current.get(nextCellSignal),
+                event,
+                isLeftEdge,
+                isRightEdge,
+                isTopEdge,
+                isBottomEdge
+            );
+            onKeyDown?.(event);
+        };
+      
+        // Handle arrow key navigation
+        // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+        if ((key === 'ArrowLeft') || (key === 'Numpad4' && !isNumLockOn)) {
+            move('ArrowLeft');
+        }
+
+        if ((key === 'ArrowRight') || (key === 'Numpad6' && !isNumLockOn)) {
+            move('ArrowRight');
+        }
+
+        if ((key === 'ArrowUp') || (key === 'Numpad8' && !isNumLockOn)) {
+            move('ArrowUp');
+        }
+
+        if ((key === 'ArrowDown') || (key === 'Numpad2' && !isNumLockOn)) {
+            move('ArrowDown');
+        }
+
+        // Handle Enter key
+        if (key === 'Enter' || key === 'NumpadEnter') {
+            const nextCellSignal: string = cellMark(_row, _col);
+            onCellPressEnter?.(nextCellSignal, refNode.current.get(nextCellSignal), event);
+        }        
+
+    }, [focusableCellId, rootDataInfo, data]);
+
+    useEffect(() => {
+        if (enabled) {
+            // Initialize custom props of table elements (only once)
+            initOrderProps(spyElement);
+            initRowColProps(spyElement);
+        }
+    }, [enabled, spyElement, ...deps]);
+
+    return {
+        handleKeyPressed,
+        
+        /**
+         * Expose handleKeyPressed for external usage, e.g., via contentRef in Table component.
+         * This allows calling handleKeyPressed programmatically from outside, such as with a custom onCellKeyPressed method.
+         */
+        triggerCellKeyPressed: handleKeyPressed,
+    };
+};
+
+export default useTableKeyPress;
+

package/publish/lib/esm/Table/utils/hooks/useTableResponsive.tsx

@@ -0,0 +1,92 @@
+/**
+ * Handles the event of responsive table
+ * 
+ * @usage:
+
+const App = () => {
+
+    const responsiveTable = true;
+    const rootRef = useRef<any>(null);
+
+    useTableResponsive({
+        enabled: responsiveTable && rootRef.current,
+        spyElement: rootRef.current
+    }, [rootRef]);
+
+    return (
+        <div 
+            ref={rootRef} 
+        >Test</div>
+    );
+};
+
+ */
+
+import { useEffect } from 'react';
+
+import { tableElemScrolledInit, initOrderProps, initRowColProps } from '../func';
+
+export interface UseTableResponsiveProps {
+    enabled: boolean;
+    spyElement?: HTMLElement | null;
+}
+
+function useTableResponsive({
+    enabled,
+    spyElement,
+}: UseTableResponsiveProps, deps: any[]) {
+
+    const debounce = (fn: Function, limit: number = 300): any => {
+        let timer: any;
+        return function(this: any) {
+            clearTimeout(timer);
+            timer = setTimeout(function(this: any) {
+                fn.apply(this, arguments);
+            }, limit);
+        }
+    };
+
+    const windowResizeUpdate = debounce(handleWindowUpdate, 50);
+    let windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0;
+
+    function handleWindowUpdate() {
+
+        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
+        if (window.innerWidth != windowWidth) {
+
+            // Update the window width for next time
+            windowWidth = window.innerWidth;
+
+            // Do stuff here
+            tableElemScrolledInit(spyElement as never, windowWidth);
+
+        }
+    }
+
+    useEffect(() => {
+        if (enabled) {
+
+            // Initialize custom props of table elements
+            initOrderProps(spyElement);
+            initRowColProps(spyElement);
+  
+            // With scroll bars
+            let windowWidth = window.innerWidth;
+            tableElemScrolledInit(spyElement as never, windowWidth);
+
+
+            // Add function to the element that should be used as the scrollable area.
+            window.removeEventListener('resize', windowResizeUpdate);
+            window.addEventListener('resize', windowResizeUpdate);
+
+            // Remove the global list of events, especially as scroll and interval.
+            return () => {
+                window.removeEventListener('resize', windowResizeUpdate);
+            };
+        }
+    }, [enabled, spyElement, ...deps]);
+}
+
+
+export default useTableResponsive;
+