fix(menu): menu tooltip (#1770)

* fix(menu): menu tooltip * fix(menu): title ellipsis Co-authored-by: maxin <maxin@growingio.com>
growingio · Jan 6, 2022 · 0b0de22 · 0b0de22 · vercel · Jan 6, 2022
1 parent ebd7e7b
commit 0b0de22
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 32 deletions.
diff --git a/src/menu/MenuItem.tsx b/src/menu/MenuItem.tsx
@@ -11,11 +11,22 @@ const MenuItem = (props: IMenuItemProps) => {
   const { inSubMenu, inIconSubMenu } = useContext(SubMenuContext);
   const inlineIndent = getInlineIndent(verticalIndent, inSubMenu, inIconSubMenu);
 
-  return (
-    <Tooltip title={children} disabled={!inlineCollapsed || inSubMenu} placement="right">
+  if (!inlineCollapsed || inSubMenu) {
+    return (
       <RcMenuItem data-testid="menu-item" {...restProps} inlineIndent={inlineIndent}>
         <MenuTitle title={children} icon={icon} />
       </RcMenuItem>
+    );
+  }
+
+  return (
+    <Tooltip title={children} placement="right">
+      {/* 新的 Tooltip 组件的定位方式需要 trigger 支持转发 ref，而 RcMenuItem 不支持转发 ref */}
+      <span>
+        <RcMenuItem data-testid="menu-item" {...restProps} inlineIndent={inlineIndent}>
+          <MenuTitle title={children} icon={icon} />
+        </RcMenuItem>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/menu/MenuTitle.tsx b/src/menu/MenuTitle.tsx
@@ -1,3 +1,4 @@
+import { isString } from 'lodash';
 import React, { useContext } from 'react';
 import { IMenuTitle } from './interface';
 import { MenuContext } from './MenuContext';
@@ -7,7 +8,9 @@ const MenuTitle: React.FC<IMenuTitle> = ({ icon, title }: IMenuTitle) => {
   return (
     <>
       {icon && <span className={`${prefixCls}__icon`}>{icon}</span>}
-      <span>{title}</span>
+      <span className={`${prefixCls}__name`} title={isString(title) ? title : undefined}>
+        {title}
+      </span>
     </>
   );
 };

diff --git a/src/menu/SubMenu.tsx b/src/menu/SubMenu.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { SubMenu as RcSubMenu } from 'rc-menu';
 import { DownOutlined } from '@gio-design/icons';
-import { isUndefined } from 'lodash';
+import { isString, isUndefined } from 'lodash';
 import { usePrefixCls } from '@gio-design/utils';
 import { ISubMenuProps } from './interface';
 import MenuTitle from './MenuTitle';
@@ -30,7 +30,11 @@ export const SubMenu = (props: ISubMenuProps) => {
         {...restProps}
         inlineIndent={inlineIndent}
       >
-        {inlineCollapsed && <li className={`${prefixCls}-collapsed-submenu-title`}>{title}</li>}
+        {inlineCollapsed && (
+          <li className={`${prefixCls}-collapsed-submenu-title`} title={isString(title) ? title : undefined}>
+            {title}
+          </li>
+        )}
         {children}
       </RcSubMenu>
     </SubMenuContext.Provider>

diff --git a/src/menu/demos/Menu.stories.tsx b/src/menu/demos/Menu.stories.tsx
@@ -20,7 +20,7 @@ export default {
 
 export const Vertical: Story<IMenuProps & ISubMenuProps & IMenuItemProps> = (args) => {
   const { disabled, inlineCollapsed, title, expandIcon } = args;
-  const [selectedKey, setSelectedKey] = useState('sub-menu-1-1');
+  const [selectedKey, setSelectedKey] = useState('');
   const handleClick = (e: any) => {
     setSelectedKey(e.key);
   };
@@ -33,27 +33,39 @@ export const Vertical: Story<IMenuProps & ISubMenuProps & IMenuItemProps> = (arg
         selectedKey={selectedKey}
         inlineCollapsed={inlineCollapsed}
         onClick={handleClick}
-        defaultOpenKeys={['sub-1']}
+        defaultOpenKeys={[]}
         style={{ height: 300 }}
       >
-        <SubMenu disabled={disabled} key="sub-1" title="功能名称-1" icon={<AppOutlined />} expandIcon={expandIcon}>
+        <SubMenu
+          disabled={disabled}
+          key="sub-1"
+          title="功能名称-1"
+          icon={<AppOutlined size="1em" />}
+          expandIcon={expandIcon}
+        >
           <MenuItem key="sub-menu-1-1">功能名称-1-1</MenuItem>
           <MenuItem key="sub-menu-1-2">功能名称-1-2</MenuItem>
         </SubMenu>
-        <SubMenu key="sub-2" title="功能名称-2" icon={<MapChartOutlined />}>
-          <MenuItem key="sub-menu-2-1">功能名称-2-1</MenuItem>
+        <SubMenu
+          key="sub-2"
+          title="功能名称-2功能名称-1-1功能名称-1-1功能名称-1-1功能名称-1-1功能名称-1-1功能名称-1-1"
+          icon={<MapChartOutlined size="1em" />}
+        >
+          <MenuItem key="sub-menu-2-1">
+            功能名称-2-1功能名称-1-1功能名称-1-1功能名称-1-1功能名称-1-1功能名称-1-1功能名称-1-1功能名称-1-1
+          </MenuItem>
           <MenuItem key="sub-menu-2-2">功能名称-2-2</MenuItem>
         </SubMenu>
-        <SubMenu key="sub-3" title="功能名称-3" icon={<AppOutlined />}>
+        <SubMenu key="sub-3" title="功能名称-3" icon={<AppOutlined size="1em" />}>
           <MenuItem key="sub-menu-3-1">功能名称-3-1</MenuItem>
           <MenuItem key="sub-menu-3-2">功能名称-3-2</MenuItem>
         </SubMenu>
-        <SubMenu key="sub-4" title="功能名称-4" icon={<AppOutlined />}>
+        <SubMenu key="sub-4" title="功能名称-4" icon={<AppOutlined size="1em" />}>
           <MenuItem key="sub-menu-4-1">功能名称-4-1</MenuItem>
           <MenuItem key="sub-menu-4-2">功能名称-4-2</MenuItem>
         </SubMenu>
-        <MenuItem disabled={disabled} key="sub-5" icon={<CalendarOutlined />}>
-          功能名称-5
+        <MenuItem key="sub-5" icon={<CalendarOutlined size="1em" />}>
+          fdlksfdlksfdsffdlksfdsffdlksfdsffdlksfdsffdlksfdsffdsf
         </MenuItem>
       </Menu>
     </div>

diff --git a/src/menu/interface.ts b/src/menu/interface.ts
@@ -23,7 +23,8 @@ type TOmitRcMenuProps =
   | 'forceSubMenuRender'
   | 'getPopupContainer'
   | 'builtinPlacements'
-  | 'direction';
+  | 'direction'
+  | 'title';
 
 export type TMenuMode = 'vertical' | 'horizontal';
 
@@ -77,7 +78,7 @@ export interface IMenuProps extends Omit<MenuProps, TOmitRcMenuProps> {
   /**
    * 菜单的标题
    */
-  title?: string;
+  title?: React.ReactNode;
 }
 
 export interface DividerProps {

diff --git a/src/menu/style/index.less b/src/menu/style/index.less
@@ -1,10 +1,9 @@
+@import (reference) './mixin.less';
+@import (reference) '../../stylesheet/variables/index.less';
 @import './state.less';
-@import './mixin.less';
 @import './layout.less';
-@import '../../stylesheet/variables/index.less';
 
 @menu-prefix-cls: ~'@{component-prefix}-menu';
-@menu-icon-cls: ~'@{menu-prefix-cls}__icon';
 
 .@{menu-prefix-cls} {
   box-sizing: border-box;
@@ -25,10 +24,21 @@
     line-height: 20px;
   }
 
-  .@{menu-icon-cls} {
+  &__icon {
+    display: flex;
+    flex: none;
+    align-items: center;
     margin-right: 12px;
   }
 
+  &__name {
+    display: block;
+    flex: auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &-overflowed-submenu {
     border-radius: 4px;
   }

diff --git a/src/menu/style/index.ts b/src/menu/style/index.ts
@@ -1,2 +1,2 @@
-import './index.less';
 import '../../tooltip/style/index';
+import './index.less';
diff --git a/src/menu/style/layout.less b/src/menu/style/layout.less
@@ -1,4 +1,4 @@
-@import './index.less';
+@import (reference) './index.less';
 
 .@{menu-prefix-cls} {
   // 水平模式
@@ -78,15 +78,14 @@
 
   // 内嵌模式下的箭头
   &-submenu-arrow {
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    transform: translateY(-50%) rotate(0deg);
+    flex: none;
+    margin-right: 20px;
+    transform: rotate(0deg);
     transition: all 0.2s;
   }
 
   &-submenu-open > &-submenu-title > &-submenu-arrow {
-    transform: translateY(-50%) rotate(-180deg);
+    transform: rotate(-180deg);
   }
 
   // 垂直模式子菜单
@@ -104,10 +103,13 @@
       &-collapsed-submenu-title {
         height: 20px;
         padding: 0 12px;
+        overflow: hidden;
         color: @blue-3;
         font-weight: @weight-font-medium;
         font-size: 12px;
         line-height: 20px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
       &-item,
@@ -142,7 +144,7 @@
       &-submenu-title {
         padding: 0 32px;
         & > * {
-          &:not(.@{menu-icon-cls}) {
+          &:not(.@{menu-prefix-cls}__icon) {
             display: none;
           }
         }

diff --git a/src/menu/style/state.less b/src/menu/style/state.less
@@ -1,16 +1,19 @@
-@import './index.less';
+@import (reference) './index.less';
 
 .@{menu-prefix-cls} {
   // item state
   // normal
   &-item,
   &-submenu-title {
     position: relative;
+    display: flex;
+    align-items: center;
     color: #313e75;
     white-space: nowrap;
     cursor: pointer;
     transition: all 0.2s;
   }
+
   // active
   &-item&-item-selected {
     color: @blue-3;

diff --git a/src/tooltip/style/index.less b/src/tooltip/style/index.less
@@ -1,4 +1,4 @@
-@import '../../stylesheet/variables/index.less';
+@import (reference) '../../stylesheet/variables/index.less';
 @import (reference) '../../popover/style/index.less';
 
 @tooltip-prefix-cls: ~'@{component-prefix}-tooltip';

diff --git a/src/tooltip/style/index.ts b/src/tooltip/style/index.ts
@@ -1,4 +1,3 @@
-import './index.less';
-
 import '../../popover/style';
 import '../../link/style';
+import './index.less';