funda-ui 1.0.272

package/lib/esm/MultiFuncSelect/utils/performance.js

@@ -0,0 +1,52 @@
+
+/*
+* Debounce
+*
+* @param  {Function} fn    - A function to be executed within the time limit.
+* @param  {Number} limit   - Waiting time.
+* @return {Function}       - Returns a new function.
+*/  
+function debounce( fn, limit = 300 ) {
+    let timer;
+    return function() {
+    
+        //Every time this returned function is called, the timer is cleared to ensure that fn is not executed
+        clearTimeout(timer);
+
+        // When the returned function is called for the last time (that is the user stops a continuous operation)
+        // Execute fn after another delay milliseconds
+        timer = setTimeout(function() {
+            fn.apply(this, arguments);
+        }, limit);
+    }
+}
+
+
+
+
+
+/*
+* Throttle
+*
+* @param  {Function} fn    - A function to be executed within the time limit.
+* @param  {Number} limit   - Waiting time.
+* @return {Function}       - Returns a new function.
+*/  
+function throttle( fn, limit = 300 ) {
+	let waiting = false;                     
+	return function () {                     
+		if (!waiting) {                 
+			fn.apply(this, arguments);  
+			waiting = true;                  
+			setTimeout(function () {          
+				waiting = false;           
+			}, limit);
+		}
+	}
+}
+
+
+module.exports = {
+    debounce,
+    throttle
+}

package/lib/esm/MultiFuncSelect/utils/tree.js

@@ -0,0 +1,103 @@
+/**
+ * Convert Tree
+ * @param {Array} arr                    - Flat array
+ * @param  {?String | ?Number} parentId  - Parent id
+ * @param  {?String} keyId               - Key value of id.
+ * @param  {?String} keyParentId         - Key value of parent id.
+ * @returns Array
+ */
+function convertTree(arr, parentId = '', keyId = 'id', keyParentId = 'parent_id') {
+    
+    if( !parentId ) {
+        
+        // If there is no parent id (when recursing for the first time), all parents will be queried
+        return arr.filter(item => !item[keyParentId]).map(item => {
+            // Query all child nodes by parent node ID
+            item.children = convertTree(arr, item[keyId], keyId, keyParentId);
+            return item;
+        })
+    } else {
+        return arr.filter(item => item[keyParentId] === parentId).map(item => {
+            // Query all child nodes by parent node ID
+            item.children = convertTree(arr, item[keyId], keyId, keyParentId);
+            return item;
+        })
+    }
+}
+
+
+/**
+ * Flat tree
+ * @param {Array} arr                    - Hierarchical array
+ * @returns Array
+ */
+function flatTree(arr) {
+    const flatData = ({...rest}) => {
+        const { children = [] } = rest;
+        return [{...rest}, ...children.flatMap(flatData)];
+    };
+    let result = arr.flatMap(flatData);
+
+    //remove children from item
+    result = result.map((item) => {
+        delete item.children;
+        return item;
+
+    });
+
+    return result;
+}
+
+
+/**
+ * Add depth to each item in the tree
+ * @param {Array} arr                    - Hierarchical array
+ * @param  {?String | ?Number} parentId  - Parent id
+ * @param  {?String} keyId               - Key value of id.
+ * @param  {?String} keyParentId         - Key value of parent id.
+ * @param  {?Number} depth               - Depth of the item.
+ * @returns 
+ */
+function addTreeDepth(arr, parentId = '', keyId = 'id', keyParentId = 'parent_id', depth = 0) {
+    arr.forEach((item) => {
+        item.depth = depth;
+        // Query all child nodes by parent node ID
+        if (item.children && item.children.length > 0) {
+            addTreeDepth(item.children, item[keyId], keyId, keyParentId, ++depth);
+        } else {
+            depth = 0;
+        }
+    });
+}
+
+
+
+/**
+ * Add indent placeholder
+ * @param {Array} arr                    - Flat array
+ * @param  {?String} placeholder         - String of placeholder
+ * @param  {?String} lastPlaceholder     - Last String of placeholder
+ * @param  {?String} keyName             - Key value of name.
+ * @returns Array
+ */
+function addTreeIndent(arr, placeholder = '    ', lastPlaceholder = '', keyName = 'label') {
+    arr.forEach((item) => {
+        let indent = ''; 
+        if (item.depth) {
+            Array(item.depth).fill(0).forEach((k, i) => {
+                indent += placeholder;
+                if (i === item.depth-1) {
+                    item[keyName] = indent + lastPlaceholder + item[keyName];
+                }
+            });
+        }
+    });
+}
+
+module.exports = {
+    convertTree,
+    flatTree,
+    addTreeDepth,
+    addTreeIndent
+};
+

package/lib/esm/MultiFuncSelect/utils/useThrottle.js

@@ -0,0 +1,36 @@
+/**
+ * Limiting the rate of execution
+ * 
+ * @usage:
+
+const App = () => {
+    const [count, setCount] = useState(0);
+    const handleClick = useThrottle(() => setCount(count + 1), 500, [count]);
+
+    return (
+        <div className="app">
+            <button onClick={handleClick}>click</button>
+            <p>click {count} time</p>
+        </div>
+    );
+};
+
+ */
+import { useRef, useCallback } from "react";
+
+const useThrottle = (fn, delay, dependence) => {
+    const ref = useRef({ lastTime: 0 });
+
+    return useCallback((...args) => {
+        const now = Date.now();
+
+        if (now - ref.current.lastTime >= delay) {
+            fn(...args);
+            ref.current.lastTime = now;
+        }
+    }, dependence);
+};
+
+
+export default useThrottle;
+

package/lib/esm/MultilevelDropdownMenu/MenuList.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useRef } from 'react';
+
+import { getNextSiblings } from './utils/dom'; 
+
+/* Recursively nested components to traverse nodes
+-------------------------------------------------*/		
+type MenuListProps = {
+    alternateCollapse?: boolean;
+    first?: boolean;
+    arrow?: React.ReactNode;
+    childClassName?: string;
+	data: any[any];
+    routerPath?: string;
+    onSelect?: (e: any, val: any) => void;
+};
+
+export default function MenuList(props: MenuListProps) {
+
+    const {
+        alternateCollapse,
+        first,
+        arrow,
+        childClassName,
+        data,
+        routerPath,
+        onSelect
+    } = props;
+
+    const rootRef = useRef<any>(null);
+    const currentPath = routerPath ? routerPath : '';
+    
+
+    
+    const activeClass = (el: any, mode: string, classname: string = 'active') => {
+        if ( mode === 'add' ) {
+            el.classList.add(classname);
+        } else {
+            el.classList.remove(classname);
+        }
+    };
+
+    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
+        [].slice.call(ul).forEach(function(el: any){
+            if ( typeof el.querySelectorAll('li')[0] !== 'undefined' ) {
+                const calcH = el.querySelectorAll('li').length * el.querySelectorAll('li')[0].scrollHeight;
+                el.style.maxHeight = `${calcH}px`;
+            }
+
+        });
+
+    };
+
+
+
+    function handleClick(e: any) {
+        e.preventDefault();
+        const hyperlink = e.currentTarget;
+        const url = hyperlink.getAttribute('href');
+        const subElement = getNextSiblings(hyperlink, 'ul');
+
+
+        // route switching
+        //=====================
+        onSelect?.(e, {
+            isRouter: hyperlink.dataset.router,
+            slug: hyperlink.dataset.slug,
+            link: hyperlink.dataset.link
+        });
+        
+
+        // hide child if expandedLink doesn't exist, on the contrary
+        //=====================
+        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.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);
+        }
+
+
+
+        // active current item
+        //=====================
+        if ( (currentPath === url || currentPath.indexOf(url.replace(/\/[\d]+\.html|\.html/ig,'')) >= 0 && url !== '/') ) {
+            activeClass(e.target, 'add');
+            activeClass(e.target.parentElement, 'add');
+        }
+        
+
+    }
+    
+    function arrowGenerator() {
+        return arrow ? arrow : <svg viewBox="0 0 22 22" width="8px"><path d="m345.44 248.29l-194.29 194.28c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.29 194.28c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373" transform="matrix(.03541-.00013.00013.03541 2.98 3.02)" fill="#a5a5a5" /></svg>;
+    }
+
+
+    useEffect(() => {
+
+
+        // Activate current item
+        //=====================
+        const allItems = rootRef.current ? [].slice.call(document.querySelectorAll(`.${childClassName} a`)).map( (item: any) => {
+            return {
+                href: item.getAttribute('href'),
+                el: item,
+                actived: item.parentNode.classList?.contains('active') ? true : false,
+                expandedLink: document.body.contains(item.parentNode.parentNode.previousSibling) ? item.parentNode.parentNode.previousSibling : false
+            }
+        } ) : [];
+
+        
+        allItems.forEach( (hyperlink: any) => {
+
+            // Expand the currently active item by default
+            if ( hyperlink.actived ) {
+
+                hyperlink.el.setAttribute('aria-expanded', 'true');
+
+                if ( hyperlink.expandedLink ) {
+                    const expandedLink: any = hyperlink.expandedLink;  // <a>
+                    activeClass(expandedLink.parentNode, 'add');
+                    expandedLink.setAttribute('aria-expanded', true);
+                }
+
+
+                // init <ul> height
+                const ul = getNextSiblings(hyperlink.el, 'ul');
+                [].slice.call(ul).forEach(function(el: any){
+                    if ( typeof el.querySelectorAll('li')[0] !== 'undefined' ) {
+                        const calcH = el.querySelectorAll('li').length * el.querySelectorAll('li')[0].scrollHeight;
+                        el.style.maxHeight = `${calcH}px`;
+                    }
+
+                });
+            }
+
+        });
+
+    }, [data]);
+
+
+    if ( data ) {
+        
+        return (
+            <>
+            <ul className={childClassName}  ref={rootRef} style={!first ? {maxHeight: '0px'} : {}}>
+                
+                {data.map((item: any, i: number) => {
+
+                    const _matchPath = currentPath === item.link || currentPath.indexOf(item.link.replace(/\/[\d]+\.html|\.html/ig, '')) >= 0 && item.link !== '/';
+
+                    if (item.heading) return (
+                        <li className="nav-item" key={i}>
+                            <a tabIndex={-1} className="nav-link disabled" href="#" aria-disabled="true" data-router="false" data-link={item.link} data-slug={item.slug}>
+                                {item.icon ? item.icon.indexOf('</svg>') < 0 ? <><i className={item.icon}></i> </> : <var dangerouslySetInnerHTML={{ __html: `${item.icon}` }} /> : null}<i dangerouslySetInnerHTML={{ __html: `${item.title}` }}></i>
+                            </a>
+                        </li>
+                    );
+
+                    return (
+                        <li key={i} className={item.active ? `nav-item active` : (_matchPath ? `nav-item active` : 'nav-item')}>
+                            <a tabIndex={-1} title={item.title} className={item.active ? `nav-link active` : (_matchPath ? `nav-link active` : 'nav-link')} href={item.link === '#' ? `${item.link}-${i}` : item.link} onClick={handleClick} data-router={item.link.indexOf('#') >= 0 || item.link.indexOf('http') >= 0 ? 'false' : 'true'} data-link={item.link} data-slug={item.slug}>
+                                {item.icon ? item.icon.indexOf('</svg>') < 0 ? <><i className={item.icon}></i> </> : <var dangerouslySetInnerHTML={{ __html: `${item.icon}` }} /> : null}<i dangerouslySetInnerHTML={{ __html: `${item.title}` }}></i>
+                                {item.children ? <span className="arrow">{arrowGenerator()}</span> : ''}
+                            </a>
+                            {item.children && <MenuList 
+                                                data={item.children} 
+                                                first={false} 
+                                                arrow={arrow} 
+                                                onSelect={onSelect} 
+                                                routerPath={routerPath} 
+                                            />}
+                        </li>
+                    );
+
+                })}
+            </ul>
+
+            </>
+        )	
+    } else {
+        return (
+            <></>
+        )
+    }
+
+}
+

package/lib/esm/MultilevelDropdownMenu/index.scss

@@ -0,0 +1,75 @@
+/* ======================================================
+    <!-- Multi-level Dropdown Menu -->
+/* ====================================================== */
+
+.navbar-nav {
+
+    a {
+        position: relative;
+    }
+
+	.arrow {
+        transition: .1s ease-in-out;
+		display: inline-block;
+		text-align: center;
+		position: absolute;
+        right: 0.5em;
+        top: 1.5em;
+        transform: translateY(-50%) rotate(0deg);
+	}
+
+	li {
+
+		position: relative;
+
+        i {
+            font-style: normal;
+        }
+
+		> a {
+	
+			&:hover {
+				
+			}
+
+			&.active {
+
+				 > .arrow {
+					transform: translateY(-50%) rotate(90deg);
+				}
+
+
+			}
+
+		}
+
+        &.active > a {
+
+        }        
+
+
+	}
+
+	> li {
+
+		ul {
+            transition: max-height 0.25s ease;
+			overflow: hidden;
+			position: relative;
+		}
+	}
+
+	> li:not(.active) {
+
+		ul {
+			max-height: 0;
+		}
+	}
+
+
+	> li ul ul {
+        margin-top: auto;
+	}
+
+
+}

package/lib/esm/MultilevelDropdownMenu/index.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect, useId, memo } from 'react';
+
+import MenuList from './MenuList';
+
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type MultilevelDropdownMenuProps = {
+    /** Mutually exclusive alternate expansion between the first levels */
+    alternateCollapse?: boolean;
+    /** set an arrow */
+    arrow?: React.ReactNode;
+    /** The class name of the navbar. */
+    navbarClassName?: 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];
+    /** Pass the current routing path into. It is used to determine whether to activate */
+    routerPath?: string;
+    /** -- */
+    id?: string;
+    onSelect?: (e: any, val: any) => void;
+};
+
+
+const MultilevelDropdownMenu = (props: MultilevelDropdownMenuProps) => {
+    const {
+        alternateCollapse,
+        arrow,
+        navbarClassName,
+        childClassName,
+        routerPath,
+        data,
+        id,
+        onSelect
+    } = props;
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const [val, setVal] = useState<any>(null);
+
+    useEffect(() => {
+        setVal(data);
+    }, [data]);
+
+   
+    return (
+        <>
+
+            <nav id={idRes} className={navbarClassName ? navbarClassName : "navbar"}>
+                <MenuList 
+                    alternateCollapse={alternateCollapse}
+                    first={true}
+                    arrow={arrow}
+                    data={val} 
+                    childClassName={childClassName || 'navbar-nav'} 
+                    onSelect={onSelect} 
+                    routerPath={routerPath}
+                />
+            </nav>
+
+        </>
+    )
+};
+
+export default memo(MultilevelDropdownMenu);

package/lib/esm/MultilevelDropdownMenu/utils/dom.js

@@ -0,0 +1,81 @@
+/**
+ * Dom Utilities
+ * @param {HTMLElement} el      - Element
+ * @param  {?String} filter      - A filter string
+ * @returns HtmlElementCollection
+ */
+function matches(el, filter) {
+    if (el && el.nodeType === 1) {
+        if (filter) {
+            return el.matches(filter);
+        }
+        return true;
+    }
+    return false;
+}
+
+// the next siblings
+function getNextSiblings(el, filter = false || '') {
+    const sibs = [];
+    while (el = el.nextSibling) {
+        if (matches(el, filter)) {
+            sibs.push(el);
+        }
+    }
+    return sibs;
+}
+
+// previous siblings
+function getPreviousSiblings(el, filter = false || '') {
+    const sibs = [];
+    while (el = el.previousSibling) {
+        if (matches(el, filter)) {
+            sibs.push(el);
+        }
+    }
+    return sibs;
+}
+
+// parent and get all the siblings
+function getAllSiblings(el, filter = false || '') {
+    const sibs = [];
+    el = el.parentNode.firstChild;
+    while (el = el.nextSibling) {
+        if (matches(el, filter)) {
+            sibs.push(el);
+        }
+    }
+    return sibs;
+}
+
+// all parent nodes
+function getParents(el, filter = false || '') {
+    const parents = [];
+    while (el = el.parentNode) {
+        if (matches(el, filter)) {
+            parents.push(el);
+        }
+    }
+    return parents;
+}
+
+// all child nodes
+function getChildren(el, filter = false || '', all = []) {
+    all.push(...el.childNodes);
+    for (const child of el.childNodes) {
+        getChildren(child, filter, all);
+    }
+
+    const res = all.filter( item => matches(item, filter) );
+    return res;
+}
+
+
+module.exports = {
+    getNextSiblings,
+    getPreviousSiblings,
+    getAllSiblings,
+    getParents,
+    getChildren
+}
+