funda-ui 4.2.375 → 4.2.445

package/lib/css/MultilevelDropdownMenu/index.css

@@ -12,8 +12,8 @@
   display: inline-block;
   text-align: center;
   position: absolute;
-  right: 0.5em;
-  top: 1.5em;
+  right: -1em;
+  top: 50%;
   transform: translateY(-50%) rotate(0deg);
 }
 .navbar-nav li {

package/lib/css/MultipleSelect/index.css

@@ -30,6 +30,7 @@
   border-radius: 0.35rem;
   position: relative;
   background: var(--m-select-body-bg);
+  /*-------- Multilevel --------*/
   /*-------- List --------*/
 }
 .m-select__wrapper .m-select-diving-line {
@@ -74,8 +75,7 @@
   cursor: default;
   position: relative;
   font-size: var(--m-select-body-font-size);
-  display: flex;
-  justify-content: space-between;
+  display: block;
   background: var(--m-select-options-item-bg);
   border-bottom: 1px solid var(--m-select-options-item-dividingline-color);
 }
@@ -99,37 +99,34 @@
 .m-select__wrapper .m-select-inner li:last-child {
   border-bottom: none;
 }
-.m-select__wrapper .m-select-inner li > span {
+.m-select__wrapper .m-select-inner li > div {
   padding: 0.35rem 0.75rem;
-  display: inline-block;
-  max-width: 100%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   word-wrap: break-word;
   word-break: break-word;
 }
-.m-select__wrapper .m-select-inner li > strong {
+.m-select__wrapper .m-select-inner li > div > strong {
   font-weight: normal;
+  display: flex;
+  align-items: center;
 }
-.m-select__wrapper .m-select-inner li > i {
+.m-select__wrapper .m-select-inner li > div > strong .arrow {
   display: inline-block;
-  padding: 0.35rem 0.75rem;
-  cursor: pointer;
+  margin-left: 0.2rem;
 }
-.m-select__wrapper .m-select-inner li > i svg path {
-  fill: var(--m-select-options-item-icon-color);
+.m-select__wrapper .m-select-inner li > div.active .arrow {
+  transform: rotate(90deg);
 }
-.m-select__wrapper .m-select-inner li a {
-  color: #999;
-  text-decoration: none;
-  padding: 0;
-  display: block;
+.m-select__wrapper .m-select-inner li > div > i {
+  display: inline-block;
   cursor: pointer;
 }
-.m-select__wrapper .m-select-inner li a.m-select__item-action {
-  position: absolute;
-  right: 0.5rem;
-  top: 0.5rem;
+.m-select__wrapper .m-select-inner li > div > i svg path {
+  fill: var(--m-select-options-item-icon-color);
 }
 .m-select__wrapper .m-select-inner div.m-select__selected__container .m-select__header {
   border-radius: 0 0.35rem 0 0;
@@ -186,26 +183,38 @@
 .m-select__wrapper .m-select-inner .m-select__search__container i svg {
   fill: var(--m-select-search-icon-color);
 }
-.m-select__wrapper .m-select__options-contentlist {
+.m-select__wrapper ul.m-select__options-contentlist > li ul {
+  transition: max-height 0.25s ease;
+  overflow: hidden;
+  position: relative;
+  padding-left: 1rem;
+}
+.m-select__wrapper ul.m-select__options-contentlist > li:not(.active) ul {
+  max-height: 0;
+}
+.m-select__wrapper ul.m-select__options-contentlist > li ul ul {
+  margin-top: auto;
+}
+.m-select__wrapper ul.m-select__options-contentlist {
   position: relative;
   width: 100%;
   overflow: hidden;
   overflow-y: auto;
   max-height: calc(315px - 1.75rem);
 }
-.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar {
+.m-select__wrapper ul.m-select__options-contentlist::-webkit-scrollbar {
   width: var(--m-select-scrollbar-w);
 }
-.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar-thumb {
+.m-select__wrapper ul.m-select__options-contentlist::-webkit-scrollbar-thumb {
   background: var(--m-select-scrollbar-color);
 }
-.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar-track {
+.m-select__wrapper ul.m-select__options-contentlist::-webkit-scrollbar-track {
   background: var(--m-select-scrollbar-track);
 }
-.m-select__wrapper .m-select__options-contentlist.dragging {
+.m-select__wrapper ul.m-select__options-contentlist.dragging {
   cursor: grab;
 }
-.m-select__wrapper .m-select__options-contentlist--hide {
+.m-select__wrapper ul.m-select__options-contentlist--hide {
   overflow: hidden;
   height: auto;
 }

package/lib/esm/MultilevelDropdownMenu/{MenuList.tsx → ItemList.tsx}

@@ -8,7 +8,8 @@ import {
 
 /* Recursively nested components to traverse nodes
 -------------------------------------------------*/		
-type MenuListProps = {
+type ItemListProps = {
+    root: any;
     alternateCollapse?: boolean;
     first?: boolean;
     arrow?: React.ReactNode;
@@ -18,9 +19,10 @@ type MenuListProps = {
     onSelect?: (e: any, val: any) => void;
 };
 
-export default function MenuList(props: MenuListProps) {
+export default function ItemList(props: ItemListProps) {
 
     const {
+        root,
         alternateCollapse,
         first,
         arrow,
@@ -89,6 +91,7 @@ export default function MenuList(props: MenuListProps) {
 
     function handleClick(e: any) {
         e.preventDefault();
+        e.stopPropagation();
         const hyperlink = e.currentTarget;
         const url = hyperlink.getAttribute('href');
         const subElement = getNextSiblings(hyperlink, 'ul');
@@ -153,60 +156,63 @@ export default function MenuList(props: MenuListProps) {
 
     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
+                }
+            } ) : [];
 
-        // 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) => {
+            
+            allItems.forEach( (hyperlink: any) => {
 
-            // Expand the currently active item by default
-            if ( hyperlink.actived ) {
+                // Expand the currently active item by default
+                if ( hyperlink.actived ) {
 
-                hyperlink.el.setAttribute('aria-expanded', 'true');
+                    hyperlink.el.setAttribute('aria-expanded', 'true');
 
-                if ( hyperlink.expandedLink ) {
-                    const expandedLink: any = hyperlink.expandedLink;  // <a>
-                    activeClass(expandedLink.parentNode, 'add');
-                    expandedLink.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) {
+                    // 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);
+                        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);
+                        // 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`;
+                        // 
+                        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]);
 
 
@@ -232,9 +238,10 @@ export default function MenuList(props: MenuListProps) {
                         <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> : ''}
+                                {item.children && item.children.length > 0 ? <span className="arrow">{arrowGenerator()}</span> : ''}
                             </a>
-                            {item.children && <MenuList 
+                            {item.children && <ItemList 
+                                                root={root}
                                                 data={item.children} 
                                                 first={false} 
                                                 arrow={arrow} 

package/lib/esm/MultilevelDropdownMenu/index.scss

@@ -17,8 +17,8 @@
 		display: inline-block;
 		text-align: center;
 		position: absolute;
-        right: 0.5em;
-        top: 1.5em;
+        right: -1em;
+        top: 50%;
         transform: translateY(-50%) rotate(0deg);
 	}
 

package/lib/esm/MultilevelDropdownMenu/index.tsx

@@ -1,10 +1,12 @@
-import React, { useState, useEffect, memo } from 'react';
+import React, { useRef, useState, useEffect, memo } from 'react';
 
 import {
     useComId
 } from 'funda-utils';
 
-import MenuList from './MenuList';
+
+
+import ItemList from './ItemList';
 
 
 type MultilevelDropdownMenuProps = {
@@ -38,6 +40,7 @@ const MultilevelDropdownMenu = (props: MultilevelDropdownMenuProps) => {
         onSelect
     } = props;
 
+    const rootRef = useRef<any>(null);
     const uniqueID = useComId();
     const idRes = id || uniqueID;
     const [val, setVal] = useState<any>(null);
@@ -50,8 +53,13 @@ const MultilevelDropdownMenu = (props: MultilevelDropdownMenuProps) => {
     return (
         <>
 
-            <nav id={idRes} className={navbarClassName ? navbarClassName : "navbar"}>
-                <MenuList 
+            <nav 
+                id={idRes} 
+                className={navbarClassName ? navbarClassName : "navbar"}
+                ref={rootRef}
+            >
+                <ItemList 
+                    root={rootRef.current}
                     alternateCollapse={alternateCollapse}
                     first={true}
                     arrow={arrow}

package/lib/esm/MultipleSelect/ItemList.tsx

@@ -0,0 +1,300 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+
+import {
+    getNextSiblings
+} from 'funda-utils';
+
+
+import { formatIndentVal, multiSelControlOptionExist } from './multiple-select-utils/func';
+
+/* Recursively nested components to traverse nodes
+-------------------------------------------------*/
+type ItemListProps = {
+    root: any;
+    listContainerClassName: string;
+    valSelected: any[];
+    indentStr: string;
+    iconAdd?: React.ReactNode | string;
+    iconRemove?: React.ReactNode | string;
+    selected?: boolean;
+    onSelect: (any) => void;
+    alternateCollapse?: boolean;
+    first?: boolean;
+    arrow?: React.ReactNode;
+    childClassName: string;
+    data: any[any];
+};
+
+const ItemList = forwardRef((props: ItemListProps, externalRef: any) => {
+
+    const {
+        root,
+        listContainerClassName,
+        valSelected,
+        indentStr,
+        iconAdd,
+        iconRemove,
+        selected,
+        onSelect,
+        alternateCollapse,
+        first,
+        arrow,
+        childClassName,
+        data,
+    } = props;
+
+    const listContainerRef = useRef<any>(null);
+
+    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.querySelector('div');
+        const subElement = getNextSiblings(hyperlink, 'ul');
+
+
+
+        // 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(listContainerRef.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);
+        }
+
+
+
+    }
+
+    
+    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 = listContainerRef.current ? [].slice.call(root.querySelectorAll(`.${childClassName} div`)).map( (item: any) => {
+                 return {
+                     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={`${listContainerClassName || ''} ${childClassName}`}
+                    style={!first ? { maxHeight: '0px' } : {}}
+                    ref={(node) => {
+                        listContainerRef.current = node;
+                        if (typeof externalRef === 'function') {
+                            externalRef(node);
+                        } else if (externalRef) {
+                            externalRef.current = node;
+                        }
+                    }}
+                >
+
+
+                    {data ? data.map((item: any, i: number) => {
+
+                        return <li
+                            key={selected ? 'item-selected' + i : 'item' + i}
+                            className={selected ? 'selected' : `${item.disabled ? 'disabled' : ''} ${multiSelControlOptionExist(valSelected, item.value) ? 'hide' : ''}`}
+                            data-index={i}
+                            data-value={`${item.value}`}
+                            data-label={`${item.label}`}
+                            data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`}
+                            data-disabled={item.disabled || 'false'}
+                            data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`}
+                            data-itemdata={JSON.stringify(item)}
+                            onClick={selected ? () => void(0) : handleClick}
+                        >
+
+
+                            <div>
+                                <strong>
+                                    <span dangerouslySetInnerHTML={{
+                                        __html: selected ? (typeof item.listItemLabel === 'undefined' ? formatIndentVal(item.label, indentStr) : formatIndentVal(item.listItemLabel, indentStr)) : (typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel)
+                                    }}></span>
+                                    {item.children && item.children.length > 0 && !selected ? <span className="arrow">{arrowGenerator()}</span> : ''}
+                                </strong>
+
+                                <i
+                                    onClick={(e: React.MouseEvent) => {
+                                        e.stopPropagation();
+                                        onSelect((e.target as any).closest('li'));
+                                    }}>
+
+                                    {selected ? <>
+                                        {iconRemove ? <>{iconRemove}</> : <><svg width="15px" height="15px" viewBox="0 0 24 24" fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" fill="#000" /></svg></>}
+                                    </> : <>
+                                        {iconAdd ? <>{iconAdd}</> : <><svg width="15px" height="15px" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16 12.75H12.75V16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16V12.75H8C7.59 12.75 7.25 12.41 7.25 12C7.25 11.59 7.59 11.25 8 11.25H11.25V8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V11.25H16C16.41 11.25 16.75 11.59 16.75 12C16.75 12.41 16.41 12.75 16 12.75Z" fill="#000" /></svg></>}
+                                    </>}
+                                </i>
+
+
+                            </div>
+
+                            {item.children && <ItemList
+                                root={root}
+                                listContainerClassName={listContainerClassName}
+                                ref={externalRef}
+                                indentStr={indentStr}
+                                valSelected={valSelected}
+                                iconAdd={iconAdd}
+                                iconRemove={iconRemove}
+                                onSelect={onSelect}
+                                first={false}
+                                arrow={arrow}
+                                data={item.children}
+                                childClassName={childClassName}
+                            />}
+
+                        </li>;
+                    }) : null}
+
+                </ul>
+
+
+            </>
+        )
+    } else {
+        return (
+            <></>
+        )
+    }
+
+
+});
+
+export default ItemList;