@alicloud/console-base-rc-side-panel 1.1.24-beta.0 → 1.1.24-beta.2

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,
+    collapsedDraggable = _useProps.collapsedDraggable,
+    onCollapsedDraggableChange = _useProps.onCollapsedDraggableChange;
+  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: 0,
+      y: 0
+    },
+    bounds: {
+      left: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[0]) || 0),
+      right: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[1]) || 0),
+      top: -500,
+      bottom: 0
+    },
+    onDrag: function onDrag() {
+      setIsDragging(true);
+    },
+    onStop: function onStop(_, data) {
+      setIsDragging(false);
+      onCollapsedDraggableChange === null || onCollapsedDraggableChange === void 0 ? void 0 : onCollapsedDraggableChange(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/collapse-with-aside-widget/styles.js

@@ -0,0 +1,27 @@
+"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-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.6;margin-right:-8px;"]) : null;
+});
+var ScCollapseAside = exports.ScCollapseAside = _styledComponents.default.div.withConfig({
+  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-140xzf5-2"
+})(["&,&:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite);

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

@@ -6,23 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ItemCollapse;
 var _react = _interopRequireDefault(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 _item = _interopRequireDefault(require("../item"));
 var _intl = _interopRequireDefault(require("../../intl"));
-var _rc = require("../../rc");
-var _styles = require("./styles");
+var _collapseWidget = _interopRequireDefault(require("./collapse-widget"));
+var _collapseWithAsideWidget = _interopRequireDefault(require("./collapse-with-aside-widget"));
 function ItemCollapse() {
   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;
-  });
   if (!collapsed) {
     return /*#__PURE__*/_react.default.createElement(_item.default, {
       spm: 'collapse-hidden',
@@ -36,33 +30,8 @@ function ItemCollapse() {
       onClick: handleToggleCollapsed
     });
   }
-  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
-    axis: 'y',
-    bounds: {
-      left: 0,
-      right: 0,
-      top: -500,
-      bottom: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseWrapper, null, 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/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 } 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,
+    collapsedDraggable = _useProps.collapsedDraggable,
+    onCollapsedDraggableChange = _useProps.onCollapsedDraggableChange;
+  var handleToggleCollapsed = useHandleCollapsedChange();
+  var unread = useItemsTop().some(function (v) {
+    return v.unread;
+  });
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Draggable, {
+    axis: 'y',
+    position: {
+      x: 0,
+      y: 0
+    },
+    bounds: {
+      left: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[0]) || 0),
+      right: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[1]) || 0),
+      top: -500,
+      bottom: 0
+    },
+    onDrag: function onDrag() {
+      setIsDragging(true);
+    },
+    onStop: function onStop(_, data) {
+      setIsDragging(false);
+      onCollapsedDraggableChange === null || onCollapsedDraggableChange === void 0 ? void 0 : onCollapsedDraggableChange(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/collapse-with-aside-widget/styles.js

@@ -0,0 +1,18 @@
+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-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.6;margin-right:-8px;"]) : null;
+});
+export var ScCollapseAside = styled.div.withConfig({
+  componentId: "sc-140xzf5-1"
+})(["position:relative;display:flex;align-items:center;justify-content:center;"]);
+export var ScCollapseButton = styled(SidePanelItemButton).withConfig({
+  componentId: "sc-140xzf5-2"
+})(["&,&:hover{", " ", "}"], mixinBgAccent, mixinTextWhite);

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

@@ -1,21 +1,15 @@
 import React 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 { 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';
+import CollapseWidget from './collapse-widget';
+import CollapseWithAsideWidget from './collapse-with-aside-widget';
 export default function ItemCollapse() {
   var _useProps = useProps(),
     collapsedAside = _useProps.collapsedAside;
   var collapsed = useCollapsed();
   var handleToggleCollapsed = useHandleCollapsedChange();
-  var unread = useItemsTop().some(function (v) {
-    return v.unread;
-  });
   if (!collapsed) {
     return /*#__PURE__*/React.createElement(PanelItem, {
       spm: 'collapse-hidden',
@@ -29,33 +23,8 @@ export default function ItemCollapse() {
       onClick: handleToggleCollapsed
     });
   }
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Draggable, {
-    axis: 'y',
-    bounds: {
-      left: 0,
-      right: 0,
-      top: -500,
-      bottom: 0
-    }
-  }, /*#__PURE__*/React.createElement(ScCollapseWrapper, null, 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/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/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,4 +1,7 @@
-import { SidePanelItemButton } from '../../rc';
-export declare const ScCollapseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+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.0",
+  "version": "1.1.24-beta.2",
   "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": {

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

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ScCollapseWrapper = exports.ScCollapseButton = exports.ScCollapseAside = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _consoleBaseTheme = require("@alicloud/console-base-theme");
-var _rc = require("../../rc");
-var ScCollapseWrapper = exports.ScCollapseWrapper = _styledComponents.default.div.withConfig({
-  componentId: "sc-dyn7up-0"
-})(["z-index:998;position:fixed;right:0;bottom:9px;&.react-draggable-dragging{cursor:move;*{pointer-events:none !important;}}*{-webkit-user-drag:none !important;}"]);
-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/esm/ui/rc-container/item-collapse/styles.js

@@ -1,12 +0,0 @@
-import styled 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;&.react-draggable-dragging{cursor:move;*{pointer-events:none !important;}}*{-webkit-user-drag:none !important;}"]);
-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);