@alicloud/console-base-rc-side-panel 1.1.15 → 1.1.17

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

@@ -19,6 +19,13 @@ 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;
+  // index 为业务传入的期望展示的顺序
+  items.sort(function (a, b) {
+    var _a$index, _b$index;
+    var indexA = (_a$index = a.index) !== null && _a$index !== void 0 ? _a$index : Number.MAX_SAFE_INTEGER;
+    var indexB = (_b$index = b.index) !== null && _b$index !== void 0 ? _b$index : Number.MAX_SAFE_INTEGER;
+    return indexA - indexB;
+  });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map(function (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)));
   }));

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

@@ -11,6 +11,13 @@ import PanelItem from '../item';
 import QuickTop from '../quick-top';
 function Items(_ref) {
   var items = _ref.items;
+  // index 为业务传入的期望展示的顺序
+  items.sort(function (a, b) {
+    var _a$index, _b$index;
+    var indexA = (_a$index = a.index) !== null && _a$index !== void 0 ? _a$index : Number.MAX_SAFE_INTEGER;
+    var indexB = (_b$index = b.index) !== null && _b$index !== void 0 ? _b$index : Number.MAX_SAFE_INTEGER;
+    return indexA - indexB;
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (v) {
     return /*#__PURE__*/React.createElement(PanelItem, _objectSpread(_objectSpread({}, v), {}, _defineProperty(_defineProperty({}, DATA_KEY_SIDE_PANEL_ITEM, v.key), "spm", v.key)));
   }));

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

@@ -47,6 +47,10 @@ export interface SidePanelItemButtonProps {
     onActiveChange?(active: boolean): void;
 }
 export interface ISidePanelItemProps extends SidePanelItemButtonProps {
+    /**
+     * 自定义展示顺序，越小越靠前，不传则按照消息传入的顺序展示
+     */
+    index?: number;
     /**
      * 右上角徽标，数字展示数字，true 展示小红点
      */

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "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",