@alicloud/console-base-rc-side-panel 1.1.14 → 1.1.16

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

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
+exports.QUICK_TOP_VISIBLE_OFFSET = exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
 var BODY_CLASS_WITH_SIDE_PANEL = exports.BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
+var QUICK_TOP_VISIBLE_OFFSET = exports.QUICK_TOP_VISIBLE_OFFSET = 200;
 var DEFAULT_CONTEXT_STATE = exports.DEFAULT_CONTEXT_STATE = {
-  collapsed: true
+  collapsed: true,
+  quickTopVisible: false
 };

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

@@ -6,5 +6,6 @@ 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";
   return EAction;
 }({});

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

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "useHandleCollapsedChange", {
     return _useHandleCollapsedChange.default;
   }
 });
+Object.defineProperty(exports, "useHandleGoTop", {
+  enumerable: true,
+  get: function get() {
+    return _useHandleGoTop.default;
+  }
+});
 Object.defineProperty(exports, "useItemsBottom", {
   enumerable: true,
   get: function get() {
@@ -40,6 +46,12 @@ Object.defineProperty(exports, "useProps", {
     return _useModelProps.default;
   }
 });
+Object.defineProperty(exports, "useQuickTop", {
+  enumerable: true,
+  get: function get() {
+    return _useQuickTop.default;
+  }
+});
 Object.defineProperty(exports, "useVisible", {
   enumerable: true,
   get: function get() {
@@ -52,4 +64,6 @@ var _useVisible = _interopRequireDefault(require("./use-visible"));
 var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
 var _useItemsTop = _interopRequireDefault(require("./use-items-top"));
 var _useItemsBottom = _interopRequireDefault(require("./use-items-bottom"));
-var _useHandleCollapsedChange = _interopRequireDefault(require("./use-handle-collapsed-change"));
+var _useQuickTop = _interopRequireDefault(require("./use-quick-top"));
+var _useHandleCollapsedChange = _interopRequireDefault(require("./use-handle-collapsed-change"));
+var _useHandleGoTop = _interopRequireDefault(require("./use-handle-go-top"));

package/build/cjs/model/hook/use-dispatch-set-quick-top-visible.js

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

package/build/cjs/model/hook/use-effect-quick-top.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useEffectQuickTop;
+var _react = require("react");
+var _const = require("../const");
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+var _useVisible = _interopRequireDefault(require("./use-visible"));
+var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
+var _useHandleSetQuickTopVisible = _interopRequireDefault(require("./use-handle-set-quick-top-visible"));
+function useEffectQuickTop() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var visible = (0, _useVisible.default)();
+  var collapsed = (0, _useCollapsed.default)();
+  var handleSetQuickTopVisible = (0, _useHandleSetQuickTopVisible.default)();
+  var handleToggleVisible = (0, _react.useCallback)(function () {
+    if (!quickTopContainer) {
+      return;
+    }
+    handleSetQuickTopVisible((quickTopContainer.scrollY || quickTopContainer.scrollTop) > _const.QUICK_TOP_VISIBLE_OFFSET);
+  }, [quickTopContainer, handleSetQuickTopVisible]);
+
+  // container 变化导致 handleToggleVisible 变化，此时需要执行一次
+  (0, _react.useEffect)(handleToggleVisible, [handleToggleVisible]);
+
+  // 对 container 进行 scroll 的事件绑定
+  (0, _react.useEffect)(function () {
+    if (!quickTopContainer || !visible || collapsed) {
+      return;
+    }
+    quickTopContainer.addEventListener('scroll', handleToggleVisible);
+    return function () {
+      return quickTopContainer.removeEventListener('scroll', handleToggleVisible);
+    };
+  }, [visible, collapsed, quickTopContainer, handleToggleVisible]);
+}

package/build/cjs/model/hook/use-effects.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useEffects;
 var _useEffectToggleBodyClass = _interopRequireDefault(require("./use-effect-toggle-body-class"));
+var _useEffectQuickTop = _interopRequireDefault(require("./use-effect-quick-top"));
 function useEffects() {
   (0, _useEffectToggleBodyClass.default)();
+  (0, _useEffectQuickTop.default)();
 }

package/build/cjs/model/hook/use-handle-go-top.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHandleGoTop;
+var _react = require("react");
+var _mereDom = require("@alicloud/mere-dom");
+var _useQuickTop2 = _interopRequireDefault(require("./use-quick-top"));
+function useHandleGoTop() {
+  var _useQuickTop = (0, _useQuickTop2.default)(),
+    container = _useQuickTop.container;
+  return (0, _react.useCallback)(function () {
+    if (!container) {
+      return;
+    }
+    (0, _mereDom.scrollTo)(container, {
+      top: 0
+    });
+  }, [container]);
+}

package/build/cjs/model/hook/use-handle-set-quick-top-visible.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHandleSetQuickTopVisible;
+var _react = require("react");
+var _useDispatchSetQuickTopVisible = _interopRequireDefault(require("./use-dispatch-set-quick-top-visible"));
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+function useHandleSetQuickTopVisible() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    onQuickTopVisibleChange = _useModelProps.onQuickTopVisibleChange;
+  var dispatchSetQuickTopVisible = (0, _useDispatchSetQuickTopVisible.default)();
+  return (0, _react.useCallback)(function (visible) {
+    dispatchSetQuickTopVisible(visible);
+    onQuickTopVisibleChange === null || onQuickTopVisibleChange === void 0 ? void 0 : onQuickTopVisibleChange(visible);
+  }, [dispatchSetQuickTopVisible, onQuickTopVisibleChange]);
+}

package/build/cjs/model/hook/use-quick-top.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useQuickTop;
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+var _useModelState2 = _interopRequireDefault(require("./_use-model-state"));
+function useQuickTop() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var _useModelState = (0, _useModelState2.default)(),
+    quickTopVisible = _useModelState.quickTopVisible;
+  return {
+    container: quickTopContainer,
+    visible: quickTopVisible
+  };
+}

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

@@ -7,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = reducer;
 var _enum = require("../enum");
 var _reduceSetCollapsed = _interopRequireDefault(require("./reduce-set-collapsed"));
+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_QUICK_TOP_VISIBLE:
+      return (0, _reduceSetQuickTopVisible.default)(state, action.payload);
     default:
       return state;
   }

package/build/cjs/model/reducer/reduce-set-quick-top-visible.js

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

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

@@ -10,8 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
 var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
-var _consoleBaseConfEnv = _interopRequireDefault(require("@alicloud/console-base-conf-env"));
-var _consoleBaseConfLocale = _interopRequireWildcard(require("@alicloud/console-base-conf-locale"));
 var _model = require("../../../model");
 var _styles = require("./styles");
 var _rc = require("../../rc");
@@ -23,26 +21,27 @@ function PanelToggle() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
+  var _useProps = (0, _model.useProps)(),
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = (0, _model.useCollapsed)();
   var unread = (0, _model.useItemsTop)().some(function (v) {
     return v.unread;
   });
   var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
   var title = (0, _intl.default)(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  // 站点是否处于简体中文环境下，即国内站
-  var isSimpleCN = _consoleBaseConfEnv.default.SITE === 'CN' && _consoleBaseConfLocale.default.LANGUAGE === _consoleBaseConfLocale.ELanguage.ZH;
   return /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggleWrap, null, /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
     title: title,
     placement: "left",
     destroyTooltipOnHide: true,
     fixed: true,
+    mouseEnterDelay: !collapsedAside && collapsed ? 250 : 0,
     overlayStyle: {
       marginLeft: '8px'
     }
   }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggle, {
     $hovered: isHovered,
     $collapsed: collapsed,
-    $isSimpleCN: isSimpleCN,
+    $collapsedAside: !!collapsedAside,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
@@ -57,10 +56,10 @@ function PanelToggle() {
     }),
     onClick: handleToggleCollapsed,
     $collapsed: collapsed,
-    $isSimpleCN: isSimpleCN,
+    $collapsedAside: !!collapsedAside,
     $hovered: isHovered
   }), collapsed && unread ? /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
     unread: true,
-    alignLeft: !isSimpleCN && !isHovered
+    alignLeft: true
   }) : null)));
 }

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

@@ -14,19 +14,15 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ScCollapseToggleWrap = exports.ScCollapseToggleWrap = _styledComponents.default.div.withConfig({
   componentId: "sc-xm41v7-0"
 })(["position:absolute;right:0;bottom:", "px;"], _const.SPACING_Y);
-var cssToggleNone = (0, _styledComponents.css)(["transform:translateX(0);"]);
 var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-101%);"]);
-var cssToggleOut = (0, _styledComponents.css)(["transform:translateX(-50%);"]);
+var cssToggleOut = (0, _styledComponents.css)(["transform:translateX(-50.5%);"]);
 var ScCollapseToggle = exports.ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
   componentId: "sc-xm41v7-1"
-})(["transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
+})(["transform:translateX(0);transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
   var $collapsed = _ref.$collapsed,
-    $isSimpleCN = _ref.$isSimpleCN,
+    $collapsedAside = _ref.$collapsedAside,
     $hovered = _ref.$hovered;
-  if (!$collapsed) {
-    return cssToggleNone;
-  }
-  return $isSimpleCN || $hovered ? cssToggleIn : cssToggleOut;
+  return $collapsed && ($collapsedAside || $hovered ? cssToggleIn : cssToggleOut);
 });
 var collapsedStyles = (0, _styledComponents.css)(["&,&:hover{", " ", "}"], _consoleBaseTheme.mixinBgAccent, _consoleBaseTheme.mixinTextWhite);
 var nonSimpleCnPadding = (0, _styledComponents.css)(["padding-left:4px;text-align:left;"]);
@@ -37,7 +33,7 @@ var ScCollapseToggleButton = exports.ScCollapseToggleButton = (0, _styledCompone
   return $collapsed && collapsedStyles;
 }, function (_ref3) {
   var $collapsed = _ref3.$collapsed,
-    $isSimpleCN = _ref3.$isSimpleCN,
+    $collapsedAside = _ref3.$collapsedAside,
     $hovered = _ref3.$hovered;
-  return $collapsed && !$isSimpleCN && !$hovered && nonSimpleCnPadding;
+  return $collapsed && !$collapsedAside && !$hovered && nonSimpleCnPadding;
 });

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

@@ -14,6 +14,7 @@ var _consoleBaseThemeScBase = require("@alicloud/console-base-theme-sc-base");
 var _model = require("../../../model");
 var _const = require("../../const");
 var _item = _interopRequireDefault(require("../item"));
+var _quickTop = _interopRequireDefault(require("../quick-top"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function Items(_ref) {
@@ -35,11 +36,12 @@ var ScHr = (0, _styledComponents.default)(_consoleBaseThemeScBase.HrBase).withCo
   componentId: "sc-1h5t3jq-0"
 })(["margin:", "px 4px;"], _const.SPACING_Y);
 function ItemsBottom() {
+  var quickTop = (0, _model.useQuickTop)();
   var children = (0, _model.useChildren)();
   var items = (0, _model.useItemsBottom)();
   return /*#__PURE__*/_react.default.createElement(_consoleBaseRcFlex.default, {
     vertical: true
-  }, children || items.length ? /*#__PURE__*/_react.default.createElement(ScHr, null) : null, children || /*#__PURE__*/_react.default.createElement(Items, {
+  }, quickTop.container && quickTop.visible ? /*#__PURE__*/_react.default.createElement(_quickTop.default, null) : null, children || items.length ? /*#__PURE__*/_react.default.createElement(ScHr, null) : null, children || /*#__PURE__*/_react.default.createElement(Items, {
     items: items
   }));
 }

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

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

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

@@ -1,4 +1,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
+  collapsed: true,
+  quickTopVisible: false
 };

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

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

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

@@ -4,6 +4,8 @@ export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';
 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 useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleGoTop } from './use-handle-go-top';

package/build/esm/model/hook/use-dispatch-set-quick-top-visible.js

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

package/build/esm/model/hook/use-effect-quick-top.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect } from 'react';
+import { QUICK_TOP_VISIBLE_OFFSET } from '../const';
+import useModelProps from './_use-model-props';
+import useVisible from './use-visible';
+import useCollapsed from './use-collapsed';
+import useHandleSetQuickTopVisible from './use-handle-set-quick-top-visible';
+export default function useEffectQuickTop() {
+  var _useModelProps = useModelProps(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var visible = useVisible();
+  var collapsed = useCollapsed();
+  var handleSetQuickTopVisible = useHandleSetQuickTopVisible();
+  var handleToggleVisible = useCallback(function () {
+    if (!quickTopContainer) {
+      return;
+    }
+    handleSetQuickTopVisible((quickTopContainer.scrollY || quickTopContainer.scrollTop) > QUICK_TOP_VISIBLE_OFFSET);
+  }, [quickTopContainer, handleSetQuickTopVisible]);
+
+  // container 变化导致 handleToggleVisible 变化，此时需要执行一次
+  useEffect(handleToggleVisible, [handleToggleVisible]);
+
+  // 对 container 进行 scroll 的事件绑定
+  useEffect(function () {
+    if (!quickTopContainer || !visible || collapsed) {
+      return;
+    }
+    quickTopContainer.addEventListener('scroll', handleToggleVisible);
+    return function () {
+      return quickTopContainer.removeEventListener('scroll', handleToggleVisible);
+    };
+  }, [visible, collapsed, quickTopContainer, handleToggleVisible]);
+}

package/build/esm/model/hook/use-effects.js

@@ -1,4 +1,6 @@
 import useEffectToggleBodyClass from './use-effect-toggle-body-class';
+import useEffectQuickTop from './use-effect-quick-top';
 export default function useEffects() {
   useEffectToggleBodyClass();
+  useEffectQuickTop();
 }

package/build/esm/model/hook/use-handle-go-top.js

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { scrollTo } from '@alicloud/mere-dom';
+import useQuickTop from './use-quick-top';
+export default function useHandleGoTop() {
+  var _useQuickTop = useQuickTop(),
+    container = _useQuickTop.container;
+  return useCallback(function () {
+    if (!container) {
+      return;
+    }
+    scrollTo(container, {
+      top: 0
+    });
+  }, [container]);
+}

package/build/esm/model/hook/use-handle-set-quick-top-visible.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import useDispatchSetQuickTopVisible from './use-dispatch-set-quick-top-visible';
+import useModelProps from './_use-model-props';
+export default function useHandleSetQuickTopVisible() {
+  var _useModelProps = useModelProps(),
+    onQuickTopVisibleChange = _useModelProps.onQuickTopVisibleChange;
+  var dispatchSetQuickTopVisible = useDispatchSetQuickTopVisible();
+  return useCallback(function (visible) {
+    dispatchSetQuickTopVisible(visible);
+    onQuickTopVisibleChange === null || onQuickTopVisibleChange === void 0 ? void 0 : onQuickTopVisibleChange(visible);
+  }, [dispatchSetQuickTopVisible, onQuickTopVisibleChange]);
+}

package/build/esm/model/hook/use-quick-top.js

@@ -0,0 +1,12 @@
+import useModelProps from './_use-model-props';
+import useModelState from './_use-model-state';
+export default function useQuickTop() {
+  var _useModelProps = useModelProps(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var _useModelState = useModelState(),
+    quickTopVisible = _useModelState.quickTopVisible;
+  return {
+    container: quickTopContainer,
+    visible: quickTopVisible
+  };
+}

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

@@ -1,9 +1,12 @@
 import { EAction } from '../enum';
 import reduceSetCollapsed from './reduce-set-collapsed';
+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_QUICK_TOP_VISIBLE:
+      return reduceSetQuickTopVisible(state, action.payload);
     default:
       return state;
   }

package/build/esm/model/reducer/reduce-set-quick-top-visible.js

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

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

@@ -2,9 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import Icon from '@alicloud/console-base-rc-icon';
 import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
-import CONF_ENV from '@alicloud/console-base-conf-env';
-import CONF_LOCALE, { ELanguage } from '@alicloud/console-base-conf-locale';
-import { useCollapsed, useItemsTop, useHandleCollapsedChange } from '../../../model';
+import { useCollapsed, useItemsTop, useHandleCollapsedChange, useProps } from '../../../model';
 import { ScCollapseToggleWrap, ScCollapseToggle, ScCollapseToggleButton } from './styles';
 import { SidePanelItemBadge } from '../../rc';
 import intl from '../../intl';
@@ -13,26 +11,27 @@ export default function PanelToggle() {
     _useState2 = _slicedToArray(_useState, 2),
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
+  var _useProps = useProps(),
+    collapsedAside = _useProps.collapsedAside;
   var collapsed = useCollapsed();
   var unread = useItemsTop().some(function (v) {
     return v.unread;
   });
   var handleToggleCollapsed = useHandleCollapsedChange();
   var title = intl(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  // 站点是否处于简体中文环境下，即国内站
-  var isSimpleCN = CONF_ENV.SITE === 'CN' && CONF_LOCALE.LANGUAGE === ELanguage.ZH;
   return /*#__PURE__*/React.createElement(ScCollapseToggleWrap, null, /*#__PURE__*/React.createElement(TooltipV1, {
     title: title,
     placement: "left",
     destroyTooltipOnHide: true,
     fixed: true,
+    mouseEnterDelay: !collapsedAside && collapsed ? 250 : 0,
     overlayStyle: {
       marginLeft: '8px'
     }
   }, /*#__PURE__*/React.createElement(ScCollapseToggle, {
     $hovered: isHovered,
     $collapsed: collapsed,
-    $isSimpleCN: isSimpleCN,
+    $collapsedAside: !!collapsedAside,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
@@ -47,10 +46,10 @@ export default function PanelToggle() {
     }),
     onClick: handleToggleCollapsed,
     $collapsed: collapsed,
-    $isSimpleCN: isSimpleCN,
+    $collapsedAside: !!collapsedAside,
     $hovered: isHovered
   }), collapsed && unread ? /*#__PURE__*/React.createElement(SidePanelItemBadge, {
     unread: true,
-    alignLeft: !isSimpleCN && !isHovered
+    alignLeft: true
   }) : null)));
 }

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

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

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

@@ -5,9 +5,10 @@ import React from 'react';
 import styled from 'styled-components';
 import Flex from '@alicloud/console-base-rc-flex';
 import { HrBase } from '@alicloud/console-base-theme-sc-base';
-import { useChildren, useItemsTop, useItemsBottom } from '../../../model';
+import { useChildren, useItemsTop, useItemsBottom, useQuickTop } from '../../../model';
 import { DATA_KEY_SIDE_PANEL_ITEM, SPACING_Y } from '../../const';
 import PanelItem from '../item';
+import QuickTop from '../quick-top';
 function Items(_ref) {
   var items = _ref.items;
   return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (v) {
@@ -27,11 +28,12 @@ var ScHr = styled(HrBase).withConfig({
   componentId: "sc-1h5t3jq-0"
 })(["margin:", "px 4px;"], SPACING_Y);
 export function ItemsBottom() {
+  var quickTop = useQuickTop();
   var children = useChildren();
   var items = useItemsBottom();
   return /*#__PURE__*/React.createElement(Flex, {
     vertical: true
-  }, children || items.length ? /*#__PURE__*/React.createElement(ScHr, null) : null, children || /*#__PURE__*/React.createElement(Items, {
+  }, quickTop.container && quickTop.visible ? /*#__PURE__*/React.createElement(QuickTop, null) : null, children || items.length ? /*#__PURE__*/React.createElement(ScHr, null) : null, children || /*#__PURE__*/React.createElement(Items, {
     items: items
   }));
 }

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

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

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

@@ -1,3 +1,4 @@
 import { IModelState } from '../types';
 export declare const BODY_CLASS_WITH_SIDE_PANEL = "with-side-panel";
+export declare const QUICK_TOP_VISIBLE_OFFSET = 200;
 export declare const DEFAULT_CONTEXT_STATE: IModelState;

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

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

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

@@ -4,4 +4,6 @@ export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';
 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 useHandleGoTop } from './use-handle-go-top';

package/build/types/model/hook/use-dispatch-set-quick-top-visible.d.ts

@@ -0,0 +1 @@
+export default function useDispatchSetQuickTopVisible(): (payload: boolean) => void;

package/build/types/model/hook/use-effect-quick-top.d.ts

@@ -0,0 +1 @@
+export default function useEffectQuickTop(): void;

package/build/types/model/hook/use-handle-go-top.d.ts

@@ -0,0 +1 @@
+export default function useHandleGoTop(): () => void;

package/build/types/model/hook/use-handle-set-quick-top-visible.d.ts

@@ -0,0 +1 @@
+export default function useHandleSetQuickTopVisible(): (visible: boolean) => void;

package/build/types/model/hook/use-quick-top.d.ts

@@ -0,0 +1,6 @@
+interface IQuickTop {
+    container?: Window | HTMLElement | null;
+    visible: boolean;
+}
+export default function useQuickTop(): IQuickTop;
+export {};

package/build/types/model/reducer/reduce-set-quick-top-visible.d.ts

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

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

@@ -1,7 +1,7 @@
 import { Dispatch } from 'react';
 import { EAction } from '../enum';
 export type TModelAction = {
-    type: EAction.SET_COLLAPSED;
+    type: EAction.SET_COLLAPSED | EAction.SET_QUICK_TOP_VISIBLE;
     payload: boolean;
 };
 export type TModelDispatch = Dispatch<TModelAction>;

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

@@ -26,6 +26,14 @@ export interface IModelProps {
      * 位于折叠点【推入按钮】上部的内容，将会跟随推入按钮做出入运动，嵌入 sidePanel 后，它将会隐藏
      */
     collapsedAside?: JSX.Element | null;
+    /**
+     * 给一个 DOM 节点，组件会监测它的滚动情况，并判断是否展示快速置顶按钮
+     */
+    quickTopContainer?: Window | HTMLElement | null;
+    /**
+     * QuickTop 显隐变化时的回调，可用于日志
+     */
+    onQuickTopVisibleChange?(visible: boolean): void;
     /**
      * 是否展示推入按钮
      */

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

@@ -1,3 +1,4 @@
 export interface IModelState {
     collapsed: boolean;
+    quickTopVisible: boolean;
 }

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
@@ -43,7 +43,7 @@
     "@alicloud/console-base-rc-html-trusted": "^1.0.5",
     "@alicloud/console-base-rc-icon": "^1.10.6",
     "@alicloud/console-base-rc-marks": "^1.8.3",
-    "@alicloud/console-base-rc-tooltip": "^1.1.20",
+    "@alicloud/console-base-rc-tooltip": "^1.1.21",
     "@alicloud/console-base-theme": "^1.9.7",
     "@alicloud/console-base-theme-sc-base": "^1.6.4",
     "@alicloud/mere-dom": "^1.8.0",