tntd 3.0.35-beta.4 → 3.0.35-beta.6

package/es/tntd-layout/AppList.js

@@ -1,150 +1,58 @@
-import _get from "lodash/get";
-import React, { useState, useEffect } from 'react';
-import styled, { withTheme } from 'styled-components';
-import Dropdown from '../dropdown';
-import Menu from '../menu';
-import Input from '../input';
-import Select from '../select';
-import TreeSelect from '../tree-select';
-import Icon from '../tntd-icon';
-import { getCurrentAppStore, setCurrentAppStore } from './storage';
-import { traverseTree } from '../utils';
-const {
-  Option
-} = Select;
-const MenuList = styled(Menu)`
-  border-radius: 0;
-  min-width: 250px;
-  max-height: 350px;
-  overflow-y: auto;
-  border: 1px solid #ccc;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
-  .ant-dropdown-menu-item {
-    padding: 0 20px;
-    height: 44px;
-    line-height: 44px;
-    &:hover {
-      background: rgba(0, 0, 0, 0.1);
-    }
-    &.app-search-warp {
-      padding: 0;
-      &:hover {
-        background: none;
-      }
-      .ant-input-affix-wrapper {
-        height: 100%;
-      }
-      .ant-input {
-        border: none;
-        border-bottom: 1px dashed #dcdcdc;
-        box-shadow: none;
-        padding: 0 20px;
-      }
-    }
-    i {
-      margin-right: 0 !important;
-      margin-left: 6px !important;
-    }
-  }
-  .isInIframe & {
-    margin-left: 20px;
-  }
-`;
-// 新版UI
-const AppsSelect = styled(Select)`
-  min-width: 160px;
-  height: 28px;
-  line-height: 28;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  .ant-select-selection,
-  .ant-select-selection__rendered {
-    line-height: 28px;
-    height: 28px;
-  }
-
-  .ant-select-selection {
-    .hasHeaderTabs & {
-      border-radius: 14px;
-      font-size: 12px;
-      // 去掉默认黑色
-      // background: #191D29;
-      // border: 1px solid rgba(186,189,197,0.60);
-      // color: rgba(255,255,255,.8);
-      // 统一为浅色调
-      background: #fff !important;
-      border-color: #c9d2dd !important;
-      color: #8b919e !important;
-    }
-    // 统一色调
-    // .tnt-themeS1.hasHeaderTabs & {
-    //     /* background: #141825; */
-    //     /* color: rgba(255,255,255,.85); */
-    //     background: #fff;
-    //     border-color: #c9d2dd;
-    //     color: #8b919e;
-    // }
-
-    // .tnt-themeS3.hasHeaderTabs &{
-    //     background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295
-    //     color: rgba(255,255,255,0.8);
-    //     border-color: rgba(255,255,255,0.5);
-    // }
-  }
-
-  .ant-select-arrow {
-    .hasHeaderTabs & {
-      color: #b2becd;
-    }
-    .tnt-themeS1 & {
-      /* color: rgba(255,255,255,.85); */
-    }
-  }
-
-  .tnt-themeS1 & {
-    border-radius: 2px;
-  }
+"use strict";
 
-  .isInIframe & {
-    margin-left: 20px;
-  }
-`;
-const AppTreeSelect = styled(TreeSelect)`
-  min-width: 160px;
-  height: 28px;
-  line-height: 28;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-`;
-const SwitchAppMenu = styled.a`
-  display: block;
-  color: #666;
-  line-height: ${props => `${props.theme.headerHeight}px`};
-  font-size: ${props => `${props.theme.size === 'large' ? 16 : 14}px`};
-
-  .tnt-themeS1 & {
-    color: rgba(255, 255, 255, 0.85);
-  }
-  &:hover {
-    color: #666;
-  }
-  i {
-    margin-left: 12px;
-  }
-`;
-export default withTheme(props => {
-  const {
-    selectedKey,
-    items = [],
-    onChange
-  } = props;
-  const getInitialSelectedApp = () => {
-    const currentAppStore = getCurrentAppStore();
-    const findAppByKey = selectedKey => {
-      let findApp;
-      traverseTree(items, item => {
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _get2 = _interopRequireDefault(require("lodash/get"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _dropdown = _interopRequireDefault(require("../dropdown"));
+var _menu = _interopRequireDefault(require("../menu"));
+var _input = _interopRequireDefault(require("../input"));
+var _select = _interopRequireDefault(require("../select"));
+var _treeSelect = _interopRequireDefault(require("../tree-select"));
+var _tntdIcon = _interopRequireDefault(require("../tntd-icon"));
+var _storage = require("./storage");
+var _utils = require("../utils");
+var _templateObject,
+  _templateObject2,
+  _templateObject3,
+  _templateObject4,
+  _this = void 0;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var Option = _select["default"].Option;
+var MenuList = (0, _styledComponents["default"])(_menu["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 0;\n  min-width: 250px;\n  max-height: 350px;\n  overflow-y: auto;\n  border: 1px solid #ccc;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;\n  .ant-dropdown-menu-item {\n    padding: 0 20px;\n    height: 44px;\n    line-height: 44px;\n    &:hover {\n      background: rgba(0, 0, 0, 0.1);\n    }\n    &.app-search-warp {\n      padding: 0;\n      &:hover {\n        background: none;\n      }\n      .ant-input-affix-wrapper {\n        height: 100%;\n      }\n      .ant-input {\n        border: none;\n        border-bottom: 1px dashed #dcdcdc;\n        box-shadow: none;\n        padding: 0 20px;\n      }\n    }\n    i {\n      margin-right: 0 !important;\n      margin-left: 6px !important;\n    }\n  }\n  .isInIframe & {\n    margin-left: 20px;\n  }\n"])));
+// 新版UI
+var AppsSelect = (0, _styledComponents["default"])(_select["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 160px;\n  height: 28px;\n  line-height: 28;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n  .ant-select-selection,\n  .ant-select-selection__rendered {\n    line-height: 28px;\n    height: 28px;\n  }\n\n  .ant-select-selection {\n    .hasHeaderTabs & {\n      border-radius: 14px;\n      font-size: 12px;\n      // \u53BB\u6389\u9ED8\u8BA4\u9ED1\u8272\n      // background: #191D29;\n      // border: 1px solid rgba(186,189,197,0.60);\n      // color: rgba(255,255,255,.8);\n      // \u7EDF\u4E00\u4E3A\u6D45\u8272\u8C03\n      background: #fff !important;\n      border-color: #c9d2dd !important;\n      color: #8b919e !important;\n    }\n    // \u7EDF\u4E00\u8272\u8C03\n    // .tnt-themeS1.hasHeaderTabs & {\n    //     /* background: #141825; */\n    //     /* color: rgba(255,255,255,.85); */\n    //     background: #fff;\n    //     border-color: #c9d2dd;\n    //     color: #8b919e;\n    // }\n\n    // .tnt-themeS3.hasHeaderTabs &{\n    //     background: ", "; //#1D4295\n    //     color: rgba(255,255,255,0.8);\n    //     border-color: rgba(255,255,255,0.5);\n    // }\n  }\n\n  .ant-select-arrow {\n    .hasHeaderTabs & {\n      color: #b2becd;\n    }\n    .tnt-themeS1 & {\n      /* color: rgba(255,255,255,.85); */\n    }\n  }\n\n  .tnt-themeS1 & {\n    border-radius: 2px;\n  }\n\n  .isInIframe & {\n    margin-left: 20px;\n  }\n"])), function (props) {
+  return "".concat(props.theme.blueBgColor, " !important");
+});
+var AppTreeSelect = (0, _styledComponents["default"])(_treeSelect["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 160px;\n  height: 28px;\n  line-height: 28;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n"])));
+var SwitchAppMenu = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: block;\n  color: #666;\n  line-height: ", ";\n  font-size: ", ";\n\n  .tnt-themeS1 & {\n    color: rgba(255, 255, 255, 0.85);\n  }\n  &:hover {\n    color: #666;\n  }\n  i {\n    margin-left: 12px;\n  }\n"])), function (props) {
+  return "".concat(props.theme.headerHeight, "px");
+}, function (props) {
+  return "".concat(props.theme.size === 'large' ? 16 : 14, "px");
+});
+var _default = exports["default"] = (0, _styledComponents.withTheme)(function (props) {
+  var selectedKey = props.selectedKey,
+    _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    onChange = props.onChange;
+  var getInitialSelectedApp = function getInitialSelectedApp() {
+    var currentAppStore = (0, _storage.getCurrentAppStore)();
+    var findAppByKey = function findAppByKey(selectedKey) {
+      var findApp;
+      (0, _utils.traverseTree)(items, function (item) {
         if (item.key === selectedKey) {
           findApp = item;
           return false;
@@ -152,54 +60,62 @@ export default withTheme(props => {
       });
       return findApp;
     };
-    const currentApp = findAppByKey(selectedKey || _get(currentAppStore, 'key'));
+    var currentApp = findAppByKey(selectedKey || (0, _get2["default"])(currentAppStore, 'key'));
     return currentApp || items[0];
   };
-  const changeApp = app => {
+  var changeApp = function changeApp(app) {
     setSelectedApp(app);
-    setCurrentAppStore(app);
+    (0, _storage.setCurrentAppStore)(app);
     onChange && onChange(app);
   };
-  const [searchValue, setSearchValue] = useState();
-  const [selectedApp, setSelectedApp] = useState(getInitialSelectedApp());
-  const Menus = React.createElement(MenuList, {
-    selectedKeys: [_get(selectedApp, 'key')]
-  }, React.createElement(Menu.Item, {
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(getInitialSelectedApp()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedApp = _useState4[0],
+    setSelectedApp = _useState4[1];
+  var Menus = _react["default"].createElement(MenuList, {
+    selectedKeys: [(0, _get2["default"])(selectedApp, 'key')]
+  }, _react["default"].createElement(_menu["default"].Item, {
     className: "app-search-warp",
     key: "search",
     disabled: true
-  }, React.createElement(Input, {
+  }, _react["default"].createElement(_input["default"], {
     allowClear: true,
     placeholder: "\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22",
     value: searchValue,
-    onChange: evt => {
+    onChange: function onChange(evt) {
       setSearchValue(evt.target.value);
     }
-  })), items.filter(({
-    key,
-    name
-  } = {}) => {
-    const regExp = new RegExp(searchValue, 'i');
+  })), items.filter(function () {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      key = _ref.key,
+      name = _ref.name;
+    var regExp = new RegExp(searchValue, 'i');
     if (searchValue) {
       return regExp.test(key) || regExp.test(name);
     }
     return true;
-  }).map(item => React.createElement(Menu.Item, {
-    key: item.key,
-    onClick: changeApp.bind(this, item)
-  }, item.name)));
-  useEffect(() => {
-    const newApp = getInitialSelectedApp();
+  }).map(function (item) {
+    return _react["default"].createElement(_menu["default"].Item, {
+      key: item.key,
+      onClick: changeApp.bind(_this, item)
+    }, item.name);
+  }));
+  (0, _react.useEffect)(function () {
+    var newApp = getInitialSelectedApp();
     if ((newApp === null || newApp === void 0 ? void 0 : newApp.key) !== (selectedApp === null || selectedApp === void 0 ? void 0 : selectedApp.key)) {
       changeApp(newApp);
     }
   }, [items, selectedKey]);
   if (!props.theme.compatible) {
-    if (items === null || items === void 0 ? void 0 : items.some(item => {
+    if (items === null || items === void 0 ? void 0 : items.some(function (item) {
       var _a;
       return (_a = item.children) === null || _a === void 0 ? void 0 : _a.length;
     })) {
-      return React.createElement(AppTreeSelect, {
+      return _react["default"].createElement(AppTreeSelect, {
         placeholder: "\u8BF7\u9009\u62E9",
         showSearch: true,
         treeNodeFilterProp: "title",
@@ -208,16 +124,16 @@ export default withTheme(props => {
         dropdownStyle: {
           maxHeight: 560
         },
-        value: _get(selectedApp, 'key'),
-        treeData: traverseTree(items, item => {
+        value: (0, _get2["default"])(selectedApp, 'key'),
+        treeData: (0, _utils.traverseTree)(items, function (item) {
           item.title = item.name;
           item.value = item.key;
           item.selectable = !item.children;
           item.disabled = !!item.children;
         }),
-        onChange: appKey => {
-          let findItem;
-          traverseTree(items, node => {
+        onChange: function onChange(appKey) {
+          var findItem;
+          (0, _utils.traverseTree)(items, function (node) {
             if (node.key === appKey) {
               findItem = node;
               return false;
@@ -232,33 +148,35 @@ export default withTheme(props => {
         }
       });
     }
-    return React.createElement(AppsSelect, {
+    return _react["default"].createElement(AppsSelect, {
       placeholder: "\u8BF7\u9009\u62E9",
       showSearch: true,
       optionFilterProp: "children",
-      value: _get(selectedApp, 'key'),
-      onChange: appKey => {
-        changeApp(items.find(({
-          key
-        }) => key === appKey));
+      value: (0, _get2["default"])(selectedApp, 'key'),
+      onChange: function onChange(appKey) {
+        changeApp(items.find(function (_ref2) {
+          var key = _ref2.key;
+          return key === appKey;
+        }));
       },
       style: {
         minWidth: 160,
         height: 28,
         lineHeight: 28
       }
-    }, items.map(({
-      key,
-      name
-    }) => React.createElement(Option, {
-      key: key,
-      value: key
-    }, name)));
+    }, items.map(function (_ref3) {
+      var key = _ref3.key,
+        name = _ref3.name;
+      return _react["default"].createElement(Option, {
+        key: key,
+        value: key
+      }, name);
+    }));
   }
-  return React.createElement(Dropdown, {
+  return _react["default"].createElement(_dropdown["default"], {
     overlay: Menus,
     trigger: ['click']
-  }, React.createElement(SwitchAppMenu, null, React.createElement("span", null, _get(selectedApp, 'name', '请选择')), React.createElement(Icon, {
+  }, _react["default"].createElement(SwitchAppMenu, null, _react["default"].createElement("span", null, (0, _get2["default"])(selectedApp, 'name', '请选择')), _react["default"].createElement(_tntdIcon["default"], {
     type: "caret-down"
   })));
 });

package/es/tntd-layout/Application.js

@@ -1,100 +1,78 @@
-import _get from "lodash/get";
-import { systemMap as applicationsMap } from '@tntx/logo-icon';
-import cn from 'classnames';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import Popover from '../popover';
-import Iconfont from './Iconfont';
-import { defaultLogo } from './images';
-const App = styled.li`
-  margin-left: 20px;
-  font-size: 20px;
-  cursor: pointer;
-  .tnt-icon {
-    color: #17233d;
-    .tnt-themeS1 & {
-      color: rgba(255, 255, 255, 0.85);
-    }
-  }
-`;
-const AppList = styled.ul`
-  list-style: none;
-  width: 264px;
-  margin: 0;
-  padding: 0;
-`;
-const AppItem = styled.li`
-  position: relative;
-  width: 88px;
-  padding: 8px 0;
-  cursor: pointer;
-  display: inline-block;
-  text-align: center;
-  &:hover,
-  &.active {
-    background: #eee;
-  }
-  &.active:after {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-width: 5px 10px 0 0;
-    border-color: #333;
-    border-style: solid;
-    z-index: 9;
-  }
-  img {
-    width: 44px;
-    height: 44px;
-    margin-bottom: 6px;
-  }
-  div {
-    line-height: 20px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-`;
-const AppContentWrapper = styled.div`
-  background-color: #fff;
-  border-radius: 4px;
-  z-index: 1;
-`;
-const AppContent = props => {
-  const {
-    language,
-    apps,
-    onChange
-  } = props;
-  const [appKey, setAppKey] = useState(props.appKey);
-  const changeApp = appKey => {
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _get2 = _interopRequireDefault(require("lodash/get"));
+var _logoIcon = require("@tntx/logo-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _popover = _interopRequireDefault(require("../popover"));
+var _Iconfont = _interopRequireDefault(require("./Iconfont"));
+var _images = require("./images");
+var _templateObject,
+  _templateObject2,
+  _templateObject3,
+  _templateObject4,
+  _this = void 0;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var App = _styledComponents["default"].li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  font-size: 20px;\n  cursor: pointer;\n  .tnt-icon {\n    color: #17233d;\n    .tnt-themeS1 & {\n      color: rgba(255, 255, 255, 0.85);\n    }\n  }\n"])));
+var AppList = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  list-style: none;\n  width: 264px;\n  margin: 0;\n  padding: 0;\n"])));
+var AppItem = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 88px;\n  padding: 8px 0;\n  cursor: pointer;\n  display: inline-block;\n  text-align: center;\n  &:hover,\n  &.active {\n    background: #eee;\n  }\n  &.active:after {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-width: 5px 10px 0 0;\n    border-color: #333;\n    border-style: solid;\n    z-index: 9;\n  }\n  img {\n    width: 44px;\n    height: 44px;\n    margin-bottom: 6px;\n  }\n  div {\n    line-height: 20px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n"])));
+var AppContentWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #fff;\n  border-radius: 4px;\n  z-index: 1;\n"])));
+var AppContent = function AppContent(props) {
+  var language = props.language,
+    apps = props.apps,
+    onChange = props.onChange;
+  var _useState = (0, _react.useState)(props.appKey),
+    _useState2 = _slicedToArray(_useState, 2),
+    appKey = _useState2[0],
+    setAppKey = _useState2[1];
+  var changeApp = function changeApp(appKey) {
     setAppKey(appKey);
     onChange && onChange(appKey);
   };
-  return React.createElement(AppContentWrapper, null, React.createElement(AppList, null, apps.sort((a, b) => _get(applicationsMap, `${a.appKey}.sort`, 1) - _get(applicationsMap, `${b.appKey}.sort`, 1)).map(({
-    appKey: key
-  }) => React.createElement(AppItem, {
-    key: key,
-    className: cn({
-      active: appKey === key
-    }),
-    onClick: changeApp.bind(this, key)
-  }, React.createElement("img", {
-    src: _get(applicationsMap, `${key}.logo`, defaultLogo),
-    onError: e => {
-      e.target.onerror = null;
-      e.target.src = defaultLogo;
-    }
-  }), React.createElement("div", null, _get(applicationsMap, `${key}.${{
-    cn: 'name',
-    en: 'enName'
-  }[language || 'cn']}`, key))))));
+  return _react["default"].createElement(AppContentWrapper, null, _react["default"].createElement(AppList, null, apps.sort(function (a, b) {
+    return (0, _get2["default"])(_logoIcon.systemMap, "".concat(a.appKey, ".sort"), 1) - (0, _get2["default"])(_logoIcon.systemMap, "".concat(b.appKey, ".sort"), 1);
+  }).map(function (_ref) {
+    var key = _ref.appKey;
+    return _react["default"].createElement(AppItem, {
+      key: key,
+      className: (0, _classnames["default"])({
+        active: appKey === key
+      }),
+      onClick: changeApp.bind(_this, key)
+    }, _react["default"].createElement("img", {
+      src: (0, _get2["default"])(_logoIcon.systemMap, "".concat(key, ".logo"), _images.defaultLogo),
+      onError: function onError(e) {
+        e.target.onerror = null;
+        e.target.src = _images.defaultLogo;
+      }
+    }), _react["default"].createElement("div", null, (0, _get2["default"])(_logoIcon.systemMap, "".concat(key, ".").concat({
+      cn: 'name',
+      en: 'enName'
+    }[language || 'cn']), key)));
+  })));
 };
-export default (props => React.createElement(App, null, React.createElement(Popover, {
-  placement: "bottomRight",
-  title: null,
-  content: React.createElement(AppContent, Object.assign({}, props)),
-  trigger: "click"
-}, React.createElement(Iconfont, {
-  type: "application"
-}))));
+var _default = exports["default"] = function _default(props) {
+  return _react["default"].createElement(App, null, _react["default"].createElement(_popover["default"], {
+    placement: "bottomRight",
+    title: null,
+    content: _react["default"].createElement(AppContent, Object.assign({}, props)),
+    trigger: "click"
+  }, _react["default"].createElement(_Iconfont["default"], {
+    type: "application"
+  })));
+};