cloud-b2b 1.0.0 → 1.0.1

package/es/Enhance/Loading.js

@@ -0,0 +1,151 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Loading from '../Loading';
+var STATUS = ['loadingWithInit', // 显示加载画面，并自动触发onInit事件，默认值
+'loading', // 显示加载画面
+'retry', // 显示重试画面
+'retryForHome', // 显示重试画面(触发onInit时，home参数为true)
+'page' // 显示正常的页面(表明页面状态已经初始化好)
+];
+/**
+ * status: [可选], 当前状态。默认为loadingWithInit
+ * home: [可选]，为true表明接受首页触发的事件。默认为false
+ * onInit: [可选],原型为func(home)，home为true表明初始化是来源首页
+ * onRefreshForHome：[可选],检测到来至首页时会触发该事件，原型为func()
+ */
+
+var Enhance = function Enhance(Component) {
+  var _class;
+
+  return _class = /*#__PURE__*/function (_React$Component) {
+    _inherits(_class, _React$Component);
+
+    var _super = _createSuper(_class);
+
+    function _class() {
+      var _context;
+
+      var _this;
+
+      _classCallCheck(this, _class);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _super.call.apply(_super, _concatInstanceProperty(_context = [this]).call(_context, args));
+
+      _defineProperty(_assertThisInitialized(_this), "triggerEvent", function () {
+        if (!global.isServer) {
+          var _this$props = _this.props,
+              _this$props$status = _this$props.status,
+              status = _this$props$status === void 0 ? 'loadingWithInit' : _this$props$status,
+              home = _this$props.home,
+              onInit = _this$props.onInit,
+              onRefreshForHome = _this$props.onRefreshForHome;
+
+          if (!home) {
+            if (status === 'loadingWithInit') {
+              onInit && onInit(false);
+            }
+          } else {
+            var __home = global['__home'];
+            global['__home'] && (global['__home'] = false);
+
+            if (status === 'loadingWithInit') {
+              onInit && onInit(__home);
+            } else if (__home) {
+              if (status === 'page') {
+                onRefreshForHome && onRefreshForHome();
+              } else if (status !== 'loading') {
+                onInit && onInit(__home);
+              }
+            }
+          }
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onRetry", function () {
+        var _this$props2 = _this.props,
+            status = _this$props2.status,
+            onInit = _this$props2.onInit;
+        onInit && onInit(status === 'retryForHome');
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "getPageProps", function () {
+        var props = _objectSpread({}, _this.props);
+
+        delete props.status;
+        delete props.home;
+        delete props.onInit;
+        delete props.onRefreshForHome;
+        return props;
+      });
+
+      return _this;
+    }
+
+    _createClass(_class, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.triggerEvent();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate() {
+        this.triggerEvent();
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var status = this.props.status;
+
+        if (status !== 'page') {
+          var retry = status === 'retry' || status === 'retryForHome';
+          return /*#__PURE__*/React.createElement(Loading, {
+            retry: retry,
+            onRetry: this.onRetry
+          });
+        } else {
+          return /*#__PURE__*/React.createElement(Component, this.getPageProps());
+        }
+      }
+    }]);
+
+    return _class;
+  }(React.Component), _defineProperty(_class, "propTypes", {
+    status: PropTypes.oneOf(STATUS),
+    home: PropTypes.bool,
+    onInit: PropTypes.func,
+    onRefreshForHome: PropTypes.func
+  }), _class;
+};
+
+export default Enhance;

package/es/Enhance/index.js

@@ -0,0 +1,8 @@
+import EnhanceLoading from './Loading';
+import EnhanceDialogs from './Dialogs';
+
+var EnhanceEditDialog = function EnhanceEditDialog(Container, EditDialog) {
+  return EnhanceDialogs(Container, ['edit'], [EditDialog]);
+};
+
+export { EnhanceLoading, EnhanceDialogs, EnhanceEditDialog };

package/es/Enhance/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Enhance",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Enhance.js"
+}

package/es/Header/Header.js

@@ -0,0 +1,194 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Dropdown from "antd/es/dropdown";
+import _Badge from "antd/es/badge";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _Menu from "antd/es/menu";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import Link from '../Link';
+import SuperIcon from '../SuperIcon';
+import helper from '../helper';
+import Vertical from './Vertical';
+import variables from '../variables';
+var MenuItem = _Menu.Item;
+
+var Header = /*#__PURE__*/function (_React$Component) {
+  _inherits(Header, _React$Component);
+
+  var _super = _createSuper(Header);
+
+  function Header(_props) {
+    var _this;
+
+    _classCallCheck(this, Header);
+
+    _this = _super.call(this, _props);
+
+    _defineProperty(_assertThisInitialized(_this), "toLogo", function () {
+      var img = _this.props.logoImg || '/logo.png';
+
+      var props = _this.getLinkProps('home', _this.state['main'] || _this.props.homeUrl || '/', {
+        role: 'logo'
+      });
+
+      return /*#__PURE__*/React.createElement(Link, props, /*#__PURE__*/React.createElement("img", {
+        src: img,
+        alt: "logo"
+      }));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toIcon", function (type) {
+      var style = {
+        fontSize: 18,
+        verticalAlign: 'middle'
+      };
+      return /*#__PURE__*/React.createElement(SuperIcon, {
+        type: type,
+        style: style
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getLinkProps", function (key, url) {
+      var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      return _objectSpread(_objectSpread({}, props), {}, {
+        to: url,
+        'data-role': 'block',
+        'data-active': _this.props.selectKey === key ? 'true' : null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toSetting", function (settingUrl) {
+      if (settingUrl) {
+        var props = _this.getLinkProps('setting', _this.state['setting'] || settingUrl);
+
+        return /*#__PURE__*/React.createElement(Link, props, _this.toIcon('pld-setting'));
+      } else {
+        return null;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toMessage", function (messageUrl) {
+      var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+      if (messageUrl) {
+        var props = _this.getLinkProps('message', _this.state['message'] || messageUrl);
+
+        var msgProps = {
+          overflowCount: 99,
+          title: "\u60A8\u6709".concat(count, "\u6761\u672A\u8BFB\u6D88\u606F"),
+          count: count
+        };
+        return /*#__PURE__*/React.createElement(Link, props, /*#__PURE__*/React.createElement("span", {
+          role: "message"
+        }, /*#__PURE__*/React.createElement(_Badge, msgProps, _this.toIcon('pld-xiaoxi'))));
+      } else {
+        return null;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onMenuItemClick", function (_ref) {
+      var key = _ref.key;
+      var onMenuClick = _this.props.onMenuClick;
+      onMenuClick && onMenuClick(key);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "menu", function (hasImport) {
+      return /*#__PURE__*/React.createElement(_Menu, {
+        className: s.menu,
+        onClick: _this.onMenuItemClick
+      }, /*#__PURE__*/React.createElement(MenuItem, {
+        key: "person"
+      }, "\u4E2A\u4EBA\u4FE1\u606F"), hasImport ? /*#__PURE__*/React.createElement(MenuItem, {
+        key: "mode"
+      }, "\u5BFC\u5165\u6A21\u677F") : null, /*#__PURE__*/React.createElement(MenuItem, {
+        key: "modify"
+      }, "\u4FEE\u6539\u5BC6\u7801"));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "avatar", function (hasImport) {
+      return /*#__PURE__*/React.createElement(_Dropdown, {
+        placement: "bottomRight",
+        overlay: _this.menu(hasImport)
+      }, /*#__PURE__*/React.createElement("span", {
+        "data-role": "avatar",
+        style: {
+          cursor: 'pointer'
+        }
+      }, _this.toIcon(_this.props.userIcon)));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toPerson", function () {
+      var hasImport = _this.props.hasImport || true;
+      return /*#__PURE__*/React.createElement("div", {
+        role: "person"
+      }, /*#__PURE__*/React.createElement("div", null), _this.avatar(hasImport), /*#__PURE__*/React.createElement("span", null, _this.props.userName));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toLogout", function () {
+      var props = {
+        to: _this.props.loginUrl,
+        'data-role': 'block',
+        onClick: _this.props.onLogout()
+      };
+      return /*#__PURE__*/React.createElement(Link, props, _this.toIcon('logout'), /*#__PURE__*/React.createElement("span", null, "\u9000\u51FA"));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toTail", function () {
+      var _this$props = _this.props,
+          settingUrl = _this$props.settingUrl,
+          messageUrl = _this$props.messageUrl,
+          messageCount = _this$props.messageCount;
+      return /*#__PURE__*/React.createElement("span", null, _this.toSetting(settingUrl), _this.toMessage(messageUrl, messageCount), _this.toPerson(), _this.toLogout());
+    });
+
+    if (_props.selectUrl) {
+      _this.state = _defineProperty({}, _props.selectKey, _props.selectUrl);
+    }
+
+    return _this;
+  }
+
+  _createClass(Header, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      if (props.selectUrl) {
+        this.setState(_defineProperty({}, props.selectKey, props.selectUrl));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("header", {
+        className: variables('Header')
+      }, this.toLogo(), this.toTail());
+    }
+  }]);
+
+  return Header;
+}(React.Component);
+
+_defineProperty(Header, "Vertical", Vertical);
+
+export default Header;

package/es/Header/Header.less

@@ -0,0 +1,94 @@
+@import '../variables.less';
+
+.@{cloudlink-prefix}-Header {
+  height: @header-height;
+  color: @header-color;
+  background-color: #000717;
+  font-size: @header-font-size;
+  line-height: @header-height;
+
+  > * {
+    display: inline-block;
+    text-align: center;
+    vertical-align: top;
+  }
+
+  > div:first-child {
+    margin-left: 20px;
+
+    > img {
+      width: 130px;
+    }
+  }
+
+  > :last-child {
+    float: right;
+    margin-right: 15px;
+  }
+
+  [role='person'] {
+    display: inline-block;
+    height: 40px;
+
+    >:first-child {
+      display: inline-block;
+      border-left: 1px solid white;
+      height: 14px;
+      vertical-align: middle;
+    }
+
+    > i {
+      margin: 8px;
+    }
+
+    > span {
+      font-size: 14px;
+    }
+  }
+
+  [data-role='block'] {
+    display: inline-block;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: @header-color;
+    height: 40px;
+
+    > span:last-child {
+      font-size: 14px;
+      margin-left: 5px;
+    }
+
+    &:hover,
+    &[data-active] {
+      background-color: @header-hover-bg;
+    }
+  }
+
+  [data-role='avatar'] {
+    display: inline-block;
+    padding-left: 15px;
+    padding-right: 15px;
+    color: @header-color;
+  }
+
+  :global {
+    .ant-badge-count {
+      box-shadow: none;
+      padding: 0 6px;
+      top: -2px;
+    }
+  }
+}
+
+.menu {
+  :global {
+    .ant-dropdown-menu-item {
+      padding: 8px 20px;
+    }
+
+    .ant-dropdown-menu-item-group-title {
+      padding: 6px 20px;
+      color: #333;
+    }
+  }
+}

package/es/Header/Vertical.js

@@ -0,0 +1,129 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+import SuperIcon from '../SuperIcon';
+import variables from '../variables';
+var ITEM_TYPE = {
+  key: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired
+};
+/**
+ * selectKey: 选中的key
+ * url：url优先级高于item中的href
+ */
+
+var Vertical = /*#__PURE__*/function (_React$Component) {
+  _inherits(Vertical, _React$Component);
+
+  var _super = _createSuper(Vertical);
+
+  function Vertical() {
+    var _context;
+
+    var _this;
+
+    _classCallCheck(this, Vertical);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, _concatInstanceProperty(_context = [this]).call(_context, args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      id: ''
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isSelect", function (item) {
+      return item.key === _this.props.selectKey;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getUrl", function (item) {
+      return _this.props.url[item.key] || item.href;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onClick", function (selectKey) {
+      _this.props.onSelectKey && _this.props.onSelectKey(selectKey);
+
+      if (_this.state.id) {
+        clearTimeout(_this.state.id);
+      }
+
+      _this.setState({
+        id: _setTimeout(function () {
+          _this.setState({
+            id: ''
+          });
+        }, 500)
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toItem", function (item) {
+      if (!item.jumpOut) {
+        var _context2;
+
+        return /*#__PURE__*/React.createElement(Link, {
+          key: item.key,
+          to: _this.getUrl(item),
+          "data-select": _this.isSelect(item),
+          onClick: _bindInstanceProperty(_context2 = _this.onClick).call(_context2, null, item.key)
+        }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SuperIcon, {
+          type: item.icon
+        })), /*#__PURE__*/React.createElement("span", null, item.title));
+      } else {
+        var props = {
+          key: item.key,
+          href: item.href,
+          target: '_blank'
+        };
+        return /*#__PURE__*/React.createElement("a", props, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(SuperIcon, {
+          type: item.icon
+        })), /*#__PURE__*/React.createElement("span", null, item.title));
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(Vertical, [{
+    key: "render",
+    value: function render() {
+      var _context3;
+
+      return /*#__PURE__*/React.createElement("header", {
+        className: variables('Vertical'),
+        "data-click": !!this.state.id
+      }, _mapInstanceProperty(_context3 = this.props.items).call(_context3, this.toItem));
+    }
+  }]);
+
+  return Vertical;
+}(React.Component);
+
+_defineProperty(Vertical, "propTypes", {
+  selectKey: PropTypes.string,
+  url: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.shape(ITEM_TYPE)),
+  onSelectKey: PropTypes.func
+});
+
+export default Vertical;

package/es/Header/Vertical.less

@@ -0,0 +1,60 @@
+@import '../variables.less';
+
+@width: @header-height;
+@height: 40px;
+
+.@{cloudlink-prefix}-Vertical {
+  position: relative;
+  z-index: 100;
+  background: #000717;
+  width: @width;
+  height: ~'calc(100vh - @{header-height})';
+  transition: width 0.4s;
+
+  > a {
+    display: block;
+    height: @height;
+    color: white;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: none;
+
+    > :first-child {
+      display: inline-block;
+      vertical-align: top;
+      width: @width;
+      line-height: @height;
+      text-align: center;
+      font-size: 16px;
+      padding-top: 1px;
+      color: #d3eafd;
+    }
+
+    > :last-child {
+      line-height: @height;
+      font-size: 14px;
+    }
+
+    &:hover > :first-child {
+      color: white;
+    }
+
+    &[data-select='true'] {
+      background: @primary-color;
+      color: white;
+
+      > :first-child {
+        color: white;
+      }
+    }
+  }
+
+  &:hover {
+    width: @width + @sidebar-width;
+  }
+
+  &[data-click='true'] {
+    width: @width;
+    transition: none;
+  }
+}

package/es/Header/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Header",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Header.js"
+}