@alicloud/console-base-rc-side-panel 1.0.0

package/build/cjs/model/types/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _common = require("./common");
+Object.keys(_common).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _common[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _common[key];
+    }
+  });
+});
+var _props = require("./props");
+Object.keys(_props).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _props[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _props[key];
+    }
+  });
+});
+var _state = require("./state");
+Object.keys(_state).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _state[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _state[key];
+    }
+  });
+});
+var _action = require("./action");
+Object.keys(_action).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _action[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _action[key];
+    }
+  });
+});
+var _context = require("./context");
+Object.keys(_context).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _context[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _context[key];
+    }
+  });
+});

package/build/cjs/model/types/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/build/cjs/model/types/state.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/build/cjs/model/util/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "toggleBodyClass", {
+  enumerable: true,
+  get: function get() {
+    return _toggleBodyClass.default;
+  }
+});
+var _toggleBodyClass = _interopRequireDefault(require("./toggle-body-class"));

package/build/cjs/model/util/toggle-body-class.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = toggleBodyClass;
+var _mereDom = require("@alicloud/mere-dom");
+var _const = require("../const");
+function toggleBodyClass() {
+  var yes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  if (yes) {
+    (0, _mereDom.addClass)(document.body, _const.BODY_CLASS_WITH_SIDE_PANEL);
+  } else {
+    (0, _mereDom.removeClass)(document.body, _const.BODY_CLASS_WITH_SIDE_PANEL);
+  }
+}

package/build/cjs/ui/const/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING_Y = exports.SPACING_X = exports.SIZE_BUTTON_WRAP_WIDTH = exports.SIZE_BUTTON_WRAP_HEIGHT = exports.SIZE_BUTTON_ICON = exports.SIZE_BUTTON = exports.DATA_KEY_SIDE_PANEL_ITEM = exports.DATA_KEY_J = void 0;
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var SPACING_X = 10; // 圆形按钮与条状 Panel 的水平间隙
+exports.SPACING_X = SPACING_X;
+var SPACING_Y = 6;
+exports.SPACING_Y = SPACING_Y;
+var SIZE_BUTTON = _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL - SPACING_X * 2;
+exports.SIZE_BUTTON = SIZE_BUTTON;
+var SIZE_BUTTON_ICON = SIZE_BUTTON * 0.5;
+exports.SIZE_BUTTON_ICON = SIZE_BUTTON_ICON;
+var SIZE_BUTTON_WRAP_WIDTH = _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL;
+exports.SIZE_BUTTON_WRAP_WIDTH = SIZE_BUTTON_WRAP_WIDTH;
+var SIZE_BUTTON_WRAP_HEIGHT = SIZE_BUTTON + 2 * SPACING_Y;
+exports.SIZE_BUTTON_WRAP_HEIGHT = SIZE_BUTTON_WRAP_HEIGHT;
+var DATA_KEY_SIDE_PANEL_ITEM = 'data-console-base-side-panel-item';
+
+// 给应用一些属性钩子，不需要值（所有 ConsoleBase 下的组件，钩子属性的规范是 `data-j-[组件名]-xx`）
+// 不要随意改
+exports.DATA_KEY_SIDE_PANEL_ITEM = DATA_KEY_SIDE_PANEL_ITEM;
+var DATA_KEY_J = 'data-j-side-panel';
+exports.DATA_KEY_J = DATA_KEY_J;

package/build/cjs/ui/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Ui;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _model = require("../model");
+var _const = require("./const");
+var _rc = require("./rc");
+var _rcContainer = require("./rc-container");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ScUi = (0, _styledComponents.default)(_rc.Aside).withConfig({
+  componentId: "sc-1ok6knf-0"
+})(["", ""], function (props) {
+  return props.collapsed ? (0, _styledComponents.css)(["transform:translateX(100%);"]) : null;
+});
+function Ui() {
+  var visible = (0, _model.useVisible)();
+  var collapsed = (0, _model.useCollapsed)();
+  return visible ? /*#__PURE__*/_react.default.createElement(ScUi, (0, _defineProperty2.default)({
+    collapsed: collapsed
+  }, _const.DATA_KEY_J, ''), /*#__PURE__*/_react.default.createElement(_rc.GlobalStyleOnBody, null), /*#__PURE__*/_react.default.createElement(_rcContainer.ItemsTop, null), /*#__PURE__*/_react.default.createElement(_rcContainer.ItemsBottom, null), /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseToggle, null)) : null;
+}

package/build/cjs/ui/intl/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _consoleBaseIntlFactoryBasic = _interopRequireDefault(require("@alicloud/console-base-intl-factory-basic"));
+var _enUs = _interopRequireDefault(require("./locales/en-us"));
+var _zhCn = _interopRequireDefault(require("./locales/zh-cn"));
+var _zhTw = _interopRequireDefault(require("./locales/zh-tw"));
+var _jaJp = _interopRequireDefault(require("./locales/ja-jp"));
+var _default = (0, _consoleBaseIntlFactoryBasic.default)({
+  'en-US': _enUs.default,
+  'zh-CN': _zhCn.default,
+  'zh-TW': _zhTw.default,
+  'ja-JP': _jaJp.default
+});
+exports.default = _default;

package/build/cjs/ui/intl/locales/en-us.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  'op:toggle_visible': 'Show Side Panel',
+  'op:toggle_hidden': 'Hide Side Panel',
+  'op:back_to_top': 'Back to Top'
+};
+exports.default = _default;

package/build/cjs/ui/intl/locales/ja-jp.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  'op:toggle_visible': 'サイドバーを表示',
+  'op:toggle_hidden': 'サイドバーを隠す',
+  'op:back_to_top': 'トップに戻る'
+};
+exports.default = _default;

package/build/cjs/ui/intl/locales/zh-cn.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  'op:toggle_visible': '显示侧边栏',
+  'op:toggle_hidden': '隐藏侧边栏',
+  'op:back_to_top': '返回顶部'
+};
+exports.default = _default;

package/build/cjs/ui/intl/locales/zh-tw.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  'op:toggle_visible': '展示側邊欄',
+  'op:toggle_hidden': '隱藏側邊欄',
+  'op:back_to_top': '返回頂部'
+};
+exports.default = _default;

package/build/cjs/ui/rc/aside/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _const = require("../../const");
+var _default = _styledComponents.default.aside.withConfig({
+  componentId: "sc-1e5hmz-0"
+})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:all ease-in-out 250ms;", " ", " .hasTopbar &{top:", "px;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _const.SIZE_BUTTON_WRAP_HEIGHT + _const.SPACING_Y, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.mixinBgPrimary, _consoleBaseTheme.mixinShadowSLeft, _consoleBaseTheme.SIZE.HEIGHT_TOP_NAV);
+exports.default = _default;

package/build/cjs/ui/rc/global-style-on-body/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = GlobalStyleOnBody;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = require("styled-components");
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _model = require("../../../model");
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(["body.", "{padding-right:", "px;transition:padding-right ease-in-out 250ms;.viewFramework-body{right:", "px;left:0;z-index:", ";width:auto !important;}}"], _model.BODY_CLASS_WITH_SIDE_PANEL, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.Z_INDEX.SIDE_PANEL - 1);
+function GlobalStyleOnBody() {
+  return /*#__PURE__*/_react.default.createElement(GlobalStyle, null);
+}

package/build/cjs/ui/rc/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Aside", {
+  enumerable: true,
+  get: function get() {
+    return _aside.default;
+  }
+});
+Object.defineProperty(exports, "GlobalStyleOnBody", {
+  enumerable: true,
+  get: function get() {
+    return _globalStyleOnBody.default;
+  }
+});
+Object.defineProperty(exports, "SidePanelItemBadge", {
+  enumerable: true,
+  get: function get() {
+    return _sidePanelItemBadge.default;
+  }
+});
+Object.defineProperty(exports, "SidePanelItemButton", {
+  enumerable: true,
+  get: function get() {
+    return _sidePanelItemButton.default;
+  }
+});
+Object.defineProperty(exports, "SidePanelItemTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _sidePanelItemTooltip.default;
+  }
+});
+Object.defineProperty(exports, "SidePanelItemWrap", {
+  enumerable: true,
+  get: function get() {
+    return _sidePanelItemWrap.default;
+  }
+});
+var _aside = _interopRequireDefault(require("./aside"));
+var _globalStyleOnBody = _interopRequireDefault(require("./global-style-on-body"));
+var _sidePanelItemWrap = _interopRequireDefault(require("./side-panel-item-wrap"));
+var _sidePanelItemButton = _interopRequireDefault(require("./side-panel-item-button"));
+var _sidePanelItemBadge = _interopRequireDefault(require("./side-panel-item-badge"));
+var _sidePanelItemTooltip = _interopRequireDefault(require("./side-panel-item-tooltip"));

package/build/cjs/ui/rc/side-panel-item-badge/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SidePanelItemBadge;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _consoleBaseThemeScBase = require("@alicloud/console-base-theme-sc-base");
+var _consoleBaseRcMarks = _interopRequireDefault(require("@alicloud/console-base-rc-marks"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ScUnreadDot = (0, _styledComponents.default)(_consoleBaseThemeScBase.BadgeBaseDot).withConfig({
+  componentId: "sc-1isvxe9-0"
+})(["top:8px;", ""], function (props) {
+  return props.$alignLeft ? (0, _styledComponents.css)(["left:8px;"]) : (0, _styledComponents.css)(["right:8px;"]);
+});
+var ScUnreadNumber = (0, _styledComponents.default)(_consoleBaseThemeScBase.BadgeBaseNumber).withConfig({
+  componentId: "sc-1isvxe9-1"
+})(["top:4px;", ""], function (props) {
+  return props.$alignLeft ? (0, _styledComponents.css)(["left:2px;right:auto;"]) : (0, _styledComponents.css)(["right:2px;"]);
+});
+var ScMark = (0, _styledComponents.default)(_consoleBaseRcMarks.default).withConfig({
+  componentId: "sc-1isvxe9-2"
+})(["position:absolute;top:4px;", " transform:scale(0.75);"], function (props) {
+  return props.$alignLeft ? (0, _styledComponents.css)(["left:0;"]) : (0, _styledComponents.css)(["right:0;"]);
+});
+
+/**
+ * 右上角的徽标，unread 优先于 mark
+ */
+function SidePanelItemBadge(_ref) {
+  var unread = _ref.unread,
+    mark = _ref.mark,
+    alignLeft = _ref.alignLeft;
+  if (unread) {
+    if (unread === true) {
+      return /*#__PURE__*/_react.default.createElement(ScUnreadDot, {
+        $alignLeft: alignLeft
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(ScUnreadNumber, {
+      $alignLeft: alignLeft
+    }, unread < 100 ? unread : '99+');
+  }
+  if (mark === 'NEW' || mark === 'HOT') {
+    return /*#__PURE__*/_react.default.createElement(ScMark, {
+      $alignLeft: alignLeft,
+      type: mark,
+      borderRadius: true
+    });
+  }
+  return null;
+}

package/build/cjs/ui/rc/side-panel-item-button/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SidePanelItemButton;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _consoleBaseRcButton = _interopRequireWildcard(require("@alicloud/console-base-rc-button"));
+var _const = require("../../const");
+var _excluded = ["title"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ScButton = (0, _styledComponents.default)(_consoleBaseRcButton.default).withConfig({
+  componentId: "sc-titsgb-0"
+})(["border-radius:", "px;width:", "px;height:", "px;line-height:", "px;", " ", " ", " i{font-size:", "px;}svg,img{display:inline-block;width:", "px;height:", "px;vertical-align:middle;}&:hover{", "}a:link&,a:visited&{", "}"], _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON, _consoleBaseTheme.mixinBgSecondaryFade, _consoleBaseTheme.mixinTextSecondary, function (props) {
+  return props.active ? (0, _styledComponents.css)(["", " ", ""], _consoleBaseTheme.mixinBgTertiaryFade, _consoleBaseTheme.mixinShadowSDown) : null;
+}, _const.SIZE_BUTTON_ICON, _const.SIZE_BUTTON_ICON, _const.SIZE_BUTTON_ICON, _consoleBaseTheme.mixinBgTertiaryFade, _consoleBaseTheme.mixinTextSecondary);
+
+/**
+ * 工具的按钮
+ */
+function SidePanelItemButton(_ref) {
+  var title = _ref.title,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(ScButton, _objectSpread(_objectSpread({
+    'aria-label': title
+  }, props), {}, {
+    size: _consoleBaseRcButton.ButtonSize.NONE,
+    theme: _consoleBaseRcButton.ButtonTheme.NONE
+  }));
+}

package/build/cjs/ui/rc/side-panel-item-tooltip/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SidePanelItemTooltip;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _consoleBaseRcTooltip = _interopRequireWildcard(require("@alicloud/console-base-rc-tooltip"));
+var _const = require("../../const");
+var _excluded = ["visible", "align", "content"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var ScTooltip = (0, _styledComponents.default)(_consoleBaseRcTooltip.default).withConfig({
+  componentId: "sc-11m2ouk-0"
+})(["right:", "px;", " img{max-width:100%;}"], _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL - 4, function (props) {
+  switch (props.placement) {
+    case _consoleBaseRcTooltip.TooltipPlacement.LEFT_TOP:
+      return (0, _styledComponents.css)(["top:0;"]);
+    case _consoleBaseRcTooltip.TooltipPlacement.LEFT_BOTTOM:
+      return (0, _styledComponents.css)(["bottom:0;"]);
+    default:
+      return (0, _styledComponents.css)(["bottom:", "px;transform:translateY(50%);"], _const.SIZE_BUTTON_WRAP_HEIGHT * 0.5);
+  }
+});
+function getPlacement(align) {
+  switch (align) {
+    case 'top':
+      return _consoleBaseRcTooltip.TooltipPlacement.LEFT_TOP;
+    case 'bottom':
+      return _consoleBaseRcTooltip.TooltipPlacement.LEFT_BOTTOM;
+    default:
+      return _consoleBaseRcTooltip.TooltipPlacement.LEFT;
+  }
+}
+
+/**
+ * 工具按钮之外的部分（如果不是 tooltip 则期望它是 createPortal 出去的）
+ */
+function SidePanelItemTooltip(_ref) {
+  var visible = _ref.visible,
+    align = _ref.align,
+    content = _ref.content,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(ScTooltip, _objectSpread({
+    visible: visible,
+    placement: getPlacement(align),
+    arrowOffset: _const.SIZE_BUTTON_WRAP_HEIGHT * 0.5,
+    content: content
+  }, props));
+}

package/build/cjs/ui/rc/side-panel-item-wrap/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _const = require("../../const");
+/**
+ * 工具的外层包裹
+ */
+var _default = _styledComponents.default.div.withConfig({
+  componentId: "sc-3r2cly-0"
+})(["display:flex;align-items:center;justify-content:center;position:relative;width:", "px;height:", "px;transition:all ease-in-out 250ms;"], _const.SIZE_BUTTON_WRAP_WIDTH, _const.SIZE_BUTTON_WRAP_HEIGHT);
+exports.default = _default;

package/build/cjs/ui/rc-container/collapse-toggle/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PanelToggle;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _reactHookMouseEnterLeave = _interopRequireDefault(require("@alicloud/react-hook-mouse-enter-leave"));
+var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
+var _const = require("../../const");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _model = require("../../../model");
+var _rc = require("../../rc");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
+  componentId: "sc-15z8r94-0"
+})(["position:absolute;right:0;bottom:", "px;", ""], _const.SPACING_Y, function (props) {
+  if (!props.collapsed) {
+    return null;
+  }
+  return props.hovered ? (0, _styledComponents.css)(["transform:translateX(-100%);"]) : (0, _styledComponents.css)(["transform:translateX(-50%);"]);
+});
+var ScCollapseToggleButton = (0, _styledComponents.default)(_rc.SidePanelItemButton).withConfig({
+  componentId: "sc-15z8r94-1"
+})(["", " ", ""], function (props) {
+  return props.active ? (0, _styledComponents.css)(["", " ", " &:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite, _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite) : null;
+}, function (props) {
+  return props.collapsed && !props.hovered ? (0, _styledComponents.css)(["padding-left:4px;;text-align:left;"]) : null;
+});
+function PanelToggle() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    stateHovered = _useState2[0],
+    setStateHovered = _useState2[1];
+  var collapsed = (0, _model.useCollapsed)();
+  var unread = (0, _model.useItemsTop)().some(function (v) {
+    return v.unread;
+  });
+  var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
+  var _useMouseEnterLeave = (0, _reactHookMouseEnterLeave.default)((0, _react.useCallback)(function () {
+      setStateHovered(true);
+    }, [setStateHovered]), (0, _react.useCallback)(function () {
+      setStateHovered(false);
+    }, [setStateHovered])),
+    _useMouseEnterLeave2 = (0, _slicedToArray2.default)(_useMouseEnterLeave, 2),
+    handleMouseEnter = _useMouseEnterLeave2[0],
+    handleMouseLeave = _useMouseEnterLeave2[1];
+  var title = (0, _intl.default)(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
+  return /*#__PURE__*/_react.default.createElement(ScCollapseToggle, {
+    hovered: stateHovered,
+    collapsed: collapsed,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(ScCollapseToggleButton, {
+    hovered: stateHovered,
+    collapsed: collapsed,
+    active: collapsed,
+    title: title,
+    label: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
+      type: "angle-right",
+      rotate: collapsed ? 180 : undefined
+    }),
+    onMouseEnter: handleMouseEnter,
+    onClick: handleToggleCollapsed
+  }), collapsed && unread ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
+    unread: true,
+    alignLeft: !stateHovered
+  }) : null, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemTooltip, {
+    visible: stateHovered,
+    content: title
+  }));
+}

package/build/cjs/ui/rc-container/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CollapseToggle", {
+  enumerable: true,
+  get: function get() {
+    return _collapseToggle.default;
+  }
+});
+Object.defineProperty(exports, "ItemsBottom", {
+  enumerable: true,
+  get: function get() {
+    return _itemsBottom.default;
+  }
+});
+Object.defineProperty(exports, "ItemsTop", {
+  enumerable: true,
+  get: function get() {
+    return _itemsTop.default;
+  }
+});
+var _itemsTop = _interopRequireDefault(require("./items-top"));
+var _itemsBottom = _interopRequireDefault(require("./items-bottom"));
+var _collapseToggle = _interopRequireDefault(require("./collapse-toggle"));