funda-ui 4.7.175 → 4.7.181

package/lib/esm/Tree/index.tsx

@@ -6,18 +6,30 @@ 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;
@@ -25,6 +37,7 @@ export interface DataNode {
     link?: string;
     active?: boolean;
     checked?: boolean;
+    disabled?: boolean;
     heading?: string;
     icon?: string;
     slug?: string;
@@ -56,6 +69,8 @@ export type TreeProps = {
     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 */
@@ -74,9 +89,22 @@ export type TreeProps = {
     retrieveData?: ListSearchDataConfig[];
     /** -- */
     id?: string;
-    onSelect?: (e: any, val: any, func: Function) => void;
-    onDoubleSelect?: (e: any, val: any, func: Function) => void;
-    onCollapse?: (e: any, val: any, func: Function) => void;
+    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;
 };
 
@@ -87,6 +115,7 @@ const Tree = (props: TreeProps) => {
         showLine,
         lineStyle,
         alternateCollapse,
+        renderOption,
         disableArrow,
         disableCollapse,
         arrow,
@@ -112,11 +141,56 @@ const Tree = (props: TreeProps) => {
     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
+            const hasNewUL = mutations.some(mutation => 
+                Array.from(mutation.addedNodes).some(node => 
+                    node.nodeName === 'UL'
+                )
+            );
+
+            if (hasNewUL) {
+                observer.disconnect();
+                handleDOMOperations();
+            }
+        });
 
-    const updateTreeData = (list: DataNode[] | null, key: React.Key, children: DataNode[]): DataNode[] => {
+        observer.observe(rootRef.current, {
+            childList: true,
+            subtree: true
+        });
+    };
+
+
+    const updateTreeData = async (list: DataNode[] | null, key: React.Key, children: DataNode[]): Promise<DataNode[]> => {
+        if (!list) return [];
         
-        return list ? list.map((node) => {
+        const updatedList = await Promise.all(list.map(async (node) => {
             if (node.key === key) {
                 return {
                     ...node,
@@ -126,13 +200,120 @@ const Tree = (props: TreeProps) => {
             if (node.children) {
                 return {
                     ...node,
-                    children: updateTreeData(node.children, key, children)
+                    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>) {
+
+        if ( disableCollapse ) return;
+
+        e.preventDefault();
+        e.stopPropagation();
         
+        const hyperlink = e.currentTarget;
+        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, {
+            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);
+
+        }
+
+
+    }
+
 
     async function fetchData(fetch: FetchConfig, params: any) {
 
@@ -236,8 +417,8 @@ const Tree = (props: TreeProps) => {
     }
 
 
-    function initDefaultValue(key: React.Key | null, fetch: FetchConfig | null = null, firstRender: boolean = false, retrieveData: ListSearchDataConfig[] = []) {
-
+    async function initDefaultValue(key: React.Key | null, fetch: FetchConfig | null = null, firstRender: boolean = false, retrieveData: ListSearchDataConfig[] = []) {
+        
         if ( firstRender ) {
             addKey(data, '', 0);
             
@@ -265,85 +446,85 @@ const Tree = (props: TreeProps) => {
             const _clone: any = deepClone(data);
             setFlatList(flatData(_clone));
 
-            return;
+            return data;
         }
 
         if (fetch && typeof fetch.fetchFuncAsync === 'object') {
-            //
-            const _params: any[] = fetch.fetchFuncMethodParams || [];
-            fetchData(fetch, (_params).join(',')).then( (response: any) => {
-
-                const _childrenData: DataNode[] = response;
 
-                if ( _childrenData.length > 0 ) {
-                    // add children to node
-                    const _newData: DataNode[] = updateTreeData(list, key ? key : '', _childrenData);
-
-                    // update data
-                    addKey(_newData, '', 0);
-          
-                    // filter showing items
-                    if (Array.isArray(retrieveData)) {
-                        updateShowProp(_newData, retrieveData);
-                    } else {
-                        updateShowProp(_newData, retrieveData, true);
-                    }
+            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);
+                }
 
-                    // 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 data
+                addKey(_newData, '', 0);
+        
+                // filter showing items
+                if (Array.isArray(retrieveData)) {
+                    updateShowProp(_newData, retrieveData);
+                } else {
+                    updateShowProp(_newData, retrieveData, true);
+                }
 
-                    // update retrive list
-                    const _clone: any = deepClone(_newData);
-                    setFlatList(flatData(_clone));
-                    
 
-                }
 
-                // loading status
-                setTimeout(() => {
-                    [].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();
-                        }
+                // 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));
                 
-                    // init <ul> height
-                    // Initialize async items
-                    const ul: any = [].slice.call(rootRef.current.querySelectorAll('ul'));
-                    initAsyncItems(ul as never).then(() => {
-                        initUlHeight(ul);
-                    });
 
-                }, 500);
+            }
 
-          
+            // 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())
@@ -367,6 +548,7 @@ const Tree = (props: TreeProps) => {
                     rootNode={rootRef}
                     checkboxNamePrefix={idRes}
                     alternateCollapse={alternateCollapse}
+                    renderOption={renderOption}
                     first={true}
                     disableArrow={disableArrow}
                     disableCollapse={disableCollapse}
@@ -377,13 +559,16 @@ const Tree = (props: TreeProps) => {
                     childClassName={childClassName || 'tree-diagram-default-nav'} 
                     onSelect={onSelect} 
                     onDoubleSelect={onDoubleSelect}
-                    onCollapse={onCollapse}
                     onCheck={onCheck}
                     evInitValue={initDefaultValue}
                     updateCheckedPrint={setCheckedPrint}
                     getCheckedPrint={checkedPrint}
                     updategetCheckedData={setCheckedData}
                     getCheckedData={checkedData}
+
+                    // Collapse
+                    expandedMap={expandedMap}
+                    onCollapse={handleCollapse}
                     
                 />
                 

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

@@ -1,5 +1,19 @@
 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;
@@ -11,7 +25,6 @@ const initUlHeight = (inputUl: HTMLAllCollection) => {
         } else {
             el.style.maxHeight = el.dataset.maxheight;
         }
-
     });
 };
 

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.175",
+  "version": "4.7.181",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",