@alicloud/console-base-rc-side-panel 1.1.12-beta.1 → 1.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/cjs/ui/rc-container/collapse-toggle/index.js +3 -3
  2. package/build/cjs/ui/rc-container/item/index.js +53 -38
  3. package/build/esm/ui/rc-container/collapse-toggle/index.js +3 -3
  4. package/build/esm/ui/rc-container/item/index.js +53 -38
  5. package/build/types/model/types/common.d.ts +14 -2
  6. package/build/types/ui/rc-container/item/index.d.ts +3 -1
  7. package/package.json +2 -2
package/build/cjs/ui/rc-container/collapse-toggle/index.js CHANGED
@@ -36,9 +36,9 @@ function PanelToggle() {
36
36
  placement: "left",
37
37
  destroyTooltipOnHide: true,
38
38
  fixed: true,
39
- overlayStyle: collapsed ? {
40
- transform: 'translateX(10px)'
41
- } : {}
39
+ overlayStyle: {
40
+ marginLeft: '8px'
41
+ }
42
42
  }, /*#__PURE__*/_react.default.createElement(_styles.ScCollapseToggle, {
43
43
  $hovered: isHovered,
44
44
  $collapsed: collapsed,
package/build/cjs/ui/rc-container/item/index.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = Item;
8
+ exports.default = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -15,17 +15,24 @@ var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
15
15
  var _consoleBaseRcHtmlTrusted = _interopRequireDefault(require("@alicloud/console-base-rc-html-trusted"));
16
16
  var _model = require("../../../model");
17
17
  var _rc = require("../../rc");
18
- var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
18
+ var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
19
19
  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); }
20
20
  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; }
21
21
  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; }
22
22
  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; }
23
- function Item(_ref) {
23
+ var Item = function Item(_ref) {
24
24
  var title = _ref.title,
25
25
  unread = _ref.unread,
26
26
  mark = _ref.mark,
27
27
  tooltip = _ref.tooltip,
28
- tooltipAsHtml = _ref.tooltipAsHtml,
28
+ _ref$tooltipAsHtml = _ref.tooltipAsHtml,
29
+ tooltipAsHtml = _ref$tooltipAsHtml === void 0 ? false : _ref$tooltipAsHtml,
30
+ _ref$tooltipDefaultOp = _ref.tooltipDefaultOpen,
31
+ tooltipDefaultOpen = _ref$tooltipDefaultOp === void 0 ? false : _ref$tooltipDefaultOp,
32
+ _ref$tooltipDefaultOp2 = _ref.tooltipDefaultOpenDelay,
33
+ tooltipDefaultOpenDelay = _ref$tooltipDefaultOp2 === void 0 ? 0.1 : _ref$tooltipDefaultOp2,
34
+ _ref$tooltipDefaultOp3 = _ref.tooltipDefaultOpenDuration,
35
+ tooltipDefaultOpenDuration = _ref$tooltipDefaultOp3 === void 0 ? 3000 : _ref$tooltipDefaultOp3,
29
36
  tooltipOptions = _ref.tooltipOptions,
30
37
  active = _ref.active,
31
38
  onActiveChange = _ref.onActiveChange,
@@ -34,53 +41,60 @@ function Item(_ref) {
34
41
  className = _ref.className,
35
42
  style = _ref.style,
36
43
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
37
- var collapsed = (0, _model.useCollapsed)();
38
- var _useState = (0, _react.useState)(),
44
+ var openTimerRef = (0, _react.useRef)(null);
45
+ var defaultOpenTimerRef = (0, _react.useRef)(null);
46
+ var _useState = (0, _react.useState)(false),
39
47
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
40
- formatTitle = _useState2[0],
41
- setFormatTitle = _useState2[1];
42
- var _useState3 = (0, _react.useState)(tooltipOptions),
43
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
44
- formatTooltipOptions = _useState4[0],
45
- setFormatTooltipOptions = _useState4[1];
48
+ open = _useState2[0],
49
+ setOpen = _useState2[1];
50
+ var collapsed = (0, _model.useCollapsed)();
46
51
  var handleClick = (0, _react.useCallback)(function (event) {
47
52
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
48
53
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
49
54
  }, [onClick, onActiveChange, active]);
50
-
51
- // 处理复杂 title
52
55
  (0, _react.useEffect)(function () {
53
- var formatTitle = tooltip || title;
54
- if (tooltipAsHtml && typeof tooltip === 'string') {
55
- formatTitle = /*#__PURE__*/_react.default.createElement(_consoleBaseRcHtmlTrusted.default, {
56
- text: tooltip
57
- });
56
+ if (!collapsed && tooltipDefaultOpen) {
57
+ openTimerRef.current = setTimeout(function () {
58
+ setOpen(true);
59
+ defaultOpenTimerRef.current = setTimeout(function () {
60
+ setOpen(false);
61
+ }, tooltipDefaultOpenDuration);
62
+ }, tooltipDefaultOpenDelay);
58
63
  }
59
- setFormatTitle(formatTitle);
60
- }, [tooltip, title, tooltipAsHtml]);
61
64
 
62
- // 侧边栏收起时，内部弹窗需全部关闭
63
- (0, _react.useEffect)(function () {
64
- var formatTooltipOptions = _objectSpread({}, tooltipOptions);
65
- if (collapsed) {
66
- if (formatTooltipOptions.defaultOpen) {
67
- formatTooltipOptions.defaultOpen = false;
68
- }
69
- if (formatTooltipOptions.open) {
70
- formatTooltipOptions.open = false;
65
+ // 组件卸载时，主动清除计时器
66
+ return function () {
67
+ if (openTimerRef.current) {
68
+ clearTimeout(openTimerRef.current);
69
+ openTimerRef.current = null;
71
70
  }
72
- if (formatTooltipOptions.onOpenChange && typeof formatTooltipOptions.onOpenChange === 'function') {
73
- formatTooltipOptions.onOpenChange(false);
71
+ if (defaultOpenTimerRef.current) {
72
+ clearTimeout(defaultOpenTimerRef.current);
73
+ defaultOpenTimerRef.current = null;
74
74
  }
75
+ };
76
+ }, []);
77
+
78
+ // 侧边栏收起时，弹窗需关闭
79
+ (0, _react.useEffect)(function () {
80
+ if (collapsed && open) {
81
+ setOpen(false);
75
82
  }
76
- setFormatTooltipOptions(formatTooltipOptions);
77
- }, [tooltipOptions, collapsed]);
83
+ }, [collapsed]);
78
84
  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, (0, _extends2.default)({
79
- title: formatTitle,
80
- placement: "left",
85
+ title: tooltipAsHtml && typeof tooltip === 'string' ? /*#__PURE__*/_react.default.createElement(_consoleBaseRcHtmlTrusted.default, {
86
+ text: tooltip
87
+ }) : tooltip || title,
81
88
  destroyTooltipOnHide: true,
89
+ placement: "left",
82
90
  fixed: true
83
- }, formatTooltipOptions), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
91
+ }, tooltipOptions, {
92
+ overlayStyle: _objectSpread({
93
+ marginLeft: '8px'
94
+ }, tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.overlayStyle),
95
+ open: open,
96
+ onOpenChange: setOpen
97
+ }), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
84
98
  id: id,
85
99
  className: className,
86
100
  style: style
@@ -92,4 +106,5 @@ function Item(_ref) {
92
106
  unread: unread,
93
107
  mark: mark
94
108
  })));
95
- }
109
+ };
110
+ var _default = exports.default = Item;
package/build/esm/ui/rc-container/collapse-toggle/index.js CHANGED
@@ -26,9 +26,9 @@ export default function PanelToggle() {
26
26
  placement: "left",
27
27
  destroyTooltipOnHide: true,
28
28
  fixed: true,
29
- overlayStyle: collapsed ? {
30
- transform: 'translateX(10px)'
31
- } : {}
29
+ overlayStyle: {
30
+ marginLeft: '8px'
31
+ }
32
32
  }, /*#__PURE__*/React.createElement(ScCollapseToggle, {
33
33
  $hovered: isHovered,
34
34
  $collapsed: collapsed,
package/build/esm/ui/rc-container/item/index.js CHANGED
@@ -2,20 +2,27 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
- var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
5
+ var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
6
6
  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; }
7
7
  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; }
8
- import React, { useCallback, useEffect, useState } from 'react';
8
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
9
9
  import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
10
10
  import HtmlTrusted from '@alicloud/console-base-rc-html-trusted';
11
11
  import { useCollapsed } from '../../../model';
12
12
  import { SidePanelItemWrap, SidePanelItemButton, SidePanelItemBadge } from '../../rc';
13
- export default function Item(_ref) {
13
+ var Item = function Item(_ref) {
14
14
  var title = _ref.title,
15
15
  unread = _ref.unread,
16
16
  mark = _ref.mark,
17
17
  tooltip = _ref.tooltip,
18
- tooltipAsHtml = _ref.tooltipAsHtml,
18
+ _ref$tooltipAsHtml = _ref.tooltipAsHtml,
19
+ tooltipAsHtml = _ref$tooltipAsHtml === void 0 ? false : _ref$tooltipAsHtml,
20
+ _ref$tooltipDefaultOp = _ref.tooltipDefaultOpen,
21
+ tooltipDefaultOpen = _ref$tooltipDefaultOp === void 0 ? false : _ref$tooltipDefaultOp,
22
+ _ref$tooltipDefaultOp2 = _ref.tooltipDefaultOpenDelay,
23
+ tooltipDefaultOpenDelay = _ref$tooltipDefaultOp2 === void 0 ? 0.1 : _ref$tooltipDefaultOp2,
24
+ _ref$tooltipDefaultOp3 = _ref.tooltipDefaultOpenDuration,
25
+ tooltipDefaultOpenDuration = _ref$tooltipDefaultOp3 === void 0 ? 3000 : _ref$tooltipDefaultOp3,
19
26
  tooltipOptions = _ref.tooltipOptions,
20
27
  active = _ref.active,
21
28
  onActiveChange = _ref.onActiveChange,
@@ -24,53 +31,60 @@ export default function Item(_ref) {
24
31
  className = _ref.className,
25
32
  style = _ref.style,
26
33
  rest = _objectWithoutProperties(_ref, _excluded);
27
- var collapsed = useCollapsed();
28
- var _useState = useState(),
34
+ var openTimerRef = useRef(null);
35
+ var defaultOpenTimerRef = useRef(null);
36
+ var _useState = useState(false),
29
37
  _useState2 = _slicedToArray(_useState, 2),
30
- formatTitle = _useState2[0],
31
- setFormatTitle = _useState2[1];
32
- var _useState3 = useState(tooltipOptions),
33
- _useState4 = _slicedToArray(_useState3, 2),
34
- formatTooltipOptions = _useState4[0],
35
- setFormatTooltipOptions = _useState4[1];
38
+ open = _useState2[0],
39
+ setOpen = _useState2[1];
40
+ var collapsed = useCollapsed();
36
41
  var handleClick = useCallback(function (event) {
37
42
  onClick === null || onClick === void 0 ? void 0 : onClick(event);
38
43
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
39
44
  }, [onClick, onActiveChange, active]);
40
-
41
- // 处理复杂 title
42
45
  useEffect(function () {
43
- var formatTitle = tooltip || title;
44
- if (tooltipAsHtml && typeof tooltip === 'string') {
45
- formatTitle = /*#__PURE__*/React.createElement(HtmlTrusted, {
46
- text: tooltip
47
- });
46
+ if (!collapsed && tooltipDefaultOpen) {
47
+ openTimerRef.current = setTimeout(function () {
48
+ setOpen(true);
49
+ defaultOpenTimerRef.current = setTimeout(function () {
50
+ setOpen(false);
51
+ }, tooltipDefaultOpenDuration);
52
+ }, tooltipDefaultOpenDelay);
48
53
  }
49
- setFormatTitle(formatTitle);
50
- }, [tooltip, title, tooltipAsHtml]);
51
54
 
52
- // 侧边栏收起时，内部弹窗需全部关闭
53
- useEffect(function () {
54
- var formatTooltipOptions = _objectSpread({}, tooltipOptions);
55
- if (collapsed) {
56
- if (formatTooltipOptions.defaultOpen) {
57
- formatTooltipOptions.defaultOpen = false;
58
- }
59
- if (formatTooltipOptions.open) {
60
- formatTooltipOptions.open = false;
55
+ // 组件卸载时，主动清除计时器
56
+ return function () {
57
+ if (openTimerRef.current) {
58
+ clearTimeout(openTimerRef.current);
59
+ openTimerRef.current = null;
61
60
  }
62
- if (formatTooltipOptions.onOpenChange && typeof formatTooltipOptions.onOpenChange === 'function') {
63
- formatTooltipOptions.onOpenChange(false);
61
+ if (defaultOpenTimerRef.current) {
62
+ clearTimeout(defaultOpenTimerRef.current);
63
+ defaultOpenTimerRef.current = null;
64
64
  }
65
+ };
66
+ }, []);
67
+
68
+ // 侧边栏收起时，弹窗需关闭
69
+ useEffect(function () {
70
+ if (collapsed && open) {
71
+ setOpen(false);
65
72
  }
66
- setFormatTooltipOptions(formatTooltipOptions);
67
- }, [tooltipOptions, collapsed]);
73
+ }, [collapsed]);
68
74
  return /*#__PURE__*/React.createElement(TooltipV1, _extends({
69
- title: formatTitle,
70
- placement: "left",
75
+ title: tooltipAsHtml && typeof tooltip === 'string' ? /*#__PURE__*/React.createElement(HtmlTrusted, {
76
+ text: tooltip
77
+ }) : tooltip || title,
71
78
  destroyTooltipOnHide: true,
79
+ placement: "left",
72
80
  fixed: true
73
- }, formatTooltipOptions), /*#__PURE__*/React.createElement(SidePanelItemWrap, {
81
+ }, tooltipOptions, {
82
+ overlayStyle: _objectSpread({
83
+ marginLeft: '8px'
84
+ }, tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.overlayStyle),
85
+ open: open,
86
+ onOpenChange: setOpen
87
+ }), /*#__PURE__*/React.createElement(SidePanelItemWrap, {
74
88
  id: id,
75
89
  className: className,
76
90
  style: style
@@ -82,4 +96,5 @@ export default function Item(_ref) {
82
96
  unread: unread,
83
97
  mark: mark
84
98
  })));
85
- }
99
+ };
100
+ export default Item;
package/build/types/model/types/common.d.ts CHANGED
@@ -56,13 +56,25 @@ export interface ISidePanelItemProps extends SidePanelItemButtonProps {
56
56
  */
57
57
  tooltip?: string | React.ReactElement;
58
58
  /**
59
- * 按钮提示框支持 HTML 字符串
59
+ * 按钮提示框支持 HTML 字符串，默认 false
60
60
  */
61
61
  tooltipAsHtml?: boolean;
62
+ /**
63
+ * 默认是否显隐，默认 false
64
+ */
65
+ tooltipDefaultOpen?: boolean;
66
+ /**
67
+ * 默认显示延迟时间，单位毫秒，默认 0.1ms
68
+ */
69
+ tooltipDefaultOpenDelay?: number;
70
+ /**
71
+ * 默认显示持续时间，时间结束自动隐藏，单位毫秒，默认 3000ms
72
+ */
73
+ tooltipDefaultOpenDuration?: number;
62
74
  /**
63
75
  * 按钮提示框的配置
64
76
  */
65
- tooltipOptions?: Omit<TooltipPropsV1, 'title'>;
77
+ tooltipOptions?: Omit<TooltipPropsV1, 'title' | 'children' | 'defaultOpen' | 'open' | 'onOpenChange'>;
66
78
  /**
67
79
  * 入口 ID
68
80
  */
package/build/types/ui/rc-container/item/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
+ import React from 'react';
1
2
  import { SidePanelItemProps } from '../../../model';
2
- export default function Item({ title, unread, mark, tooltip, tooltipAsHtml, tooltipOptions, active, onActiveChange, onClick, id, className, style, ...rest }: SidePanelItemProps): JSX.Element;
3
+ declare const Item: React.FC<SidePanelItemProps>;
4
+ export default Item;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alicloud/console-base-rc-side-panel",
3
- "version": "1.1.12-beta.1",
3
+ "version": "1.1.13",
4
4
  "description": "ConsoleBase 组件 - 右侧边栏",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
@@ -43,7 +43,7 @@
43
43
  "@alicloud/console-base-rc-html-trusted": "^1.0.5",
44
44
  "@alicloud/console-base-rc-icon": "^1.10.6",
45
45
  "@alicloud/console-base-rc-marks": "^1.8.3",
46
- "@alicloud/console-base-rc-tooltip": "beta",
46
+ "@alicloud/console-base-rc-tooltip": "^1.1.19",
47
47
  "@alicloud/console-base-theme": "^1.9.7",
48
48
  "@alicloud/console-base-theme-sc-base": "^1.6.4",
49
49
  "@alicloud/mere-dom": "^1.8.0",