feat(menu): support tooltipProps API (#3201)

Tencent · Nov 14, 2024 · 31f063b · 31f063b
1 parent 683e359
commit 31f063b
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 2 deletions.
diff --git a/src/menu/MenuItem.tsx b/src/menu/MenuItem.tsx
@@ -67,7 +67,7 @@ const MenuItem: FC<MenuItemProps> = (props) => {
   // 菜单收起，且只有本身为一级菜单才需要显示 tooltip
   if (collapsed && !disabled && !/submenu/i.test(className)) {
     return (
-      <TooltipLite content={children} placement="right">
+      <TooltipLite content={children} placement="right" {...props.tooltipProps}>
         {liContent}
       </TooltipLite>
     );

diff --git a/src/menu/_example/multi-side.tsx b/src/menu/_example/multi-side.tsx
@@ -29,7 +29,7 @@ function MultiSide() {
         }
         style={{ marginRight: 20 }}
       >
-        <MenuItem value="0" icon={<AppIcon />}>
+        <MenuItem value="0" icon={<AppIcon />} tooltipProps={{ theme: 'light' }}>
           仪表盘
         </MenuItem>
         <SubMenu value="1" title={<span>资源列表</span>} icon={<CodeIcon />}>

diff --git a/src/menu/menu.en-US.md b/src/menu/menu.en-US.md
@@ -65,6 +65,7 @@ disabled | Boolean | - | \- | N
 href | String | - | \- | N
 icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 target | String | - | options：_blank/_self/_parent/_top | N
+tooltipProps | Object | - | Transparent all feature props of the Tooltip。Typescript：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/menu/type.ts) | N
 value | String / Number | - | Typescript：`MenuValue` | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on click | N
 

diff --git a/src/menu/menu.md b/src/menu/menu.md
@@ -64,6 +64,7 @@ disabled | Boolean | - | 是否禁用菜单项展开/收起/跳转等功能 | N
 href | String | - | 跳转链接 | N
 icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 target | String | - | 链接或路由跳转方式。可选项：_blank/_self/_parent/_top | N
+tooltipProps | Object | - | 透传 Tooltip 组件的特性，作用于一级菜单收起下聚焦时出现的节点。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/menu/type.ts) | N
 value | String / Number | - | 菜单项唯一标识。TS 类型：`MenuValue` | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent, value: MenuValue }) => void`<br/>点击时触发 | N
 

diff --git a/src/menu/type.ts b/src/menu/type.ts
@@ -7,6 +7,7 @@
 import { TNode, TElement } from '../common';
 import { MouseEvent } from 'react';
 import { PopupProps } from '../popup';
+import { TooltipProps } from '../tooltip';
 
 export interface TdMenuProps {
   /**
@@ -170,6 +171,10 @@ export interface TdMenuItemProps {
    * 链接或路由跳转方式
    */
   target?: '_blank' | '_self' | '_parent' | '_top';
+  /**
+   * 透传 Tooltip 组件的特性，作用于一级菜单收起下聚焦时出现的节点
+   */
+  tooltipProps?: TooltipProps;
   /**
    * 菜单项唯一标识
    */