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

package/build/cjs/ui/index.js

@@ -18,7 +18,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ScAside = _styledComponents.default.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["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;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _const.SIZE_BUTTON_WRAP_HEIGHT + _const.SPACING_Y, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.mixinBgPrimary, _consoleBaseTheme.mixinBorderTertiaryLeft, function (_ref) {
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _const.SIZE_BUTTON_WRAP_HEIGHT + _const.SPACING_Y, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.mixinBgPrimary, _consoleBaseTheme.mixinBorderTertiaryLeft, function (_ref) {
   var $collapsed = _ref.$collapsed;
   return $collapsed ? (0, _styledComponents.css)(["transform:translateX(101%);border:none !important;"]) : _consoleBaseTheme.mixinBorderTertiaryLeft;
 }, _consoleBaseTheme.SIZE.HEIGHT_TOP_NAV);

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

@@ -36,9 +36,9 @@ function PanelToggle() {
     placement: "left",
     destroyTooltipOnHide: true,
     fixed: true,
-    overlayStyle: collapsed ? {
-      transform: 'translateX(10px)'
-    } : {}
+    overlayStyle: {
+      marginLeft: '8px'
+    }
   }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggle, {
     $hovered: isHovered,
     $collapsed: collapsed,

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

@@ -15,11 +15,11 @@ var ScCollapseToggleWrap = exports.ScCollapseToggleWrap = _styledComponents.defa
   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(-100%);"]);
+var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-101%);"]);
 var cssToggleOut = (0, _styledComponents.css)(["transform:translateX(-50%);"]);
 var ScCollapseToggle = exports.ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
   componentId: "sc-xm41v7-1"
-})(["transition:transform 250ms ease-in-out 0s;", ""], function (_ref) {
+})(["transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
   var $collapsed = _ref.$collapsed,
     $isSimpleCN = _ref.$isSimpleCN,
     $hovered = _ref.$hovered;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -14,9 +15,11 @@ var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
 var _consoleBaseRcHtmlTrusted = _interopRequireDefault(require("@alicloud/console-base-rc-html-trusted"));
 var _model = require("../../../model");
 var _rc = require("../../rc");
-var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
+var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "icon", "iconHovered"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
 var Item = function Item(_ref) {
   var title = _ref.title,
     unread = _ref.unread,
@@ -36,7 +39,8 @@ var Item = function Item(_ref) {
     onClick = _ref.onClick,
     id = _ref.id,
     className = _ref.className,
-    style = _ref.style,
+    icon = _ref.icon,
+    iconHovered = _ref.iconHovered,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var openTimerRef = (0, _react.useRef)(null);
   var defaultOpenTimerRef = (0, _react.useRef)(null);
@@ -86,15 +90,18 @@ var Item = function Item(_ref) {
     placement: "left",
     fixed: true
   }, tooltipOptions, {
+    overlayStyle: _objectSpread({
+      marginLeft: '8px'
+    }, tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.overlayStyle),
     open: open,
     onOpenChange: setOpen
   }), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
     id: id,
-    className: className,
-    style: style
+    className: className
   }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, (0, _extends2.default)({
     title: title,
     active: active,
+    icon: open && iconHovered ? iconHovered : icon,
     onClick: handleClick
   }, rest)), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
     unread: unread,

package/build/esm/ui/index.js

@@ -8,7 +8,7 @@ import { GlobalStyleOnBody } from './rc';
 import { ItemsTop, ItemsBottom, CollapseToggle, CollapseAside } from './rc-container';
 var ScAside = styled.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["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) {
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;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);

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

@@ -26,9 +26,9 @@ export default function PanelToggle() {
     placement: "left",
     destroyTooltipOnHide: true,
     fixed: true,
-    overlayStyle: collapsed ? {
-      transform: 'translateX(10px)'
-    } : {}
+    overlayStyle: {
+      marginLeft: '8px'
+    }
   }, /*#__PURE__*/React.createElement(ScCollapseToggle, {
     $hovered: isHovered,
     $collapsed: collapsed,

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

@@ -6,11 +6,11 @@ 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 cssToggleIn = css(["transform:translateX(-101%);"]);
 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) {
+})(["transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
   var $collapsed = _ref.$collapsed,
     $isSimpleCN = _ref.$isSimpleCN,
     $hovered = _ref.$hovered;

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

@@ -1,7 +1,10 @@
 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 = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
+var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "icon", "iconHovered"];
+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, useRef, useState } from 'react';
 import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
 import HtmlTrusted from '@alicloud/console-base-rc-html-trusted';
@@ -26,7 +29,8 @@ var Item = function Item(_ref) {
     onClick = _ref.onClick,
     id = _ref.id,
     className = _ref.className,
-    style = _ref.style,
+    icon = _ref.icon,
+    iconHovered = _ref.iconHovered,
     rest = _objectWithoutProperties(_ref, _excluded);
   var openTimerRef = useRef(null);
   var defaultOpenTimerRef = useRef(null);
@@ -76,15 +80,18 @@ var Item = function Item(_ref) {
     placement: "left",
     fixed: true
   }, tooltipOptions, {
+    overlayStyle: _objectSpread({
+      marginLeft: '8px'
+    }, tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.overlayStyle),
     open: open,
     onOpenChange: setOpen
   }), /*#__PURE__*/React.createElement(SidePanelItemWrap, {
     id: id,
-    className: className,
-    style: style
+    className: className
   }, /*#__PURE__*/React.createElement(SidePanelItemButton, _extends({
     title: title,
     active: active,
+    icon: open && iconHovered ? iconHovered : icon,
     onClick: handleClick
   }, rest)), /*#__PURE__*/React.createElement(SidePanelItemBadge, {
     unread: unread,

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

@@ -9,6 +9,10 @@ export interface SidePanelItemButtonProps {
      * 入口图标，如果是组件则直接用，当它是字符串的时候，会智能判断
      */
     icon: EasyIconValue;
+    /**
+     * 入口图标，鼠标 hover 时的展示，不传则回退到 icon
+     */
+    iconHovered?: EasyIconValue;
     /**
      * 入口仅显示图标，不需要背景
      */
@@ -30,7 +34,7 @@ export interface SidePanelItemButtonProps {
      */
     [dataName: `data-${string}`]: unknown;
     /**
-     * 按钮点击后的回调函数
+     * 入口按钮点击后的回调函数
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -83,10 +87,6 @@ export interface ISidePanelItemProps extends SidePanelItemButtonProps {
      * 入口 ClassName
      */
     className?: string;
-    /**
-     * 入口自定义样式
-     */
-    style?: React.CSSProperties;
 }
 export interface ISidePanelItemPropsWithKey extends ISidePanelItemProps {
     key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "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.19",
+    "@alicloud/console-base-rc-tooltip": "^1.1.20",
     "@alicloud/console-base-theme": "^1.9.7",
     "@alicloud/console-base-theme-sc-base": "^1.6.4",
     "@alicloud/mere-dom": "^1.8.0",

package/build/cjs/ui/util/get-value-by-status.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getValueByStatus;
-function getValueByStatus(values, hovered, active) {
-  var valueNormal = values.valueNormal,
-    valueHovered = values.valueHovered,
-    valueActive = values.valueActive,
-    valueActiveHovered = values.valueActiveHovered;
-  if (hovered && active) {
-    var _ref;
-    return (_ref = valueActiveHovered !== null && valueActiveHovered !== void 0 ? valueActiveHovered : valueActive) !== null && _ref !== void 0 ? _ref : valueNormal;
-  }
-  if (active) {
-    return valueActive !== null && valueActive !== void 0 ? valueActive : valueNormal;
-  }
-  if (hovered) {
-    return valueHovered !== null && valueHovered !== void 0 ? valueHovered : valueNormal;
-  }
-  return valueNormal;
-}

package/build/cjs/ui/util/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "getValueByStatus", {
-  enumerable: true,
-  get: function get() {
-    return _getValueByStatus.default;
-  }
-});
-var _getValueByStatus = _interopRequireDefault(require("./get-value-by-status"));

package/build/esm/ui/util/get-value-by-status.js

@@ -1,17 +0,0 @@
-export default function getValueByStatus(values, hovered, active) {
-  var valueNormal = values.valueNormal,
-    valueHovered = values.valueHovered,
-    valueActive = values.valueActive,
-    valueActiveHovered = values.valueActiveHovered;
-  if (hovered && active) {
-    var _ref;
-    return (_ref = valueActiveHovered !== null && valueActiveHovered !== void 0 ? valueActiveHovered : valueActive) !== null && _ref !== void 0 ? _ref : valueNormal;
-  }
-  if (active) {
-    return valueActive !== null && valueActive !== void 0 ? valueActive : valueNormal;
-  }
-  if (hovered) {
-    return valueHovered !== null && valueHovered !== void 0 ? valueHovered : valueNormal;
-  }
-  return valueNormal;
-}

package/build/esm/ui/util/index.js

@@ -1 +0,0 @@
-export { default as getValueByStatus } from './get-value-by-status';

package/build/types/ui/util/get-value-by-status.d.ts

@@ -1,8 +0,0 @@
-interface IValues<T> {
-    valueNormal: T;
-    valueHovered?: T;
-    valueActive?: T;
-    valueActiveHovered?: T;
-}
-export default function getValueByStatus<T>(values: IValues<T>, hovered?: boolean, active?: boolean): T;
-export {};

package/build/types/ui/util/index.d.ts

@@ -1 +0,0 @@
-export { default as getValueByStatus } from './get-value-by-status';