@alicloud/console-base-rc-side-panel 1.1.11 → 1.1.12-beta.0

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

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QUICK_TOP_VISIBLE_OFFSET = exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
+exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
 var BODY_CLASS_WITH_SIDE_PANEL = exports.BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
-var QUICK_TOP_VISIBLE_OFFSET = exports.QUICK_TOP_VISIBLE_OFFSET = 200;
 var DEFAULT_CONTEXT_STATE = exports.DEFAULT_CONTEXT_STATE = {
-  collapsed: false,
-  quickTopVisible: false
+  collapsed: true
 };

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

@@ -6,6 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.EAction = void 0;
 var EAction = exports.EAction = /*#__PURE__*/function (EAction) {
   EAction[EAction["SET_COLLAPSED"] = 0] = "SET_COLLAPSED";
-  EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 1] = "SET_QUICK_TOP_VISIBLE";
   return EAction;
 }({});

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

@@ -22,12 +22,6 @@ Object.defineProperty(exports, "useHandleCollapsedChange", {
     return _useHandleCollapsedChange.default;
   }
 });
-Object.defineProperty(exports, "useHandleGoTop", {
-  enumerable: true,
-  get: function get() {
-    return _useHandleGoTop.default;
-  }
-});
 Object.defineProperty(exports, "useItemsBottom", {
   enumerable: true,
   get: function get() {
@@ -46,12 +40,6 @@ Object.defineProperty(exports, "useProps", {
     return _useModelProps.default;
   }
 });
-Object.defineProperty(exports, "useQuickTop", {
-  enumerable: true,
-  get: function get() {
-    return _useQuickTop.default;
-  }
-});
 Object.defineProperty(exports, "useVisible", {
   enumerable: true,
   get: function get() {
@@ -64,6 +52,4 @@ var _useVisible = _interopRequireDefault(require("./use-visible"));
 var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
 var _useItemsTop = _interopRequireDefault(require("./use-items-top"));
 var _useItemsBottom = _interopRequireDefault(require("./use-items-bottom"));
-var _useQuickTop = _interopRequireDefault(require("./use-quick-top"));
-var _useHandleCollapsedChange = _interopRequireDefault(require("./use-handle-collapsed-change"));
-var _useHandleGoTop = _interopRequireDefault(require("./use-handle-go-top"));
+var _useHandleCollapsedChange = _interopRequireDefault(require("./use-handle-collapsed-change"));

package/build/cjs/model/hook/use-effects.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useEffects;
 var _useEffectToggleBodyClass = _interopRequireDefault(require("./use-effect-toggle-body-class"));
-var _useEffectQuickTop = _interopRequireDefault(require("./use-effect-quick-top"));
 function useEffects() {
   (0, _useEffectToggleBodyClass.default)();
-  (0, _useEffectQuickTop.default)();
 }

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

@@ -7,13 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = reducer;
 var _enum = require("../enum");
 var _reduceSetCollapsed = _interopRequireDefault(require("./reduce-set-collapsed"));
-var _reduceSetQuickTopVisible = _interopRequireDefault(require("./reduce-set-quick-top-visible"));
 function reducer(state, action) {
   switch (action.type) {
     case _enum.EAction.SET_COLLAPSED:
       return (0, _reduceSetCollapsed.default)(state, action.payload);
-    case _enum.EAction.SET_QUICK_TOP_VISIBLE:
-      return (0, _reduceSetQuickTopVisible.default)(state, action.payload);
     default:
       return state;
   }

package/build/cjs/ui/index.js

@@ -18,8 +18,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ScAside = _styledComponents.default.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;box-shadow:none;", "  ", " ", " .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.mixinBorderTertiaryLeft, function (props) {
-  return props.$collapsed ? (0, _styledComponents.css)(["transform:translateX(101%);border:none !important;"]) : _consoleBaseTheme.mixinBorderTertiaryLeft;
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;box-shadow:none;", " ", " ", " .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.mixinBorderTertiaryLeft, function (_ref) {
+  var $collapsed = _ref.$collapsed;
+  return $collapsed ? (0, _styledComponents.css)(["transform:translateX(101%);border:none !important;"]) : _consoleBaseTheme.mixinBorderTertiaryLeft;
 }, _consoleBaseTheme.SIZE.HEIGHT_TOP_NAV);
 function Ui() {
   var visible = (0, _model.useVisible)();
@@ -27,5 +28,5 @@ function Ui() {
   return visible ? /*#__PURE__*/_react.default.createElement(ScAside, (0, _defineProperty2.default)({
     $collapsed: collapsed,
     className: 'J_fixed_right_will_be_pushed_left'
-  }, _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;
+  }, _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.CollapseAside, null), /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseToggle, null)) : null;
 }

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,40 +8,27 @@ 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", "onlyShowIcon"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _consoleBaseRcButton = require("@alicloud/console-base-rc-button");
+var _consoleBaseRcEasyIcon = require("@alicloud/console-base-rc-easy-icon");
+var _styles = require("./styles");
+var _excluded = ["title", "icon", "onlyShowIcon", "active"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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);
-var ScButtonIcon = (0, _styledComponents.default)(_consoleBaseRcButton.default).withConfig({
-  componentId: "sc-titsgb-1"
-})(["border-radius:", "px;width:", "px;height:", "px;line-height:", "px;svg,img{display:inline-block;width:", "px;height:", "px;vertical-align:middle;}"], _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON);
-
 /**
  * 工具的按钮
  */
 function SidePanelItemButton(_ref) {
   var title = _ref.title,
+    icon = _ref.icon,
     onlyShowIcon = _ref.onlyShowIcon,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return onlyShowIcon ? /*#__PURE__*/_react.default.createElement(ScButtonIcon, _objectSpread(_objectSpread({
-    "aria-label": title
-  }, props), {}, {
-    size: _consoleBaseRcButton.ButtonSize.NONE,
-    theme: _consoleBaseRcButton.ButtonTheme.NONE
-  })) : /*#__PURE__*/_react.default.createElement(ScButton, _objectSpread(_objectSpread({
-    "aria-label": title
-  }, props), {}, {
+    active = _ref.active,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_styles.ScButton, _objectSpread({
     size: _consoleBaseRcButton.ButtonSize.NONE,
-    theme: _consoleBaseRcButton.ButtonTheme.NONE
-  }));
+    theme: _consoleBaseRcButton.ButtonTheme.NONE,
+    'aria-label': title,
+    label: (0, _consoleBaseRcEasyIcon.renderEasyIcon)(icon) || '',
+    $onlyShowIcon: onlyShowIcon || false,
+    $active: active || false
+  }, rest));
 }

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScButton = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _consoleBaseRcButton = _interopRequireDefault(require("@alicloud/console-base-rc-button"));
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _const = require("../../const");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ScButton = exports.ScButton = (0, _styledComponents.default)(_consoleBaseRcButton.default).withConfig({
+  componentId: "sc-1fk7xls-0"
+})(["width:", "px;height:", "px;line-height:", "px;border-radius:", "px;", " ", " i{font-size:", "px;}svg,img{display:inline-block;width:", "px;height:", "px;vertical-align:middle;}"], _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON, _const.SIZE_BUTTON, function (_ref) {
+  var $onlyShowIcon = _ref.$onlyShowIcon;
+  return !$onlyShowIcon ? (0, _styledComponents.css)(["", " ", " &:hover{", "}a:link&,a:visited&{", "}"], _consoleBaseTheme.mixinBgSecondaryFade, _consoleBaseTheme.mixinTextSecondary, _consoleBaseTheme.mixinBgTertiaryFade, _consoleBaseTheme.mixinTextSecondary) : null;
+}, function (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? (0, _styledComponents.css)(["", " ", ""], _consoleBaseTheme.mixinBgTertiaryFade, _consoleBaseTheme.mixinShadowSDown) : null;
+}, function (_ref3) {
+  var $onlyShowIcon = _ref3.$onlyShowIcon;
+  return !$onlyShowIcon ? _const.SIZE_BUTTON_ICON : _const.SIZE_BUTTON;
+}, function (_ref4) {
+  var $onlyShowIcon = _ref4.$onlyShowIcon;
+  return !$onlyShowIcon ? _const.SIZE_BUTTON_ICON : _const.SIZE_BUTTON;
+}, function (_ref5) {
+  var $onlyShowIcon = _ref5.$onlyShowIcon;
+  return !$onlyShowIcon ? _const.SIZE_BUTTON_ICON : _const.SIZE_BUTTON;
+});

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

@@ -12,4 +12,4 @@ var _const = require("../../const");
  */
 var _default = exports.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);
+})(["display:flex;align-items:center;justify-content:center;position:relative;width:", "px;height:", "px;"], _const.SIZE_BUTTON_WRAP_WIDTH, _const.SIZE_BUTTON_WRAP_HEIGHT);

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CollapseAside;
+var _react = _interopRequireWildcard(require("react"));
+var _model = require("../../../model");
+var _styles = require("./styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function CollapseAside() {
+  var collapseAsideRef = (0, _react.useRef)(null);
+  var _useProps = (0, _model.useProps)(),
+    collapsedAside = _useProps.collapsedAside;
+  var collapsed = (0, _model.useCollapsed)();
+  return collapsedAside ? /*#__PURE__*/_react.default.createElement(_styles.ScCSSTransition, {
+    nodeRef: collapseAsideRef,
+    in: collapsed,
+    classNames: "cb-collapse-aside",
+    timeout: 200,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseAsideWrap, {
+    ref: collapseAsideRef
+  }, collapsedAside)) : null;
+}

package/build/cjs/ui/rc-container/collapse-aside/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScCollapseAsideWrap = exports.ScCSSTransition = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactTransitionGroup = require("react-transition-group");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var KfZoomBigIn = (0, _styledComponents.keyframes)(["0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}"]);
+var ScCSSTransition = exports.ScCSSTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
+  componentId: "sc-1slnea7-0"
+})(["&.", "{animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-duration:", ";animation-fill-mode:both;animation-play-state:paused;}&.", "{animation-name:", ";animation-play-state:running;}&.", "{pointer-events:none;animation-timing-function:cubic-bezier(0.78,0.14,0.15,0.86);animation-duration:", ";animation-fill-mode:both;animation-play-state:paused;}&.", "{animation-name:", ";animation-direction:reverse;animation-play-state:running;}"], function (_ref) {
+  var classNames = _ref.classNames;
+  return "".concat(classNames, "-enter");
+}, function (_ref2) {
+  var timeout = _ref2.timeout;
+  return "".concat(timeout, "ms");
+}, function (_ref3) {
+  var classNames = _ref3.classNames;
+  return "".concat(classNames, "-enter-active");
+}, KfZoomBigIn, function (_ref4) {
+  var classNames = _ref4.classNames;
+  return "".concat(classNames, "-exit");
+}, function (_ref5) {
+  var timeout = _ref5.timeout;
+  return "".concat(timeout, "ms");
+}, function (_ref6) {
+  var classNames = _ref6.classNames;
+  return "".concat(classNames, "-exit-active");
+}, KfZoomBigIn);
+var ScCollapseAsideWrap = exports.ScCollapseAsideWrap = _styledComponents.default.div.withConfig({
+  componentId: "sc-1slnea7-1"
+})(["position:absolute;right:100%;bottom:50px;margin-right:10px;"]);

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

@@ -8,87 +8,59 @@ Object.defineProperty(exports, "__esModule", {
 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 _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
 var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
 var _consoleBaseConfEnv = _interopRequireDefault(require("@alicloud/console-base-conf-env"));
 var _consoleBaseConfLocale = _interopRequireWildcard(require("@alicloud/console-base-conf-locale"));
-var _rc = require("../../rc");
 var _model = require("../../../model");
-var _const = require("../../const");
+var _styles = require("./styles");
+var _rc = require("../../rc");
 var _intl = _interopRequireDefault(require("../../intl"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * 站点是否处于简体中文环境下，即国内站
- */
-var isSimpleCN = function isSimpleCN() {
-  return _consoleBaseConfEnv.default.SITE === 'CN' && _consoleBaseConfLocale.default.LANGUAGE === _consoleBaseConfLocale.ELanguage.ZH;
-};
-var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-100%);"]);
-var ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
-  componentId: "sc-15z8r94-0"
-})(["position:absolute;right:0;bottom:", "px;flex-direction:column;", ""], _const.SPACING_Y, function (props) {
-  if (!props.collapsed) {
-    return null;
-  }
-  if (isSimpleCN()) {
-    return cssToggleIn;
-  }
-  return props.hovered ? cssToggleIn : (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;
-}, isSimpleCN() ? null : function (props) {
-  return props.collapsed && !props.hovered ? (0, _styledComponents.css)(["padding-left:4px;text-align:left;"]) : null;
-});
 function PanelToggle() {
-  var _useProps = (0, _model.useProps)(),
-    collapsedAside = _useProps.collapsedAside;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
   var collapsed = (0, _model.useCollapsed)();
   var unread = (0, _model.useItemsTop)().some(function (v) {
     return v.unread;
   });
   var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
   var title = (0, _intl.default)(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  return /*#__PURE__*/_react.default.createElement(ScCollapseToggle, {
-    hovered: isHovered,
-    collapsed: collapsed,
+  // 站点是否处于简体中文环境下，即国内站
+  var isSimpleCN = _consoleBaseConfEnv.default.SITE === 'CN' && _consoleBaseConfLocale.default.LANGUAGE === _consoleBaseConfLocale.ELanguage.ZH;
+  return /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleWrap, null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
+    title: title,
+    placement: "left",
+    destroyTooltipOnHide: true,
+    fixed: true,
+    overlayStyle: collapsed ? {
+      transform: 'translateX(10px)'
+    } : {}
+  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggle, {
+    $hovered: isHovered,
+    $collapsed: collapsed,
+    $isSimpleCN: isSimpleCN,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
-  }, collapsedAside ? collapsedAside : null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
-    title: title,
-    placement: "left",
-    mouseEnterDelay: collapsed ? 200 : 0 // 收起状态下 hover 时，需等待动画结束后再显示提示框，避免位置错误
-    ,
-    destroyTooltipOnHide: true,
-    fixed: true,
-    overlayStyle: collapsed ? {} : {
-      transform: 'translateX(-10px)'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ScCollapseToggleButton, {
-    hovered: isHovered,
-    collapsed: collapsed,
-    active: collapsed,
+  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleButton, {
     title: title,
-    label: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
+    icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
       type: "angle-right",
-      rotate: collapsed ? 180 : undefined
+      rotate: collapsed ? 180 : 0
     }),
-    onClick: handleToggleCollapsed
-  }))), collapsed && unread ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
+    onClick: handleToggleCollapsed,
+    $collapsed: collapsed,
+    $isSimpleCN: isSimpleCN,
+    $hovered: isHovered
+  }), collapsed && unread ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
     unread: true,
-    alignLeft: !isHovered && !isSimpleCN()
-  }) : null);
+    alignLeft: !isSimpleCN && !isHovered
+  }) : null)));
 }

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScCollapseToggleWrap = exports.ScCollapseToggleButton = exports.ScCollapseToggle = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _rc = require("../../rc");
+var _const = require("../../const");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ScCollapseToggleWrap = exports.ScCollapseToggleWrap = _styledComponents.default.div.withConfig({
+  componentId: "sc-xm41v7-0"
+})(["position:absolute;right:0;bottom:", "px;"], _const.SPACING_Y);
+var cssToggleNone = (0, _styledComponents.css)(["transform:translateX(0);"]);
+var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-100%);"]);
+var cssToggleOut = (0, _styledComponents.css)(["transform:translateX(-50%);"]);
+var ScCollapseToggle = exports.ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
+  componentId: "sc-xm41v7-1"
+})(["transition:transform 250ms ease-in-out 0s;", ""], function (_ref) {
+  var $collapsed = _ref.$collapsed,
+    $isSimpleCN = _ref.$isSimpleCN,
+    $hovered = _ref.$hovered;
+  if (!$collapsed) {
+    return cssToggleNone;
+  }
+  return $isSimpleCN || $hovered ? cssToggleIn : cssToggleOut;
+});
+var collapsedStyles = (0, _styledComponents.css)(["&,&:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite);
+var nonSimpleCnPadding = (0, _styledComponents.css)(["padding-left:4px;text-align:left;"]);
+var ScCollapseToggleButton = exports.ScCollapseToggleButton = (0, _styledComponents.default)(_rc.SidePanelItemButton).withConfig({
+  componentId: "sc-xm41v7-2"
+})(["", " ", ""], function (_ref2) {
+  var $collapsed = _ref2.$collapsed;
+  return $collapsed && collapsedStyles;
+}, function (_ref3) {
+  var $collapsed = _ref3.$collapsed,
+    $isSimpleCN = _ref3.$isSimpleCN,
+    $hovered = _ref3.$hovered;
+  return $collapsed && !$isSimpleCN && !$hovered && nonSimpleCnPadding;
+});

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

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CollapseAside", {
+  enumerable: true,
+  get: function get() {
+    return _collapseAside.default;
+  }
+});
 Object.defineProperty(exports, "CollapseToggle", {
   enumerable: true,
   get: function get() {
@@ -13,15 +19,15 @@ Object.defineProperty(exports, "CollapseToggle", {
 Object.defineProperty(exports, "ItemsBottom", {
   enumerable: true,
   get: function get() {
-    return _itemsBottom.default;
+    return _items.ItemsBottom;
   }
 });
 Object.defineProperty(exports, "ItemsTop", {
   enumerable: true,
   get: function get() {
-    return _itemsTop.default;
+    return _items.ItemsTop;
   }
 });
-var _itemsTop = _interopRequireDefault(require("./items-top"));
-var _itemsBottom = _interopRequireDefault(require("./items-bottom"));
-var _collapseToggle = _interopRequireDefault(require("./collapse-toggle"));
+var _items = require("./items");
+var _collapseToggle = _interopRequireDefault(require("./collapse-toggle"));
+var _collapseAside = _interopRequireDefault(require("./collapse-aside"));

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

@@ -7,51 +7,86 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Item;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _consoleBaseRcEasyIcon = require("@alicloud/console-base-rc-easy-icon");
 var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
 var _consoleBaseRcHtmlTrusted = _interopRequireDefault(require("@alicloud/console-base-rc-html-trusted"));
+var _model = require("../../../model");
 var _rc = require("../../rc");
-var _excluded = ["id", "className", "style", "active", "title", "icon", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipOptions", "onlyShowIcon", "onClick", "onActiveChange"];
+var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function Item(_ref) {
-  var id = _ref.id,
-    className = _ref.className,
-    style = _ref.style,
-    active = _ref.active,
-    title = _ref.title,
-    icon = _ref.icon,
+  var title = _ref.title,
     unread = _ref.unread,
     mark = _ref.mark,
     tooltip = _ref.tooltip,
     tooltipAsHtml = _ref.tooltipAsHtml,
     tooltipOptions = _ref.tooltipOptions,
-    onlyShowIcon = _ref.onlyShowIcon,
-    onClick = _ref.onClick,
+    active = _ref.active,
     onActiveChange = _ref.onActiveChange,
+    onClick = _ref.onClick,
+    id = _ref.id,
+    className = _ref.className,
+    style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var handleClick = (0, _react.useCallback)(function (e) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  var collapsed = (0, _model.useCollapsed)();
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    formatTitle = _useState2[0],
+    setFormatTitle = _useState2[1];
+  var _useState3 = (0, _react.useState)(tooltipOptions),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    formatTooltipOptions = _useState4[0],
+    setFormatTooltipOptions = _useState4[1];
+  var handleClick = (0, _react.useCallback)(function (event) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
-  }, [active, onClick, onActiveChange]);
+  }, [onClick, onActiveChange, active]);
+
+  // 处理复杂 title
+  (0, _react.useEffect)(function () {
+    var formatTitle = tooltip || title;
+    if (tooltipAsHtml && typeof tooltip === 'string') {
+      formatTitle = /*#__PURE__*/_react.default.createElement(_consoleBaseRcHtmlTrusted.default, {
+        text: tooltip
+      });
+    }
+    setFormatTitle(formatTitle);
+  }, [tooltip, title, tooltipAsHtml]);
+
+  // 侧边栏收起时，内部弹窗需全部关闭
+  (0, _react.useEffect)(function () {
+    var formatTooltipOptions = _objectSpread({}, tooltipOptions);
+    if (collapsed) {
+      if (formatTooltipOptions.defaultOpen) {
+        formatTooltipOptions.defaultOpen = false;
+      }
+      if (formatTooltipOptions.open) {
+        formatTooltipOptions.open = false;
+      }
+      if (formatTooltipOptions.onOpenChange && typeof formatTooltipOptions.onOpenChange === 'function') {
+        formatTooltipOptions.onOpenChange(false);
+      }
+    }
+    setFormatTooltipOptions(formatTooltipOptions);
+  }, [tooltipOptions, collapsed]);
   return /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, (0, _extends2.default)({
-    title: tooltipAsHtml && typeof tooltip === 'string' ? /*#__PURE__*/_react.default.createElement(_consoleBaseRcHtmlTrusted.default, {
-      text: tooltip
-    }) : tooltip || title,
+    title: formatTitle,
     placement: "left",
     destroyTooltipOnHide: true,
     fixed: true
-  }, tooltipOptions), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
+  }, formatTooltipOptions), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
     id: id,
     className: className,
     style: style
   }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, (0, _extends2.default)({
-    active: active,
     title: title,
-    label: (0, _consoleBaseRcEasyIcon.renderEasyIcon)(icon) || title,
-    onlyShowIcon: onlyShowIcon,
+    active: active,
     onClick: handleClick
   }, rest)), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
     unread: unread,