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

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

@@ -8,5 +8,6 @@ var BODY_CLASS_WITH_SIDE_PANEL = exports.BODY_CLASS_WITH_SIDE_PANEL = 'with-side
 var QUICK_TOP_VISIBLE_OFFSET = exports.QUICK_TOP_VISIBLE_OFFSET = 200;
 var DEFAULT_CONTEXT_STATE = exports.DEFAULT_CONTEXT_STATE = {
   collapsed: true,
+  collapsedDraggable: [0, 0],
   quickTopVisible: false
 };

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

@@ -6,6 +6,7 @@ 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";
+  EAction[EAction["SET_COLLAPSED_DRAGGABLE"] = 1] = "SET_COLLAPSED_DRAGGABLE";
+  EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 2] = "SET_QUICK_TOP_VISIBLE";
   return EAction;
 }({});

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

@@ -16,12 +16,24 @@ Object.defineProperty(exports, "useCollapsed", {
     return _useCollapsed.default;
   }
 });
+Object.defineProperty(exports, "useCollapsedDraggable", {
+  enumerable: true,
+  get: function get() {
+    return _useCollapsedDraggable.default;
+  }
+});
 Object.defineProperty(exports, "useHandleCollapsedChange", {
   enumerable: true,
   get: function get() {
     return _useHandleCollapsedChange.default;
   }
 });
+Object.defineProperty(exports, "useHandleCollapsedDraggableChange", {
+  enumerable: true,
+  get: function get() {
+    return _useHandleCollapsedDraggableChange.default;
+  }
+});
 Object.defineProperty(exports, "useHandleGoTop", {
   enumerable: true,
   get: function get() {
@@ -62,8 +74,10 @@ var _useModelProps = _interopRequireDefault(require("./_use-model-props"));
 var _useChildren = _interopRequireDefault(require("./use-children"));
 var _useVisible = _interopRequireDefault(require("./use-visible"));
 var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
+var _useCollapsedDraggable = _interopRequireDefault(require("./use-collapsed-draggable"));
 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 _useHandleCollapsedDraggableChange = _interopRequireDefault(require("./use-handle-collapsed-draggable-change"));
 var _useHandleGoTop = _interopRequireDefault(require("./use-handle-go-top"));

package/build/cjs/model/hook/use-collapsed-draggable.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useCollapsedDraggable;
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+var _useModelState2 = _interopRequireDefault(require("./_use-model-state"));
+function useCollapsedDraggable() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    valueInProps = _useModelProps.collapsedDraggable;
+  var _useModelState = (0, _useModelState2.default)(),
+    valueInState = _useModelState.collapsedDraggable;
+  return valueInProps !== null && valueInProps !== void 0 ? valueInProps : valueInState;
+}

package/build/cjs/model/hook/use-dispatch-set-collapsed-draggable.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDispatchSetCollapsedDraggable;
+var _react = require("react");
+var _enum = require("../enum");
+var _useModelDispatch = _interopRequireDefault(require("./_use-model-dispatch"));
+function useDispatchSetCollapsedDraggable() {
+  var dispatch = (0, _useModelDispatch.default)();
+  return (0, _react.useCallback)(function (payload) {
+    return dispatch({
+      type: _enum.EAction.SET_COLLAPSED_DRAGGABLE,
+      payload: payload
+    });
+  }, [dispatch]);
+}

package/build/cjs/model/hook/use-handle-collapsed-draggable-change.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHandleCollapsedDraggableChange;
+var _react = require("react");
+var _useDispatchSetCollapsedDraggable = _interopRequireDefault(require("./use-dispatch-set-collapsed-draggable"));
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+function useHandleCollapsedDraggableChange() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    onCollapsedDraggableChange = _useModelProps.onCollapsedDraggableChange;
+  var dispatchSetCollapsedDraggable = (0, _useDispatchSetCollapsedDraggable.default)();
+  return (0, _react.useCallback)(function (x, y) {
+    dispatchSetCollapsedDraggable([x, y]);
+    onCollapsedDraggableChange === null || onCollapsedDraggableChange === void 0 ? void 0 : onCollapsedDraggableChange(x, y);
+  }, [dispatchSetCollapsedDraggable, onCollapsedDraggableChange]);
+}

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

@@ -7,11 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = reducer;
 var _enum = require("../enum");
 var _reduceSetCollapsed = _interopRequireDefault(require("./reduce-set-collapsed"));
+var _reduceSetCollapsedDraggable = _interopRequireDefault(require("./reduce-set-collapsed-draggable"));
 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_COLLAPSED_DRAGGABLE:
+      return (0, _reduceSetCollapsedDraggable.default)(state, action.payload);
     case _enum.EAction.SET_QUICK_TOP_VISIBLE:
       return (0, _reduceSetQuickTopVisible.default)(state, action.payload);
     default:

package/build/cjs/model/reducer/reduce-set-collapsed-draggable.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = reduceSetCollapsedDraggable;
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
+function reduceSetCollapsedDraggable(state, payload) {
+  return (0, _immutabilityHelper.default)(state, {
+    collapsedDraggable: {
+      $set: payload
+    }
+  });
+}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CollapseWidget;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
+var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
+var _model = require("../../../../model");
+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; }
+function CollapseWidget() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
+  var unread = (0, _model.useItemsTop)().some(function (v) {
+    return v.unread;
+  });
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_styles.ScCollapseWrapper, {
+    $isHovered: isHovered,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
+  }, /*#__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, {
+    $isHovered: isHovered,
+    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,
+    alignLeft: !isHovered
+  }) : null))), document.body);
+}

package/build/cjs/ui/rc-container/item-collapse/collapse-widget/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 = 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-8cd4ie-0"
+})(["z-index:998;position:fixed;right:0;bottom:9px;transform:translateX(50%);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
+  var $isHovered = _ref.$isHovered;
+  return $isHovered && (0, _styledComponents.css)(["transform:translateX(0);"]);
+});
+var ScCollapseButton = exports.ScCollapseButton = (0, _styledComponents.default)(_rc.SidePanelItemButton).withConfig({
+  componentId: "sc-8cd4ie-1"
+})(["&,&:hover{", " ", "}", ""], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite, function (_ref2) {
+  var $isHovered = _ref2.$isHovered;
+  return !$isHovered && (0, _styledComponents.css)(["padding-left:4px;text-align:left;"]);
+});

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CollapseWithAsideWidget;
+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 _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
+var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
+var _model = require("../../../../model");
+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; }
+function CollapseWithAsideWidget() {
+  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,
+    collapsedAsideMini = _useProps.collapsedAsideMini;
+  var collapsedDraggable = (0, _model.useCollapsedDraggable)();
+  var handleCollapsedDraggableChange = (0, _model.useHandleCollapsedDraggableChange)();
+  var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
+  var unread = (0, _model.useItemsTop)().some(function (v) {
+    return v.unread;
+  });
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
+    axis: 'y',
+    position: {
+      x: +(collapsedDraggable[0] || 0),
+      y: +(collapsedDraggable[1] || 0)
+    },
+    bounds: {
+      left: 0,
+      right: 0,
+      top: -500,
+      bottom: 0
+    },
+    onDrag: function onDrag() {
+      setIsDragging(true);
+    },
+    onStop: function onStop(_, data) {
+      setIsDragging(false);
+      handleCollapsedDraggableChange(data.x, data.y);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseWrapper, {
+    $isDragging: isDragging,
+    $collapsedAsideMini: !!collapsedAsideMini
+  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseAside, null, collapsedAside), /*#__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 → collapse-with-aside-widget/styles.js}

@@ -7,18 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 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");
+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) {
+  componentId: "sc-140xzf5-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;
+}, function (_ref2) {
+  var $collapsedAsideMini = _ref2.$collapsedAsideMini;
+  return $collapsedAsideMini ? (0, _styledComponents.css)(["zoom:0.8;margin-right:-10px;"]) : null;
 });
 var ScCollapseAside = exports.ScCollapseAside = _styledComponents.default.div.withConfig({
-  componentId: "sc-dyn7up-1"
+  componentId: "sc-140xzf5-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"
+  componentId: "sc-140xzf5-2"
 })(["&,&:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite);

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

@@ -1,47 +1,22 @@
 "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 _react = _interopRequireDefault(require("react"));
 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';
+var _collapseWidget = _interopRequireDefault(require("./collapse-widget"));
+var _collapseWithAsideWidget = _interopRequireDefault(require("./collapse-with-aside-widget"));
 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',
@@ -55,46 +30,8 @@ function ItemCollapse() {
       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);
+  if (!collapsedAside) {
+    return /*#__PURE__*/_react.default.createElement(_collapseWidget.default, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(_collapseWithAsideWidget.default, null);
 }

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

@@ -2,5 +2,6 @@ export var BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
 export var QUICK_TOP_VISIBLE_OFFSET = 200;
 export var DEFAULT_CONTEXT_STATE = {
   collapsed: true,
+  collapsedDraggable: [0, 0],
   quickTopVisible: false
 };

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

@@ -1,5 +1,6 @@
 export var EAction = /*#__PURE__*/function (EAction) {
   EAction[EAction["SET_COLLAPSED"] = 0] = "SET_COLLAPSED";
-  EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 1] = "SET_QUICK_TOP_VISIBLE";
+  EAction[EAction["SET_COLLAPSED_DRAGGABLE"] = 1] = "SET_COLLAPSED_DRAGGABLE";
+  EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 2] = "SET_QUICK_TOP_VISIBLE";
   return EAction;
 }({});

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

@@ -2,10 +2,12 @@ export { default as useProps } from './_use-model-props';
 export { default as useChildren } from './use-children';
 export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';
+export { default as useCollapsedDraggable } from './use-collapsed-draggable';
 export { default as useItemsTop } from './use-items-top';
 export { default as useItemsBottom } from './use-items-bottom';
 export { default as useQuickTop } from './use-quick-top';
 
 // handlers
 export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleCollapsedDraggableChange } from './use-handle-collapsed-draggable-change';
 export { default as useHandleGoTop } from './use-handle-go-top';

package/build/esm/model/hook/use-collapsed-draggable.js

@@ -0,0 +1,9 @@
+import useModelProps from './_use-model-props';
+import useModelState from './_use-model-state';
+export default function useCollapsedDraggable() {
+  var _useModelProps = useModelProps(),
+    valueInProps = _useModelProps.collapsedDraggable;
+  var _useModelState = useModelState(),
+    valueInState = _useModelState.collapsedDraggable;
+  return valueInProps !== null && valueInProps !== void 0 ? valueInProps : valueInState;
+}

package/build/esm/model/hook/use-dispatch-set-collapsed-draggable.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { EAction } from '../enum';
+import useModelDispatch from './_use-model-dispatch';
+export default function useDispatchSetCollapsedDraggable() {
+  var dispatch = useModelDispatch();
+  return useCallback(function (payload) {
+    return dispatch({
+      type: EAction.SET_COLLAPSED_DRAGGABLE,
+      payload: payload
+    });
+  }, [dispatch]);
+}

package/build/esm/model/hook/use-handle-collapsed-draggable-change.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import useDispatchSetCollapsedDraggable from './use-dispatch-set-collapsed-draggable';
+import useModelProps from './_use-model-props';
+export default function useHandleCollapsedDraggableChange() {
+  var _useModelProps = useModelProps(),
+    onCollapsedDraggableChange = _useModelProps.onCollapsedDraggableChange;
+  var dispatchSetCollapsedDraggable = useDispatchSetCollapsedDraggable();
+  return useCallback(function (x, y) {
+    dispatchSetCollapsedDraggable([x, y]);
+    onCollapsedDraggableChange === null || onCollapsedDraggableChange === void 0 ? void 0 : onCollapsedDraggableChange(x, y);
+  }, [dispatchSetCollapsedDraggable, onCollapsedDraggableChange]);
+}

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

@@ -1,10 +1,13 @@
 import { EAction } from '../enum';
 import reduceSetCollapsed from './reduce-set-collapsed';
+import reduceSetCollapsedDraggable from './reduce-set-collapsed-draggable';
 import reduceSetQuickTopVisible from './reduce-set-quick-top-visible';
 export default function reducer(state, action) {
   switch (action.type) {
     case EAction.SET_COLLAPSED:
       return reduceSetCollapsed(state, action.payload);
+    case EAction.SET_COLLAPSED_DRAGGABLE:
+      return reduceSetCollapsedDraggable(state, action.payload);
     case EAction.SET_QUICK_TOP_VISIBLE:
       return reduceSetQuickTopVisible(state, action.payload);
     default:

package/build/esm/model/reducer/reduce-set-collapsed-draggable.js

@@ -0,0 +1,8 @@
+import update from 'immutability-helper';
+export default function reduceSetCollapsedDraggable(state, payload) {
+  return update(state, {
+    collapsedDraggable: {
+      $set: payload
+    }
+  });
+}

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

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
+import Icon from '@alicloud/console-base-rc-icon';
+import { useHandleCollapsedChange, useItemsTop } from '../../../../model';
+import intl from '../../../intl';
+import { SidePanelItemBadge, SidePanelItemWrap } from '../../../rc';
+import { ScCollapseWrapper, ScCollapseButton } from './styles';
+export default function CollapseWidget() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var handleToggleCollapsed = useHandleCollapsedChange();
+  var unread = useItemsTop().some(function (v) {
+    return v.unread;
+  });
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(ScCollapseWrapper, {
+    $isHovered: isHovered,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
+  }, /*#__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, {
+    $isHovered: isHovered,
+    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,
+    alignLeft: !isHovered
+  }) : null))), document.body);
+}

package/build/esm/ui/rc-container/item-collapse/collapse-widget/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-8cd4ie-0"
+})(["z-index:998;position:fixed;right:0;bottom:9px;transform:translateX(50%);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
+  var $isHovered = _ref.$isHovered;
+  return $isHovered && css(["transform:translateX(0);"]);
+});
+export var ScCollapseButton = styled(SidePanelItemButton).withConfig({
+  componentId: "sc-8cd4ie-1"
+})(["&,&:hover{", " ", "}", ""], mixinBgAccent, mixinTextWhite, function (_ref2) {
+  var $isHovered = _ref2.$isHovered;
+  return !$isHovered && css(["padding-left:4px;text-align:left;"]);
+});

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

@@ -0,0 +1,68 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import Draggable from 'react-draggable';
+import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
+import Icon from '@alicloud/console-base-rc-icon';
+import { useHandleCollapsedChange, useProps, useItemsTop, useCollapsedDraggable, useHandleCollapsedDraggableChange } from '../../../../model';
+import intl from '../../../intl';
+import { SidePanelItemBadge, SidePanelItemWrap } from '../../../rc';
+import { ScCollapseWrapper, ScCollapseAside, ScCollapseButton } from './styles';
+export default function CollapseWithAsideWidget() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useProps = useProps(),
+    collapsedAside = _useProps.collapsedAside,
+    collapsedAsideMini = _useProps.collapsedAsideMini;
+  var collapsedDraggable = useCollapsedDraggable();
+  var handleCollapsedDraggableChange = useHandleCollapsedDraggableChange();
+  var handleToggleCollapsed = useHandleCollapsedChange();
+  var unread = useItemsTop().some(function (v) {
+    return v.unread;
+  });
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Draggable, {
+    axis: 'y',
+    position: {
+      x: +(collapsedDraggable[0] || 0),
+      y: +(collapsedDraggable[1] || 0)
+    },
+    bounds: {
+      left: 0,
+      right: 0,
+      top: -500,
+      bottom: 0
+    },
+    onDrag: function onDrag() {
+      setIsDragging(true);
+    },
+    onStop: function onStop(_, data) {
+      setIsDragging(false);
+      handleCollapsedDraggableChange(data.x, data.y);
+    }
+  }, /*#__PURE__*/React.createElement(ScCollapseWrapper, {
+    $isDragging: isDragging,
+    $collapsedAsideMini: !!collapsedAsideMini
+  }, /*#__PURE__*/React.createElement(ScCollapseAside, null, collapsedAside), /*#__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 → collapse-with-aside-widget/styles.js}

@@ -1,15 +1,18 @@
 import styled, { css } from 'styled-components';
 import { mixinBgAccent, mixinTextWhite } from '@alicloud/console-base-theme';
-import { SidePanelItemButton } from '../../rc';
+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) {
+  componentId: "sc-140xzf5-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;
+}, function (_ref2) {
+  var $collapsedAsideMini = _ref2.$collapsedAsideMini;
+  return $collapsedAsideMini ? css(["zoom:0.8;margin-right:-10px;"]) : null;
 });
 export var ScCollapseAside = styled.div.withConfig({
-  componentId: "sc-dyn7up-1"
+  componentId: "sc-140xzf5-1"
 })(["position:relative;display:flex;align-items:center;justify-content:center;"]);
 export var ScCollapseButton = styled(SidePanelItemButton).withConfig({
-  componentId: "sc-dyn7up-2"
+  componentId: "sc-140xzf5-2"
 })(["&,&:hover{", " ", "}"], mixinBgAccent, mixinTextWhite);

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

@@ -1,37 +1,15 @@
-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 React from 'react';
 import Icon from '@alicloud/console-base-rc-icon';
-import { useCollapsed, useHandleCollapsedChange, useProps, useItemsTop } from '../../../model';
+import { useCollapsed, useHandleCollapsedChange, useProps } 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';
+import CollapseWidget from './collapse-widget';
+import CollapseWithAsideWidget from './collapse-with-aside-widget';
 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',
@@ -45,46 +23,8 @@ export default function ItemCollapse() {
       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);
+  if (!collapsedAside) {
+    return /*#__PURE__*/React.createElement(CollapseWidget, null);
+  }
+  return /*#__PURE__*/React.createElement(CollapseWithAsideWidget, null);
 }

package/build/types/model/enum/index.d.ts

@@ -1,4 +1,5 @@
 export declare enum EAction {
     SET_COLLAPSED = 0,
-    SET_QUICK_TOP_VISIBLE = 1
+    SET_COLLAPSED_DRAGGABLE = 1,
+    SET_QUICK_TOP_VISIBLE = 2
 }

package/build/types/model/hook/index.d.ts

@@ -2,8 +2,10 @@ export { default as useProps } from './_use-model-props';
 export { default as useChildren } from './use-children';
 export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';
+export { default as useCollapsedDraggable } from './use-collapsed-draggable';
 export { default as useItemsTop } from './use-items-top';
 export { default as useItemsBottom } from './use-items-bottom';
 export { default as useQuickTop } from './use-quick-top';
 export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleCollapsedDraggableChange } from './use-handle-collapsed-draggable-change';
 export { default as useHandleGoTop } from './use-handle-go-top';

package/build/types/model/hook/use-collapsed-draggable.d.ts

@@ -0,0 +1 @@
+export default function useCollapsedDraggable(): number[];

package/build/types/model/hook/use-dispatch-set-collapsed-draggable.d.ts

@@ -0,0 +1 @@
+export default function useDispatchSetCollapsedDraggable(): (payload: number[]) => void;

package/build/types/model/hook/use-handle-collapsed-draggable-change.d.ts

@@ -0,0 +1 @@
+export default function useHandleCollapsedDraggableChange(): (x: number, y: number) => void;

package/build/types/model/reducer/reduce-set-collapsed-draggable.d.ts

@@ -0,0 +1,2 @@
+import { IModelState } from '../types';
+export default function reduceSetCollapsedDraggable(state: IModelState, payload: number[]): IModelState;

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

@@ -3,5 +3,8 @@ import { EAction } from '../enum';
 export type TModelAction = {
     type: EAction.SET_COLLAPSED | EAction.SET_QUICK_TOP_VISIBLE;
     payload: boolean;
+} | {
+    type: EAction.SET_COLLAPSED_DRAGGABLE;
+    payload: number[];
 };
 export type TModelDispatch = Dispatch<TModelAction>;

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

@@ -11,9 +11,13 @@ export interface IModelProps {
      */
     visible?: boolean;
     /**
-     * 通过 onCollapsedChange 实现受控
+     * 是否收起，通过 onCollapsedChange 实现受控
      */
     collapsed?: boolean;
+    /**
+     * 收起按钮的位置 [x, y]，通过 onCollapsedDraggableChange 实现受控
+     */
+    collapsedDraggable?: number[];
     /**
      * 顶部工具
      */
@@ -42,4 +46,8 @@ export interface IModelProps {
      * 是否展示推入按钮
      */
     onCollapsedChange?(collapsed: boolean): void;
+    /**
+     * 收起按钮的拖拽位置
+     */
+    onCollapsedDraggableChange?(x: number, y: number): void;
 }

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

@@ -1,4 +1,5 @@
 export interface IModelState {
     collapsed: boolean;
+    collapsedDraggable: number[];
     quickTopVisible: boolean;
 }

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

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

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

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

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

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

package/build/types/ui/rc-container/item-collapse/{styles.d.ts → collapse-with-aside-widget/styles.d.ts}

@@ -1,6 +1,7 @@
-import { SidePanelItemButton } from '../../rc';
+import { SidePanelItemButton } from '../../../rc';
 export declare const ScCollapseWrapper: import("styled-components").StyledComponent<"div", any, {
     $isDragging: boolean;
+    $collapsedAsideMini: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.24-beta.1",
+  "version": "1.1.24-beta.3",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
@@ -23,6 +23,7 @@
     "@alicloud/demo-rc-elements": "^1.13.0",
     "@alicloud/ts-config": "^1.1.3",
     "@types/react": "^17.0.58",
+    "@types/react-dom": "^17.0.19",
     "@types/styled-components": "^5.1.26",
     "react": "^17.0.2",
     "styled-components": "^5.3.10",
@@ -30,6 +31,7 @@
   },
   "peerDependencies": {
     "react": ">=16.8",
+    "react-dom": "^17.0.2",
     "styled-components": ">=5"
   },
   "dependencies": {
@@ -46,7 +48,6 @@
     "@alicloud/mere-dom": "^1.8.0",
     "@alicloud/react-hook-is-unmounted": "^1.3.4",
     "@alicloud/typescript-missing-helpers": "^1.3.4",
-    "ahooks": "^3.7.11",
     "immutability-helper": "^3.1.1",
     "react-draggable": "^4.4.6"
   },