funda-ui 4.5.711 → 4.5.713

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,154 +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 [rootDataInfo, setRootDataInfo] = useState<null | {totalRow: number}>(null);
-    const refNode = useRef(new Map<string, HTMLTableElement>());
-    const [focusableCellId, setFocusableCellId] = useState<string>('');
-
-    const { handleKeyPressed } = useTableKeyPress({
-        enabled: keyboardFocusable,
-        data: [{a: 1, b: 2, c: 3}],
-        spyElement: rootRef.current,
-        rootDataInfo,
-        setRootDataInfo,
-        refNode,
-        focusableCellId,
-        setFocusableCellId,
-        onCellKeyPressed
-    }, [rootRef]);
-    
-
-    return (
-        <div 
-            ref={rootRef} 
-            tabIndex={-1}
-            onKeyDown={handleKeyPressed}  // require "tabIndex" attribute
-        >Test</div>
-    );
-};
-
- */
-import { useEffect, useCallback, KeyboardEvent } from "react";
-
-import { initOrderProps, initRowColProps, cellMark, removeCellFocusClassName } from '../func';
-
-export interface UseTableKeyPressProps {
-    enabled?: boolean;
-    data: any[];
-    spyElement?: any;
-    rootDataInfo: null | {totalRow: number}; 
-    setRootDataInfo: (s: null | {totalRow: number}) => void;
-    refNode: any;
-    focusableCellId: string;
-    setFocusableCellId: (s: string) => void;
-    onCellKeyPressed: (classname: string, elem: HTMLTableCellElement, event: KeyboardEvent) => void;
-    onKeyDown?: (e: any) => void;
-}
-
-
-const useTableKeyPress = ({
-    enabled,
-    data,
-    spyElement,
-    rootDataInfo,
-    setRootDataInfo,
-    refNode,
-    focusableCellId,
-    setFocusableCellId,
-    onCellKeyPressed,
-    onKeyDown
-}: UseTableKeyPressProps, deps: any[]) => {
-   
-    const handleKeyPressed = useCallback( async (event: KeyboardEvent<HTMLTableCellElement>) => {
-        if (!Array.isArray(data) || rootDataInfo === null || spyElement === null || typeof enabled === 'undefined' || enabled === false) return;
-
-        const key = event.code;
-        const oldCellSignal = focusableCellId?.replace('cell-', '').split('-');
-        let _row = Number(oldCellSignal[0]);
-        let _col = Number(oldCellSignal[1]);
-
-
-        const move = (key: string) => {
-  
-            switch (key) {
-                case 'ArrowLeft':
-                    _col = _col - 1 < 0 ? 0 : _col - 1;
-                break;
-                case 'ArrowRight':
-                    _col = _col + 1 > data.length - 1 ? data.length -1 : _col + 1;
-                break;
-                case 'ArrowUp':
-                    _row =  _row - 1 < 0 ? 0 : _row - 1;
-                break;
-                case 'ArrowDown':
-                    _row = _row + 1 > rootDataInfo.totalRow - 1 ? rootDataInfo.totalRow - 1 : _row + 1;
-                break;
-            }
-
-            const nextCellSignal: string = cellMark(_row, _col);
-            
-            // focus current cell
-            removeCellFocusClassName(spyElement);
-            spyElement.querySelector(`.${nextCellSignal}`)?.classList.add('cell-focus');
-
-            
-            //
-            setFocusableCellId(nextCellSignal);
-
-            // callback
-            onCellKeyPressed?.(nextCellSignal, refNode.current.get(nextCellSignal), event);
-            onKeyDown?.(event);
-
-        };
-      
-        if (key === 'ArrowLeft') {
-            move('ArrowLeft');
-        }
-
-        if (key === 'ArrowRight') {
-            move('ArrowRight');
-        }
-
-      
-        if (key === 'ArrowUp') {
-            move('ArrowUp');
-        }
-
-        if (key === 'ArrowDown') {
-            move('ArrowDown');
-        }
-
-    }, [focusableCellId]);
-
-    useEffect(() => {
-        if (enabled) {
-
-            // Initialize custom props of table elements
-            initOrderProps(spyElement);
-            initRowColProps(spyElement);
-
-            // Update cell ids
-            if (Array.isArray(data)) {
-                setRootDataInfo({
-                    totalRow: data.length
-                });
-            }
-        }
-    }, [enabled, spyElement, ...deps]);
-
-
-    return {
-        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;
-