cloud-b2b 1.0.0 → 1.0.3

package/es/Sidebar/Sidebar.js

@@ -0,0 +1,165 @@
+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 _Menu from "antd/es/menu";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+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 SubMenu = _Menu.SubMenu;
+var MenuItem = _Menu.Item;
+/** 侧边栏二级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * href: 为跳转页面的url
+ */
+
+var ChildType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired
+};
+/** 侧边栏一级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * icon：条目左边图标url，大小为20*20px
+ * isFolder：为true表明有下级菜单，此时href被忽略，children存放下级菜单的信息
+ * href: isFolder为false时，为跳转页面的url，否则被忽略
+ * children：isFolder为true时，存放下级菜单的信息，否则被忽略
+ */
+
+var ItemType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  isFolder: PropTypes.bool,
+  href: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.shape(ChildType))
+};
+/**
+ * activeKey：指定被选中的一级条目的key，不能是二级条目的key
+ * items：存放所有侧边栏条目的信息
+ * style: 样式
+ */
+
+var Sidebar = /*#__PURE__*/function (_React$Component) {
+  _inherits(Sidebar, _React$Component);
+
+  var _super = _createSuper(Sidebar);
+
+  function Sidebar() {
+    var _context;
+
+    var _this;
+
+    _classCallCheck(this, Sidebar);
+
+    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), "onOpenChange", function (openKeys) {
+      var onOpenChange = _this.props.onOpenChange;
+
+      if (onOpenChange) {
+        onOpenChange(openKeys);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toIcon", function (type) {
+      if (type) {
+        return /*#__PURE__*/React.createElement(SuperIcon, {
+          type: type,
+          style: {
+            fontSize: 16,
+            verticalAlign: -2
+          }
+        });
+      } else {
+        return null;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toItem", function (_ref) {
+      var key = _ref.key,
+          title = _ref.title,
+          isFolder = _ref.isFolder,
+          children = _ref.children,
+          href = _ref.href,
+          icon = _ref.icon,
+          unreadTotal = _ref.unreadTotal;
+
+      if (isFolder) {
+        var t = /*#__PURE__*/React.createElement("div", null, _this.toIcon(icon), title);
+        return /*#__PURE__*/React.createElement(SubMenu, {
+          key: key,
+          title: t
+        }, _this.toItems(children));
+      } else {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          key: key
+        }, /*#__PURE__*/React.createElement(Link, {
+          to: href,
+          title: title,
+          className: variables('Sidebar').unreadTotalLink
+        }, _this.toIcon(icon), title, unreadTotal && unreadTotal > 0 && /*#__PURE__*/React.createElement("span", {
+          className: variables('Sidebar').unreadTotalLink.unreadTotal
+        }, unreadTotal)));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toItems", function (items) {
+      return _mapInstanceProperty(items).call(items, _this.toItem);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getProps", function () {
+      var _this$props = _this.props,
+          style = _this$props.style,
+          activeKey = _this$props.activeKey,
+          _this$props$openKeys = _this$props.openKeys,
+          openKeys = _this$props$openKeys === void 0 ? [] : _this$props$openKeys;
+      return {
+        style: style,
+        openKeys: openKeys,
+        selectedKeys: [activeKey],
+        mode: 'inline',
+        onOpenChange: _this.onOpenChange,
+        className: variables('Sidebar')
+      };
+    });
+
+    return _this;
+  }
+
+  _createClass(Sidebar, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(_Menu, this.getProps(), this.toItems(this.props.items));
+    }
+  }]);
+
+  return Sidebar;
+}(React.Component);
+
+_defineProperty(Sidebar, "propTypes", {
+  activeKey: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape(ItemType)).isRequired,
+  style: PropTypes.object
+});
+
+export default Sidebar;

package/es/Sidebar/Sidebar.less

@@ -0,0 +1,78 @@
+@import "../variables";
+
+.@{cloudlink-prefix}-Sidebar {
+  background-color: #162C55;
+  color: white;
+  border: none !important;
+
+  > li > a {
+    color: white;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  :global(.ant-menu-item-selected) {
+    background-color: #3370FF !important;
+
+    > a:hover {
+      color: white;
+    }
+  }
+
+  :global(.ant-menu-submenu-title) {
+    &:active {
+      background-color: #162C55 !important;
+    }
+
+    &:hover {
+      > i {
+        &::before,
+        &::after {
+          background-color: @primary-color !important;
+        }
+      }
+    }
+  }
+
+  :global(.ant-menu-submenu-arrow) {
+    &::before,
+    &::after {
+      background-image: none !important;
+    }
+  }
+
+  [role='menu'] {
+    background-color: #162C55;
+
+    > li > a {
+      color: white;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
+    :global(.ant-menu-item-selected) {
+      background-color: #3370FF;
+
+      > a:hover {
+        color: white;
+      }
+    }
+  }
+  .unreadTotalLink {
+    position: relative;
+
+    .unreadTotal{
+      color: orangered;
+      float: right;
+      position: absolute;
+      right: 5px;
+    }
+  }
+}
+
+
+

package/es/Sidebar/package.json

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

package/es/Sidebar2/Sidebar.js

@@ -0,0 +1,192 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _Icon from "antd/es/icon";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+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 _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+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 variables from '../variables';
+var ITEM_HEIGHT = 40;
+/** 侧边栏二级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * href: 为跳转页面的url
+ */
+
+var ChildType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired
+};
+/** 侧边栏一级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * isFolder：为true表明有下级菜单，此时href被忽略，children存放下级菜单的信息
+ * href: isFolder为false时，为跳转页面的url，否则被忽略
+ * children：isFolder为true时，存放下级菜单的信息，否则被忽略
+ */
+
+var ItemType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  isFolder: PropTypes.bool,
+  href: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.shape(ChildType))
+};
+/**
+ * title: 侧边栏的标题
+ * mode: 显示模式，默认为expand(展开)
+ * activeKey：指定被选中的一级条目的key，不能是二级条目的key
+ * items：存放所有侧边栏条目的信息
+ * openKeys: 展开条目的key
+ * style: 样式
+ * onOpenChange: 展开条目信息改变时触发，原型为func(openKeys)
+ * onModeChange: 模式改变时触发，原型为func(mode)
+ */
+
+var Sidebar = /*#__PURE__*/function (_React$Component) {
+  _inherits(Sidebar, _React$Component);
+
+  var _super = _createSuper(Sidebar);
+
+  function Sidebar() {
+    var _context;
+
+    var _this;
+
+    _classCallCheck(this, Sidebar);
+
+    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), "onModeChange", function () {
+      var mode = _this.props.mode || 'expand';
+
+      _this.props.onModeChange(mode === 'expand' ? 'collapse' : 'expand');
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isSelect", function (item) {
+      return _this.props.activeKey === item.key;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isOpen", function (item) {
+      var _context2;
+
+      return _includesInstanceProperty(_context2 = _this.props.openKeys).call(_context2, item.key);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getHeight", function (item) {
+      if (item.isFolder && _this.isOpen(item)) {
+        return (item.children.length + 1) * ITEM_HEIGHT;
+      } else {
+        return ITEM_HEIGHT;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "linkProps", function (item) {
+      if (item.isFolder) {
+        return {
+          title: item.title,
+          onClick: function onClick() {
+            if (_this.isOpen(item)) {
+              var _context3;
+
+              _this.props.onOpenChange(_filterInstanceProperty(_context3 = _this.props.openKeys).call(_context3, function (key) {
+                return item.key !== key;
+              }));
+            } else {
+              var _context4;
+
+              _this.props.onOpenChange(_concatInstanceProperty(_context4 = []).call(_context4, _toConsumableArray(_this.props.openKeys), [item.key]));
+            }
+          }
+        };
+      } else {
+        return {
+          title: item.title,
+          to: item.href,
+          'data-select': _this.isSelect(item)
+        };
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderChild", function (item, index) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: index
+      }, /*#__PURE__*/React.createElement(Link, _extends({}, _this.linkProps(item), {
+        "data-role": "child-item"
+      }), /*#__PURE__*/React.createElement("span", null, item.title), item.unreadTotal && item.unreadTotal > 0 && /*#__PURE__*/React.createElement("span", {
+        className: s.unreadTotal
+      }, item.unreadTotal)));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderItem", function (item, index) {
+      var _context5;
+
+      return /*#__PURE__*/React.createElement("li", {
+        key: index,
+        style: {
+          height: _this.getHeight(item)
+        }
+      }, /*#__PURE__*/React.createElement(Link, _extends({}, _this.linkProps(item), {
+        "data-role": "parent-item"
+      }), /*#__PURE__*/React.createElement("span", null, item.isFolder ? /*#__PURE__*/React.createElement(_Icon, {
+        type: "caret-right",
+        "data-open": _this.isOpen(item)
+      }) : null), /*#__PURE__*/React.createElement("span", null, item.title)), item.isFolder && _this.isOpen(item) ? /*#__PURE__*/React.createElement("ul", null, _mapInstanceProperty(_context5 = item.children).call(_context5, _this.renderChild)) : null);
+    });
+
+    return _this;
+  }
+
+  _createClass(Sidebar, [{
+    key: "render",
+    value: function render() {
+      var _context6;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: variables('Sidebar2'),
+        "data-mode": this.props.mode || 'expand'
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, " "), /*#__PURE__*/React.createElement("span", null, this.props.title)), /*#__PURE__*/React.createElement("ul", null, _mapInstanceProperty(_context6 = this.props.items).call(_context6, this.renderItem)), !this.props.onModeChange ? null : /*#__PURE__*/React.createElement("div", {
+        "data-role": "shousuo",
+        onClick: this.onModeChange
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Icon, {
+        type: this.props.mode === 'expand' ? 'left' : 'right'
+      })))));
+    }
+  }]);
+
+  return Sidebar;
+}(React.Component);
+
+_defineProperty(Sidebar, "propTypes", {
+  title: PropTypes.string,
+  mode: PropTypes.oneOf(['collapse', 'expand']),
+  activeKey: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape(ItemType)),
+  openKeys: PropTypes.array,
+  style: PropTypes.object,
+  onOpenChange: PropTypes.func,
+  onModeChange: PropTypes.func
+});
+
+export default Sidebar;

package/es/Sidebar2/Sidebar.less

@@ -0,0 +1,153 @@
+@import '../variables.less';
+
+@arrow-width: 30px;
+@item-height: 40px;
+@shousuo-height: 52px;
+
+.@{cloudlink-prefix}-Sidebar2 {
+  width: @sidebar-width;
+  height: inherit;
+  min-height: 101px;
+  background: #162C55;
+  position: relative;
+  transition: width 0.3s;
+  white-space: nowrap;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #3AA7F7;
+    border-radius: 6px;
+  }
+
+  &[data-mode='collapse'] {
+    width: 0;
+
+    > [data-role='shousuo'] {
+      transform-origin: 100% 50%;
+      transform: scaleX(-1);
+    }
+  }
+
+  > :first-child {
+    line-height: 60px;
+    border-bottom: 1px solid #999;
+    color: white;
+    font-size: 14px;
+    overflow: hidden;
+
+    > :first-child {
+      display: inline-block;
+      width: @arrow-width;
+    }
+  }
+
+  > ul {
+    padding-left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: ~'calc(100% - 61px)';
+
+    a {
+      color: white !important;
+    }
+
+    > li > ul {
+      padding-left: 0;
+    }
+  }
+
+  > [data-role='shousuo'] {
+    position: absolute;
+    z-index: 1;
+    top: ~'calc(50% - 25px)';
+    right: 0;
+    width: 20px;
+    height: @shousuo-height;
+    cursor: pointer;
+    overflow: hidden;
+
+    > div {
+      transform: translateX(5px);
+      transition: transform 0.1s;
+
+      &:hover {
+        transform: translateX(0);
+      }
+
+      > div {
+        line-height: @shousuo-height;
+        text-align: right;
+        font-size: 16px;
+      }
+
+      > i {
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        height: @shousuo-height;
+        border-width: 10px 20px 10px 0;
+        border-color: transparent #dde7ff;
+        border-style: solid;
+      }
+    }
+  }
+
+  li {
+    line-height: @item-height;
+    overflow: hidden;
+    transition: height 0.3s;
+
+    > a {
+      display: block;
+      font-size: 12px;
+      transition: none;
+
+      &:hover {
+        color: @primary-color;
+      }
+
+      &[data-select='true'] {
+        background: @primary-color;
+      }
+    }
+  }
+
+  [data-role='parent-item'] {
+    > :first-child {
+      display: inline-block;
+      line-height: @item-height;
+      width: 30px;
+      text-align: center;
+
+      > * {
+        transition: transform 0.3s;
+        transform-origin: 50% 30%;
+
+        &[data-open='true'] {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+
+  [data-role='child-item'] {
+    padding-left: @arrow-width;
+
+    > :first-child::before {
+      display: inline-block;
+      content: '\2022';
+      margin-right: 2px;
+    }
+
+    .unreadTotal{
+      color: orangered;
+      float: right;
+      position: absolute;
+      right: 15px;
+    }
+  }
+}

package/es/Sidebar2/package.json

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