funda-ui 4.5.712 → 4.5.766

package/publish/lib/esm/MultilevelDropdownMenu/ItemList.tsx

@@ -1,265 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-
-import {
-    getNextSiblings
-} from 'funda-utils/dist/cjs/dom';
-
-/* Recursively nested components to traverse nodes
--------------------------------------------------*/		
-export type ItemListProps = {
-    root: any;
-    alternateCollapse?: boolean;
-    first?: boolean;
-    arrow?: React.ReactNode;
-    childClassName?: string;
-	data: any[any];
-    routerPath?: string;
-    onSelect?: (e: any, val: any) => void;
-};
-
-export default function ItemList(props: ItemListProps) {
-
-    const {
-        root,
-        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 (_curUl: any) {
-
-            const allHeight = [].slice.call(_curUl.querySelectorAll('li')).map((_curLi: any) => _curLi.scrollHeight);
-
-            // Prevent missing height, causing the last element to be clipped
-            const maxHeight = Math.max(...allHeight);
-            allHeight.push(maxHeight*3);
-
-            //
-            const totalHeight = allHeight.reduce(
-                (accumulator: number, currentValue: number) => accumulator + currentValue,
-                0,
-            );
-
-            // Prevent the use of iframe or other situations where the height is 0
-            _curUl.style.maxHeight = `${totalHeight == 0 ? 999 : totalHeight}px`;
-            
-        });
-
-    };
-
-
-
-    function handleClick(e: any) {
-        e.preventDefault();
-        e.stopPropagation();
-        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(() => {
-
-        if (root !== null && data.length > 0) {
-           // Activate current item
-            //=====================
-            const allItems = rootRef.current ? [].slice.call(root.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 (_curUl: any) {
-
-                        const allHeight = [].slice.call(_curUl.querySelectorAll('li')).map((_curLi: any) => _curLi.scrollHeight);
-
-                        // Prevent missing height, causing the last element to be clipped
-                        const maxHeight = Math.max(...allHeight);
-                        allHeight.push(maxHeight * 3);
-
-
-                        // 
-                        const totalHeight = allHeight.reduce(
-                            (accumulator: number, currentValue: number) => accumulator + currentValue,
-                            0,
-                        );
-            
-                        // Prevent the use of iframe or other situations where the height is 0
-                        _curUl.style.maxHeight = `${totalHeight == 0 ? 999 : totalHeight}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 && item.children.length > 0 ? <span className="arrow">{arrowGenerator()}</span> : ''}
-                            </a>
-                            {item.children && <ItemList 
-                                                root={root}
-                                                data={item.children} 
-                                                first={false} 
-                                                arrow={arrow} 
-                                                onSelect={onSelect} 
-                                                routerPath={routerPath} 
-                                            />}
-                        </li>
-                    );
-
-                })}
-            </ul>
-
-            </>
-        )	
-    } else {
-        return (
-            <></>
-        )
-    }
-
-}
-

package/publish/lib/esm/MultilevelDropdownMenu/index.scss

@@ -1,79 +0,0 @@
-/* ======================================================
-    <!-- Multi-level Dropdown Menu -->
-/* ====================================================== */
-
-.navbar-nav {
-
-    a {
-        position: relative;
-        
-        /* required */
-        display: inline-flex;
-        align-items: center;
-    }
-
-	.arrow {
-        transition: .1s ease-in-out;
-		display: inline-block;
-		text-align: center;
-		position: absolute;
-        right: -1em;
-        top: 50%;
-        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/publish/lib/esm/MultilevelDropdownMenu/index.tsx

@@ -1,77 +0,0 @@
-import React, { useRef, useState, useEffect, memo } from 'react';
-
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-
-
-
-import ItemList from './ItemList';
-
-
-export 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 rootRef = useRef<any>(null);
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const [val, setVal] = useState<any>(null);
-
-    useEffect(() => {
-        setVal(data);
-    }, [data]);
-
-   
-    return (
-        <>
-
-            <nav 
-                id={idRes} 
-                className={navbarClassName ? navbarClassName : "navbar"}
-                ref={rootRef}
-            >
-                <ItemList 
-                    root={rootRef.current}
-                    alternateCollapse={alternateCollapse}
-                    first={true}
-                    arrow={arrow}
-                    data={val} 
-                    childClassName={childClassName || 'navbar-nav'} 
-                    onSelect={onSelect} 
-                    routerPath={routerPath}
-                />
-            </nav>
-
-        </>
-    )
-};
-
-export default memo(MultilevelDropdownMenu);