funda-ui 1.0.272

package/lib/esm/Tree/index.scss

@@ -0,0 +1,375 @@
+/* ======================================================
+    <!-- Tree -->
+/* ====================================================== */
+
+.tree-diagram-default {
+
+    --tree-padding-x: 1rem;
+    --tree-padding-y: 0.5rem;
+    --tree-font-line-height: 1.5;
+    --tree-dis-top: 1rem;
+    --tree-font-size: 0.875rem;
+    --tree-ident: var(--tree-font-size);
+    --tree-dis-start: -var(--tree-ident);
+    --tree-border-color: #ddd;
+    --tree-font-bg: #f6f6f6;
+    --tree-font-active-bg: #f0f8ff;
+    --tree-checkbox-indeterminate-color: #bbbbbb;
+    --tree-link-min-width: 150px;
+
+
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    outline: none; /* When using "tabindex" please set */
+
+    ul, li {
+        list-style: none;
+    }
+
+    .tree-diagram-default-nav {
+        display: flex;
+        flex-direction: column;
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
+
+        .nav-link {
+            position: relative;
+            display: block;
+            min-width: var(--tree-link-min-width);
+            padding: var(--tree-padding-y) var(--tree-padding-x);
+            font-size: var(--tree-font-size);
+            font-weight: 400;
+            color: inherit;
+            text-decoration: none;
+            transition: .1s ease-in-out;
+            padding-left: calc(var(--tree-padding-x)*2);
+            z-index: 1;
+
+            > span {
+                transition: .1s ease-in-out;
+                display: inline-block;
+                border-radius: 2px;
+
+                var.loading-icon {
+                    position: absolute;
+                    margin-left: .2em;
+                }
+            }
+            
+
+            &:hover span {
+                background-color: var(--tree-font-bg);
+            }
+
+            &.selected span {
+                background-color: var(--tree-font-active-bg);
+            }
+
+            &.loading {
+
+                > span {
+                    var.loading-icon {
+                        display: inline-block;
+                    }
+                }
+                
+            }
+
+        }
+
+
+        var.loading-icon {
+            display: none;
+
+            svg {
+                animation: tree-diagram-ring 1.2s linear infinite;
+            }      
+        }
+
+
+
+        .checkbox-trigger {
+            display: none;
+            position: absolute;
+            left: calc(var(--tree-padding-x) + 1.5em);
+            top: calc(var(--tree-dis-top) - 8px);
+            z-index: 2;
+    
+            > div {
+                display: inline-block;
+    
+                .form-check {
+                    min-height: auto;
+                    margin-bottom: 0;
+
+                    [type=checkbox]:indeterminate {
+                        background-color: var(--tree-checkbox-indeterminate-color);
+                        border-color: var(--tree-checkbox-indeterminate-color);
+                    }
+
+                }
+            } 
+        }
+    
+
+
+        .arrow {
+            cursor: pointer;
+            transition: .1s ease-in-out;
+            display: inline-block;
+            text-align: center;
+            position: absolute;
+            left: calc(var(--tree-padding-x) + 0.2em);
+            top: calc(var(--tree-dis-top) - 5px);
+            transform: translateY(-50%) rotate(0deg);
+            z-index: 2;
+            width: 10px;
+            height: 10px;
+            transform-origin: 50% 125%;
+
+            > var > svg {
+                transition: .1s ease-in-out;
+            }
+
+            var.default-icon {
+                > span {
+
+                    &:last-child {
+                        display: none;
+                    }
+
+                }
+            }
+
+            &.loading {
+                var.default-icon {
+                    display: none;
+                }
+                var.loading-icon {
+                    display: inline-block;
+                }
+            }
+
+            &:hover {
+                opacity: .5;
+
+                > var > svg {
+                    transform: scale(1.4);
+                }
+            }
+
+        }
+
+
+        li {
+            position: relative;
+            padding-left: .2em;
+
+            i {
+                font-style: normal;
+            }
+            
+            > a {
+        
+                &:hover {
+                    
+                }
+            }
+
+
+            &.active {
+
+                > .arrow:not(.custom-icons) {
+                    transform: translateY(-50%) rotate(90deg);
+                }
+
+                > .arrow.custom-icons var.default-icon > span {
+
+                    &:first-child {
+                        display: none;
+                    }
+
+                    &:last-child {
+                        display: block;
+                    }
+    
+                }                
+            }
+
+            &.active > a {
+
+            }        
+
+        }
+
+        > li {
+
+            ul {
+                transition: max-height 0.25s ease;
+                overflow: hidden;
+                position: relative;
+            }
+        }
+
+        /* Default height for sub items */
+        > li:not(.active) {
+
+            ul {
+                max-height: 0;
+            }
+        }
+
+
+        > li ul ul {
+            margin-top: auto;
+        }
+        
+    }
+
+    /*------ line ------*/
+    &.show-line .tree-diagram-default-nav {
+
+        li {
+            &::before,
+            &::after {
+                content: "";
+                position: absolute;
+                top: calc(0px - var(--tree-dis-top));
+                left: var(--tree-dis-start);
+                border-left-width: 1px;
+                border-left-style: solid;
+                border-left-color: var(--tree-border-color);
+                border-bottom-width: 1px;
+                border-bottom-style: solid;
+                border-bottom-color: var(--tree-border-color);
+
+                width: var(--tree-ident);
+                pointer-events: none;
+            }
+    
+            &::before {
+                height: calc(var(--tree-font-size)*var(--tree-font-line-height) + var(--tree-padding-y) + var(--tree-padding-y));
+            }
+    
+            &::after {
+                height: 100%;
+                border-bottom-width: 0;
+            }
+    
+            &:last-child::after {
+                display: none;
+            }
+     
+        }
+
+        > li {
+            &:first-child::before {
+                border-left-width: 0;
+            }
+            &:first-child::after {
+                top: calc(var(--tree-font-size)*var(--tree-font-line-height));
+             }
+
+        }
+
+    }
+
+    &.show-line.line--dotted .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: dotted;
+                border-bottom-style: dotted;
+            }
+        }
+    }
+
+    &.show-line.line--dashed .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: dashed;
+                border-bottom-style: dashed;
+            }
+        }
+    }
+
+    &.show-line.line--double .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: double;
+                border-bottom-style: double;
+            }
+        }
+    }
+
+
+    &.show-line.line--solid .tree-diagram-default-nav {
+        li {
+            &::before,
+            &::after {
+                border-left-style: solid;
+                border-bottom-style: solid;
+            }
+        }
+    }
+
+
+    /*------ has checkbox  ------*/
+    &.has-checkbox {
+        .checkbox-trigger {
+            display: inline-block;
+        }
+
+        .tree-diagram-default-nav {
+            .nav-link {
+                padding-left: calc(var(--tree-padding-x) + 2.7em);
+            }
+        } 
+
+    }
+    
+    /*------ hide arrow  ------*/
+    &.hide-arrow {
+        .arrow {
+            display: none;
+        }
+
+        .tree-diagram-default-nav {
+            .nav-link {
+                padding-left: var(--tree-padding-x);
+            }
+        }
+    
+    }
+
+    &.hide-arrow.has-checkbox {
+        
+        .tree-diagram-default-nav {
+            .checkbox-trigger {
+                left: calc(var(--tree-padding-x) + 0.5em);
+            }
+            .nav-link {
+                padding-left: calc(var(--tree-padding-x) + 1.5em);
+            }
+        } 
+
+    }
+
+}
+
+@keyframes tree-diagram-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/lib/esm/Tree/index.tsx

@@ -0,0 +1,301 @@
+import React, { useState, useEffect, useRef, useId } from 'react';
+
+import TreeList from './TreeList';
+import { initUlHeight, initAsyncItems } from './init-height';
+import { type } from 'os';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+
+interface DataNode {
+    key: React.Key;
+    title: string;
+    link?: string;
+    active?: boolean;
+    checked?: boolean;
+    heading?: string;
+    icon?: string;
+    slug?: string;
+    childrenAsync?: boolean;
+    children?: DataNode[];
+}
+
+interface fetchConfig {
+    fetchFuncAsync?: any | undefined;
+    fetchFuncMethod?: string | undefined;
+    fetchFuncMethodParams?: any[] | undefined;
+    fetchCallback?: (data: any) => void;
+}
+
+
+
+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;
+    /** 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];
+    /** -- */
+    id?: string;
+    onSelect?: (e: any, val: any, func: Function) => void;
+    onCollapse?: (e: any, val: any, func: Function) => void;
+    onCheck?: (val: any) => void;
+};
+
+const Tree = (props: TreeProps) => {
+    const {
+        id,
+        checkable,
+        showLine,
+        lineStyle,
+        alternateCollapse,
+        disableArrow,
+        disableCollapse,
+        arrow,
+        arrowIcons,
+        treeClassName,
+        childClassName,
+        data,
+        onSelect,
+        onCollapse,
+        onCheck
+    } = props;
+    
+
+    const uniqueID = useId().replace(/\:/g, "-");
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const [val, setVal] = useState<DataNode[] | null>(null);
+    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 updateTreeData = (list: DataNode[] | null, key: React.Key, children: DataNode[]): DataNode[] => {
+        
+        return list ? list.map((node) => {
+            if (node.key === key) {
+                return {
+                    ...node,
+                    children
+                };
+            }
+            if (node.children) {
+                return {
+                    ...node,
+                    children: updateTreeData(node.children, key, children)
+                };
+            }
+            return node;
+        }) : [];
+    }
+        
+
+    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 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,
+                indeterminate: false
+            }, ...prevState]);
+            
+            if (item.children) {
+                initCheckboxesData(item.children);
+            }
+        });
+    }
+
+
+    function initDefaultValue(key: React.Key | null, fetch: fetchConfig | null = null, firstRender: boolean = false) {
+
+        if ( firstRender ) {
+            addKey(data, '', 0);
+            setVal(data);
+
+            // Initialize default value of checkboxes 
+            if ( checkable ) {
+                initCheckboxesVal(data);
+                initCheckboxesData(data);
+            }
+
+            return;
+        }
+
+        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(val, key ? key : '', _childrenData);
+
+                    // update data
+                    addKey(_newData, '', 0);
+                    setVal(_newData);
+
+                    // Initialize default value of checkboxes 
+                    if ( checkable ) {
+                        _childrenData.forEach((newitem: any) => {
+                            setCheckedData((prevState) => [{
+                                key: newitem.key,
+                                checked: newitem.checked === true,
+                                indeterminate: false
+                            }, ...prevState]);
+                        });
+                    }
+
+                }
+
+                // 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();
+                        }
+                    });
+
+
+                    // init <ul> height
+                    // Initialize async items
+                    const ul: any = [].slice.call(rootRef.current.querySelectorAll('ul'));
+                    initAsyncItems(ul as never).then(() => {
+                        initUlHeight(ul);
+                    });
+
+                }, 500);
+
+          
+
+            });        
+        }
+        
+    }
+
+
+    useEffect(() => {
+        initDefaultValue(null, null, true);
+    }, [data]);
+
+   
+    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}
+                    first={true}
+                    disableArrow={disableArrow}
+                    disableCollapse={disableCollapse}
+                    arrow={arrow}
+                    arrowIcons={arrowIcons}
+                    data={val} 
+                    childClassName={childClassName || 'tree-diagram-default-nav'} 
+                    onSelect={onSelect} 
+                    onCollapse={onCollapse}
+                    onCheck={onCheck}
+                    evInitValue={initDefaultValue}
+                    updateCheckedPrint={setCheckedPrint}
+                    getCheckedPrint={checkedPrint}
+                    updategetCheckedData={setCheckedData}
+                    getCheckedData={checkedData}
+                    
+                />
+                
+            </nav>
+
+        </>
+    )
+};
+
+export default Tree;

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

@@ -0,0 +1,27 @@
+const initUlHeight = (inputUl: HTMLAllCollection) => {
+    [].slice.call(inputUl).forEach(function(el: HTMLUListElement){
+        if (typeof el.dataset.maxwidth === 'undefined') {
+            const _li = [].slice.call(el.querySelectorAll('li'));
+            let _allHeight: number = 0;
+            _li.forEach(function(li: HTMLLIElement){
+                _allHeight += li.scrollHeight;   
+            });
+            el.dataset.maxwidth = `${_allHeight}px`;
+            el.style.maxHeight = `${_allHeight}px`;
+        } else {
+            el.style.maxHeight = el.dataset.maxwidth;
+        }
+
+    });
+};
+
+const initAsyncItems = async (inputUl: HTMLAllCollection) => {
+    [].slice.call(inputUl).forEach(function(el: HTMLUListElement){
+        el.removeAttribute('data-maxwidth');
+    });
+};
+
+export {
+    initUlHeight,
+    initAsyncItems
+};