funda-ui 4.5.712 → 4.5.766

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

@@ -1,225 +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]);
-
-
-    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,171 +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(col: number | string | undefined, row: number | string | undefined) {
-    return `cell-${col}-${row}`;
-}
-
-export function removeCellFocusClassName(root: any) {
-    if (root) {
-        [].slice.call(root.querySelectorAll('td, th')).forEach((el: HTMLTableElement) => {
-            el.classList.remove('cell-focus');
-        });
-    }
-}