cloud-b2b 1.0.0 → 1.0.3

package/lib/Sidebar/Sidebar.js

@@ -0,0 +1,186 @@
+"use strict";
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _menu = _interopRequireDefault(require("antd/lib/menu"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Link = _interopRequireDefault(require("../Link"));
+
+var _SuperIcon = _interopRequireDefault(require("../SuperIcon"));
+
+var _variables = _interopRequireDefault(require("../variables"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
+
+var SubMenu = _menu["default"].SubMenu;
+var MenuItem = _menu["default"].Item;
+/** 侧边栏二级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * href: 为跳转页面的url
+ */
+
+var ChildType = {
+  key: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  href: _propTypes["default"].string.isRequired
+};
+/** 侧边栏一级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * icon：条目左边图标url，大小为20*20px
+ * isFolder：为true表明有下级菜单，此时href被忽略，children存放下级菜单的信息
+ * href: isFolder为false时，为跳转页面的url，否则被忽略
+ * children：isFolder为true时，存放下级菜单的信息，否则被忽略
+ */
+
+var ItemType = {
+  key: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  icon: _propTypes["default"].string,
+  isFolder: _propTypes["default"].bool,
+  href: _propTypes["default"].string,
+  children: _propTypes["default"].arrayOf(_propTypes["default"].shape(ChildType))
+};
+/**
+ * activeKey：指定被选中的一级条目的key，不能是二级条目的key
+ * items：存放所有侧边栏条目的信息
+ * style: 样式
+ */
+
+var Sidebar = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Sidebar, _React$Component);
+
+  var _super = _createSuper(Sidebar);
+
+  function Sidebar() {
+    var _context;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(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, (0, _concat["default"])(_context = [this]).call(_context, args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onOpenChange", function (openKeys) {
+      var onOpenChange = _this.props.onOpenChange;
+
+      if (onOpenChange) {
+        onOpenChange(openKeys);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toIcon", function (type) {
+      if (type) {
+        return /*#__PURE__*/_react["default"].createElement(_SuperIcon["default"], {
+          type: type,
+          style: {
+            fontSize: 16,
+            verticalAlign: -2
+          }
+        });
+      } else {
+        return null;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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["default"].createElement("div", null, _this.toIcon(icon), title);
+
+        return /*#__PURE__*/_react["default"].createElement(SubMenu, {
+          key: key,
+          title: t
+        }, _this.toItems(children));
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(MenuItem, {
+          key: key
+        }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+          to: href,
+          title: title,
+          className: (0, _variables["default"])('Sidebar').unreadTotalLink
+        }, _this.toIcon(icon), title, unreadTotal && unreadTotal > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+          className: (0, _variables["default"])('Sidebar').unreadTotalLink.unreadTotal
+        }, unreadTotal)));
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toItems", function (items) {
+      return (0, _map["default"])(items).call(items, _this.toItem);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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: (0, _variables["default"])('Sidebar')
+      };
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Sidebar, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement(_menu["default"], this.getProps(), this.toItems(this.props.items));
+    }
+  }]);
+  return Sidebar;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(Sidebar, "propTypes", {
+  activeKey: _propTypes["default"].string.isRequired,
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape(ItemType)).isRequired,
+  style: _propTypes["default"].object
+});
+var _default = Sidebar;
+exports["default"] = _default;

package/lib/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/lib/Sidebar/package.json

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

package/lib/Sidebar2/Sidebar.js

@@ -0,0 +1,213 @@
+"use strict";
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _icon = _interopRequireDefault(require("antd/lib/icon"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Link = _interopRequireDefault(require("../Link"));
+
+var _variables = _interopRequireDefault(require("../variables"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
+
+var ITEM_HEIGHT = 40;
+/** 侧边栏二级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * href: 为跳转页面的url
+ */
+
+var ChildType = {
+  key: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  href: _propTypes["default"].string.isRequired
+};
+/** 侧边栏一级条目的类型
+ * key: 唯一标识一个条目
+ * title：条目的标题
+ * isFolder：为true表明有下级菜单，此时href被忽略，children存放下级菜单的信息
+ * href: isFolder为false时，为跳转页面的url，否则被忽略
+ * children：isFolder为true时，存放下级菜单的信息，否则被忽略
+ */
+
+var ItemType = {
+  key: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  isFolder: _propTypes["default"].bool,
+  href: _propTypes["default"].string,
+  children: _propTypes["default"].arrayOf(_propTypes["default"].shape(ChildType))
+};
+/**
+ * title: 侧边栏的标题
+ * mode: 显示模式，默认为expand(展开)
+ * activeKey：指定被选中的一级条目的key，不能是二级条目的key
+ * items：存放所有侧边栏条目的信息
+ * openKeys: 展开条目的key
+ * style: 样式
+ * onOpenChange: 展开条目信息改变时触发，原型为func(openKeys)
+ * onModeChange: 模式改变时触发，原型为func(mode)
+ */
+
+var Sidebar = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Sidebar, _React$Component);
+
+  var _super = _createSuper(Sidebar);
+
+  function Sidebar() {
+    var _context;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(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, (0, _concat["default"])(_context = [this]).call(_context, args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModeChange", function () {
+      var mode = _this.props.mode || 'expand';
+
+      _this.props.onModeChange(mode === 'expand' ? 'collapse' : 'expand');
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isSelect", function (item) {
+      return _this.props.activeKey === item.key;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isOpen", function (item) {
+      var _context2;
+
+      return (0, _includes["default"])(_context2 = _this.props.openKeys).call(_context2, item.key);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHeight", function (item) {
+      if (item.isFolder && _this.isOpen(item)) {
+        return (item.children.length + 1) * ITEM_HEIGHT;
+      } else {
+        return ITEM_HEIGHT;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "linkProps", function (item) {
+      if (item.isFolder) {
+        return {
+          title: item.title,
+          onClick: function onClick() {
+            if (_this.isOpen(item)) {
+              var _context3;
+
+              _this.props.onOpenChange((0, _filter["default"])(_context3 = _this.props.openKeys).call(_context3, function (key) {
+                return item.key !== key;
+              }));
+            } else {
+              var _context4;
+
+              _this.props.onOpenChange((0, _concat["default"])(_context4 = []).call(_context4, (0, _toConsumableArray2["default"])(_this.props.openKeys), [item.key]));
+            }
+          }
+        };
+      } else {
+        return {
+          title: item.title,
+          to: item.href,
+          'data-select': _this.isSelect(item)
+        };
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderChild", function (item, index) {
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        key: index
+      }, /*#__PURE__*/_react["default"].createElement(_Link["default"], (0, _extends2["default"])({}, _this.linkProps(item), {
+        "data-role": "child-item"
+      }), /*#__PURE__*/_react["default"].createElement("span", null, item.title), item.unreadTotal && item.unreadTotal > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+        className: s.unreadTotal
+      }, item.unreadTotal)));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderItem", function (item, index) {
+      var _context5;
+
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        key: index,
+        style: {
+          height: _this.getHeight(item)
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Link["default"], (0, _extends2["default"])({}, _this.linkProps(item), {
+        "data-role": "parent-item"
+      }), /*#__PURE__*/_react["default"].createElement("span", null, item.isFolder ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "caret-right",
+        "data-open": _this.isOpen(item)
+      }) : null), /*#__PURE__*/_react["default"].createElement("span", null, item.title)), item.isFolder && _this.isOpen(item) ? /*#__PURE__*/_react["default"].createElement("ul", null, (0, _map["default"])(_context5 = item.children).call(_context5, _this.renderChild)) : null);
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Sidebar, [{
+    key: "render",
+    value: function render() {
+      var _context6;
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _variables["default"])('Sidebar2'),
+        "data-mode": this.props.mode || 'expand'
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", null, " "), /*#__PURE__*/_react["default"].createElement("span", null, this.props.title)), /*#__PURE__*/_react["default"].createElement("ul", null, (0, _map["default"])(_context6 = this.props.items).call(_context6, this.renderItem)), !this.props.onModeChange ? null : /*#__PURE__*/_react["default"].createElement("div", {
+        "data-role": "shousuo",
+        onClick: this.onModeChange
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("i", null), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: this.props.mode === 'expand' ? 'left' : 'right'
+      })))));
+    }
+  }]);
+  return Sidebar;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(Sidebar, "propTypes", {
+  title: _propTypes["default"].string,
+  mode: _propTypes["default"].oneOf(['collapse', 'expand']),
+  activeKey: _propTypes["default"].string,
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape(ItemType)),
+  openKeys: _propTypes["default"].array,
+  style: _propTypes["default"].object,
+  onOpenChange: _propTypes["default"].func,
+  onModeChange: _propTypes["default"].func
+});
+var _default = Sidebar;
+exports["default"] = _default;

package/lib/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/lib/Sidebar2/package.json

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