funda-ui 3.8.821 → 3.9.14

package/lib/esm/Tree/index.scss

@@ -104,14 +104,18 @@
     
             > div {
                 display: inline-block;
+                position: relative;
     
                 .form-check {
                     min-height: auto;
                     margin-bottom: 0;
 
-                    [type=checkbox]:indeterminate {
+                    [type=checkbox]:indeterminate,
+                    [type=checkbox].indeterminate {
                         background-color: var(--tree-checkbox-indeterminate-color);
                         border-color: var(--tree-checkbox-indeterminate-color);
+                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+
                     }
 
                 }

package/lib/esm/Tree/index.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef, useId } from 'react';
 import TreeList from './TreeList';
 import { initUlHeight, initAsyncItems } from './init-height';
 
+import {deepClone, flatOriginalData} from './tree-utils';
 
 declare module 'react' {
     interface ReactI18NextChildren<T> {
@@ -10,6 +11,11 @@ declare module 'react' {
     }
 }
 
+interface ListSearchDataConfig {
+    title: string | number;
+}
+
+
 
 interface DataNode {
     key: React.Key;
@@ -62,6 +68,8 @@ type TreeProps = {
     childClassName?: string;
     /** Specify data of Cascading DropDown List as a JSON string format. */
     data?: any[any];
+    /** Retrieve data */
+    retrieveData?: ListSearchDataConfig[];
     /** -- */
     id?: string;
     onSelect?: (e: any, val: any, func: Function) => void;
@@ -83,6 +91,7 @@ const Tree = (props: TreeProps) => {
         treeClassName,
         childClassName,
         data,
+        retrieveData,
         onSelect,
         onCollapse,
         onCheck
@@ -92,7 +101,8 @@ const Tree = (props: TreeProps) => {
     const uniqueID = useId().replace(/\:/g, "-");
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
-    const [val, setVal] = 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' : ''}`;
@@ -153,6 +163,32 @@ const Tree = (props: TreeProps) => {
     }
 
 
+    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) => {
@@ -184,6 +220,7 @@ const Tree = (props: TreeProps) => {
             setCheckedData((prevState) => [{
                 key: item.key,
                 checked: item.checked === true,
+                show: true,
                 indeterminate: false
             }, ...prevState]);
             
@@ -194,11 +231,20 @@ const Tree = (props: TreeProps) => {
     }
 
 
-    function initDefaultValue(key: React.Key | null, fetch: fetchConfig | null = null, firstRender: boolean = false) {
+    function initDefaultValue(key: React.Key | null, fetch: fetchConfig | null = null, firstRender: boolean = false, retrieveData: ListSearchDataConfig[] = []) {
 
         if ( firstRender ) {
             addKey(data, '', 0);
-            setVal(data);
+            
+
+            // filter showing items
+            if (Array.isArray(retrieveData)) {
+                updateShowProp(data, retrieveData);
+            } else {
+                updateShowProp(data, retrieveData, true);
+            }
+
+      
 
             // Initialize default value of checkboxes 
             if ( checkable ) {
@@ -206,6 +252,14 @@ const Tree = (props: TreeProps) => {
                 initCheckboxesData(data);
             }
 
+
+            // update list
+            setList(data);
+
+            // update retrive list
+            const _clone: any = deepClone(data);
+            setFlatList(flatOriginalData(_clone));
+
             return;
         }
 
@@ -218,11 +272,19 @@ const Tree = (props: TreeProps) => {
 
                 if ( _childrenData.length > 0 ) {
                     // add children to node
-                    const _newData: DataNode[] = updateTreeData(val, key ? key : '', _childrenData);
+                    const _newData: DataNode[] = updateTreeData(list, key ? key : '', _childrenData);
 
                     // update data
                     addKey(_newData, '', 0);
-                    setVal(_newData);
+          
+                    // filter showing items
+                    if (Array.isArray(retrieveData)) {
+                        updateShowProp(_newData, retrieveData);
+                    } else {
+                        updateShowProp(_newData, retrieveData, true);
+                    }
+
+
 
                     // Initialize default value of checkboxes 
                     if ( checkable ) {
@@ -230,10 +292,19 @@ const Tree = (props: TreeProps) => {
                             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(flatOriginalData(_clone));
+                    
 
                 }
 
@@ -247,7 +318,7 @@ const Tree = (props: TreeProps) => {
                         }
                     });
 
-
+                
                     // init <ul> height
                     // Initialize async items
                     const ul: any = [].slice.call(rootRef.current.querySelectorAll('ul'));
@@ -265,9 +336,19 @@ const Tree = (props: TreeProps) => {
     }
 
 
+
+
+
+    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);
-    }, [data]);
+        initDefaultValue(null, null, true, retrieveData);
+    }, [data, retrieveData]);
+
 
    
     return (
@@ -285,7 +366,7 @@ const Tree = (props: TreeProps) => {
                     disableCollapse={disableCollapse}
                     arrow={arrow}
                     arrowIcons={arrowIcons}
-                    data={val} 
+                    data={Array.isArray(retrieveData) && retrieveData.length > 0 ? filterRetriveData(flatList, retrieveData) : list} 
                     childClassName={childClassName || 'tree-diagram-default-nav'} 
                     onSelect={onSelect} 
                     onCollapse={onCollapse}

package/lib/esm/Tree/tree-utils.ts

@@ -0,0 +1,56 @@
+export const removeItemOnce = (arr: any[], key: string) => {
+    return arr.filter((item: any) => {
+        return item.key !== key;
+    });
+};
+  
+
+
+export const activeClass = (el: any, mode: string, classname: string = 'active') => {
+    if ( mode === 'add' ) {
+        el.classList.add(classname);
+    } else {
+        el.classList.remove(classname);
+    }
+};
+
+
+
+export const deepClone = (obj: any) => {
+    if (Array.isArray(obj)) {
+        return (obj as any).map((item: any) => deepClone(item));
+    } else if (typeof obj === 'object' && obj !== null) {
+        const clone: any = {};
+        for (let key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                clone[key] = deepClone(obj[key]);
+            }
+        }
+        return clone;
+    } else {
+        return obj;
+    }
+};
+
+
+export const flatOriginalData = (data: any[]) => {
+    const result: any[] = [];
+    const iterate = (obj: any) => {
+        if (!obj) {
+            return;
+        }
+        obj.forEach((item: any) => {
+            result.push(item);
+            if (item.children) {
+                iterate(item.children);
+            }
+
+            // delete current item children
+            delete item.children;
+
+        })
+    }
+
+    iterate(data);
+    return result;
+};

package/package.json

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