cloud-b2b 1.1.52 → 1.1.53

package/es/Sidebar2/Sidebar.js

@@ -0,0 +1,165 @@
+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: variables('Sidebar2').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;