@alicloud/console-base-rc-side-panel 1.1.24-beta.2 → 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-with-aside-widget/index.js

@@ -25,9 +25,9 @@ function CollapseWithAsideWidget() {
     setIsDragging = _useState2[1];
   var _useProps = (0, _model.useProps)(),
     collapsedAside = _useProps.collapsedAside,
-    collapsedAsideMini = _useProps.collapsedAsideMini,
-    collapsedDraggable = _useProps.collapsedDraggable,
-    onCollapsedDraggableChange = _useProps.onCollapsedDraggableChange;
+    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;
@@ -35,12 +35,12 @@ function CollapseWithAsideWidget() {
   return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
     axis: 'y',
     position: {
-      x: 0,
-      y: 0
+      x: +(collapsedDraggable[0] || 0),
+      y: +(collapsedDraggable[1] || 0)
     },
     bounds: {
-      left: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[0]) || 0),
-      right: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[1]) || 0),
+      left: 0,
+      right: 0,
       top: -500,
       bottom: 0
     },
@@ -49,7 +49,7 @@ function CollapseWithAsideWidget() {
     },
     onStop: function onStop(_, data) {
       setIsDragging(false);
-      onCollapsedDraggableChange === null || onCollapsedDraggableChange === void 0 ? void 0 : onCollapsedDraggableChange(data.x, data.y);
+      handleCollapsedDraggableChange(data.x, data.y);
     }
   }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseWrapper, {
     $isDragging: isDragging,

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

@@ -17,7 +17,7 @@ var ScCollapseWrapper = exports.ScCollapseWrapper = _styledComponents.default.di
   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;
+  return $collapsedAsideMini ? (0, _styledComponents.css)(["zoom:0.8;margin-right:-10px;"]) : null;
 });
 var ScCollapseAside = exports.ScCollapseAside = _styledComponents.default.div.withConfig({
   componentId: "sc-140xzf5-1"

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-with-aside-widget/index.js

@@ -4,7 +4,7 @@ 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 { useHandleCollapsedChange, useProps, useItemsTop, useCollapsedDraggable, useHandleCollapsedDraggableChange } from '../../../../model';
 import intl from '../../../intl';
 import { SidePanelItemBadge, SidePanelItemWrap } from '../../../rc';
 import { ScCollapseWrapper, ScCollapseAside, ScCollapseButton } from './styles';
@@ -15,9 +15,9 @@ export default function CollapseWithAsideWidget() {
     setIsDragging = _useState2[1];
   var _useProps = useProps(),
     collapsedAside = _useProps.collapsedAside,
-    collapsedAsideMini = _useProps.collapsedAsideMini,
-    collapsedDraggable = _useProps.collapsedDraggable,
-    onCollapsedDraggableChange = _useProps.onCollapsedDraggableChange;
+    collapsedAsideMini = _useProps.collapsedAsideMini;
+  var collapsedDraggable = useCollapsedDraggable();
+  var handleCollapsedDraggableChange = useHandleCollapsedDraggableChange();
   var handleToggleCollapsed = useHandleCollapsedChange();
   var unread = useItemsTop().some(function (v) {
     return v.unread;
@@ -25,12 +25,12 @@ export default function CollapseWithAsideWidget() {
   return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Draggable, {
     axis: 'y',
     position: {
-      x: 0,
-      y: 0
+      x: +(collapsedDraggable[0] || 0),
+      y: +(collapsedDraggable[1] || 0)
     },
     bounds: {
-      left: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[0]) || 0),
-      right: +((collapsedDraggable === null || collapsedDraggable === void 0 ? void 0 : collapsedDraggable[1]) || 0),
+      left: 0,
+      right: 0,
       top: -500,
       bottom: 0
     },
@@ -39,7 +39,7 @@ export default function CollapseWithAsideWidget() {
     },
     onStop: function onStop(_, data) {
       setIsDragging(false);
-      onCollapsedDraggableChange === null || onCollapsedDraggableChange === void 0 ? void 0 : onCollapsedDraggableChange(data.x, data.y);
+      handleCollapsedDraggableChange(data.x, data.y);
     }
   }, /*#__PURE__*/React.createElement(ScCollapseWrapper, {
     $isDragging: isDragging,

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

@@ -8,7 +8,7 @@ export var ScCollapseWrapper = styled.div.withConfig({
   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;
+  return $collapsedAsideMini ? css(["zoom:0.8;margin-right:-10px;"]) : null;
 });
 export var ScCollapseAside = styled.div.withConfig({
   componentId: "sc-140xzf5-1"

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/state.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.24-beta.2",
+  "version": "1.1.24-beta.3",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,