@alicloud/console-base-rc-side-panel 1.1.23 → 1.1.24-beta.1

package/build/cjs/ui/index.js

@@ -1,45 +1,26 @@
 "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 _consoleBaseTheme = require("@alicloud/console-base-theme");
 var _model = require("../model");
+var _styles = require("./styles");
 var _const = require("./const");
 var _rc = require("./rc");
 var _rcContainer = require("./rc-container");
-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 ScAside = _styledComponents.default.aside.withConfig({
-  componentId: "sc-1ok6knf-0"
-})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;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);
-var ScCollapseAsideWrapper = _styledComponents.default.div.withConfig({
-  componentId: "sc-1ok6knf-1"
-})(["", ""], function (_ref2) {
-  var $collapsedAsideMini = _ref2.$collapsedAsideMini,
-    $collapsed = _ref2.$collapsed;
-  return $collapsedAsideMini && $collapsed && (0, _styledComponents.css)(["transform:scale(0.7) translateX(10%);"]);
-});
 function Ui() {
   var visible = (0, _model.useVisible)();
-  var _useProps = (0, _model.useProps)(),
-    collapsedAsideMini = _useProps.collapsedAsideMini;
   var collapsed = (0, _model.useCollapsed)();
-  return visible ? /*#__PURE__*/_react.default.createElement(ScAside, (0, _defineProperty2.default)({
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_styles.ScAside, (0, _defineProperty2.default)({
     $collapsed: collapsed,
     className: 'J_fixed_right_will_be_pushed_left',
     'data-spm': 'console-base_sidebar'
-  }, _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(ScCollapseAsideWrapper, {
-    $collapsedAsideMini: !!collapsedAsideMini,
-    $collapsed: collapsed
-  }, /*#__PURE__*/_react.default.createElement(_rcContainer.CollapseAside, 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.ItemCollapse, null));
 }

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;"], _const.SIZE_BUTTON_WRAP_WIDTH, _const.SIZE_BUTTON_WRAP_HEIGHT);
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:", "px;height:", "px;"], _const.SIZE_BUTTON_WRAP_WIDTH, _const.SIZE_BUTTON_WRAP_HEIGHT);

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

@@ -4,16 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CollapseAside", {
+Object.defineProperty(exports, "ItemCollapse", {
   enumerable: true,
   get: function get() {
-    return _collapseAside.default;
-  }
-});
-Object.defineProperty(exports, "CollapseToggle", {
-  enumerable: true,
-  get: function get() {
-    return _collapseToggle.default;
+    return _itemCollapse.default;
   }
 });
 Object.defineProperty(exports, "ItemsBottom", {
@@ -29,5 +23,4 @@ Object.defineProperty(exports, "ItemsTop", {
   }
 });
 var _items = require("./items");
-var _collapseToggle = _interopRequireDefault(require("./collapse-toggle"));
-var _collapseAside = _interopRequireDefault(require("./collapse-aside"));
+var _itemCollapse = _interopRequireDefault(require("./item-collapse"));

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-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"));
@@ -56,14 +55,15 @@ var Item = function Item(_ref) {
     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
   }, [onClick, onActiveChange, active]);
   (0, _react.useEffect)(function () {
-    if (!collapsed && tooltipDefaultOpen) {
-      openTimerRef.current = setTimeout(function () {
-        setOpen(true);
-        defaultOpenTimerRef.current = setTimeout(function () {
-          setOpen(false);
-        }, tooltipDefaultOpenDuration);
-      }, Math.max(tooltipDefaultOpenDelay, 250));
+    if (collapsed || !tooltipDefaultOpen) {
+      return;
     }
+    openTimerRef.current = setTimeout(function () {
+      setOpen(true);
+      defaultOpenTimerRef.current = setTimeout(function () {
+        setOpen(false);
+      }, tooltipDefaultOpenDuration);
+    }, Math.max(tooltipDefaultOpenDelay, 250));
 
     // 组件卸载时，主动清除计时器
     return function () {
@@ -76,23 +76,23 @@ var Item = function Item(_ref) {
         defaultOpenTimerRef.current = null;
       }
     };
-  }, []);
+  }, [collapsed, tooltipDefaultOpen, tooltipDefaultOpenDelay, tooltipDefaultOpenDuration]);
 
   // 侧边栏收起时，弹窗需关闭
   (0, _react.useEffect)(function () {
-    if (collapsed && open) {
+    if (collapsed) {
       setOpen(false);
     }
   }, [collapsed]);
-  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, _objectSpread(_objectSpread({
+    spm: 'console-base_sidebar',
     title: tooltipAsHtml && typeof tooltip === 'string' ? /*#__PURE__*/_react.default.createElement(_consoleBaseRcHtmlTrusted.default, {
       text: tooltip
     }) : tooltip || title,
     destroyTooltipOnHide: true,
-    placement: "left",
-    fixed: true,
-    spm: "console-base_sidebar"
-  }, tooltipOptions, {
+    placement: 'left',
+    fixed: true
+  }, tooltipOptions), {}, {
     overlayStyle: _objectSpread({
       marginLeft: '8px'
     }, tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.overlayStyle),
@@ -101,7 +101,7 @@ var Item = function Item(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
     id: id,
     className: className
-  }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, _objectSpread({
     buttonId: buttonId,
     buttonStyle: buttonStyle,
     title: title,

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ItemCollapse;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _reactDraggable = _interopRequireDefault(require("react-draggable"));
+var _ahooks = require("ahooks");
+var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
+var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
+var _model = require("../../../model");
+var _item = _interopRequireDefault(require("../item"));
+var _intl = _interopRequireDefault(require("../../intl"));
+var _rc = require("../../rc");
+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; }
+var CB_SIDE_PANEL_COLLAPSE_Y = 'cb-side-panel-collapse-y';
+function ItemCollapse() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useProps = (0, _model.useProps)(),
+    collapsedAside = _useProps.collapsedAside;
+  var collapsed = (0, _model.useCollapsed)();
+  var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
+  var unread = (0, _model.useItemsTop)().some(function (v) {
+    return v.unread;
+  });
+  var _useLocalStorageState = (0, _ahooks.useLocalStorageState)(CB_SIDE_PANEL_COLLAPSE_Y, {
+      defaultValue: 0,
+      deserializer: function deserializer(value) {
+        return +(value || 0);
+      }
+    }),
+    _useLocalStorageState2 = (0, _slicedToArray2.default)(_useLocalStorageState, 2),
+    draggableY = _useLocalStorageState2[0],
+    setDraggableY = _useLocalStorageState2[1];
+  if (!collapsed) {
+    return /*#__PURE__*/_react.default.createElement(_item.default, {
+      spm: 'collapse-hidden',
+      title: (0, _intl.default)('op:toggle_hidden'),
+      icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
+        type: "angle-right"
+      }),
+      tooltipOptions: {
+        mouseEnterDelay: 250
+      },
+      onClick: handleToggleCollapsed
+    });
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
+    axis: 'y',
+    position: {
+      x: 0,
+      y: +(draggableY || 0)
+    },
+    bounds: {
+      left: 0,
+      right: 0,
+      top: -500,
+      bottom: 0
+    },
+    onDrag: function onDrag() {
+      setIsDragging(true);
+    },
+    onStop: function onStop(_, data) {
+      setIsDragging(false);
+      setDraggableY(data.y);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseWrapper, {
+    $isDragging: isDragging
+  }, collapsedAside ? /*#__PURE__*/_react.default.createElement(_styles.ScCollapseAside, null, collapsedAside) : null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
+    spm: 'console-base_sidebar',
+    title: (0, _intl.default)('op:toggle_visible'),
+    placement: 'left',
+    destroyTooltipOnHide: true,
+    fixed: true,
+    mouseEnterDelay: 250,
+    overlayStyle: {
+      marginLeft: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, null, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseButton, {
+    spm: 'collapse-visible',
+    title: (0, _intl.default)('op:toggle_visible'),
+    icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
+      type: "angle-right",
+      rotate: 180
+    }),
+    onClick: handleToggleCollapsed
+  }), unread ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
+    unread: true
+  }) : null)))), document.body);
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScCollapseWrapper = exports.ScCollapseButton = exports.ScCollapseAside = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _consoleBaseTheme = require("@alicloud/console-base-theme");
+var _rc = require("../../rc");
+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 ScCollapseWrapper = exports.ScCollapseWrapper = _styledComponents.default.div.withConfig({
+  componentId: "sc-dyn7up-0"
+})(["z-index:998;position:fixed;right:0;bottom:9px;*{-webkit-user-drag:none !important;}", ""], function (_ref) {
+  var $isDragging = _ref.$isDragging;
+  return $isDragging ? (0, _styledComponents.css)(["cursor:move;*{pointer-events:none !important;}"]) : null;
+});
+var ScCollapseAside = exports.ScCollapseAside = _styledComponents.default.div.withConfig({
+  componentId: "sc-dyn7up-1"
+})(["position:relative;display:flex;align-items:center;justify-content:center;"]);
+var ScCollapseButton = exports.ScCollapseButton = (0, _styledComponents.default)(_rc.SidePanelItemButton).withConfig({
+  componentId: "sc-dyn7up-2"
+})(["&,&:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite);

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

@@ -17,6 +17,9 @@ var _item = _interopRequireDefault(require("../item"));
 var _quickTop = _interopRequireDefault(require("../quick-top"));
 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 ScHr = (0, _styledComponents.default)(_consoleBaseThemeScBase.HrBase).withConfig({
+  componentId: "sc-1h5t3jq-0"
+})(["margin:", "px 4px;"], _const.SPACING_Y);
 function Items(_ref) {
   var items = _ref.items;
   // index 为业务传入的期望展示的顺序
@@ -39,9 +42,6 @@ function ItemsTop() {
     items: items
   }));
 }
-var ScHr = (0, _styledComponents.default)(_consoleBaseThemeScBase.HrBase).withConfig({
-  componentId: "sc-1h5t3jq-0"
-})(["margin:", "px 4px;"], _const.SPACING_Y);
 function ItemsBottom() {
   var quickTop = (0, _model.useQuickTop)();
   var children = (0, _model.useChildren)();

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

@@ -7,27 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = QuickTop;
 var _react = _interopRequireDefault(require("react"));
 var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
-var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
 var _model = require("../../../model");
-var _rc = require("../../rc");
+var _item = _interopRequireDefault(require("../item"));
 var _intl = _interopRequireDefault(require("../../intl"));
 function QuickTop() {
   var handleGoTop = (0, _model.useHandleGoTop)();
-  var title = (0, _intl.default)('op:back_to_top');
-  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
-    title: title,
-    destroyTooltipOnHide: true,
-    placement: "left",
-    fixed: true,
-    overlayStyle: {
-      marginLeft: '8px'
-    },
-    spm: "console-base_sidebar"
-  }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, null, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, {
-    title: title,
+  return /*#__PURE__*/_react.default.createElement(_item.default, {
+    title: (0, _intl.default)('op:back_to_top'),
     icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
       type: "go-top"
     }),
     onClick: handleGoTop
-  })));
+  });
 }

package/build/cjs/ui/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScAside = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 ScAside = exports.ScAside = _styledComponents.default.aside.withConfig({
+  componentId: "sc-i507bi-0"
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _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);

package/build/esm/ui/index.js

@@ -1,35 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
-import styled, { css } from 'styled-components';
-import { SIZE, Z_INDEX, mixinBgPrimary, mixinBorderTertiaryLeft } from '@alicloud/console-base-theme';
-import { useVisible, useCollapsed, useProps } from '../model';
-import { SIZE_BUTTON_WRAP_HEIGHT, SPACING_Y, DATA_KEY_J } from './const';
+import { useVisible, useCollapsed } from '../model';
+import { ScAside } from './styles';
+import { DATA_KEY_J } from './const';
 import { GlobalStyleOnBody } from './rc';
-import { ItemsTop, ItemsBottom, CollapseToggle, CollapseAside } from './rc-container';
-var ScAside = styled.aside.withConfig({
-  componentId: "sc-1ok6knf-0"
-})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE_BUTTON_WRAP_HEIGHT + SPACING_Y, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinBorderTertiaryLeft, function (_ref) {
-  var $collapsed = _ref.$collapsed;
-  return $collapsed ? css(["transform:translateX(101%);border:none !important;"]) : mixinBorderTertiaryLeft;
-}, SIZE.HEIGHT_TOP_NAV);
-var ScCollapseAsideWrapper = styled.div.withConfig({
-  componentId: "sc-1ok6knf-1"
-})(["", ""], function (_ref2) {
-  var $collapsedAsideMini = _ref2.$collapsedAsideMini,
-    $collapsed = _ref2.$collapsed;
-  return $collapsedAsideMini && $collapsed && css(["transform:scale(0.7) translateX(10%);"]);
-});
+import { ItemsTop, ItemsBottom, ItemCollapse } from './rc-container';
 export default function Ui() {
   var visible = useVisible();
-  var _useProps = useProps(),
-    collapsedAsideMini = _useProps.collapsedAsideMini;
   var collapsed = useCollapsed();
-  return visible ? /*#__PURE__*/React.createElement(ScAside, _defineProperty({
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ScAside, _defineProperty({
     $collapsed: collapsed,
     className: 'J_fixed_right_will_be_pushed_left',
     'data-spm': 'console-base_sidebar'
-  }, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(ScCollapseAsideWrapper, {
-    $collapsedAsideMini: !!collapsedAsideMini,
-    $collapsed: collapsed
-  }, /*#__PURE__*/React.createElement(CollapseAside, null), /*#__PURE__*/React.createElement(CollapseToggle, null))) : null;
+  }, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(ItemCollapse, null));
 }

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

@@ -6,4 +6,4 @@ import { SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT } from '../../const';
  */
 export default styled.div.withConfig({
   componentId: "sc-3r2cly-0"
-})(["display:flex;align-items:center;justify-content:center;position:relative;width:", "px;height:", "px;"], SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT);
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:", "px;height:", "px;"], SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT);

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

@@ -1,3 +1,2 @@
 export { ItemsTop, ItemsBottom } from './items';
-export { default as CollapseToggle } from './collapse-toggle';
-export { default as CollapseAside } from './collapse-aside';
+export { default as ItemCollapse } from './item-collapse';

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -46,14 +45,15 @@ var Item = function Item(_ref) {
     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
   }, [onClick, onActiveChange, active]);
   useEffect(function () {
-    if (!collapsed && tooltipDefaultOpen) {
-      openTimerRef.current = setTimeout(function () {
-        setOpen(true);
-        defaultOpenTimerRef.current = setTimeout(function () {
-          setOpen(false);
-        }, tooltipDefaultOpenDuration);
-      }, Math.max(tooltipDefaultOpenDelay, 250));
+    if (collapsed || !tooltipDefaultOpen) {
+      return;
     }
+    openTimerRef.current = setTimeout(function () {
+      setOpen(true);
+      defaultOpenTimerRef.current = setTimeout(function () {
+        setOpen(false);
+      }, tooltipDefaultOpenDuration);
+    }, Math.max(tooltipDefaultOpenDelay, 250));
 
     // 组件卸载时，主动清除计时器
     return function () {
@@ -66,23 +66,23 @@ var Item = function Item(_ref) {
         defaultOpenTimerRef.current = null;
       }
     };
-  }, []);
+  }, [collapsed, tooltipDefaultOpen, tooltipDefaultOpenDelay, tooltipDefaultOpenDuration]);
 
   // 侧边栏收起时，弹窗需关闭
   useEffect(function () {
-    if (collapsed && open) {
+    if (collapsed) {
       setOpen(false);
     }
   }, [collapsed]);
-  return /*#__PURE__*/React.createElement(TooltipV1, _extends({
+  return /*#__PURE__*/React.createElement(TooltipV1, _objectSpread(_objectSpread({
+    spm: 'console-base_sidebar',
     title: tooltipAsHtml && typeof tooltip === 'string' ? /*#__PURE__*/React.createElement(HtmlTrusted, {
       text: tooltip
     }) : tooltip || title,
     destroyTooltipOnHide: true,
-    placement: "left",
-    fixed: true,
-    spm: "console-base_sidebar"
-  }, tooltipOptions, {
+    placement: 'left',
+    fixed: true
+  }, tooltipOptions), {}, {
     overlayStyle: _objectSpread({
       marginLeft: '8px'
     }, tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.overlayStyle),
@@ -91,7 +91,7 @@ var Item = function Item(_ref) {
   }), /*#__PURE__*/React.createElement(SidePanelItemWrap, {
     id: id,
     className: className
-  }, /*#__PURE__*/React.createElement(SidePanelItemButton, _extends({
+  }, /*#__PURE__*/React.createElement(SidePanelItemButton, _objectSpread({
     buttonId: buttonId,
     buttonStyle: buttonStyle,
     title: title,

package/build/esm/ui/rc-container/item-collapse/index.js

@@ -0,0 +1,90 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import Draggable from 'react-draggable';
+import { useLocalStorageState } from 'ahooks';
+import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
+import Icon from '@alicloud/console-base-rc-icon';
+import { useCollapsed, useHandleCollapsedChange, useProps, useItemsTop } from '../../../model';
+import PanelItem from '../item';
+import intl from '../../intl';
+import { SidePanelItemBadge, SidePanelItemWrap } from '../../rc';
+import { ScCollapseWrapper, ScCollapseAside, ScCollapseButton } from './styles';
+var CB_SIDE_PANEL_COLLAPSE_Y = 'cb-side-panel-collapse-y';
+export default function ItemCollapse() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useProps = useProps(),
+    collapsedAside = _useProps.collapsedAside;
+  var collapsed = useCollapsed();
+  var handleToggleCollapsed = useHandleCollapsedChange();
+  var unread = useItemsTop().some(function (v) {
+    return v.unread;
+  });
+  var _useLocalStorageState = useLocalStorageState(CB_SIDE_PANEL_COLLAPSE_Y, {
+      defaultValue: 0,
+      deserializer: function deserializer(value) {
+        return +(value || 0);
+      }
+    }),
+    _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
+    draggableY = _useLocalStorageState2[0],
+    setDraggableY = _useLocalStorageState2[1];
+  if (!collapsed) {
+    return /*#__PURE__*/React.createElement(PanelItem, {
+      spm: 'collapse-hidden',
+      title: intl('op:toggle_hidden'),
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        type: "angle-right"
+      }),
+      tooltipOptions: {
+        mouseEnterDelay: 250
+      },
+      onClick: handleToggleCollapsed
+    });
+  }
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Draggable, {
+    axis: 'y',
+    position: {
+      x: 0,
+      y: +(draggableY || 0)
+    },
+    bounds: {
+      left: 0,
+      right: 0,
+      top: -500,
+      bottom: 0
+    },
+    onDrag: function onDrag() {
+      setIsDragging(true);
+    },
+    onStop: function onStop(_, data) {
+      setIsDragging(false);
+      setDraggableY(data.y);
+    }
+  }, /*#__PURE__*/React.createElement(ScCollapseWrapper, {
+    $isDragging: isDragging
+  }, collapsedAside ? /*#__PURE__*/React.createElement(ScCollapseAside, null, collapsedAside) : null, /*#__PURE__*/React.createElement(TooltipV1, {
+    spm: 'console-base_sidebar',
+    title: intl('op:toggle_visible'),
+    placement: 'left',
+    destroyTooltipOnHide: true,
+    fixed: true,
+    mouseEnterDelay: 250,
+    overlayStyle: {
+      marginLeft: '8px'
+    }
+  }, /*#__PURE__*/React.createElement(SidePanelItemWrap, null, /*#__PURE__*/React.createElement(ScCollapseButton, {
+    spm: 'collapse-visible',
+    title: intl('op:toggle_visible'),
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      type: "angle-right",
+      rotate: 180
+    }),
+    onClick: handleToggleCollapsed
+  }), unread ? /*#__PURE__*/React.createElement(SidePanelItemBadge, {
+    unread: true
+  }) : null)))), document.body);
+}

package/build/esm/ui/rc-container/item-collapse/styles.js

@@ -0,0 +1,15 @@
+import styled, { css } from 'styled-components';
+import { mixinBgAccent, mixinTextWhite } from '@alicloud/console-base-theme';
+import { SidePanelItemButton } from '../../rc';
+export var ScCollapseWrapper = styled.div.withConfig({
+  componentId: "sc-dyn7up-0"
+})(["z-index:998;position:fixed;right:0;bottom:9px;*{-webkit-user-drag:none !important;}", ""], function (_ref) {
+  var $isDragging = _ref.$isDragging;
+  return $isDragging ? css(["cursor:move;*{pointer-events:none !important;}"]) : null;
+});
+export var ScCollapseAside = styled.div.withConfig({
+  componentId: "sc-dyn7up-1"
+})(["position:relative;display:flex;align-items:center;justify-content:center;"]);
+export var ScCollapseButton = styled(SidePanelItemButton).withConfig({
+  componentId: "sc-dyn7up-2"
+})(["&,&:hover{", " ", "}"], mixinBgAccent, mixinTextWhite);

package/build/esm/ui/rc-container/items/index.js

@@ -9,6 +9,9 @@ import { useChildren, useItemsTop, useItemsBottom, useQuickTop } from '../../../
 import { DATA_KEY_SIDE_PANEL_ITEM, SPACING_Y } from '../../const';
 import PanelItem from '../item';
 import QuickTop from '../quick-top';
+var ScHr = styled(HrBase).withConfig({
+  componentId: "sc-1h5t3jq-0"
+})(["margin:", "px 4px;"], SPACING_Y);
 function Items(_ref) {
   var items = _ref.items;
   // index 为业务传入的期望展示的顺序
@@ -31,9 +34,6 @@ export function ItemsTop() {
     items: items
   }));
 }
-var ScHr = styled(HrBase).withConfig({
-  componentId: "sc-1h5t3jq-0"
-})(["margin:", "px 4px;"], SPACING_Y);
 export function ItemsBottom() {
   var quickTop = useQuickTop();
   var children = useChildren();

package/build/esm/ui/rc-container/quick-top/index.js

@@ -1,26 +1,15 @@
 import React from 'react';
 import Icon from '@alicloud/console-base-rc-icon';
-import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
 import { useHandleGoTop } from '../../../model';
-import { SidePanelItemWrap, SidePanelItemButton } from '../../rc';
+import PanelItem from '../item';
 import intl from '../../intl';
 export default function QuickTop() {
   var handleGoTop = useHandleGoTop();
-  var title = intl('op:back_to_top');
-  return /*#__PURE__*/React.createElement(TooltipV1, {
-    title: title,
-    destroyTooltipOnHide: true,
-    placement: "left",
-    fixed: true,
-    overlayStyle: {
-      marginLeft: '8px'
-    },
-    spm: "console-base_sidebar"
-  }, /*#__PURE__*/React.createElement(SidePanelItemWrap, null, /*#__PURE__*/React.createElement(SidePanelItemButton, {
-    title: title,
+  return /*#__PURE__*/React.createElement(PanelItem, {
+    title: intl('op:back_to_top'),
     icon: /*#__PURE__*/React.createElement(Icon, {
       type: "go-top"
     }),
     onClick: handleGoTop
-  })));
+  });
 }

package/build/esm/ui/styles.js

@@ -0,0 +1,9 @@
+import styled, { css } from 'styled-components';
+import { SIZE, Z_INDEX, mixinBgPrimary, mixinBorderTertiaryLeft } from '@alicloud/console-base-theme';
+import { SPACING_Y } from './const';
+export var ScAside = styled.aside.withConfig({
+  componentId: "sc-i507bi-0"
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinBorderTertiaryLeft, function (_ref) {
+  var $collapsed = _ref.$collapsed;
+  return $collapsed ? css(["transform:translateX(101%);border:none !important;"]) : mixinBorderTertiaryLeft;
+}, SIZE.HEIGHT_TOP_NAV);

package/build/types/model/types/common.d.ts

@@ -1,6 +1,6 @@
 import { EasyIconValue } from '@alicloud/console-base-rc-easy-icon';
 import { TooltipPropsV1 } from '@alicloud/console-base-rc-tooltip';
-export interface SidePanelItemButtonProps {
+export interface ISidePanelItemButtonProps {
     /**
      * 入口按钮 ID
      */
@@ -54,7 +54,7 @@ export interface SidePanelItemButtonProps {
      */
     onActiveChange?(active: boolean): void;
 }
-export interface ISidePanelItemProps extends SidePanelItemButtonProps {
+export interface ISidePanelItemProps extends ISidePanelItemButtonProps {
     /**
      * 自定义展示顺序，越小越靠前，不传则按照消息传入的顺序展示
      */

package/build/types/ui/rc/side-panel-item-button/index.d.ts

@@ -1,5 +1,5 @@
-import { SidePanelItemButtonProps } from '../../../model/types/common';
+import { ISidePanelItemButtonProps } from '../../../model/types/common';
 /**
  * 工具的按钮
  */
-export default function SidePanelItemButton({ title, icon, onlyShowIcon, active, buttonId, buttonStyle, ...rest }: SidePanelItemButtonProps): JSX.Element;
+export default function SidePanelItemButton({ title, icon, onlyShowIcon, active, buttonId, buttonStyle, ...rest }: ISidePanelItemButtonProps): JSX.Element;

package/build/types/ui/rc-container/index.d.ts

@@ -1,3 +1,2 @@
 export { ItemsTop, ItemsBottom } from './items';
-export { default as CollapseToggle } from './collapse-toggle';
-export { default as CollapseAside } from './collapse-aside';
+export { default as ItemCollapse } from './item-collapse';

package/build/types/ui/rc-container/item-collapse/index.d.ts

@@ -0,0 +1 @@
+export default function ItemCollapse(): JSX.Element | null;

package/build/types/ui/rc-container/item-collapse/styles.d.ts

@@ -0,0 +1,6 @@
+import { SidePanelItemButton } from '../../rc';
+export declare const ScCollapseWrapper: import("styled-components").StyledComponent<"div", any, {
+    $isDragging: boolean;
+}, never>;
+export declare const ScCollapseAside: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScCollapseButton: import("styled-components").StyledComponent<typeof SidePanelItemButton, any, {}, never>;

package/build/types/ui/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const ScAside: import("styled-components").StyledComponent<"aside", any, {
+    $collapsed: boolean;
+}, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.23",
+  "version": "1.1.24-beta.1",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
@@ -23,7 +23,6 @@
     "@alicloud/demo-rc-elements": "^1.13.0",
     "@alicloud/ts-config": "^1.1.3",
     "@types/react": "^17.0.58",
-    "@types/react-transition-group": "^4.4.6",
     "@types/styled-components": "^5.1.26",
     "react": "^17.0.2",
     "styled-components": "^5.3.10",
@@ -34,8 +33,6 @@
     "styled-components": ">=5"
   },
   "dependencies": {
-    "@alicloud/console-base-conf-env": "^1.6.9",
-    "@alicloud/console-base-conf-locale": "^1.8.9",
     "@alicloud/console-base-intl-factory-basic": "^1.6.9",
     "@alicloud/console-base-rc-button": "^1.8.2",
     "@alicloud/console-base-rc-easy-icon": "^1.0.1",
@@ -48,10 +45,10 @@
     "@alicloud/console-base-theme-sc-base": "^1.6.4",
     "@alicloud/mere-dom": "^1.8.0",
     "@alicloud/react-hook-is-unmounted": "^1.3.4",
-    "@alicloud/react-hook-mouse-hover": "^1.0.2",
     "@alicloud/typescript-missing-helpers": "^1.3.4",
+    "ahooks": "^3.7.11",
     "immutability-helper": "^3.1.1",
-    "react-transition-group": "^4.4.5"
+    "react-draggable": "^4.4.6"
   },
   "scripts": {
     "start": "breezr start-storybook",

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

@@ -1,29 +0,0 @@
-"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,
-    "data-spm-click": "gostr=/aliyun;locaid=dcollapsed-aside"
-  }, collapsedAside)) : null;
-}

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

@@ -1,36 +0,0 @@
-"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

@@ -1,67 +0,0 @@
-"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 _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
-var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
-var _model = require("../../../model");
-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; }
-function PanelToggle() {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var _useProps = (0, _model.useProps)(),
-    collapsedAside = _useProps.collapsedAside;
-  var collapsed = (0, _model.useCollapsed)();
-  var unread = (0, _model.useItemsTop)().some(function (v) {
-    return v.unread;
-  });
-  var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
-  var title = (0, _intl.default)(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  return /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleWrap, null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
-    title: title,
-    placement: "left",
-    destroyTooltipOnHide: true,
-    fixed: true,
-    mouseEnterDelay: !collapsedAside && collapsed ? 250 : 0,
-    overlayStyle: {
-      marginLeft: '8px'
-    },
-    spm: "console-base_sidebar"
-  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggle, {
-    $hovered: isHovered,
-    $collapsed: collapsed,
-    $collapsedAside: !!collapsedAside,
-    onMouseEnter: function onMouseEnter() {
-      return setIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsHovered(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleButton, {
-    spm: collapsed ? 'collapse-visible' : 'collapse-hidden',
-    title: title,
-    icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
-      type: "angle-right",
-      rotate: collapsed ? 180 : 0
-    }),
-    onClick: handleToggleCollapsed,
-    $collapsed: collapsed,
-    $collapsedAside: !!collapsedAside,
-    $hovered: isHovered
-  }), collapsed && unread ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
-    unread: true,
-    alignLeft: true
-  }) : null)));
-}

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

@@ -1,39 +0,0 @@
-"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 cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-101%);"]);
-var cssToggleOut = (0, _styledComponents.css)(["transform:translateX(-50.5%);"]);
-var ScCollapseToggle = exports.ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
-  componentId: "sc-xm41v7-1"
-})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
-  var $collapsed = _ref.$collapsed,
-    $collapsedAside = _ref.$collapsedAside,
-    $hovered = _ref.$hovered;
-  return $collapsed && ($collapsedAside || $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,
-    $collapsedAside = _ref3.$collapsedAside,
-    $hovered = _ref3.$hovered;
-  return $collapsed && !$collapsedAside && !$hovered && nonSimpleCnPadding;
-});

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

@@ -1,20 +0,0 @@
-import React, { useRef } from 'react';
-import { useCollapsed, useProps } from '../../../model';
-import { ScCollapseAsideWrap, ScCSSTransition } from './styles';
-export default function CollapseAside() {
-  var collapseAsideRef = useRef(null);
-  var _useProps = useProps(),
-    collapsedAside = _useProps.collapsedAside;
-  var collapsed = useCollapsed();
-  return collapsedAside ? /*#__PURE__*/React.createElement(ScCSSTransition, {
-    nodeRef: collapseAsideRef,
-    in: collapsed,
-    classNames: "cb-collapse-aside",
-    timeout: 200,
-    mountOnEnter: true,
-    unmountOnExit: true
-  }, /*#__PURE__*/React.createElement(ScCollapseAsideWrap, {
-    ref: collapseAsideRef,
-    "data-spm-click": "gostr=/aliyun;locaid=dcollapsed-aside"
-  }, collapsedAside)) : null;
-}

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

@@ -1,27 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-import { CSSTransition } from 'react-transition-group';
-var KfZoomBigIn = keyframes(["0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}"]);
-export var ScCSSTransition = styled(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);
-export var ScCollapseAsideWrap = styled.div.withConfig({
-  componentId: "sc-1slnea7-1"
-})(["position:absolute;right:100%;bottom:50px;margin-right:10px;"]);

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

@@ -1,57 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-import Icon from '@alicloud/console-base-rc-icon';
-import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
-import { useCollapsed, useItemsTop, useHandleCollapsedChange, useProps } from '../../../model';
-import { ScCollapseToggleWrap, ScCollapseToggle, ScCollapseToggleButton } from './styles';
-import { SidePanelItemBadge } from '../../rc';
-import intl from '../../intl';
-export default function PanelToggle() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var _useProps = useProps(),
-    collapsedAside = _useProps.collapsedAside;
-  var collapsed = useCollapsed();
-  var unread = useItemsTop().some(function (v) {
-    return v.unread;
-  });
-  var handleToggleCollapsed = useHandleCollapsedChange();
-  var title = intl(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  return /*#__PURE__*/React.createElement(ScCollapseToggleWrap, null, /*#__PURE__*/React.createElement(TooltipV1, {
-    title: title,
-    placement: "left",
-    destroyTooltipOnHide: true,
-    fixed: true,
-    mouseEnterDelay: !collapsedAside && collapsed ? 250 : 0,
-    overlayStyle: {
-      marginLeft: '8px'
-    },
-    spm: "console-base_sidebar"
-  }, /*#__PURE__*/React.createElement(ScCollapseToggle, {
-    $hovered: isHovered,
-    $collapsed: collapsed,
-    $collapsedAside: !!collapsedAside,
-    onMouseEnter: function onMouseEnter() {
-      return setIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsHovered(false);
-    }
-  }, /*#__PURE__*/React.createElement(ScCollapseToggleButton, {
-    spm: collapsed ? 'collapse-visible' : 'collapse-hidden',
-    title: title,
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "angle-right",
-      rotate: collapsed ? 180 : 0
-    }),
-    onClick: handleToggleCollapsed,
-    $collapsed: collapsed,
-    $collapsedAside: !!collapsedAside,
-    $hovered: isHovered
-  }), collapsed && unread ? /*#__PURE__*/React.createElement(SidePanelItemBadge, {
-    unread: true,
-    alignLeft: true
-  }) : null)));
-}

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

@@ -1,30 +0,0 @@
-import styled, { css } from 'styled-components';
-import { mixinBgAccent, mixinTextWhite } from '@alicloud/console-base-theme';
-import { SidePanelItemWrap, SidePanelItemButton } from '../../rc';
-import { SPACING_Y } from '../../const';
-export var ScCollapseToggleWrap = styled.div.withConfig({
-  componentId: "sc-xm41v7-0"
-})(["position:absolute;right:0;bottom:", "px;"], SPACING_Y);
-var cssToggleIn = css(["transform:translateX(-101%);"]);
-var cssToggleOut = css(["transform:translateX(-50.5%);"]);
-export var ScCollapseToggle = styled(SidePanelItemWrap).withConfig({
-  componentId: "sc-xm41v7-1"
-})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
-  var $collapsed = _ref.$collapsed,
-    $collapsedAside = _ref.$collapsedAside,
-    $hovered = _ref.$hovered;
-  return $collapsed && ($collapsedAside || $hovered ? cssToggleIn : cssToggleOut);
-});
-var collapsedStyles = css(["&,&:hover{", " ", "}"], mixinBgAccent, mixinTextWhite);
-var nonSimpleCnPadding = css(["padding-left:4px;text-align:left;"]);
-export var ScCollapseToggleButton = styled(SidePanelItemButton).withConfig({
-  componentId: "sc-xm41v7-2"
-})(["", " ", ""], function (_ref2) {
-  var $collapsed = _ref2.$collapsed;
-  return $collapsed && collapsedStyles;
-}, function (_ref3) {
-  var $collapsed = _ref3.$collapsed,
-    $collapsedAside = _ref3.$collapsedAside,
-    $hovered = _ref3.$hovered;
-  return $collapsed && !$collapsedAside && !$hovered && nonSimpleCnPadding;
-});

package/build/types/ui/rc-container/collapse-aside/index.d.ts

@@ -1 +0,0 @@
-export default function CollapseAside(): JSX.Element | null;

package/build/types/ui/rc-container/collapse-aside/styles.d.ts

@@ -1,3 +0,0 @@
-import { CSSTransition } from 'react-transition-group';
-export declare const ScCSSTransition: import("styled-components").StyledComponent<typeof CSSTransition, any, {}, never>;
-export declare const ScCollapseAsideWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

package/build/types/ui/rc-container/collapse-toggle/index.d.ts

@@ -1 +0,0 @@
-export default function PanelToggle(): JSX.Element;

package/build/types/ui/rc-container/collapse-toggle/styles.d.ts

@@ -1,10 +0,0 @@
-import { SidePanelItemButton } from '../../rc';
-interface IScProps {
-    $collapsed: boolean;
-    $collapsedAside: boolean;
-    $hovered: boolean;
-}
-export declare const ScCollapseToggleWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ScCollapseToggle: import("styled-components").StyledComponent<"div", any, IScProps, never>;
-export declare const ScCollapseToggleButton: import("styled-components").StyledComponent<typeof SidePanelItemButton, any, IScProps, never>;
-export {};