funda-ui 4.7.624 → 4.7.625

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

@@ -1,342 +0,0 @@
-/**
- * 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

@@ -1,255 +0,0 @@
-/**
- * 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

@@ -1,92 +0,0 @@
-/**
- * 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;
-