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

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

@@ -1,13 +1,16 @@
 "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 _react = _interopRequireDefault(require("react"));
+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");
@@ -15,7 +18,14 @@ 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)();
@@ -23,6 +33,15 @@ function ItemCollapse() {
   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',
@@ -38,13 +57,26 @@ function ItemCollapse() {
   }
   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, null, collapsedAside ? /*#__PURE__*/_react.default.createElement(_styles.ScCollapseAside, null, collapsedAside) : null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
+  }, /*#__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',

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

@@ -1,16 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScCollapseWrapper = exports.ScCollapseButton = exports.ScCollapseAside = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+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;&.react-draggable-dragging{cursor:move;*{pointer-events:none !important;}}*{-webkit-user-drag:none !important;}"]);
+})(["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;"]);

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

@@ -1,6 +1,8 @@
-import React from 'react';
+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';
@@ -8,7 +10,12 @@ 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();
@@ -16,6 +23,15 @@ export default function ItemCollapse() {
   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',
@@ -31,13 +47,26 @@ export default function ItemCollapse() {
   }
   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, null, collapsedAside ? /*#__PURE__*/React.createElement(ScCollapseAside, null, collapsedAside) : null, /*#__PURE__*/React.createElement(TooltipV1, {
+  }, /*#__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',

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

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.24-beta.0",
+  "version": "1.1.24-beta.1",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
@@ -46,6 +46,7 @@
     "@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"
   },