funda-ui 4.5.682 → 4.5.711

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,154 @@
+/**
+ * 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

@@ -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;
+