tntd 1.4.7 → 1.4.10

package/lib/Layout/SideMenu.js

@@ -1,453 +1,367 @@
-import { useState, useEffect, useContext } from 'react';
-import styled, { withTheme } from 'styled-components';
-import { Menu } from 'antd';
-import { get } from 'lodash';
-import ActionsContext from './ActionsContext';
-import { getSelectedMenuInfo, isGroupMenu, isNewTabMenu, openInNewTab, traverseTree } from './utils';
-import { setSideMenuStore } from './storage';
-import Iconfont from './Iconfont';
-
-const color = 'rgba(255,255,255,.85)';
-const compatibleColor = '#a1d7ff';
-const { SubMenu, Item: MenuItem } = Menu;
-const TNTMenu = styled(Menu)`
-    background: none !important;
-    &.ant-menu.ant-menu-root {
-        position: relative;
-        transition: none !important;
-        padding-top: 10px;
-        border-right: none;
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        height: calc(100vh - ${props => `${props.theme.headerHeight}px`});
-        overflow-y: auto;
-        overflow-x: hidden;
-        .collapseIconPlacementBottom & {
-            padding-bottom: 36px;
-        }
-        .tnt-themeS1 & {
-            overflow-x: unset;
-            box-shadow: 10px 0 10px -5px rgba(0,0,0,0.10);
-            z-index: 2;
-        }
-        scrollbar-width: none;
-        -ms-overflow-style: none;
+"use strict";
 
-        &::-webkit-scrollbar {
-            display: none;
-        }
-        &::-moz-scrollbar {
-            display: none;
-        }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-        /** 一级结点是菜单样式开始 */
-        & > .ant-menu-item {
-            & > .tnt-icon:first-child {
-                font-size: 16px
-            }
-        }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-        .ant-layout-sider-collapsed & {
-            & > .ant-menu-item {
-                & > .tnt-icon:first-child {
-                    padding-left: 8px;
-                }
-                a {
-                    visibility: hidden;
-                }
-            }
-        }
-        /** 一级结点是菜单样式结束 */
+require("antd/lib/menu/style");
 
-        .ant-menu-item:active,
-        .ant-menu-submenu-title:active {
-            background: none;
-        }
+var _menu = _interopRequireDefault(require("antd/lib/menu"));
 
-        .ant-menu-submenu .ant-menu-sub {
-            background: #212635;
-            border-radius: 0 0 2px 2px;
-            .compatible & {
-                background: #07408d !important;
-            }
-            .tnt-themeS1 & {
-                background: #fff !important;
-            }
-
-            // 蓝色系列 菜单展开区域颜色
-            .tnt-themeS3 & {
-                background: #07408D !important;
-            }
-        }
-        .ant-menu-submenu.ant-menu-submenu-active,
-        .ant-menu-submenu.ant-menu-submenu-selected {
-            background: rgba(47,129,247,.25) !important;
-            .tnt-themeS1 & {
-                background: ${props => props.theme.dividerColor} !important;
-            }
-
-            // 蓝色系 一级菜单的选中效果
-            .tnt-themeS3 & {
-                background: #204085 !important;
-            }
-        }
-        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-active,
-        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-selected {
-            background: none !important;
-            .tnt-themeS1 & {
-                background: ${props => props.theme.dividerColor} !important;
-            }
-            // 蓝色系 子级菜单级的选中效果
-            .tnt-themeS3 & {
-                background: #204085 !important;
-            }
-        }
-        .ant-menu-item {
-            margin: 0;
-            font-size: 14px;
-            padding-left: 54px !important;
-            height: ${({ size }) => size === 'large' ? '40px' : '36px'};
-            line-height: ${({ size }) => size === 'large' ? '40px' : '36px'};
-        }
+var _react = require("react");
 
-        & > .ant-menu-item {
-            padding-left: 24px !important;
-            width: 100%;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-            & > .tnt-icon {
-                margin-right: 12px;
-            }
-            & > a {
-                display: inline-block;
-            }
-        }
+var _lodash = require("lodash");
 
-        .ant-menu-submenu-title {
-            position: relative;
-            color: ${props => props.theme.compatible ? compatibleColor : color};
-            .tnt-themeS1 & {
-                color: ${props => props.theme.primaryTextColor};
-            }
-            height: ${({ size }) => size === 'large' ? '40px' : '36px'};
-            line-height: ${({ size }) => size === 'large' ? '40px' : '36px'};
-            .tnt-icon {
-                .tnt-themeS1 & {
-                    color: ${props => props.theme.lightIconColor};
-                }
-            }
-            & > .tnt-icon {
-                position: absolute;
-                right: 20px;
-                top: 1px;
-                font-size: 10px;
-            }
-
-            // 蓝色系主题
-            .tnt-themeS3 & {
-                color: #FFF;
-            }
-            .tnt-icon {
-                .tnt-themeS3 & {
-                    color: #FFF;
-                }
-            }
-        }
+var _ActionsContext = _interopRequireDefault(require("./ActionsContext"));
 
-        & > .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title {
-            margin-top: 0;
-            margin-bottom: 0;
-            padding-left: 54px !important;
-        }
-    }
+var _utils = require("./utils");
 
-    &.ant-menu .menu-arrow-right {
-        color: ${props => props.theme.compatible ? compatibleColor : color};
-    }
+var _storage = require("./storage");
 
-    .ant-menu-item, .ant-menu-item > a {
-        color: ${props => props.theme.compatible ? compatibleColor : color};
-        .tnt-themeS1 & {
-            color: ${props => props.theme.primaryTextColor};
-        }
-        &:hover {
-            color: #fff;
-            .tnt-themeS1 & {
-                color: ${props => props.theme.primaryColor};
-            }
-        }
+var _Iconfont = _interopRequireDefault(require("./Iconfont"));
 
-        // 蓝色系列
-        .tnt-themeS3 & {
-            color: #fff;
-        }
-        &:hover {
-            .tnt-themeS3 & {
-                color: #fff;
-            }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n    font-size: 14px;\n    .large-size & {\n        font-size: 15px;\n    }\n    color: rgba(255,255,255,.85);\n    .compatible & {\n        color: #A1D7FF;\n    }\n    .tnt-themeS1 & {\n        color: ", ";\n    }\n    .tnt-icon {\n        margin-right: 12px;\n        font-size: 16px;\n        position: relative;\n        top: 1px;\n\n        .large-size & {\n            font-size: 18px;\n            top: auto;\n        }\n        .tnt-themeS1 & {\n            /* color: #7e8081; */\n            color: ", ";\n        }\n    }\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n    background: none !important;\n    &.ant-menu.ant-menu-root {\n        position: relative;\n        transition: none !important;\n        padding-top: 10px;\n        border-right: none;\n        text-rendering: optimizeLegibility;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        height: calc(100vh - ", ");\n        overflow-y: auto;\n        overflow-x: hidden;\n        .collapseIconPlacementBottom & {\n            padding-bottom: 36px;\n        }\n        .tnt-themeS1 & {\n            overflow-x: unset;\n            box-shadow: 10px 0 10px -5px rgba(0,0,0,0.10);\n            z-index: 2;\n        }\n        scrollbar-width: none;\n        -ms-overflow-style: none;\n\n        &::-webkit-scrollbar {\n            display: none;\n        }\n        &::-moz-scrollbar {\n            display: none;\n        }\n\n        /** \u4E00\u7EA7\u7ED3\u70B9\u662F\u83DC\u5355\u6837\u5F0F\u5F00\u59CB */\n        & > .ant-menu-item {\n            & > .tnt-icon:first-child {\n                font-size: 16px\n            }\n        }\n\n        .ant-layout-sider-collapsed & {\n            & > .ant-menu-item {\n                & > .tnt-icon:first-child {\n                    padding-left: 8px;\n                }\n                a {\n                    visibility: hidden;\n                }\n            }\n        }\n        /** \u4E00\u7EA7\u7ED3\u70B9\u662F\u83DC\u5355\u6837\u5F0F\u7ED3\u675F */\n\n        .ant-menu-item:active,\n        .ant-menu-submenu-title:active {\n            background: none;\n        }\n\n        .ant-menu-submenu .ant-menu-sub {\n            background: #212635;\n            border-radius: 0 0 2px 2px;\n            .compatible & {\n                background: #07408d !important;\n            }\n            .tnt-themeS1 & {\n                background: #fff !important;\n            }\n\n            // \u84DD\u8272\u7CFB\u5217 \u83DC\u5355\u5C55\u5F00\u533A\u57DF\u989C\u8272\n            .tnt-themeS3 & {\n                background: #07408D !important;\n            }\n        }\n        .ant-menu-submenu.ant-menu-submenu-active,\n        .ant-menu-submenu.ant-menu-submenu-selected {\n            background: rgba(47,129,247,.25) !important;\n            .tnt-themeS1 & {\n                background: ", " !important;\n            }\n\n            // \u84DD\u8272\u7CFB \u4E00\u7EA7\u83DC\u5355\u7684\u9009\u4E2D\u6548\u679C\n            .tnt-themeS3 & {\n                background: #204085 !important;\n            }\n        }\n        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-active,\n        & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-selected {\n            background: none !important;\n            .tnt-themeS1 & {\n                background: ", " !important;\n            }\n            // \u84DD\u8272\u7CFB \u5B50\u7EA7\u83DC\u5355\u7EA7\u7684\u9009\u4E2D\u6548\u679C\n            .tnt-themeS3 & {\n                background: #204085 !important;\n            }\n        }\n        .ant-menu-item {\n            margin: 0;\n            font-size: 14px;\n            padding-left: 54px !important;\n            height: ", ";\n            line-height: ", ";\n        }\n\n        & > .ant-menu-item {\n            padding-left: 24px !important;\n            width: 100%;\n\n            & > .tnt-icon {\n                margin-right: 12px;\n            }\n            & > a {\n                display: inline-block;\n            }\n        }\n\n        .ant-menu-submenu-title {\n            position: relative;\n            color: ", ";\n            .tnt-themeS1 & {\n                color: ", ";\n            }\n            height: ", ";\n            line-height: ", ";\n            .tnt-icon {\n                .tnt-themeS1 & {\n                    color: ", ";\n                }\n            }\n            & > .tnt-icon {\n                position: absolute;\n                right: 20px;\n                top: 1px;\n                font-size: 10px;\n            }\n\n            // \u84DD\u8272\u7CFB\u4E3B\u9898\n            .tnt-themeS3 & {\n                color: #FFF;\n            }\n            .tnt-icon {\n                .tnt-themeS3 & {\n                    color: #FFF;\n                }\n            }\n        }\n\n        & > .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title {\n            margin-top: 0;\n            margin-bottom: 0;\n            padding-left: 54px !important;\n        }\n    }\n\n    &.ant-menu .menu-arrow-right {\n        color: ", ";\n    }\n\n    .ant-menu-item, .ant-menu-item > a {\n        color: ", ";\n        .tnt-themeS1 & {\n            color: ", ";\n        }\n        &:hover {\n            color: #fff;\n            .tnt-themeS1 & {\n                color: ", ";\n            }\n        }\n\n        // \u84DD\u8272\u7CFB\u5217\n        .tnt-themeS3 & {\n            color: #fff;\n        }\n        &:hover {\n            .tnt-themeS3 & {\n                color: #fff;\n            }\n        }\n    }\n    & > .ant-menu-item.ant-menu-item-selected,\n    &.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {\n        color: rgba(255,255,255,.85);\n        background-color: ", ";\n        .compatible & {\n            background-color: #013479;\n        }\n        & > a {\n            .tnt-themeS1 & {\n                color: #fff;\n            }\n        }\n        .tnt-themeS1 & {\n            color: #fff;\n            background-color: ", ";\n        }\n\n        // \u84DD\u8272\u7CFB \u5B50\u9879\u9009\u4E2D\u989C\u8272\n        .tnt-themeS3 & {\n            color: #fff;\n            background: #013479;\n            &::after{\n                content:\"\";\n                display:none;\n            }\n        }\n    }\n    .ant-menu-submenu.ant-menu-submenu-selected {\n        .tnt-themeS2 & {\n            background: #141825;\n        }\n        .tnt-themeS2.compatible & {\n            background: rgba(47,129,247,.25) !important;\n        }\n    }\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var color = 'rgba(255,255,255,.85)';
+var compatibleColor = '#a1d7ff';
+var SubMenu = _menu["default"].SubMenu,
+    MenuItem = _menu["default"].Item;
+var TNTMenu = (0, _styledComponents["default"])(_menu["default"])(_templateObject(), function (props) {
+  return "".concat(props.theme.headerHeight, "px");
+}, function (props) {
+  return props.theme.dividerColor;
+}, function (props) {
+  return props.theme.dividerColor;
+}, function (_ref) {
+  var size = _ref.size;
+  return size === 'large' ? '40px' : '36px';
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size === 'large' ? '40px' : '36px';
+}, function (props) {
+  return props.theme.compatible ? compatibleColor : color;
+}, function (props) {
+  return props.theme.primaryTextColor;
+}, function (_ref3) {
+  var size = _ref3.size;
+  return size === 'large' ? '40px' : '36px';
+}, function (_ref4) {
+  var size = _ref4.size;
+  return size === 'large' ? '40px' : '36px';
+}, function (props) {
+  return props.theme.lightIconColor;
+}, function (props) {
+  return props.theme.compatible ? compatibleColor : color;
+}, function (props) {
+  return props.theme.compatible ? compatibleColor : color;
+}, function (props) {
+  return props.theme.primaryTextColor;
+}, function (props) {
+  return props.theme.primaryColor;
+}, function (props) {
+  return props.theme.primaryColor;
+}, function (props) {
+  return props.theme.primaryColor;
+});
+
+var MenuTitle = _styledComponents["default"].span(_templateObject2(), function (props) {
+  return props.theme.primaryTextColor;
+}, function (props) {
+  return "".concat(props.theme.iconColor);
+});
+
+var _default = (0, _styledComponents.withTheme)(function (props) {
+  var actions = (0, _react.useContext)(_ActionsContext["default"]);
+  var language = props.language,
+      _props$menus = props.menus,
+      menus = _props$menus === void 0 ? [] : _props$menus,
+      formatMenuPath = props.formatMenuPath,
+      changeRouter = props.changeRouter,
+      selectedKey = props.selectedKey,
+      openKeys = props.openKeys,
+      onSelect = props.onSelect,
+      onBeforeChange = props.onBeforeChange,
+      onChange = props.onChange,
+      onOpenChange = props.onOpenChange,
+      collapsed = props.collapsed;
+
+  var _getSelectedMenuInfo = (0, _utils.getSelectedMenuInfo)(selectedKey, menus),
+      subMenu = _getSelectedMenuInfo.subMenu,
+      parentMenus = _getSelectedMenuInfo.parentMenus;
+
+  var _useState = (0, _react.useState)([(0, _lodash.get)(subMenu, 'code')]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  var onSelectMenu = function onSelectMenu(param) {
+    var _ref5 = (0, _utils.getSelectedMenuInfo)(param.key, menus) || {},
+        subMenu = _ref5.subMenu,
+        parentMenus = _ref5.parentMenus;
+
+    var params = _objectSpread({}, param, {
+      data: subMenu
+    });
+
+    var defaultBeforeChange = function defaultBeforeChange(_ref6) {
+      var data = _ref6.data;
+      return !(0, _utils.isNewTabMenu)(data);
+    };
+
+    var defaultSelect = function defaultSelect(_ref7) {
+      var _window$location$path;
+
+      var data = _ref7.data;
+
+      var _ref8 = data || {},
+          path = _ref8.path;
+
+      var formatPath = formatMenuPath || function (path) {
+        return path;
+      };
+
+      if ((0, _utils.isNewTabMenu)(data)) {
+        (0, _utils.openInNewTab)(formatPath(data == null ? void 0 : data.path, data));
+        return;
+      }
+
+      var routerPrefix = (_window$location$path = window.location.pathname.match(/(^\/[^\/]+)/i)) == null ? void 0 : _window$location$path[1];
+
+      if (path == null ? void 0 : path.startsWith(routerPrefix)) {
+        var forwardPath = formatPath(path, data);
+        changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, data == null ? void 0 : data.name, forwardPath);
+      } else {
+        window.location.href = formatPath(path, data);
+      }
+    };
+
+    var finalSelect = onSelect || defaultSelect;
+
+    if (param.key !== (0, _lodash.get)(selectedKeys, '0')) {
+      var finalBeforeChange = onBeforeChange || defaultBeforeChange;
+
+      if (finalBeforeChange(params, (0, _lodash.get)(selectedKeys, '0'))) {
+        // SideMenu菜单收起状态
+        if (collapsed) {
+          var newOpenKeys = parentMenus == null ? void 0 : parentMenus.map(function (_ref9) {
+            var code = _ref9.code;
+            return code;
+          }).reverse();
+          onOpenChange(newOpenKeys);
+          (0, _storage.setSideMenuStore)({
+            openKeys: newOpenKeys,
+            beforeOpenKeys: newOpenKeys
+          });
         }
+
+        setSelectedKeys([param.key]);
+        onChange && onChange(params);
+      }
     }
-    & > .ant-menu-item.ant-menu-item-selected,
-    &.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-        color: rgba(255,255,255,.85);
-        background-color: ${props => props.theme.primaryColor};
-        .compatible & {
-            background-color: #013479;
-        }
-        & > a {
-            .tnt-themeS1 & {
-                color: #fff;
-            }
-        }
-        .tnt-themeS1 & {
-            color: #fff;
-            background-color: ${props => props.theme.primaryColor};
-        }
 
-        // 蓝色系 子项选中颜色
-        .tnt-themeS3 & {
-            color: #fff;
-            background: #013479;
-            &::after{
-                content:"";
-                display:none;
-            }
-        }
+    actions.setSelectedMenuKey(param.key);
+    setSelectedKeys([param.key]);
+    finalSelect(params);
+  };
+
+  var getExpandIcon = function getExpandIcon(code) {
+    if (props.theme.compatible) {
+      return openKeys.includes(code) ? 'minus' : 'plus';
     }
-    .ant-menu-submenu.ant-menu-submenu-selected {
-        .tnt-themeS2 & {
-            background: #141825;
-        }
-        .tnt-themeS2.compatible & {
-            background: rgba(47,129,247,.25) !important;
+
+    return openKeys.includes(code) ? 'up' : 'down';
+  };
+
+  var onOpenKeysChange = function onOpenKeysChange(keys) {
+    var openKey = keys.find(function (key) {
+      return !openKeys.includes(key);
+    }); // const closeKey = openKeys.find(key => !keys.includes(key));
+
+    var newOpenKeys = keys;
+
+    var findParentGroupKey = function findParentGroupKey(key, openKeys) {
+      var parentGroupKey;
+      (0, _utils.traverseTree)(menus, function (node, pnode) {
+        if (node.code === key) {
+          if (pnode && openKeys.includes(pnode == null ? void 0 : pnode.code)) {
+            parentGroupKey = pnode == null ? void 0 : pnode.code;
+          }
+
+          return false;
         }
+      });
+      return parentGroupKey;
+    }; // 展开openKey
+
+
+    if (openKey) {
+      // 父子关系展开
+      var parentGroupKey = findParentGroupKey(openKey, openKeys);
+
+      if (parentGroupKey) {
+        newOpenKeys = keys.length > 2 ? [parentGroupKey, openKey] : keys;
+      } else {
+        newOpenKeys = [openKey];
+      }
+    } else {
+      // 收起closeKey
+      newOpenKeys = keys;
     }
-`;
-const MenuTitle = styled.span`
-    font-size: 14px;
-    .large-size & {
-        font-size: 15px;
-    }
-    color: rgba(255,255,255,.85);
-    .compatible & {
-        color: #A1D7FF;
-    }
-    .tnt-themeS1 & {
-        color: ${props => props.theme.primaryTextColor};
+
+    onOpenChange(newOpenKeys);
+  };
+
+  (0, _react.useEffect)(function () {
+    setSelectedKeys([selectedKey]);
+
+    if (selectedKey && !collapsed && (parentMenus == null ? void 0 : parentMenus.length)) {
+      onOpenChange(parentMenus == null ? void 0 : parentMenus.map(function (_ref10) {
+        var code = _ref10.code;
+        return code;
+      }).reverse());
     }
-    .tnt-icon {
-        margin-right: 12px;
-        font-size: 16px;
-        position: relative;
-        top: 1px;
-
-        .large-size & {
-            font-size: 18px;
-            top: auto;
+
+    actions.setSelectedMenuKey(selectedKey);
+  }, [selectedKey]);
+  actions.off('menuSelect', onSelectMenu);
+  actions.on('menuSelect', onSelectMenu);
+  return React.createElement(TNTMenu, {
+    mode: "inline",
+    defaultSelectedKeys: [],
+    openKeys: openKeys,
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenKeysChange
+  }, menus == null ? void 0 : menus.map(function (menu) {
+    var MenuLink = function MenuLink(_ref11) {
+      var menuName = _ref11.menuName,
+          enName = _ref11.enName,
+          path = _ref11.path;
+      return React.createElement("a", {
+        href: path,
+        onClick: function onClick(evt) {
+          return evt.preventDefault();
         }
-        .tnt-themeS1 & {
-            /* color: #7e8081; */
-            color: ${props => `${props.theme.iconColor}`};
+      }, {
+        cn: menuName,
+        en: enName
+      }[language]);
+    };
+
+    if ((0, _utils.isGroupMenu)(menu)) {
+      var _menu$children;
+
+      var getSubMenuProps = function getSubMenuProps(_ref12) {
+        var code = _ref12.code,
+            groupIcon = _ref12.groupIcon,
+            groupName = _ref12.groupName,
+            enName = _ref12.enName;
+        var isSubGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        return {
+          key: code,
+          title: React.createElement(MenuTitle, {
+            style: collapsed && isSubGroup ? {
+              color: props.theme.primaryTextColor
+            } : {}
+          }, !isSubGroup && React.createElement(_Iconfont["default"], {
+            type: groupIcon
+          }), collapsed && !isSubGroup ? '' : {
+            cn: groupName,
+            en: enName
+          }[language]),
+          expandIcon: collapsed ? null : React.createElement(_Iconfont["default"]
+          /*  */
+          , {
+            type: getExpandIcon(code)
+          })
+        };
+      };
+
+      return React.createElement(SubMenu, _extends({}, getSubMenuProps(menu), {
+        onClick: onSelectMenu
+      }), menu == null ? void 0 : (_menu$children = menu.children) == null ? void 0 : _menu$children.map(function (menu) {
+        if ((0, _utils.isGroupMenu)(menu)) {
+          var _menu$children2;
+
+          return React.createElement(SubMenu, _extends({}, getSubMenuProps(menu, true), {
+            onClick: onSelectMenu
+          }), menu == null ? void 0 : (_menu$children2 = menu.children) == null ? void 0 : _menu$children2.map(function (_ref13) {
+            var code = _ref13.code,
+                menu = _objectWithoutProperties(_ref13, ["code"]);
+
+            return React.createElement(MenuItem, {
+              key: code
+            }, React.createElement(MenuLink, _extends({}, menu, {
+              style: {
+                paddingLeft: '24px'
+              }
+            })));
+          }));
         }
+
+        return React.createElement(MenuItem, {
+          key: menu == null ? void 0 : menu.code
+        }, React.createElement(MenuLink, menu));
+      }));
     }
-`;
-
-
-export default withTheme(
-    props => {
-        const actions = useContext(ActionsContext);
-        const { language, menus = [], formatMenuPath, changeRouter, selectedKey, openKeys, onSelect, onBeforeChange, onChange, onOpenChange, collapsed } = props;
-        const { subMenu, parentMenus } = getSelectedMenuInfo(selectedKey, menus);
-        const [selectedKeys, setSelectedKeys] = useState([get(subMenu, 'code')]);
-        const onSelectMenu = param => {
-            const { subMenu, parentMenus } = getSelectedMenuInfo(param.key, menus) || {};
-            const params = {
-                ...param,
-                data: subMenu
-            };
-            const defaultBeforeChange = ({ data }) => !isNewTabMenu(data);
-            const defaultSelect = ({ data }) => {
-                const { path } = data || {};
-                const formatPath = formatMenuPath || (path => path);
-
-                if (isNewTabMenu(data)) {
-                    openInNewTab(formatPath(data?.path, data));
-                    return;
-                }
-
-                const routerPrefix = window.location.pathname.match(/(^\/[^\/]+)/i)?.[1];
-
-                if (path?.startsWith(routerPrefix)) {
-                    const forwardPath = formatPath(path, data);
-                    changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, data?.name, forwardPath);
-                } else {
-                    window.location.href = formatPath(path, data);
-                }
-            };
-            const finalSelect = onSelect || defaultSelect;
-
-            if (param.key !== get(selectedKeys, '0')) {
-                const finalBeforeChange = onBeforeChange || defaultBeforeChange;
-
-                if (finalBeforeChange(params, get(selectedKeys, '0'))) {
-                    // SideMenu菜单收起状态
-                    if (collapsed) {
-                        const newOpenKeys = parentMenus?.map(({ code }) => code).reverse();
-
-                        onOpenChange(newOpenKeys);
-                        setSideMenuStore({
-                            openKeys: newOpenKeys,
-                            beforeOpenKeys: newOpenKeys
-                        });
-                    }
-                    setSelectedKeys([param.key]);
-                    onChange && onChange(params);
-                }
-            }
-            actions.setSelectedMenuKey(param.key);
-            setSelectedKeys([param.key]);
-
-            finalSelect(params);
-        };
-        const getExpandIcon = code => {
-            if (props.theme.compatible) {
-                return openKeys.includes(code) ? 'minus' : 'plus';
-            }
 
-            return openKeys.includes(code) ? 'up' : 'down';
-        };
-        const onOpenKeysChange = keys => {
-            const openKey = keys.find(key => !openKeys.includes(key));
-            // const closeKey = openKeys.find(key => !keys.includes(key));
-            let newOpenKeys = keys;
-
-            const findParentGroupKey = (key, openKeys) => {
-                let parentGroupKey;
-
-                traverseTree(menus, (node, pnode) => {
-                    if (node.code === key) {
-                        if (pnode && openKeys.includes(pnode?.code)) {
-                            parentGroupKey = pnode?.code;
-                        }
-
-                        return false;
-                    }
-                });
-
-                return parentGroupKey;
-            };
-
-            // 展开openKey
-            if (openKey) {
-                // 父子关系展开
-                const parentGroupKey = findParentGroupKey(openKey, openKeys);
-                if (parentGroupKey) {
-                    newOpenKeys = keys.length > 2 ? [parentGroupKey, openKey] : keys;
-                } else {
-                    newOpenKeys = [openKey];
-                }
-            } else { // 收起closeKey
-                newOpenKeys = keys;
-            }
-
-            onOpenChange(newOpenKeys);
-        };
+    return React.createElement(MenuItem, {
+      key: menu.code,
+      onClick: onSelectMenu
+    }, React.createElement(_Iconfont["default"], {
+      type: menu.icon
+    }), React.createElement(MenuLink, menu));
+  }));
+});
 
-        useEffect(() => {
-            setSelectedKeys([selectedKey]);
-            if (selectedKey && !collapsed && parentMenus?.length) {
-                onOpenChange(parentMenus?.map(({ code }) => code).reverse());
-            }
-            actions.setSelectedMenuKey(selectedKey);
-        }, [selectedKey]);
-
-        actions.off('menuSelect', onSelectMenu);
-        actions.on('menuSelect', onSelectMenu);
-
-        return (
-            <TNTMenu
-                mode="inline"
-                defaultSelectedKeys={[]}
-                openKeys={openKeys}
-                selectedKeys={selectedKeys}
-                onOpenChange={onOpenKeysChange}
-            >
-                {
-                    menus?.map(menu => {
-                        const MenuLink = ({ menuName, enName, path }) => (
-                            <a href={path} onClick={evt => evt.preventDefault()}>
-                                {
-                                    {
-                                        cn: menuName,
-                                        en: enName
-                                    }[language]
-                                }
-                            </a>
-                        );
-
-                        if (isGroupMenu(menu)) {
-                            const getSubMenuProps = ({ code, groupIcon, groupName, enName }, isSubGroup = false) => ({
-                                key: code,
-                                title: (
-                                    <MenuTitle style={(collapsed && isSubGroup) ? { color: props.theme.primaryTextColor } : {}}>
-                                        {!isSubGroup && <Iconfont type={groupIcon} />}
-                                        {
-                                            (collapsed && !isSubGroup) ? '' : {
-                                                cn: groupName,
-                                                en: enName
-                                            }[language]
-                                        }
-                                    </MenuTitle>
-                                ),
-                                expandIcon: collapsed ? null : (
-                                    <Iconfont/*  */ type={getExpandIcon(code)} />
-                                )
-                            });
-
-                            return (
-                                <SubMenu
-                                    {...getSubMenuProps(menu)}
-                                    onClick={onSelectMenu}
-                                >
-                                    {
-                                        menu?.children?.map(menu => {
-                                            if (isGroupMenu(menu)) {
-                                                return (
-                                                    <SubMenu
-                                                        {...getSubMenuProps(menu, true)}
-                                                        onClick={onSelectMenu}
-                                                    >
-                                                        {
-                                                            menu?.children?.map(({ code, ...menu }) => (
-                                                                <MenuItem key={code}>
-                                                                    <MenuLink {...menu} style={{ paddingLeft: '24px' }}/>
-                                                                </MenuItem>
-                                                            ))
-                                                        }
-                                                    </SubMenu>
-                                                );
-                                            }
-
-                                            return (
-                                                <MenuItem key={menu?.code}>
-                                                    <MenuLink {...menu} />
-                                                </MenuItem>
-                                            );
-                                        })
-                                    }
-                                </SubMenu>
-                            );
-                        }
-
-                        return (
-                            <MenuItem key={menu.code} onClick={onSelectMenu}>
-                                <Iconfont type={menu.icon} />
-                                <MenuLink {...menu} />
-                            </MenuItem>
-                        );
-                    })
-                }
-            </TNTMenu>
-        );
-    }
-);
+exports["default"] = _default;