funda-ui 4.7.624 → 4.7.701

package/publish/lib/esm/Table/utils/SortSprite.tsx

@@ -1,63 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import { TableContext } from '../TableContext';
-
-import useTableSort from './hooks/useTableSort';
-
-export type SortSpriteProps = {
-    fieldType: 'text' | 'number' | 'date';
-    className?: string;
-    icon?: React.ReactNode;
-    isReverse?: boolean;
-    onClick?: (e: any) => void;
-    sortBy?: (handleProcess: Function, filterType: string, inverse: boolean) => ((a: Element, b: Element) => number); // A function that determines the order of the elements. 
-};
-
-
-const SortSprite = forwardRef((props: SortSpriteProps, externalRef: any) => {
-    const {
-        fieldType,
-        className,
-        icon,
-        isReverse = false,
-        onClick,
-        sortBy
-    } = props;
-
-    const {
-        originData,
-        rootRef,
-        colSortable,
-        onColSort
-    } = useContext(TableContext);
-
-
-    // sortable table initialization
-    const { handleSortList } = useTableSort({
-        enabled: colSortable && rootRef.current,
-        data: originData,
-        spyElement: rootRef.current,
-        fieldType: fieldType,
-        onColSort: onColSort,
-        isReverse: isReverse,
-        onClick: onClick,
-        sortBy: sortBy
-    }, [rootRef]);
-
-
-    return (
-        <>
-            {colSortable ? <span className={className || 'sort-trigger'} onClick={handleSortList}>
-                {icon || <svg width="1em" height="1em" viewBox="0 0 18 18">
-                    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                        <path d="M9.5,3 L13,8 L6,8 L9.5,3 L9.5,3 Z M6,11 L13,11 L9.5,16 L6,11 L6,11 Z" id="path" fill="#000000"></path>
-                    </g>
-                </svg>}
-
-            </span> : null}
-
-        </>
-
-    );
-});
-
-export default SortSprite;

package/publish/lib/esm/Table/utils/TableFilter.tsx

@@ -1,56 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import { TableContext } from '../TableContext';
-
-export type TableFilterProps = {
-    className?: string;
-    placeholder?: string;
-    label?: React.ReactNode;
-    onChange?: (e: any, fetchData: any[]) => void;
-};
-
-
-const TableFilter = forwardRef((props: TableFilterProps, externalRef: any) => {
-    const { 
-        className,
-        placeholder,
-        label,
-        onChange
-     } = props;
-
-    const { 
-        originData, 
-        filterFields, 
-        setInstance,
-        onChangeFilter
-    } = useContext(TableContext);
-
-    const filterFieldsData = filterFields || [];
-
-
-    return (
-        <div className="syntable__filter-container">
-            {label || null}
-            <input
-                type="text"
-                ref={externalRef}
-                className={className || ''}
-                onChange={(e: any) => {
-                    const filteredData = originData?.filter((item: any) => filterFieldsData.some((s: string) => item[s]?.toLowerCase().includes(e.target.value.toLowerCase())));
-                    
-                    if (e.target.value.trim() === '') {
-                        setInstance(originData);
-                        onChangeFilter?.(originData);
-                        onChange?.(e, originData);
-                    } else {
-                        setInstance(filteredData);
-                        onChangeFilter?.(filteredData);
-                        onChange?.(e, filteredData);
-                    }
-                }}
-                placeholder={placeholder || ''}
-            />
-        </div>
-    );
-});
-
-export default TableFilter;

package/publish/lib/esm/Table/utils/ToggleSelection.tsx

@@ -1,255 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef, useContext, useImperativeHandle } from "react";
-import { TableContext } from '../TableContext';
-
-import { convertMapToArr } from './func';
-
-export type ToggleSelectionProps = {
-    contentRef?: React.ForwardedRef<any>;
-    row: number;
-    className?: string;
-    useRadio?: boolean;
-    indeterminate?: boolean;
-    disabled?: boolean;
-    name?: string;
-    value?: string;
-    onChange?: (arg1: any, arg2: any, fetchData: any[]) => void;
-    checked?: boolean;
-};
-
-
-const ToggleSelection = forwardRef((props: ToggleSelectionProps, ref: any) => {
-    const {
-        contentRef,
-        row,
-        useRadio,
-        className,
-        indeterminate = false,
-        disabled,
-        name,
-        value,
-        onChange,
-        checked,
-        ...attributes
-    } = props;
-
-    const { 
-        originData, 
-        rowSelectable,
-        selectedItems,
-        setSelectedItems,
-        onChangeRowSelect,
-    } = useContext(TableContext);
-
-
-    const totalSize = originData.length;
-    const defaultRef = useRef();
-    const resolvedRef = ref || defaultRef;
-    const [allChecked, setAllChecked] = useState<boolean>(false);
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            indeterminate: (value: boolean) => {
-                resolvedRef.current.indeterminate = value;
-            },
-            setSelectAll: (value: boolean) => {
-                setAllChecked(value);
-            },
-            set: (check: boolean) => {
-                const s = String(resolvedRef.current?.dataset.row);
-                setSelectedItems((prev: any) => {
-                    const _data = new Set(prev);
-
-                    if (check) {
-                        _data.add(s);
-                    } else {
-                        _data.delete(s);
-                    }
-
-                    return _data;
-                });
-
-            },
-            control: () => {
-                return resolvedRef.current;
-            }
-        }),
-        [contentRef, resolvedRef, selectedItems],
-    );
-
-
-    function selectTarget(rowIndex: string | number) {
-        const _val = String(rowIndex);
-        
-        // filter
-        // =================================================================
-        let _selectedIndex: number[] = [];
-        let filteredData: any[] = [];
-        if (!isNaN(row) && Array.isArray(originData)) {
-
-            // all
-            if (row === -1) {
-                const _target = Array.from({
-                    length: totalSize
-                    },
-                    function(v, k) {
-                        return String(k);
-                    }
-                );
-
-                if (selectedItems.size === 0 || selectedItems.size < totalSize) {
-                    _selectedIndex = convertMapToArr(checkedSpecItems(_target, true)).map((v: any) => Number(v));
-                    setAllChecked(true);
-                } else {
-                    _selectedIndex = convertMapToArr(checkedSpecItems(_target, false)).map((v: any) => Number(v));
-                    setAllChecked(false);
-                }
-                
-                
-            } else {
-                const _newSelectedItems = checkedOneItem(_val);
-                const _res = convertMapToArr(_newSelectedItems);
-                _selectedIndex = _res.map((v: any) => Number(v));
-            }
-
-            filteredData = originData.filter((v: any, i: number) => _selectedIndex.includes(i));
-
-        }
-
-        return filteredData;
-    }
-
-    function selectTargetExclusive(rowIndex: string | number) {
-        const _val = String(rowIndex);
-        
-        // filter
-        // =================================================================
-        let filteredData: any[] = [];
-        if (!isNaN(row) && Array.isArray(originData)) {
-
-            const newSelectedItems = new Set();
-            newSelectedItems.add(_val as never);
-            setSelectedItems(newSelectedItems);
-
-            filteredData = originData.filter((v: any, i: number) => Number(_val) === i);
-
-        }
-
-        return filteredData;
-    }
-
-
-    function checkedSpecItems(itemKey: string[], check: boolean) {
-        // first, make a copy of the original set rather than mutating the original
-        const newSelectedItems = new Set(selectedItems);
-        itemKey.forEach((s: string) => {
-            if (check) {
-                newSelectedItems.add(s);
-            } else {
-                newSelectedItems.delete(s);
-            }
-        });
-
-        setSelectedItems(newSelectedItems);
-        return newSelectedItems;
-    }
-
-    function checkedOneItem(itemKey: string) {
-        // first, make a copy of the original set rather than mutating the original
-        const newSelectedItems = new Set(selectedItems);
-        if (!newSelectedItems.has(itemKey)) {
-            newSelectedItems.add(itemKey);
-        } else {
-            newSelectedItems.delete(itemKey);
-        }
-        setSelectedItems(newSelectedItems);
-
-        return newSelectedItems;
-    }
-
-
-    function handleChange(event: any) {
-        const _val = event.target.value;
-        const filteredData = useRadio ? selectTargetExclusive(_val) : selectTarget(_val);
-   
-        onChange?.(event, event.target.checked, filteredData);
-        onChangeRowSelect?.(filteredData);
-
-    }
-
-    
-    useEffect(() => {
-        if (resolvedRef.current) {
-            resolvedRef.current.indeterminate = indeterminate;
-        }
-    }, [resolvedRef, indeterminate]);
-
-    // Handle checked prop - use setSelectedItems to manage selection state
-    useEffect(() => {
-        if (checked !== undefined && row !== -1) {
-            const rowKey = String(row);
-            let nextSelectedItems: Set<any> | undefined;
-            setSelectedItems((prev: any) => {
-                const newSelectedItems = new Set(prev);
-                if (checked) {
-                    newSelectedItems.add(rowKey);
-                } else {
-                    newSelectedItems.delete(rowKey);
-                }
-                nextSelectedItems = newSelectedItems;
-
-
-                // 
-                const selectedIndex = nextSelectedItems ? Array.from(nextSelectedItems).map((v: any) => Number(v)) : [];
-                const filteredData = Array.isArray(originData) ? originData.filter((v: any, i: number) => selectedIndex.includes(i)) : [];
-
-                const syntheticEvent = { target: { value: rowKey, checked } } as any;
-                onChange?.(syntheticEvent, checked, filteredData);
-                onChangeRowSelect?.(filteredData);
-
-                return newSelectedItems;
-            });
-
-
-        }
-    }, [checked, row, setSelectedItems]);
-
-
-    return (
-        <>
-
-            {/** All */}
-            {rowSelectable && row === -1 ? <input
-                type={useRadio ? 'radio' : 'checkbox'}
-                ref={resolvedRef}
-                className={className || ''}
-                name={name}
-                value={`${row}`}
-                checked={allChecked}
-                onChange={handleChange}
-                {...attributes}
-            /> : null}
-            
-
-            {/** Per Row */}
-            {rowSelectable && row != -1 ? <input
-                type={useRadio ? 'radio' : 'checkbox'}
-                ref={resolvedRef}
-                className={className || ''}
-                name={name}
-                value={`${row}`}
-                data-row={row}
-                data-value={originData[row] ? JSON.stringify(originData[row]) : null}
-                checked={selectedItems.has(`${row}`)}
-                onChange={handleChange}
-                {...attributes}
-            /> : null}
-
-            
-        </>
-    );
-}
-);
-
-export default ToggleSelection;

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

@@ -1,182 +0,0 @@
-export function convertMapToArr(setData: any) {
-    const res: any[] = [];
-    const s = setData;
-    for (let it = s.values(), val = null; val = it.next().value;) {
-        res.push(val);
-    }
-    return res;
-}
-
-
-export function htmlToPlain(input: string) {
-    return input.replace(/(<([^>]+)>)/ig, '');
-}
-
-
-export function sortDataByIndex(orderArr: number[], data: any[]) {
-    return Array.isArray(data) ? orderArr.map(index => data[index]) : data;
-}
-
-
-export function getTbody(root: HTMLDivElement) {
-    if (root === null) return null;
-    const tbodyRef: any = root.querySelector('table tbody');
-    return tbodyRef;
-}
-
-export function getThead(root: HTMLDivElement) {
-    if (root === null) return null;
-    const tbodyRef: any = root.querySelector('table thead');
-    return tbodyRef;
-}
-
-
-export function allRows(root: HTMLDivElement) {
-    const tbodyRef: any = getTbody(root);
-    if (tbodyRef === null) return [];
-    return [].slice.call(tbodyRef.children);
-}
-
-export function allHeadRows(root: HTMLDivElement) {
-    const tbodyRef: any = getThead(root);
-    if (tbodyRef === null) return [];
-    return [].slice.call(tbodyRef.children);
-}
-
-
-
-export function initOrderProps(rootElem: any) {
-    if (rootElem === null) return;
-
-    // !!! Execute it only once
-    if (typeof rootElem.dataset.customPropsInit !== 'undefined') return;
-    rootElem.dataset.customPropsInit = 1;
-    
-    const _allRows = allRows(rootElem);
-
-    // key
-    _allRows.forEach((node: HTMLTableRowElement, i: number) => {
-        node.dataset.order = `${i}`;
-    });
-
-}
-
-export function initRowColProps(rootElem: any) {
-    if (rootElem === null) return;
-    const _allRows = allRows(rootElem);
-    const _allHeadRows = allHeadRows(rootElem);
-
-    // key
-    _allRows.forEach((node: HTMLTableRowElement, i: number) => {
-        node.dataset.tableRow = `${i}`;
-
-        // columns
-        const perCol = [].slice.call(node.children);
-        perCol.forEach((col: HTMLTableColElement, j: number) => {
-            col.dataset.tableRow = `${i}`;
-            col.dataset.tableCol = `${j}`;
-            col.classList.add(cellMark(i, j));
-
-        });
-    });
-
-    _allHeadRows.forEach((node: HTMLTableRowElement, i: number) => {
-        node.dataset.tableRow = `-1`;
-
-        // columns
-        const perCol = [].slice.call(node.children);
-        perCol.forEach((col: HTMLTableColElement, j: number) => {
-            col.dataset.tableRow = `-1`;
-            col.dataset.tableCol = `${j}`;
-            col.classList.add(cellMark(-1, j));
-        });
-    });
-    
-}
-
-export function insertAfter(newNode: any, existingNode: any) {
-    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
-}
-
-
-
-export function maxDimension(elements: any) {
-    let res = {
-        'height': 0,
-        'width': 0
-    };
-    const elementHeights: any[] = Array.prototype.map.call(elements, function (el) {
-        return el.clientHeight;
-    });
-
-    const elementWidths: any[] = Array.prototype.map.call(elements, function (el) {
-        return el.clientWidth;
-    });
-
-
-
-    const maxHeight = Math.max.apply(null, elementHeights);
-    const maxWidth = Math.max.apply(null, elementWidths);
-
-    res = {
-        'height': maxHeight,
-        'width': maxWidth
-    };
-    return res;
-};
-
-
-export function tableElemScrolledInit(root: HTMLDivElement, w: number) {
-    const tbodyRef: any = getTbody(root);
-    if (tbodyRef === null) return;
-
-    if (w <= 768 && tbodyRef.querySelector('tr') !== null) {
-        //get maxHeight of per row
-        for (let i = 0; i < tbodyRef.querySelector('tr').children.length; i++) {
-            const tbodyRows = root.querySelectorAll(`tbody tr [data-table-col="${i}"]`);
-
-            const maxHeight = maxDimension(tbodyRows).height;
-            if (maxHeight > 0) {
-                [].slice.call(tbodyRows).forEach((row: any) => {
-                    row.style.height = maxHeight + 'px';
-                });
-
-
-                //
-                const theadRows = root.querySelectorAll(`thead tr [data-table-col="${i}"]`);
-                [].slice.call(theadRows).forEach((row: any) => {
-                    row.style.height = maxHeight + 'px';
-                });
-            }
-        }
-    } else {
-        [].slice.call(root.querySelectorAll('tbody td, tbody th, thead th')).forEach((node: any, i: number) => {
-            node.style.removeProperty('height');
-        });
-    }
-
-}
-
-
-export function cellMark(row: number | string | undefined, col: number | string | undefined) {
-    const isNegative = (num: number) => {
-        return num < 0;
-    };
-    return `cell-${isNegative(row as number) ? 0 : row}-${isNegative(col as number) ? 0 : col}`;
-}
-
-export function removeCellFocusClassName(root: any) {
-    if (root) {
-        [].slice.call(root.querySelectorAll('td, th')).forEach((el: HTMLTableElement) => {
-            el.classList.remove('cell-focus');
-        });
-    }
-}
-
-export function getTableRowsColCount(root: HTMLDivElement) {
-    const rows = allRows(root);
-    return rows.map((row: HTMLTableRowElement, i: number) => ({
-        row: i,
-        colCount: row.children.length
-    }));
-}