tntd 2.0.25 → 2.1.0

package/es/tntd-layout/GlobalNavigation/NavigationPopup.js

@@ -1,19 +1,19 @@
+import _debounce from "lodash/debounce";
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import styled from 'styled-components';
-import { debounce } from 'lodash';
 import { traverseTree, hasLevel3 } from '../../utils';
 import Icon from '../Iconfont';
 import '../../locale';
-const SearchArea = styled.div `
+const SearchArea = styled.div`
   position: relative;
   font-size: 14px;
   margin-bottom: 20px;
-  color: ${(props) => props.theme.secondaryTextColor};
+  color: ${props => props.theme.secondaryTextColor};
   &.active {
-    color: ${(props) => props.theme.primaryColor};
+    color: ${props => props.theme.primaryColor};
     input {
-      border-color: ${(props) => props.theme.primaryColor};
+      border-color: ${props => props.theme.primaryColor};
     }
   }
   .tnt-icon {
@@ -31,7 +31,7 @@ const SearchArea = styled.div `
   input {
     border-width: 0 0 1px;
     border-style: solid;
-    border-color: ${(props) => props.theme.borderColor};
+    border-color: ${props => props.theme.borderColor};
     width: 100%;
     padding: 4px 20px;
     line-height: 20px;
@@ -39,9 +39,9 @@ const SearchArea = styled.div `
     outline: none;
   }
 `;
-const ApplicationTabs = styled.ul `
-  border: 1px solid ${(props) => props.theme.borderColor};
-  color: ${(props) => props.theme.primaryTextColor};
+const ApplicationTabs = styled.ul`
+  border: 1px solid ${props => props.theme.borderColor};
+  color: ${props => props.theme.primaryTextColor};
   line-height: 32px;
   margin: 0 0 16px;
   padding: 0;
@@ -52,16 +52,16 @@ const ApplicationTabs = styled.ul `
     display: inline-block;
     cursor: pointer;
     &:not(:last-child) {
-      border-right: 1px solid ${(props) => props.theme.borderColor};
+      border-right: 1px solid ${props => props.theme.borderColor};
     }
     &.active {
-      background-color: ${(props) => props.theme.primaryColor};
+      background-color: ${props => props.theme.primaryColor};
       color: #fff;
     }
   }
 `;
-const GroupMenus = styled.div `
-  height: ${(props) => (props.isLevel3 ? 'calc(100% - 80px)' : 'calc(100% - 50px)')};
+const GroupMenus = styled.div`
+  height: ${props => props.isLevel3 ? 'calc(100% - 80px)' : 'calc(100% - 50px)'};
   overflow: auto;
   & > div {
     width: 200px;
@@ -70,7 +70,7 @@ const GroupMenus = styled.div `
     vertical-align: top;
   }
 `;
-const GroupMenuItem = styled.div `
+const GroupMenuItem = styled.div`
   margin-bottom: 20px;
   & > h5 {
     line-height: 20px;
@@ -78,27 +78,27 @@ const GroupMenuItem = styled.div `
     margin-bottom: 6px;
   }
 `;
-const MenuList = styled.ul `
+const MenuList = styled.ul`
   list-style: none;
   padding: 0;
   margin: 0;
 `;
-const MenuItem = styled.li `
+const MenuItem = styled.li`
   display: block;
   line-height: 30px;
   font-size: 12px;
   cursor: pointer;
   a {
-    color: ${(props) => props.theme.secondaryTextColor};
+    color: ${props => props.theme.secondaryTextColor};
     &:hover {
-      color: ${(props) => props.theme.secondaryColor} !important;
+      color: ${props => props.theme.secondaryColor} !important;
     }
   }
   &.active a {
-    color: ${(props) => props.theme.primaryColor};
+    color: ${props => props.theme.primaryColor};
   }
 `;
-const ListBox = styled.ul `
+const ListBox = styled.ul`
   background: #fff;
   max-height: 320px;
   overflow-y: auto;
@@ -115,146 +115,204 @@ const ListBox = styled.ul `
     cursor: pointer;
     line-height: 32px;
     padding: 0 10px;
-    color: ${(props) => props.theme.primaryTextColor};
+    color: ${props => props.theme.primaryTextColor};
     &:hover {
-      color: ${(props) => props.theme.secondaryColor};
-      background-color: ${(props) => props.theme.lightBgColor};
+      color: ${props => props.theme.secondaryColor};
+      background-color: ${props => props.theme.lightBgColor};
     }
   }
 `;
-const SearchList = ({ items, onSelectMenu, theme }) => (React.createElement(ListBox, { theme: theme }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement("li", { onClick: () => onSelectMenu(item) }, item === null || item === void 0 ? void 0 : item.menuName)))));
-export default ({ theme, menus = [], close, actions, popupRef, containerRef }) => {
-    const [active, setActive] = useState(false);
-    const [searchValue, setSearchValue] = useState();
-    const language = actions === null || actions === void 0 ? void 0 : actions.getLanguage();
-    const isLevel3 = hasLevel3(menus);
-    const [activeTopMenu, setActiveTopMenu] = useState(isLevel3 ? menus === null || menus === void 0 ? void 0 : menus[0] : null);
-    const selectedMenuKey = actions.getSelectedMenuKey();
-    const calcGroupMenus = (menus) => {
-        menus = menus === null || menus === void 0 ? void 0 : menus.reduce((acc, cur) => {
-            var _a;
-            // 分组
-            if ((_a = cur === null || cur === void 0 ? void 0 : cur.children) === null || _a === void 0 ? void 0 : _a.length) {
-                acc.push(cur);
-            }
-            else {
-                const defaultGroup = acc.find(({ isDefaultGroup }) => isDefaultGroup);
-                if (!defaultGroup) {
-                    acc.unshift({
-                        isDefaultGroup: true,
-                        children: [cur],
-                    });
-                }
-                else {
-                    defaultGroup.children.push(cur);
-                }
-            }
-            return acc;
-        }, []);
-        return menus === null || menus === void 0 ? void 0 : menus.reduce((acc, cur) => {
-            var _a;
-            const column = Math.max(1, ~~((containerRef.current.clientWidth - 32) / 210));
-            if (!acc.length) {
-                acc.push([cur]);
-            }
-            else {
-                const calcGroupHeight = (group) => { var _a; return 46 + (((_a = group === null || group === void 0 ? void 0 : group.children) === null || _a === void 0 ? void 0 : _a.length) || 0) * 30; };
-                const calcColumnHeight = (columnGroups) => columnGroups === null || columnGroups === void 0 ? void 0 : columnGroups.reduce((acc, cur) => {
-                    acc += calcGroupHeight(cur);
-                    return acc;
-                }, 0);
-                const currentColumnHeight = calcColumnHeight(acc[acc.length - 1]);
-                const nextGroupHeight = calcGroupHeight(cur);
-                const findMinHeightGroup = (groups) => {
-                    let minHeight = Infinity;
-                    let index = 0;
-                    for (let i = 0; i < groups.length; i++) {
-                        const height = calcColumnHeight(groups[i]);
-                        if (height < minHeight) {
-                            index = i;
-                            minHeight = height;
-                        }
-                    }
-                    return groups[index];
-                };
-                if (acc.length >= column) {
-                    const minHeightGroup = findMinHeightGroup(acc);
-                    minHeightGroup === null || minHeightGroup === void 0 ? void 0 : minHeightGroup.push(cur);
-                }
-                else {
-                    if (currentColumnHeight + nextGroupHeight > 440) {
-                        acc.push([cur]);
-                    }
-                    else {
-                        (_a = acc[(acc === null || acc === void 0 ? void 0 : acc.length) - 1]) === null || _a === void 0 ? void 0 : _a.push(cur);
-                    }
-                }
+const SearchList = ({
+  items,
+  onSelectMenu,
+  theme
+}) => React.createElement(ListBox, {
+  theme: theme
+}, items === null || items === void 0 ? void 0 : items.map(item => React.createElement("li", {
+  onClick: () => onSelectMenu(item)
+}, item === null || item === void 0 ? void 0 : item.menuName)));
+export default (({
+  theme,
+  menus = [],
+  close,
+  actions,
+  popupRef,
+  containerRef
+}) => {
+  const [active, setActive] = useState(false);
+  const [searchValue, setSearchValue] = useState();
+  const language = actions === null || actions === void 0 ? void 0 : actions.getLanguage();
+  const isLevel3 = hasLevel3(menus);
+  const [activeTopMenu, setActiveTopMenu] = useState(isLevel3 ? menus === null || menus === void 0 ? void 0 : menus[0] : null);
+  const selectedMenuKey = actions.getSelectedMenuKey();
+  const calcGroupMenus = menus => {
+    menus = menus === null || menus === void 0 ? void 0 : menus.reduce((acc, cur) => {
+      var _a;
+      // 分组
+      if ((_a = cur === null || cur === void 0 ? void 0 : cur.children) === null || _a === void 0 ? void 0 : _a.length) {
+        acc.push(cur);
+      } else {
+        const defaultGroup = acc.find(({
+          isDefaultGroup
+        }) => isDefaultGroup);
+        if (!defaultGroup) {
+          acc.unshift({
+            isDefaultGroup: true,
+            children: [cur]
+          });
+        } else {
+          defaultGroup.children.push(cur);
+        }
+      }
+      return acc;
+    }, []);
+    return menus === null || menus === void 0 ? void 0 : menus.reduce((acc, cur) => {
+      var _a;
+      const column = Math.max(1, ~~((containerRef.current.clientWidth - 32) / 210));
+      if (!acc.length) {
+        acc.push([cur]);
+      } else {
+        const calcGroupHeight = group => {
+          var _a;
+          return 46 + (((_a = group === null || group === void 0 ? void 0 : group.children) === null || _a === void 0 ? void 0 : _a.length) || 0) * 30;
+        };
+        const calcColumnHeight = columnGroups => columnGroups === null || columnGroups === void 0 ? void 0 : columnGroups.reduce((acc, cur) => {
+          acc += calcGroupHeight(cur);
+          return acc;
+        }, 0);
+        const currentColumnHeight = calcColumnHeight(acc[acc.length - 1]);
+        const nextGroupHeight = calcGroupHeight(cur);
+        const findMinHeightGroup = groups => {
+          let minHeight = Infinity;
+          let index = 0;
+          for (let i = 0; i < groups.length; i++) {
+            const height = calcColumnHeight(groups[i]);
+            if (height < minHeight) {
+              index = i;
+              minHeight = height;
             }
-            return acc;
-        }, []);
-    };
-    const groupMenus = calcGroupMenus((activeTopMenu === null || activeTopMenu === void 0 ? void 0 : activeTopMenu.children) || menus);
-    const [searchedMenus, setSearchedMenus] = useState([]);
-    const onMenuClick = (menu) => {
-        actions.emit('menuSelect', { key: menu.code, data: menu });
+          }
+          return groups[index];
+        };
+        if (acc.length >= column) {
+          const minHeightGroup = findMinHeightGroup(acc);
+          minHeightGroup === null || minHeightGroup === void 0 ? void 0 : minHeightGroup.push(cur);
+        } else {
+          if (currentColumnHeight + nextGroupHeight > 440) {
+            acc.push([cur]);
+          } else {
+            (_a = acc[(acc === null || acc === void 0 ? void 0 : acc.length) - 1]) === null || _a === void 0 ? void 0 : _a.push(cur);
+          }
+        }
+      }
+      return acc;
+    }, []);
+  };
+  const groupMenus = calcGroupMenus((activeTopMenu === null || activeTopMenu === void 0 ? void 0 : activeTopMenu.children) || menus);
+  const [searchedMenus, setSearchedMenus] = useState([]);
+  const onMenuClick = menu => {
+    actions.emit('menuSelect', {
+      key: menu.code,
+      data: menu
+    });
+    setSearchValue('');
+    setSearchedMenus([]);
+    close();
+  };
+  const debounceSearch = _debounce(evt => {
+    var _a;
+    const value = (_a = evt.target.value) === null || _a === void 0 ? void 0 : _a.trim();
+    const matchedMenus = [];
+    if (value) {
+      traverseTree(menus, node => {
+        var _a;
+        if (node.path && ((_a = node === null || node === void 0 ? void 0 : node.menuName) === null || _a === void 0 ? void 0 : _a.includes(value))) {
+          matchedMenus.push(node);
+        }
+      });
+    }
+    setSearchedMenus(matchedMenus);
+  }, 100);
+  const onSearchChange = evt => {
+    evt.persist();
+    setSearchValue(evt.target.value);
+    debounceSearch(evt);
+  };
+  const onSelectAppTab = menu => {
+    setActiveTopMenu(menu);
+  };
+  useEffect(() => {
+    const clickOutside = evt => {
+      const {
+        clientX,
+        clientY,
+        pageX,
+        pageY
+      } = evt;
+      const isOutside = (evt, popup) => {
+        if (popup === null || popup === void 0 ? void 0 : popup.contains) {
+          return !(popup === null || popup === void 0 ? void 0 : popup.contains(evt.target));
+        }
+        let {
+          x,
+          y,
+          height,
+          width
+        } = popup.getBoundingClientRect();
+        x += window.scrollX;
+        y += window.scrollY;
+        return pageX < x || pageX > x + width || pageY < y || pageY > y + height;
+      };
+      if (isOutside(evt, popupRef.current)) {
         setSearchValue('');
         setSearchedMenus([]);
         close();
+      }
     };
-    const debounceSearch = debounce((evt) => {
-        var _a;
-        const value = (_a = evt.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-        const matchedMenus = [];
-        if (value) {
-            traverseTree(menus, (node) => {
-                var _a;
-                if (node.path && ((_a = node === null || node === void 0 ? void 0 : node.menuName) === null || _a === void 0 ? void 0 : _a.includes(value))) {
-                    matchedMenus.push(node);
-                }
-            });
-        }
-        setSearchedMenus(matchedMenus);
-    }, 100);
-    const onSearchChange = (evt) => {
-        evt.persist();
-        setSearchValue(evt.target.value);
-        debounceSearch(evt);
-    };
-    const onSelectAppTab = (menu) => {
-        setActiveTopMenu(menu);
-    };
-    useEffect(() => {
-        const clickOutside = (evt) => {
-            const { clientX, clientY, pageX, pageY } = evt;
-            const isOutside = (evt, popup) => {
-                if (popup === null || popup === void 0 ? void 0 : popup.contains) {
-                    return !(popup === null || popup === void 0 ? void 0 : popup.contains(evt.target));
-                }
-                let { x, y, height, width } = popup.getBoundingClientRect();
-                console.log('clickOutside...', [x, y], [clientX, clientY], [pageX, pageY]);
-                x += window.scrollX;
-                y += window.scrollY;
-                return pageX < x || pageX > x + width || pageY < y || pageY > y + height;
-            };
-            if (isOutside(evt, popupRef.current)) {
-                setSearchValue('');
-                setSearchedMenus([]);
-                close();
-            }
-        };
-        document.addEventListener('click', clickOutside);
-        return () => document.removeEventListener('click', clickOutside);
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SearchArea, { theme: theme, className: cn({ active }) },
-            React.createElement(Icon, { type: "search" }),
-            React.createElement("input", { placeholder: actions === null || actions === void 0 ? void 0 : actions.getText('menuSearch'), value: searchValue, onChange: onSearchChange, onFocus: () => setActive(true), onBlur: () => setActive(false) }),
-            React.createElement(Icon, { type: "close", onClick: close }),
-            (searchedMenus === null || searchedMenus === void 0 ? void 0 : searchedMenus.length) > 0 && (React.createElement(SearchList, { items: searchedMenus, theme: theme, onSelectMenu: onMenuClick }))),
-        isLevel3 && (React.createElement(ApplicationTabs, { theme: theme }, menus === null || menus === void 0 ? void 0 : menus.map((menu) => (React.createElement("li", { className: cn({ active: menu.code === (activeTopMenu === null || activeTopMenu === void 0 ? void 0 : activeTopMenu.code) }), onClick: () => onSelectAppTab(menu) }, menu === null || menu === void 0 ? void 0 : menu[language === 'cn' ? 'groupName' : 'enName']))))),
-        React.createElement(GroupMenus, { theme: theme, isLevel3: isLevel3 }, groupMenus === null || groupMenus === void 0 ? void 0 : groupMenus.map((groups) => (React.createElement("div", null, groups === null || groups === void 0 ? void 0 : groups.map((group) => (React.createElement(GroupMenuItem, { theme: theme },
-            React.createElement("h5", null, group === null || group === void 0 ? void 0 : group[language === 'cn' ? 'groupName' : 'enName']),
-            React.createElement(MenuList, null, (group.children || []).map((menu) => (React.createElement(MenuItem, { key: menu.code, className: cn({ active: selectedMenuKey === menu.code }), theme: theme, onClick: () => onMenuClick(menu) },
-                React.createElement("a", { href: menu.path, onClick: (evt) => evt.preventDefault() }, menu === null || menu === void 0 ? void 0 : menu[language === 'cn' ? 'menuName' : 'enName']))))))))))))));
-};
-//# sourceMappingURL=NavigationPopup.js.map
+    document.addEventListener('click', clickOutside);
+    return () => document.removeEventListener('click', clickOutside);
+  }, []);
+  return React.createElement(React.Fragment, null, React.createElement(SearchArea, {
+    theme: theme,
+    className: cn({
+      active
+    })
+  }, React.createElement(Icon, {
+    type: "search"
+  }), React.createElement("input", {
+    placeholder: actions === null || actions === void 0 ? void 0 : actions.getText('menuSearch'),
+    value: searchValue,
+    onChange: onSearchChange,
+    onFocus: () => setActive(true),
+    onBlur: () => setActive(false)
+  }), React.createElement(Icon, {
+    type: "close",
+    onClick: close
+  }), (searchedMenus === null || searchedMenus === void 0 ? void 0 : searchedMenus.length) > 0 && React.createElement(SearchList, {
+    items: searchedMenus,
+    theme: theme,
+    onSelectMenu: onMenuClick
+  })), isLevel3 && React.createElement(ApplicationTabs, {
+    theme: theme
+  }, menus === null || menus === void 0 ? void 0 : menus.map(menu => React.createElement("li", {
+    className: cn({
+      active: menu.code === (activeTopMenu === null || activeTopMenu === void 0 ? void 0 : activeTopMenu.code)
+    }),
+    onClick: () => onSelectAppTab(menu)
+  }, menu === null || menu === void 0 ? void 0 : menu[language === 'cn' ? 'groupName' : 'enName']))), React.createElement(GroupMenus, {
+    theme: theme,
+    isLevel3: isLevel3
+  }, groupMenus === null || groupMenus === void 0 ? void 0 : groupMenus.map(groups => React.createElement("div", null, groups === null || groups === void 0 ? void 0 : groups.map(group => React.createElement(GroupMenuItem, {
+    theme: theme
+  }, React.createElement("h5", null, group === null || group === void 0 ? void 0 : group[language === 'cn' ? 'groupName' : 'enName']), React.createElement(MenuList, null, (group.children || []).map(menu => React.createElement(MenuItem, {
+    key: menu.code,
+    className: cn({
+      active: selectedMenuKey === menu.code
+    }),
+    theme: theme,
+    onClick: () => onMenuClick(menu)
+  }, React.createElement("a", {
+    href: menu.path,
+    onClick: evt => evt.preventDefault()
+  }, menu === null || menu === void 0 ? void 0 : menu[language === 'cn' ? 'menuName' : 'enName']))))))))));
+});

package/es/tntd-layout/GlobalNavigation/NavigationPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationPopup.js","sourceRoot":"","sources":["../../../src/tntd-layout/GlobalNavigation/NavigationPopup.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react'\nimport cn from 'classnames'\nimport styled from 'styled-components'\nimport { debounce } from 'lodash'\nimport { traverseTree, hasLevel3 } from '../../utils'\nimport Icon from '../Iconfont'\nimport { getText } from '../../locale'\n\nconst SearchArea = styled.div`\n  position: relative;\n  font-size: 14px;\n  margin-bottom: 20px;\n  color: ${(props) => props.theme.secondaryTextColor};\n  &.active {\n    color: ${(props) => props.theme.primaryColor};\n    input {\n      border-color: ${(props) => props.theme.primaryColor};\n    }\n  }\n  .tnt-icon {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    line-height: 1em;\n    &[type='close'] {\n      right: 0;\n      top: 0;\n      font-size: 18px;\n      cursor: pointer;\n    }\n  }\n  input {\n    border-width: 0 0 1px;\n    border-style: solid;\n    border-color: ${(props) => props.theme.borderColor};\n    width: 100%;\n    padding: 4px 20px;\n    line-height: 20px;\n    background-color: transparent;\n    outline: none;\n  }\n`\n\nconst ApplicationTabs = styled.ul`\n  border: 1px solid ${(props) => props.theme.borderColor};\n  color: ${(props) => props.theme.primaryTextColor};\n  line-height: 32px;\n  margin: 0 0 16px;\n  padding: 0;\n  display: inline-block;\n\n  & > li {\n    padding: 0 20px;\n    display: inline-block;\n    cursor: pointer;\n    &:not(:last-child) {\n      border-right: 1px solid ${(props) => props.theme.borderColor};\n    }\n    &.active {\n      background-color: ${(props) => props.theme.primaryColor};\n      color: #fff;\n    }\n  }\n`\n\nconst GroupMenus = styled.div`\n  height: ${(props) => (props.isLevel3 ? 'calc(100% - 80px)' : 'calc(100% - 50px)')};\n  overflow: auto;\n  & > div {\n    width: 200px;\n    margin-right: 10px;\n    display: inline-block;\n    vertical-align: top;\n  }\n`\n\nconst GroupMenuItem = styled.div`\n  margin-bottom: 20px;\n  & > h5 {\n    line-height: 20px;\n    margin: 0;\n    margin-bottom: 6px;\n  }\n`\n\nconst MenuList = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`\n\nconst MenuItem = styled.li`\n  display: block;\n  line-height: 30px;\n  font-size: 12px;\n  cursor: pointer;\n  a {\n    color: ${(props) => props.theme.secondaryTextColor};\n    &:hover {\n      color: ${(props) => props.theme.secondaryColor} !important;\n    }\n  }\n  &.active a {\n    color: ${(props) => props.theme.primaryColor};\n  }\n`\n\nconst ListBox = styled.ul`\n  background: #fff;\n  max-height: 320px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 6px 0;\n  list-style: none;\n  font-size: 13px;\n  position: absolute;\n  top: 29px;\n  width: 100%;\n  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  li {\n    cursor: pointer;\n    line-height: 32px;\n    padding: 0 10px;\n    color: ${(props) => props.theme.primaryTextColor};\n    &:hover {\n      color: ${(props) => props.theme.secondaryColor};\n      background-color: ${(props) => props.theme.lightBgColor};\n    }\n  }\n`\n\nconst SearchList = ({ items, onSelectMenu, theme }) => (\n  <ListBox theme={theme}>\n    {items?.map((item) => (\n      <li onClick={() => onSelectMenu(item)}>{item?.menuName}</li>\n    ))}\n  </ListBox>\n)\n\nexport default ({ theme, menus = [], close, actions, popupRef, containerRef }) => {\n  const [active, setActive] = useState(false)\n  const [searchValue, setSearchValue] = useState()\n  const language = actions?.getLanguage()\n  const isLevel3 = hasLevel3(menus)\n  const [activeTopMenu, setActiveTopMenu] = useState(isLevel3 ? menus?.[0] : null)\n  const selectedMenuKey = actions.getSelectedMenuKey()\n  const calcGroupMenus = (menus) => {\n    menus = menus?.reduce((acc, cur) => {\n      // 分组\n      if (cur?.children?.length) {\n        acc.push(cur)\n      } else {\n        const defaultGroup = acc.find(({ isDefaultGroup }) => isDefaultGroup)\n        if (!defaultGroup) {\n          acc.unshift({\n            isDefaultGroup: true,\n            children: [cur],\n          })\n        } else {\n          defaultGroup.children.push(cur)\n        }\n      }\n      return acc\n    }, [])\n\n    return menus?.reduce((acc, cur) => {\n      const column = Math.max(1, ~~((containerRef.current.clientWidth - 32) / 210))\n\n      if (!acc.length) {\n        acc.push([cur])\n      } else {\n        const calcGroupHeight = (group) => 46 + (group?.children?.length || 0) * 30\n        const calcColumnHeight = (columnGroups) =>\n          columnGroups?.reduce((acc, cur) => {\n            acc += calcGroupHeight(cur)\n            return acc\n          }, 0)\n        const currentColumnHeight = calcColumnHeight(acc[acc.length - 1])\n        const nextGroupHeight = calcGroupHeight(cur)\n        const findMinHeightGroup = (groups) => {\n          let minHeight = Infinity\n          let index = 0\n\n          for (let i = 0; i < groups.length; i++) {\n            const height = calcColumnHeight(groups[i])\n            if (height < minHeight) {\n              index = i\n              minHeight = height\n            }\n          }\n\n          return groups[index]\n        }\n\n        if (acc.length >= column) {\n          const minHeightGroup = findMinHeightGroup(acc)\n          minHeightGroup?.push(cur)\n        } else {\n          if (currentColumnHeight + nextGroupHeight > 440) {\n            acc.push([cur])\n          } else {\n            acc[acc?.length - 1]?.push(cur)\n          }\n        }\n      }\n\n      return acc\n    }, [])\n  }\n  const groupMenus = calcGroupMenus(activeTopMenu?.children || menus)\n  const [searchedMenus, setSearchedMenus] = useState([])\n\n  const onMenuClick = (menu) => {\n    actions.emit('menuSelect', { key: menu.code, data: menu })\n    setSearchValue('')\n    setSearchedMenus([])\n    close()\n  }\n  const debounceSearch = debounce((evt) => {\n    const value = evt.target.value?.trim()\n    const matchedMenus = []\n\n    if (value) {\n      traverseTree(menus, (node) => {\n        if (node.path && node?.menuName?.includes(value)) {\n          matchedMenus.push(node)\n        }\n      })\n    }\n\n    setSearchedMenus(matchedMenus)\n  }, 100)\n\n  const onSearchChange = (evt) => {\n    evt.persist()\n    setSearchValue(evt.target.value)\n    debounceSearch(evt)\n  }\n\n  const onSelectAppTab = (menu) => {\n    setActiveTopMenu(menu)\n  }\n\n  useEffect(() => {\n    const clickOutside = (evt) => {\n      const { clientX, clientY, pageX, pageY } = evt\n      const isOutside = (evt, popup) => {\n        if (popup?.contains) {\n          return !popup?.contains(evt.target)\n        }\n\n        let { x, y, height, width } = popup.getBoundingClientRect()\n        console.log('clickOutside...', [x, y], [clientX, clientY], [pageX, pageY])\n        x += window.scrollX\n        y += window.scrollY\n\n        return pageX < x || pageX > x + width || pageY < y || pageY > y + height\n      }\n\n      if (isOutside(evt, popupRef.current)) {\n        setSearchValue('')\n        setSearchedMenus([])\n        close()\n      }\n    }\n\n    document.addEventListener('click', clickOutside)\n    return () => document.removeEventListener('click', clickOutside)\n  }, [])\n\n  return (\n    <>\n      <SearchArea theme={theme} className={cn({ active })}>\n        <Icon type=\"search\" />\n        <input\n          placeholder={actions?.getText('menuSearch')}\n          value={searchValue}\n          onChange={onSearchChange}\n          onFocus={() => setActive(true)}\n          onBlur={() => setActive(false)}\n        />\n        <Icon type=\"close\" onClick={close} />\n        {searchedMenus?.length > 0 && (\n          <SearchList items={searchedMenus} theme={theme} onSelectMenu={onMenuClick} />\n        )}\n      </SearchArea>\n      {isLevel3 && (\n        <ApplicationTabs theme={theme}>\n          {menus?.map((menu) => (\n            <li\n              className={cn({ active: menu.code === activeTopMenu?.code })}\n              onClick={() => onSelectAppTab(menu)}\n            >\n              {menu?.[language === 'cn' ? 'groupName' : 'enName']}\n            </li>\n          ))}\n        </ApplicationTabs>\n      )}\n      <GroupMenus theme={theme} isLevel3={isLevel3}>\n        {groupMenus?.map((groups) => (\n          <div>\n            {groups?.map((group) => (\n              <GroupMenuItem theme={theme}>\n                <h5>{group?.[language === 'cn' ? 'groupName' : 'enName']}</h5>\n                <MenuList>\n                  {(group.children || []).map((menu) => (\n                    <MenuItem\n                      key={menu.code}\n                      className={cn({ active: selectedMenuKey === menu.code })}\n                      theme={theme}\n                      onClick={() => onMenuClick(menu)}\n                    >\n                      <a href={menu.path} onClick={(evt) => evt.preventDefault()}>\n                        {menu?.[language === 'cn' ? 'menuName' : 'enName']}\n                      </a>\n                    </MenuItem>\n                  ))}\n                </MenuList>\n              </GroupMenuItem>\n            ))}\n          </div>\n        ))}\n      </GroupMenus>\n    </>\n  )\n}\n"]}
+{"version":3,"file":"NavigationPopup.js","sourceRoot":"","sources":["../../../src/tntd-layout/GlobalNavigation/NavigationPopup.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react'\nimport cn from 'classnames'\nimport styled from 'styled-components'\nimport { debounce } from 'lodash'\nimport { traverseTree, hasLevel3 } from '../../utils'\nimport Icon from '../Iconfont'\nimport { getText } from '../../locale'\n\nconst SearchArea = styled.div`\n  position: relative;\n  font-size: 14px;\n  margin-bottom: 20px;\n  color: ${(props) => props.theme.secondaryTextColor};\n  &.active {\n    color: ${(props) => props.theme.primaryColor};\n    input {\n      border-color: ${(props) => props.theme.primaryColor};\n    }\n  }\n  .tnt-icon {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    line-height: 1em;\n    &[type='close'] {\n      right: 0;\n      top: 0;\n      font-size: 18px;\n      cursor: pointer;\n    }\n  }\n  input {\n    border-width: 0 0 1px;\n    border-style: solid;\n    border-color: ${(props) => props.theme.borderColor};\n    width: 100%;\n    padding: 4px 20px;\n    line-height: 20px;\n    background-color: transparent;\n    outline: none;\n  }\n`\n\nconst ApplicationTabs = styled.ul`\n  border: 1px solid ${(props) => props.theme.borderColor};\n  color: ${(props) => props.theme.primaryTextColor};\n  line-height: 32px;\n  margin: 0 0 16px;\n  padding: 0;\n  display: inline-block;\n\n  & > li {\n    padding: 0 20px;\n    display: inline-block;\n    cursor: pointer;\n    &:not(:last-child) {\n      border-right: 1px solid ${(props) => props.theme.borderColor};\n    }\n    &.active {\n      background-color: ${(props) => props.theme.primaryColor};\n      color: #fff;\n    }\n  }\n`\n\nconst GroupMenus = styled.div`\n  height: ${(props) => (props.isLevel3 ? 'calc(100% - 80px)' : 'calc(100% - 50px)')};\n  overflow: auto;\n  & > div {\n    width: 200px;\n    margin-right: 10px;\n    display: inline-block;\n    vertical-align: top;\n  }\n`\n\nconst GroupMenuItem = styled.div`\n  margin-bottom: 20px;\n  & > h5 {\n    line-height: 20px;\n    margin: 0;\n    margin-bottom: 6px;\n  }\n`\n\nconst MenuList = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`\n\nconst MenuItem = styled.li`\n  display: block;\n  line-height: 30px;\n  font-size: 12px;\n  cursor: pointer;\n  a {\n    color: ${(props) => props.theme.secondaryTextColor};\n    &:hover {\n      color: ${(props) => props.theme.secondaryColor} !important;\n    }\n  }\n  &.active a {\n    color: ${(props) => props.theme.primaryColor};\n  }\n`\n\nconst ListBox = styled.ul`\n  background: #fff;\n  max-height: 320px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 6px 0;\n  list-style: none;\n  font-size: 13px;\n  position: absolute;\n  top: 29px;\n  width: 100%;\n  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  li {\n    cursor: pointer;\n    line-height: 32px;\n    padding: 0 10px;\n    color: ${(props) => props.theme.primaryTextColor};\n    &:hover {\n      color: ${(props) => props.theme.secondaryColor};\n      background-color: ${(props) => props.theme.lightBgColor};\n    }\n  }\n`\n\nconst SearchList = ({ items, onSelectMenu, theme }) => (\n  <ListBox theme={theme}>\n    {items?.map((item) => (\n      <li onClick={() => onSelectMenu(item)}>{item?.menuName}</li>\n    ))}\n  </ListBox>\n)\n\nexport default ({ theme, menus = [], close, actions, popupRef, containerRef }) => {\n  const [active, setActive] = useState(false)\n  const [searchValue, setSearchValue] = useState()\n  const language = actions?.getLanguage()\n  const isLevel3 = hasLevel3(menus)\n  const [activeTopMenu, setActiveTopMenu] = useState(isLevel3 ? menus?.[0] : null)\n  const selectedMenuKey = actions.getSelectedMenuKey()\n  const calcGroupMenus = (menus) => {\n    menus = menus?.reduce((acc, cur) => {\n      // 分组\n      if (cur?.children?.length) {\n        acc.push(cur)\n      } else {\n        const defaultGroup = acc.find(({ isDefaultGroup }) => isDefaultGroup)\n        if (!defaultGroup) {\n          acc.unshift({\n            isDefaultGroup: true,\n            children: [cur],\n          })\n        } else {\n          defaultGroup.children.push(cur)\n        }\n      }\n      return acc\n    }, [])\n\n    return menus?.reduce((acc, cur) => {\n      const column = Math.max(1, ~~((containerRef.current.clientWidth - 32) / 210))\n\n      if (!acc.length) {\n        acc.push([cur])\n      } else {\n        const calcGroupHeight = (group) => 46 + (group?.children?.length || 0) * 30\n        const calcColumnHeight = (columnGroups) =>\n          columnGroups?.reduce((acc, cur) => {\n            acc += calcGroupHeight(cur)\n            return acc\n          }, 0)\n        const currentColumnHeight = calcColumnHeight(acc[acc.length - 1])\n        const nextGroupHeight = calcGroupHeight(cur)\n        const findMinHeightGroup = (groups) => {\n          let minHeight = Infinity\n          let index = 0\n\n          for (let i = 0; i < groups.length; i++) {\n            const height = calcColumnHeight(groups[i])\n            if (height < minHeight) {\n              index = i\n              minHeight = height\n            }\n          }\n\n          return groups[index]\n        }\n\n        if (acc.length >= column) {\n          const minHeightGroup = findMinHeightGroup(acc)\n          minHeightGroup?.push(cur)\n        } else {\n          if (currentColumnHeight + nextGroupHeight > 440) {\n            acc.push([cur])\n          } else {\n            acc[acc?.length - 1]?.push(cur)\n          }\n        }\n      }\n\n      return acc\n    }, [])\n  }\n  const groupMenus = calcGroupMenus(activeTopMenu?.children || menus)\n  const [searchedMenus, setSearchedMenus] = useState([])\n\n  const onMenuClick = (menu) => {\n    actions.emit('menuSelect', { key: menu.code, data: menu })\n    setSearchValue('')\n    setSearchedMenus([])\n    close()\n  }\n  const debounceSearch = debounce((evt) => {\n    const value = evt.target.value?.trim()\n    const matchedMenus = []\n\n    if (value) {\n      traverseTree(menus, (node) => {\n        if (node.path && node?.menuName?.includes(value)) {\n          matchedMenus.push(node)\n        }\n      })\n    }\n\n    setSearchedMenus(matchedMenus)\n  }, 100)\n\n  const onSearchChange = (evt) => {\n    evt.persist()\n    setSearchValue(evt.target.value)\n    debounceSearch(evt)\n  }\n\n  const onSelectAppTab = (menu) => {\n    setActiveTopMenu(menu)\n  }\n\n  useEffect(() => {\n    const clickOutside = (evt) => {\n      const { clientX, clientY, pageX, pageY } = evt\n      const isOutside = (evt, popup) => {\n        if (popup?.contains) {\n          return !popup?.contains(evt.target)\n        }\n\n        let { x, y, height, width } = popup.getBoundingClientRect()\n        x += window.scrollX\n        y += window.scrollY\n\n        return pageX < x || pageX > x + width || pageY < y || pageY > y + height\n      }\n\n      if (isOutside(evt, popupRef.current)) {\n        setSearchValue('')\n        setSearchedMenus([])\n        close()\n      }\n    }\n\n    document.addEventListener('click', clickOutside)\n    return () => document.removeEventListener('click', clickOutside)\n  }, [])\n\n  return (\n    <>\n      <SearchArea theme={theme} className={cn({ active })}>\n        <Icon type=\"search\" />\n        <input\n          placeholder={actions?.getText('menuSearch')}\n          value={searchValue}\n          onChange={onSearchChange}\n          onFocus={() => setActive(true)}\n          onBlur={() => setActive(false)}\n        />\n        <Icon type=\"close\" onClick={close} />\n        {searchedMenus?.length > 0 && (\n          <SearchList items={searchedMenus} theme={theme} onSelectMenu={onMenuClick} />\n        )}\n      </SearchArea>\n      {isLevel3 && (\n        <ApplicationTabs theme={theme}>\n          {menus?.map((menu) => (\n            <li\n              className={cn({ active: menu.code === activeTopMenu?.code })}\n              onClick={() => onSelectAppTab(menu)}\n            >\n              {menu?.[language === 'cn' ? 'groupName' : 'enName']}\n            </li>\n          ))}\n        </ApplicationTabs>\n      )}\n      <GroupMenus theme={theme} isLevel3={isLevel3}>\n        {groupMenus?.map((groups) => (\n          <div>\n            {groups?.map((group) => (\n              <GroupMenuItem theme={theme}>\n                <h5>{group?.[language === 'cn' ? 'groupName' : 'enName']}</h5>\n                <MenuList>\n                  {(group.children || []).map((menu) => (\n                    <MenuItem\n                      key={menu.code}\n                      className={cn({ active: selectedMenuKey === menu.code })}\n                      theme={theme}\n                      onClick={() => onMenuClick(menu)}\n                    >\n                      <a href={menu.path} onClick={(evt) => evt.preventDefault()}>\n                        {menu?.[language === 'cn' ? 'menuName' : 'enName']}\n                      </a>\n                    </MenuItem>\n                  ))}\n                </MenuList>\n              </GroupMenuItem>\n            ))}\n          </div>\n        ))}\n      </GroupMenus>\n    </>\n  )\n}\n"]}