funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/Tree/index.tsx

@@ -1,661 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import {
-    deepClone,
-    flatData
-} from 'funda-utils/dist/cjs/object';
-import {
-    getNextSiblings
-} from 'funda-utils/dist/cjs/dom';
-
-
-import TreeList from './TreeList';
-import { initUlHeight, initAsyncItems } from './init-height';
-import { activeClass } from './utils/func';
-
-
-export interface ListSearchDataConfig {
-    title: string | number;
-}
-
-export interface ItemConfig {
-    key: string;
-    slug: string;
-    link: string;
-    optiondata: string;
-}
-
-export interface UpdateDataFunction {
-    (key: React.Key | null, fetch: FetchConfig | null): Promise<void>;
-}
-
-export interface DataNode {
-    key: React.Key;
-    title: string;
-    link?: string;
-    active?: boolean;
-    checked?: boolean;
-    disabled?: boolean;
-    heading?: string;
-    icon?: string;
-    slug?: string;
-    customContentToHyperlink?: React.ReactNode;
-    customContentToLiTag?: React.ReactNode;
-    itemMouseEnterCallback?: () => void;
-    itemMouseLeaveCallback?: () => void;
-    itemLinkMouseEnterCallback?: () => void;
-    itemLinkMouseLeaveCallback?: () => void;
-    childrenAsync?: boolean;
-    children?: DataNode[];
-}
-
-export interface FetchConfig {
-    fetchFuncAsync?: any | undefined;
-    fetchFuncMethod?: string | undefined;
-    fetchFuncMethodParams?: any[] | undefined;
-    fetchCallback?: (data: any) => void;
-}
-
-
-
-export type TreeProps = {
-    /** Set TreeNode display Checkbox or not */
-    checkable?: boolean;
-    /** Shows a connecting line */
-    showLine?: boolean;
-    /**  Specifies what kind of line to display */
-    lineStyle?: string;
-    /** Mutually exclusive alternate expansion between the first levels */
-    alternateCollapse?: boolean;
-    /** A function to render content of the option, replaces the default content of the option. */
-    renderOption?: (optionData: DataNode, key: React.Key) => React.ReactNode;
-    /** set an arrow */
-    arrow?: React.ReactNode;
-    /** Set collapse/expand icon */
-    arrowIcons?: React.ReactNode[];
-    /** Disable arrow */
-    disableArrow?: boolean;
-    /** Disable the collapse effect */
-    disableCollapse?: boolean;
-    /** The class name of the tree. */
-    treeClassName?: string;
-    /** The class name of the child on <ul>. */
-    childClassName?: string;
-    /** Specify data of Cascading DropDown List as a JSON string format. */
-    data?: any[any];
-    /** Retrieve data */
-    retrieveData?: ListSearchDataConfig[];
-    /** -- */
-    id?: string;
-    onSelect?: (
-        e: React.MouseEvent<HTMLElement>, 
-        val: ItemConfig, 
-        updateData: UpdateDataFunction
-    ) => void;
-    onDoubleSelect?: (
-        e: React.MouseEvent<HTMLElement>, 
-        val: ItemConfig, 
-        updateData: UpdateDataFunction
-    ) => void;
-    onCollapse?: (
-        e: React.MouseEvent<HTMLElement>, 
-        val: ItemConfig, 
-        updateData: UpdateDataFunction, 
-        isExpanded: boolean
-    ) => void;
-    onCheck?: (val: any) => void;
-};
-
-export interface TreeRef {
-    collapse: (slug: string) => void;
-    updateParentTreeHeights: (targetElement: HTMLElement) => Promise<void>;
-}
-
-const Tree = forwardRef<TreeRef, TreeProps>((props, ref) => {
-    const {
-        id,
-        checkable,
-        showLine,
-        lineStyle,
-        alternateCollapse,
-        renderOption,
-        disableArrow,
-        disableCollapse,
-        arrow,
-        arrowIcons,
-        treeClassName,
-        childClassName,
-        data,
-        retrieveData,
-        onSelect,
-        onDoubleSelect,
-        onCollapse,
-        onCheck
-    } = props;
-    
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const [orginalData, setOrginalData] = useState<DataNode[] | null>(null);
-    const [list, setList] = useState<DataNode[] | null>(null);
-    const [flatList, setFlatList] = useState<DataNode[]>([]);
-    const [checkedPrint, setCheckedPrint] = useState<any[]>([]);
-    const [checkedData, setCheckedData] = useState<any[]>([]);
-    const expandClassName = `${showLine ? 'show-line' : ''} ${disableArrow ? 'hide-arrow' : ''} ${disableCollapse ? 'collapse-disabled' : ''} ${lineStyle ? `line--${lineStyle}` : ''} ${checkable ? 'has-checkbox' : ''}`;
-
-    const [expandedMap, setExpandedMap] = useState<Record<string, boolean>>({}); // { [key]: true/false }
-
-
-    // Handle DOM operations
-    const handleDOMOperations = () => {
-        // loading status
-        [].slice.call(rootRef.current.querySelectorAll('.arrow.async-ready, .nav-link.async-ready')).forEach((node: any) => {
-            node.classList.remove('loading');
-            if (node.parentElement.querySelector('ul') !== null) {
-                node.classList.remove('async-ready');
-                node.click();
-            }
-        });
-
-        // init <ul> height
-        // Initialize async items
-        const ul: any = [].slice.call(rootRef.current.querySelectorAll('ul'));
-        initAsyncItems(ul as never).then(() => {
-            initUlHeight(ul);
-        });
-    };
-
-    const observeDOMChanges = () => {
-        if (!rootRef.current) return;
-
-        const observer = new MutationObserver((mutations) => {
-            // Check whether any new ul elements have been added
-            // Changes of <li> are captured by changes in their parent <ul>
-            const hasNewUL = mutations.some(mutation => 
-                Array.from(mutation.addedNodes).some(node => 
-                    node.nodeName === 'UL'
-                )
-            );
-
-            if (hasNewUL) {
-                observer.disconnect();
-                handleDOMOperations();
-            }
-        });
-
-        observer.observe(rootRef.current, {
-            childList: true, // Observe the addition or deletion of child nodes
-            subtree: true, // Observe all descendant nodes
-            attributes: false, // Do not observe attribute changes
-            characterData: false // Do not observe text content changes
-        });
-    };
-
-
-    const updateTreeData = async (list: DataNode[] | null, key: React.Key, children: DataNode[]): Promise<DataNode[]> => {
-        if (!list) return [];
-        
-        const updatedList = await Promise.all(list.map(async (node) => {
-            if (node.key === key) {
-                return {
-                    ...node,
-                    children
-                };
-            }
-            if (node.children) {
-                return {
-                    ...node,
-                    children: await updateTreeData(node.children, key, children)
-                };
-            }
-            return node;
-        }));
-        
-        return updatedList;
-    }
-
-    const closeChild = (hyperlink: HTMLElement, ul: HTMLAllCollection) => {
-        if ( ul.length === 0 ) return;
-
-        activeClass(hyperlink, 'remove');
-        hyperlink.setAttribute('aria-expanded', 'false');
-        activeClass(hyperlink.parentNode, 'remove');
-
-        //to close
-        [].slice.call(ul).forEach(function(element: any){
-            element.style.maxHeight = 0;
-        });
-    };
-
-    const openChild = (hyperlink: HTMLElement, ul: HTMLAllCollection) => {
-        if ( ul.length === 0 ) return;
-
-        activeClass(hyperlink, 'add');
-        hyperlink.setAttribute('aria-expanded', 'true');
-        activeClass(hyperlink.parentNode, 'add');
-
-        // init <ul> height
-        initUlHeight(ul);
-
-    };
-
-    function handleCollapse(e?: React.MouseEvent<HTMLElement>, slug?: string) {
-        if (disableCollapse) return;
-
-        if (e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-
-        let hyperlink: HTMLElement;
-        
-        if (e) {
-            hyperlink = e.currentTarget;
-        } else if (slug && rootRef.current) {
-            // Find the hyperlink element by slug
-            const linkElement = rootRef.current.querySelector(`[data-slug="${slug}"]`);
-            if (!linkElement) return;
-            hyperlink = linkElement as HTMLElement;
-        } else {
-            return;
-        }
-
-
-        const url = hyperlink.dataset.href;
-        const subElement = getNextSiblings(hyperlink, 'ul');
-        const asyncReqReady = hyperlink.classList.contains('async-ready');
-
-        // loading
-        //=====================       
-        if (asyncReqReady) {
-            activeClass(hyperlink, 'add', 'loading');
-        }
-
-        // calback
-        //=====================
-        const fetchFunc: UpdateDataFunction = asyncReqReady ? (typeof initDefaultValue !== 'function' ? async () => void(0) : initDefaultValue) : async () => void(0);
-
-
-        const optiondata = typeof hyperlink.dataset.optiondata !== 'undefined' ? hyperlink.dataset.optiondata : '{}';
-        onCollapse?.(e as React.MouseEvent<HTMLElement>, {
-            key: hyperlink.dataset.key as string,
-            slug: hyperlink.dataset.slug as string,
-            link: hyperlink.dataset.link as string,
-            optiondata: optiondata as string
-        }, fetchFunc, JSON.parse(optiondata as string).isExpanded);
-
-        // update expanded status
-        //=====================
-        const isExpanded = hyperlink.getAttribute('aria-expanded') === 'true';
-        setExpandedMap(prev => ({
-            ...prev,
-            [hyperlink.dataset.key as string]: !isExpanded
-        }));
-
-        // hide child if expandedLink doesn't exist, on the contrary
-        //=====================
-        if (hyperlink.classList.contains('loading')) return;
-
-        if (hyperlink.getAttribute('aria-expanded') === 'false' || hyperlink.getAttribute('aria-expanded') === null) {
-            //Hide all other siblings of the selected <ul>
-            if (alternateCollapse) {
-                [].slice.call(rootRef.current.firstChild.children).forEach(function (li: any) {
-                    activeClass(li, 'remove');
-
-                    const _li = li.firstChild;
-                    activeClass(_li, 'remove');
-                    _li.setAttribute('aria-expanded', false);
-
-                    [].slice.call(getNextSiblings(_li, 'ul')).forEach(function (element: any) {
-                        element.style.maxHeight = 0;
-                    });
-                });
-            }
-
-            //open current
-            openChild(hyperlink, subElement as never);
-        } else {
-            //close current
-            closeChild(hyperlink, subElement as never);
-        }
-    }
-
-    const observeElement = (ancestorNode: HTMLElement) => {
-        return new Promise<void>((resolve) => {
-            const observer = new MutationObserver((mutations) => {
-                // Check whether any new ul elements have been added
-                // It is necessary to listen for <li> because <li> may be added dynamically in the business
-                const hasNewUL = mutations.some(mutation => 
-                    Array.from(mutation.addedNodes).some(node => 
-                        (node.nodeName === 'UL' || node.nodeName === 'LI')
-                    )
-                );
-
-                if (hasNewUL) {
-                    observer.disconnect();
-                    const ul: any = [].slice.call(ancestorNode.querySelectorAll('ul'));
-                    initAsyncItems(ul as never).then(() => {
-                        initUlHeight(ul);
-                    });
-                    resolve();
-                }
-            });
-
-            observer.observe(ancestorNode, {
-                childList: true, // Observe the addition or deletion of child nodes
-                subtree: true, // Observe all descendant nodes
-                attributes: false, // Do not observe attribute changes
-                characterData: false // Do not observe text content changes
-            });
-        });
-    };
-
-    // exposes the following methods
-    useImperativeHandle(ref, () => ({
-        collapse: (slug: string) => {
-            handleCollapse(undefined, slug);
-        },
-        updateParentTreeHeights: async (targetElement: HTMLElement) => {
-            
-            if (targetElement !== null) {
-                // Find the topmost node, in order to fix the subtree height under this node
-                const _ancestorNode = targetElement.closest('.nav-item.first') as HTMLElement;
-                if (_ancestorNode !== null) {
-                    try {
-                        await observeElement(_ancestorNode);
-                    } catch (error) {
-                        console.warn('Failed to update ul height:', error);
-                    }
-                }
-            }
-        }
-    }), [rootRef.current, onCollapse]); // !Required "onCollapse"
-
-    async function fetchData(fetch: FetchConfig, params: any) {
-
-        if (typeof fetch.fetchFuncAsync === 'object') {
-            const response: any = await fetch.fetchFuncAsync[`${fetch.fetchFuncMethod}`](...params.split(','));
-            let _ORGIN_DATA = response.data;
-
-            if ( Array.isArray(_ORGIN_DATA) && _ORGIN_DATA.length > 0 ) {
-                // reset data structure
-                if (typeof (fetch.fetchCallback) === 'function') {
-                    _ORGIN_DATA = fetch.fetchCallback(_ORGIN_DATA);
-                }
-
-                // Determine whether the data structure matches
-                if ( _ORGIN_DATA.length > 0 && typeof _ORGIN_DATA[0].title === 'undefined' ) {
-                    console.warn( 'The data structure does not match, please refer to the example in the component documentation.' );
-                    _ORGIN_DATA = [];
-                }
-
-        
-                return _ORGIN_DATA;
-
-            } else {
-                return [];
-            }
-
-
-        } else {
-            return [];
-        }
-
-
-    }
-
-
-    function updateShowProp(obj: DataNode[], retrieveData: ListSearchDataConfig[], val: boolean | undefined = undefined) {
-        obj.forEach((item: any, index: number) => {
-
-            if (retrieveData.length === 0) {
-                item.show = true;
-            } else {
-                if (typeof val !== 'undefined') {
-                    item.show = val;
-                } else {
-                    if (retrieveData.map((v: any) => v.title?.toLowerCase()).includes(item.title?.toLowerCase())) {
-                        item.show = true;
-                    } else {
-                        item.show = false;
-                    }
-                }
-            }
-
-
-            //
-            if (item.children) {
-                updateShowProp(item.children, retrieveData, val);
-            }
-        });
-    }
-
-
-
-    function addKey(obj: DataNode[], depth: string, init: number) {
-        obj.forEach((item: any, index: number) => {
-            item.key = `${depth}-${index}`.substring(1);
-            if (item.children) {
-                addKey(item.children, `${depth}-${index}`, init + 1);
-            }
-        });
-    }
-
-
-    function initCheckboxesVal(obj: DataNode[]) {
-        obj.forEach((item: any) => {
-            if ( item.checked === true ) setCheckedPrint((prevState) => [{
-                name: `checkbox-${idRes}-${item.key}`,
-                key: item.key,
-                slug: item.slug,
-                link: item.link
-            }, ...prevState]);
-            
-            if (item.children) {
-                initCheckboxesVal(item.children);
-            }
-        });
-    }
-
-    function initCheckboxesData(obj: DataNode[]) {
-        obj.forEach((item: any) => {
-            setCheckedData((prevState) => [{
-                key: item.key,
-                checked: item.checked === true,
-                show: true,
-                indeterminate: false
-            }, ...prevState]);
-            
-            if (item.children) {
-                initCheckboxesData(item.children);
-            }
-        });
-    }
-
-
-    async function initDefaultValue(key: React.Key | null, fetch: FetchConfig | null = null, firstRender: boolean = false, retrieveData: ListSearchDataConfig[] = []) {
-        
-        if ( firstRender ) {
-            addKey(data, '', 0);
-            
-
-            // filter showing items
-            if (Array.isArray(retrieveData)) {
-                updateShowProp(data, retrieveData);
-            } else {
-                updateShowProp(data, retrieveData, true);
-            }
-
-      
-
-            // Initialize default value of checkboxes 
-            if ( checkable ) {
-                initCheckboxesVal(data);
-                initCheckboxesData(data);
-            }
-
-
-            // update list
-            setList(data);
-
-            // update retrive list
-            const _clone: any = deepClone(data);
-            setFlatList(flatData(_clone));
-
-            return data;
-        }
-
-        if (fetch && typeof fetch.fetchFuncAsync === 'object') {
-
-            let _newData: DataNode[] | null = list;
-
-            //
-            const _params: any[] = fetch.fetchFuncMethodParams || [];
-            const response: any = await fetchData(fetch, (_params).join(','));
-            const _childrenData: DataNode[] = response;
-
-            
-            if ( _childrenData.length > 0 ) {
-                // add children to node
-                _newData = await updateTreeData(list, key ? key : '', _childrenData);
-
-                // set its childrenAsync property to false and active to true since we've successfully loaded its children
-                if (key) {
-                    const findAndUpdateNode = (nodes: DataNode[]) => {
-                        for (let node of nodes) {
-                            if (node.key === key) {
-                                node.childrenAsync = false;
-                                node.active = true;  // Add this line to set active to true
-                                break;
-                            }
-                            if (node.children) {
-                                findAndUpdateNode(node.children);
-                            }
-                        }
-                    };
-                    findAndUpdateNode(_newData);
-                }
-
-                // update data
-                addKey(_newData, '', 0);
-        
-                // filter showing items
-                if (Array.isArray(retrieveData)) {
-                    updateShowProp(_newData, retrieveData);
-                } else {
-                    updateShowProp(_newData, retrieveData, true);
-                }
-
-
-
-                // Initialize default value of checkboxes 
-                if ( checkable ) {
-                    _childrenData.forEach((newitem: any) => {
-                        setCheckedData((prevState) => [{
-                            key: newitem.key,
-                            checked: newitem.checked === true,
-                            show: true,
-                            indeterminate: false
-                        }, ...prevState]);
-                    });
-                }
-                        
-                // update list
-                setList(_newData);
-
-                // update retrive list
-                const _clone: any = deepClone(_newData);
-                setFlatList(flatData(_clone));
-                
-
-            } else {
-                // If empty response, remove loading state and set childrenAsync to false
-                if (key) {
-                    const findAndUpdateNode = (nodes: DataNode[]) => {
-                        for (let node of nodes) {
-                            if (node.key === key) {
-                                node.childrenAsync = false;
-                                // Remove loading class from the hyperlink element
-                                const linkElement = rootRef.current?.querySelector(`[data-key="${key}"]`);
-                                if (linkElement) {
-                                    activeClass(linkElement, 'remove', 'loading');
-                                }
-                                break;
-                            }
-                            if (node.children) {
-                                findAndUpdateNode(node.children);
-                            }
-                        }
-                    };
-                    findAndUpdateNode(_newData as DataNode[]);
-                }
-            }
-
-            // dom init
-            observeDOMChanges();
-            
-
-            return _newData;
-        }
-        
-    }
-
-
-
-    function filterRetriveData(flatData: DataNode[], retrieveData: ListSearchDataConfig[]) {
-        return flatData.filter((item: any) => {
-            return retrieveData.map((v: any) => v.title?.toLowerCase()).includes(item.title?.toLowerCase())
-        });
-    }
-
-    useEffect(() => {
-        initDefaultValue(null, null, true, retrieveData);
-        setOrginalData(data);
-    }, [data, retrieveData]);
-
-
-   
-    return (
-        <>
-
-            <nav tabIndex={0} id={idRes} ref={rootRef} className={treeClassName ? `tree-diagram__wrapper ${treeClassName} ${expandClassName}` : `tree-diagram__wrapper tree-diagram-default ${expandClassName}`}>
-                
-                
-                <TreeList
-                    rootNode={rootRef}
-                    checkboxNamePrefix={idRes}
-                    alternateCollapse={alternateCollapse}
-                    renderOption={renderOption}
-                    first={true}
-                    disableArrow={disableArrow}
-                    disableCollapse={disableCollapse}
-                    arrow={arrow}
-                    arrowIcons={arrowIcons}
-                    orginalData={orginalData}
-                    data={Array.isArray(retrieveData) && retrieveData.length > 0 ? filterRetriveData(flatList, retrieveData) : list} 
-                    childClassName={childClassName || 'tree-diagram-default-nav'} 
-                    onSelect={onSelect} 
-                    onDoubleSelect={onDoubleSelect}
-                    onCheck={onCheck}
-                    evInitValue={initDefaultValue}
-                    updateCheckedPrint={setCheckedPrint}
-                    getCheckedPrint={checkedPrint}
-                    updategetCheckedData={setCheckedData}
-                    getCheckedData={checkedData}
-
-                    // Collapse
-                    expandedMap={expandedMap}
-                    evCollapse={handleCollapse}
-                    
-                />
-                
-            </nav>
-
-        </>
-    )
-});
-
-export default Tree;

package/publish/lib/esm/Tree/init-height.tsx

@@ -1,40 +0,0 @@
-const initUlHeight = (inputUl: HTMLAllCollection) => {
-    [].slice.call(inputUl).forEach(function(el: HTMLUListElement){
-        // Check whether the parent node has "active"
-        /*
-        Fixed:
-        
-        1. After asynchronously loading child nodes (after "initDefaultValue()"), manually collapse the node
-        2. When clicking other nodes, the child node ul height of the previously collapsed node is not correctly reset to 0
-        3. It causes the visual display to be expanded, but the arrow is actually collapsed
-        */
-        const parentLi = el.parentElement;
-        if (!parentLi || !parentLi.classList.contains('active')) {
-            // If the parent node does not have an active class, keep maxHeight to 0
-            return;
-        }
-
-        if (typeof el.dataset.maxheight === 'undefined') {
-            const _li = [].slice.call(el.querySelectorAll('li'));
-            let _allHeight: number = 0;
-            _li.forEach(function(li: HTMLLIElement){
-                _allHeight += li.scrollHeight;   
-            });
-            el.dataset.maxheight = `${_allHeight}px`;
-            el.style.maxHeight = `${_allHeight}px`;
-        } else {
-            el.style.maxHeight = el.dataset.maxheight;
-        }
-    });
-};
-
-const initAsyncItems = async (inputUl: HTMLAllCollection) => {
-    [].slice.call(inputUl).forEach(function(el: HTMLUListElement){
-        el.removeAttribute('data-maxheight');
-    });
-};
-
-export {
-    initUlHeight,
-    initAsyncItems
-};