@alicloud/console-base-rc-side-panel 1.1.11 → 1.1.12-beta.0

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

@@ -4,9 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Items;
+exports.ItemsBottom = ItemsBottom;
+exports.ItemsTop = ItemsTop;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _consoleBaseRcFlex = _interopRequireDefault(require("@alicloud/console-base-rc-flex"));
+var _consoleBaseThemeScBase = require("@alicloud/console-base-theme-sc-base");
 var _model = require("../../../model");
 var _const = require("../../const");
 var _item = _interopRequireDefault(require("../item"));
@@ -14,13 +18,28 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) {
   var items = _ref.items;
-  var collapsed = (0, _model.useCollapsed)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map(function (v) {
-    var _v$tooltipOptions;
-    // 侧边栏收起时，默认展示的 tooltip 需要关闭，不能放在 Item 中，否则会使其重复渲染。
-    if (collapsed && v !== null && v !== void 0 && (_v$tooltipOptions = v.tooltipOptions) !== null && _v$tooltipOptions !== void 0 && _v$tooltipOptions.open) {
-      v.tooltipOptions.open = false;
-    }
-    return /*#__PURE__*/_react.default.createElement(_item.default, _objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _const.DATA_KEY_SIDE_PANEL_ITEM, v.key), "spm", v.key), v));
+    return /*#__PURE__*/_react.default.createElement(_item.default, _objectSpread(_objectSpread({}, v), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _const.DATA_KEY_SIDE_PANEL_ITEM, v.key), "spm", v.key)));
+  }));
+}
+function ItemsTop() {
+  var items = (0, _model.useItemsTop)();
+  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcFlex.default, {
+    vertical: true,
+    flex: true
+  }, /*#__PURE__*/_react.default.createElement(Items, {
+    items: items
+  }));
+}
+var ScHr = (0, _styledComponents.default)(_consoleBaseThemeScBase.HrBase).withConfig({
+  componentId: "sc-1h5t3jq-0"
+})(["margin:", "px 4px;"], _const.SPACING_Y);
+function ItemsBottom() {
+  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, {
+    items: items
   }));
 }

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

@@ -1,6 +1,4 @@
 export var BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
-export var QUICK_TOP_VISIBLE_OFFSET = 200;
 export var DEFAULT_CONTEXT_STATE = {
-  collapsed: false,
-  quickTopVisible: false
+  collapsed: true
 };

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

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

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

@@ -1,6 +1,4 @@
 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/reducer/index.js

@@ -1,12 +1,9 @@
 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/ui/index.js

@@ -5,11 +5,12 @@ import { SIZE, Z_INDEX, mixinBgPrimary, mixinBorderTertiaryLeft } from '@aliclou
 import { useVisible, useCollapsed } from '../model';
 import { SIZE_BUTTON_WRAP_HEIGHT, SPACING_Y, DATA_KEY_J } from './const';
 import { GlobalStyleOnBody } from './rc';
-import { ItemsTop, ItemsBottom, CollapseToggle } from './rc-container';
+import { ItemsTop, ItemsBottom, CollapseToggle, CollapseAside } from './rc-container';
 var ScAside = styled.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;box-shadow:none;", "  ", " ", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE_BUTTON_WRAP_HEIGHT + SPACING_Y, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinBorderTertiaryLeft, function (props) {
-  return props.$collapsed ? css(["transform:translateX(101%);border:none !important;"]) : mixinBorderTertiaryLeft;
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE_BUTTON_WRAP_HEIGHT + SPACING_Y, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinBorderTertiaryLeft, function (_ref) {
+  var $collapsed = _ref.$collapsed;
+  return $collapsed ? css(["transform:translateX(101%);border:none !important;"]) : mixinBorderTertiaryLeft;
 }, SIZE.HEIGHT_TOP_NAV);
 export default function Ui() {
   var visible = useVisible();
@@ -17,5 +18,5 @@ export default function Ui() {
   return visible ? /*#__PURE__*/React.createElement(ScAside, _defineProperty({
     $collapsed: collapsed,
     className: 'J_fixed_right_will_be_pushed_left'
-  }, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(CollapseToggle, null)) : null;
+  }, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(CollapseAside, null), /*#__PURE__*/React.createElement(CollapseToggle, null)) : null;
 }

package/build/esm/ui/rc/side-panel-item-button/index.js

@@ -1,38 +1,28 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "onlyShowIcon"];
+var _excluded = ["title", "icon", "onlyShowIcon", "active"];
 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) { _defineProperty(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; }
-import React from "react";
-import styled, { css } from "styled-components";
-import { mixinTextSecondary, mixinBgSecondaryFade, mixinBgTertiaryFade, mixinShadowSDown } from "@alicloud/console-base-theme";
-import Button, { ButtonSize, ButtonTheme } from "@alicloud/console-base-rc-button";
-import { SIZE_BUTTON, SIZE_BUTTON_ICON } from "../../const";
-var ScButton = styled(Button).withConfig({
-  componentId: "sc-titsgb-0"
-})(["border-radius:", "px;width:", "px;height:", "px;line-height:", "px;", " ", " ", " i{font-size:", "px;}svg,img{display:inline-block;width:", "px;height:", "px;vertical-align:middle;}&:hover{", "}a:link&,a:visited&{", "}"], SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, mixinBgSecondaryFade, mixinTextSecondary, function (props) {
-  return props.active ? css(["", " ", ""], mixinBgTertiaryFade, mixinShadowSDown) : null;
-}, SIZE_BUTTON_ICON, SIZE_BUTTON_ICON, SIZE_BUTTON_ICON, mixinBgTertiaryFade, mixinTextSecondary);
-var ScButtonIcon = styled(Button).withConfig({
-  componentId: "sc-titsgb-1"
-})(["border-radius:", "px;width:", "px;height:", "px;line-height:", "px;svg,img{display:inline-block;width:", "px;height:", "px;vertical-align:middle;}"], SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON);
+import React from 'react';
+import { ButtonSize, ButtonTheme } from '@alicloud/console-base-rc-button';
+import { renderEasyIcon } from '@alicloud/console-base-rc-easy-icon';
+import { ScButton } from './styles';
 
 /**
  * 工具的按钮
  */
 export default function SidePanelItemButton(_ref) {
   var title = _ref.title,
+    icon = _ref.icon,
     onlyShowIcon = _ref.onlyShowIcon,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return onlyShowIcon ? /*#__PURE__*/React.createElement(ScButtonIcon, _objectSpread(_objectSpread({
-    "aria-label": title
-  }, props), {}, {
+    active = _ref.active,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ScButton, _objectSpread({
     size: ButtonSize.NONE,
-    theme: ButtonTheme.NONE
-  })) : /*#__PURE__*/React.createElement(ScButton, _objectSpread(_objectSpread({
-    "aria-label": title
-  }, props), {}, {
-    size: ButtonSize.NONE,
-    theme: ButtonTheme.NONE
-  }));
+    theme: ButtonTheme.NONE,
+    'aria-label': title,
+    label: renderEasyIcon(icon) || '',
+    $onlyShowIcon: onlyShowIcon || false,
+    $active: active || false
+  }, rest));
 }

package/build/esm/ui/rc/side-panel-item-button/styles.js

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+import Button from '@alicloud/console-base-rc-button';
+import { mixinTextSecondary, mixinBgSecondaryFade, mixinBgTertiaryFade, mixinShadowSDown } from '@alicloud/console-base-theme';
+import { SIZE_BUTTON, SIZE_BUTTON_ICON } from '../../const';
+export var ScButton = styled(Button).withConfig({
+  componentId: "sc-1fk7xls-0"
+})(["width:", "px;height:", "px;line-height:", "px;border-radius:", "px;", " ", " i{font-size:", "px;}svg,img{display:inline-block;width:", "px;height:", "px;vertical-align:middle;}"], SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, function (_ref) {
+  var $onlyShowIcon = _ref.$onlyShowIcon;
+  return !$onlyShowIcon ? css(["", " ", " &:hover{", "}a:link&,a:visited&{", "}"], mixinBgSecondaryFade, mixinTextSecondary, mixinBgTertiaryFade, mixinTextSecondary) : null;
+}, function (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? css(["", " ", ""], mixinBgTertiaryFade, mixinShadowSDown) : null;
+}, function (_ref3) {
+  var $onlyShowIcon = _ref3.$onlyShowIcon;
+  return !$onlyShowIcon ? SIZE_BUTTON_ICON : SIZE_BUTTON;
+}, function (_ref4) {
+  var $onlyShowIcon = _ref4.$onlyShowIcon;
+  return !$onlyShowIcon ? SIZE_BUTTON_ICON : SIZE_BUTTON;
+}, function (_ref5) {
+  var $onlyShowIcon = _ref5.$onlyShowIcon;
+  return !$onlyShowIcon ? SIZE_BUTTON_ICON : SIZE_BUTTON;
+});

package/build/esm/ui/rc/side-panel-item-wrap/index.js

@@ -6,4 +6,4 @@ import { SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT } from '../../const';
  */
 export default styled.div.withConfig({
   componentId: "sc-3r2cly-0"
-})(["display:flex;align-items:center;justify-content:center;position:relative;width:", "px;height:", "px;transition:all ease-in-out 250ms;"], SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT);
+})(["display:flex;align-items:center;justify-content:center;position:relative;width:", "px;height:", "px;"], SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT);

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

@@ -0,0 +1,19 @@
+import React, { useRef } from 'react';
+import { useCollapsed, useProps } from '../../../model';
+import { ScCollapseAsideWrap, ScCSSTransition } from './styles';
+export default function CollapseAside() {
+  var collapseAsideRef = useRef(null);
+  var _useProps = useProps(),
+    collapsedAside = _useProps.collapsedAside;
+  var collapsed = useCollapsed();
+  return collapsedAside ? /*#__PURE__*/React.createElement(ScCSSTransition, {
+    nodeRef: collapseAsideRef,
+    in: collapsed,
+    classNames: "cb-collapse-aside",
+    timeout: 200,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(ScCollapseAsideWrap, {
+    ref: collapseAsideRef
+  }, collapsedAside)) : null;
+}

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

@@ -0,0 +1,27 @@
+import styled, { keyframes } from 'styled-components';
+import { CSSTransition } from 'react-transition-group';
+var KfZoomBigIn = keyframes(["0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}"]);
+export var ScCSSTransition = styled(CSSTransition).withConfig({
+  componentId: "sc-1slnea7-0"
+})(["&.", "{animation-timing-function:cubic-bezier(0.08,0.82,0.17,1);animation-duration:", ";animation-fill-mode:both;animation-play-state:paused;}&.", "{animation-name:", ";animation-play-state:running;}&.", "{pointer-events:none;animation-timing-function:cubic-bezier(0.78,0.14,0.15,0.86);animation-duration:", ";animation-fill-mode:both;animation-play-state:paused;}&.", "{animation-name:", ";animation-direction:reverse;animation-play-state:running;}"], function (_ref) {
+  var classNames = _ref.classNames;
+  return "".concat(classNames, "-enter");
+}, function (_ref2) {
+  var timeout = _ref2.timeout;
+  return "".concat(timeout, "ms");
+}, function (_ref3) {
+  var classNames = _ref3.classNames;
+  return "".concat(classNames, "-enter-active");
+}, KfZoomBigIn, function (_ref4) {
+  var classNames = _ref4.classNames;
+  return "".concat(classNames, "-exit");
+}, function (_ref5) {
+  var timeout = _ref5.timeout;
+  return "".concat(timeout, "ms");
+}, function (_ref6) {
+  var classNames = _ref6.classNames;
+  return "".concat(classNames, "-exit-active");
+}, KfZoomBigIn);
+export var ScCollapseAsideWrap = styled.div.withConfig({
+  componentId: "sc-1slnea7-1"
+})(["position:absolute;right:100%;bottom:50px;margin-right:10px;"]);

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

@@ -1,84 +1,56 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-import { mixinBgAccent, mixinTextWhite } from '@alicloud/console-base-theme';
 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 { SidePanelItemWrap, SidePanelItemButton, SidePanelItemBadge } from '../../rc';
-import { useCollapsed, useItemsTop, useHandleCollapsedChange, useProps } from '../../../model';
-import { SPACING_Y } from '../../const';
+import { useCollapsed, useItemsTop, useHandleCollapsedChange } from '../../../model';
+import { ScCollapseToggleWrap, ScCollapseToggle, ScCollapseToggleButton } from './styles';
+import { SidePanelItemBadge } from '../../rc';
 import intl from '../../intl';
-/**
- * 站点是否处于简体中文环境下，即国内站
- */
-var isSimpleCN = function isSimpleCN() {
-  return CONF_ENV.SITE === 'CN' && CONF_LOCALE.LANGUAGE === ELanguage.ZH;
-};
-var cssToggleIn = css(["transform:translateX(-100%);"]);
-var ScCollapseToggle = styled(SidePanelItemWrap).withConfig({
-  componentId: "sc-15z8r94-0"
-})(["position:absolute;right:0;bottom:", "px;flex-direction:column;", ""], SPACING_Y, function (props) {
-  if (!props.collapsed) {
-    return null;
-  }
-  if (isSimpleCN()) {
-    return cssToggleIn;
-  }
-  return props.hovered ? cssToggleIn : css(["transform:translateX(-50%);"]);
-});
-var ScCollapseToggleButton = styled(SidePanelItemButton).withConfig({
-  componentId: "sc-15z8r94-1"
-})(["", " ", ""], function (props) {
-  return props.active ? css(["", " ", " &:hover{", " ", "}"], mixinBgAccent, mixinTextWhite, mixinBgAccent, mixinTextWhite) : null;
-}, isSimpleCN() ? null : function (props) {
-  return props.collapsed && !props.hovered ? css(["padding-left:4px;text-align:left;"]) : null;
-});
 export default function PanelToggle() {
-  var _useProps = useProps(),
-    collapsedAside = _useProps.collapsedAside;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
   var collapsed = useCollapsed();
   var unread = useItemsTop().some(function (v) {
     return v.unread;
   });
   var handleToggleCollapsed = useHandleCollapsedChange();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
   var title = intl(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
-  return /*#__PURE__*/React.createElement(ScCollapseToggle, {
-    hovered: isHovered,
-    collapsed: collapsed,
+  // 站点是否处于简体中文环境下，即国内站
+  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,
+    overlayStyle: collapsed ? {
+      transform: 'translateX(10px)'
+    } : {}
+  }, /*#__PURE__*/React.createElement(ScCollapseToggle, {
+    $hovered: isHovered,
+    $collapsed: collapsed,
+    $isSimpleCN: isSimpleCN,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
-  }, collapsedAside ? collapsedAside : null, /*#__PURE__*/React.createElement(TooltipV1, {
-    title: title,
-    placement: "left",
-    mouseEnterDelay: collapsed ? 200 : 0 // 收起状态下 hover 时，需等待动画结束后再显示提示框，避免位置错误
-    ,
-    destroyTooltipOnHide: true,
-    fixed: true,
-    overlayStyle: collapsed ? {} : {
-      transform: 'translateX(-10px)'
-    }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ScCollapseToggleButton, {
-    hovered: isHovered,
-    collapsed: collapsed,
-    active: collapsed,
+  }, /*#__PURE__*/React.createElement(ScCollapseToggleButton, {
     title: title,
-    label: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
       type: "angle-right",
-      rotate: collapsed ? 180 : undefined
+      rotate: collapsed ? 180 : 0
     }),
-    onClick: handleToggleCollapsed
-  }))), collapsed && unread ? /*#__PURE__*/React.createElement(SidePanelItemBadge, {
+    onClick: handleToggleCollapsed,
+    $collapsed: collapsed,
+    $isSimpleCN: isSimpleCN,
+    $hovered: isHovered
+  }), collapsed && unread ? /*#__PURE__*/React.createElement(SidePanelItemBadge, {
     unread: true,
-    alignLeft: !isHovered && !isSimpleCN()
-  }) : null);
+    alignLeft: !isSimpleCN && !isHovered
+  }) : null)));
 }

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

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import { mixinBgAccent, mixinTextWhite } from '@alicloud/console-base-theme';
+import { SidePanelItemWrap, SidePanelItemButton } from '../../rc';
+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(-100%);"]);
+var cssToggleOut = css(["transform:translateX(-50%);"]);
+export var ScCollapseToggle = styled(SidePanelItemWrap).withConfig({
+  componentId: "sc-xm41v7-1"
+})(["transition:transform 250ms ease-in-out 0s;", ""], function (_ref) {
+  var $collapsed = _ref.$collapsed,
+    $isSimpleCN = _ref.$isSimpleCN,
+    $hovered = _ref.$hovered;
+  if (!$collapsed) {
+    return cssToggleNone;
+  }
+  return $isSimpleCN || $hovered ? cssToggleIn : cssToggleOut;
+});
+var collapsedStyles = css(["&,&:hover{", " ", "}"], mixinBgAccent, mixinTextWhite);
+var nonSimpleCnPadding = css(["padding-left:4px;text-align:left;"]);
+export var ScCollapseToggleButton = styled(SidePanelItemButton).withConfig({
+  componentId: "sc-xm41v7-2"
+})(["", " ", ""], function (_ref2) {
+  var $collapsed = _ref2.$collapsed;
+  return $collapsed && collapsedStyles;
+}, function (_ref3) {
+  var $collapsed = _ref3.$collapsed,
+    $isSimpleCN = _ref3.$isSimpleCN,
+    $hovered = _ref3.$hovered;
+  return $collapsed && !$isSimpleCN && !$hovered && nonSimpleCnPadding;
+});

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

@@ -1,3 +1,3 @@
-export { default as ItemsTop } from './items-top';
-export { default as ItemsBottom } from './items-bottom';
-export { default as CollapseToggle } from './collapse-toggle';
+export { ItemsTop, ItemsBottom } from './items';
+export { default as CollapseToggle } from './collapse-toggle';
+export { default as CollapseAside } from './collapse-aside';

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

@@ -1,47 +1,82 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "className", "style", "active", "title", "icon", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipOptions", "onlyShowIcon", "onClick", "onActiveChange"];
-import React, { useCallback } from 'react';
-import { renderEasyIcon } from '@alicloud/console-base-rc-easy-icon';
+var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
+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) { _defineProperty(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; }
+import React, { useCallback, useEffect, useState } from 'react';
 import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
 import HtmlTrusted from '@alicloud/console-base-rc-html-trusted';
+import { useCollapsed } from '../../../model';
 import { SidePanelItemWrap, SidePanelItemButton, SidePanelItemBadge } from '../../rc';
 export default function Item(_ref) {
-  var id = _ref.id,
-    className = _ref.className,
-    style = _ref.style,
-    active = _ref.active,
-    title = _ref.title,
-    icon = _ref.icon,
+  var title = _ref.title,
     unread = _ref.unread,
     mark = _ref.mark,
     tooltip = _ref.tooltip,
     tooltipAsHtml = _ref.tooltipAsHtml,
     tooltipOptions = _ref.tooltipOptions,
-    onlyShowIcon = _ref.onlyShowIcon,
-    onClick = _ref.onClick,
+    active = _ref.active,
     onActiveChange = _ref.onActiveChange,
+    onClick = _ref.onClick,
+    id = _ref.id,
+    className = _ref.className,
+    style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var handleClick = useCallback(function (e) {
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  var collapsed = useCollapsed();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    formatTitle = _useState2[0],
+    setFormatTitle = _useState2[1];
+  var _useState3 = useState(tooltipOptions),
+    _useState4 = _slicedToArray(_useState3, 2),
+    formatTooltipOptions = _useState4[0],
+    setFormatTooltipOptions = _useState4[1];
+  var handleClick = useCallback(function (event) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
-  }, [active, onClick, onActiveChange]);
+  }, [onClick, onActiveChange, active]);
+
+  // 处理复杂 title
+  useEffect(function () {
+    var formatTitle = tooltip || title;
+    if (tooltipAsHtml && typeof tooltip === 'string') {
+      formatTitle = /*#__PURE__*/React.createElement(HtmlTrusted, {
+        text: tooltip
+      });
+    }
+    setFormatTitle(formatTitle);
+  }, [tooltip, title, tooltipAsHtml]);
+
+  // 侧边栏收起时，内部弹窗需全部关闭
+  useEffect(function () {
+    var formatTooltipOptions = _objectSpread({}, tooltipOptions);
+    if (collapsed) {
+      if (formatTooltipOptions.defaultOpen) {
+        formatTooltipOptions.defaultOpen = false;
+      }
+      if (formatTooltipOptions.open) {
+        formatTooltipOptions.open = false;
+      }
+      if (formatTooltipOptions.onOpenChange && typeof formatTooltipOptions.onOpenChange === 'function') {
+        formatTooltipOptions.onOpenChange(false);
+      }
+    }
+    setFormatTooltipOptions(formatTooltipOptions);
+  }, [tooltipOptions, collapsed]);
   return /*#__PURE__*/React.createElement(TooltipV1, _extends({
-    title: tooltipAsHtml && typeof tooltip === 'string' ? /*#__PURE__*/React.createElement(HtmlTrusted, {
-      text: tooltip
-    }) : tooltip || title,
+    title: formatTitle,
     placement: "left",
     destroyTooltipOnHide: true,
     fixed: true
-  }, tooltipOptions), /*#__PURE__*/React.createElement(SidePanelItemWrap, {
+  }, formatTooltipOptions), /*#__PURE__*/React.createElement(SidePanelItemWrap, {
     id: id,
     className: className,
     style: style
   }, /*#__PURE__*/React.createElement(SidePanelItemButton, _extends({
-    active: active,
     title: title,
-    label: renderEasyIcon(icon) || title,
-    onlyShowIcon: onlyShowIcon,
+    active: active,
     onClick: handleClick
   }, rest)), /*#__PURE__*/React.createElement(SidePanelItemBadge, {
     unread: unread,

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

@@ -2,18 +2,36 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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) { _defineProperty(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; }
 import React from 'react';
-import { useCollapsed } from '../../../model';
-import { DATA_KEY_SIDE_PANEL_ITEM } from '../../const';
+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 { DATA_KEY_SIDE_PANEL_ITEM, SPACING_Y } from '../../const';
 import PanelItem from '../item';
-export default function Items(_ref) {
+function Items(_ref) {
   var items = _ref.items;
-  var collapsed = useCollapsed();
   return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (v) {
-    var _v$tooltipOptions;
-    // 侧边栏收起时，默认展示的 tooltip 需要关闭，不能放在 Item 中，否则会使其重复渲染。
-    if (collapsed && v !== null && v !== void 0 && (_v$tooltipOptions = v.tooltipOptions) !== null && _v$tooltipOptions !== void 0 && _v$tooltipOptions.open) {
-      v.tooltipOptions.open = false;
-    }
-    return /*#__PURE__*/React.createElement(PanelItem, _objectSpread(_defineProperty(_defineProperty({}, DATA_KEY_SIDE_PANEL_ITEM, v.key), "spm", v.key), v));
+    return /*#__PURE__*/React.createElement(PanelItem, _objectSpread(_objectSpread({}, v), {}, _defineProperty(_defineProperty({}, DATA_KEY_SIDE_PANEL_ITEM, v.key), "spm", v.key)));
+  }));
+}
+export function ItemsTop() {
+  var items = useItemsTop();
+  return /*#__PURE__*/React.createElement(Flex, {
+    vertical: true,
+    flex: true
+  }, /*#__PURE__*/React.createElement(Items, {
+    items: items
+  }));
+}
+var ScHr = styled(HrBase).withConfig({
+  componentId: "sc-1h5t3jq-0"
+})(["margin:", "px 4px;"], SPACING_Y);
+export function ItemsBottom() {
+  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, {
+    items: items
   }));
 }

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

@@ -1,4 +1,3 @@
 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,4 +1,3 @@
 export declare enum EAction {
-    SET_COLLAPSED = 0,
-    SET_QUICK_TOP_VISIBLE = 1
+    SET_COLLAPSED = 0
 }

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

@@ -4,6 +4,4 @@ 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/types/action.d.ts

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