feat: menu add title

Author: tangjinzhou

components/menu/MenuItem.jsx

@@ -4,6 +4,7 @@ import { getOptionProps } from '../_util/props-util'
 import Tooltip from '../tooltip'
 function noop () {}
 export default {
+  inheritAttrs: false,
   props: itemProps,
   name: 'MenuItem',
   inject: {
@@ -17,18 +18,27 @@ export default {
   },
   render (h) {
     const props = getOptionProps(this)
+    const { level, title, rootPrefixCls } = props
     const { getInlineCollapsed, $slots, $attrs: attrs, $listeners } = this
     const inlineCollapsed = getInlineCollapsed()
+    let titleNode
+    if (inlineCollapsed) {
+      titleNode = title || (level === 1 ? $slots.default : '')
+    }
+
     const itemProps = {
-      props,
+      props: {
+        ...props,
+        title: inlineCollapsed ? null : title,
+      },
       attrs,
       on: $listeners,
     }
     const toolTipProps = {
       props: {
-        title: inlineCollapsed && props.level === 1 ? $slots.default : '',
+        title: titleNode,
         placement: 'right',
-        overlayClassName: `${props.rootPrefixCls}-inline-collapsed-tooltip`,
+        overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`,
       },
     }
     return (

components/menu/__tests__/index.test.js

@@ -455,4 +455,32 @@ describe('Menu', () => {
       }, 500)
     })
   })
+
+  it('inline title', async () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Menu mode='inline' inlineCollapsed>
+            <Menu.Item key='1' title='bamboo lucky'>
+              <Icon type='pie-chart' />
+              <span>
+            Option 1
+                <img
+                  style={{ width: 20 }}
+                  alt='test'
+                  src='https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
+                />
+              </span>
+            </Menu.Item>
+          </Menu>
+        )
+      },
+    }, { sync: false, attachToDocument: true })
+
+    wrapper.find('.ant-menu-item').trigger('mouseenter')
+    await asyncExpect(() => {
+      const text = $$('.ant-tooltip-inner')[0].textContent
+      expect(text).toBe('bamboo lucky')
+    }, 500)
+  })
 })

components/menu/demo/inline-collapsed.md

@@ -67,4 +67,4 @@ export default {
   },
 }
 </script>
-```
+```

components/menu/index.en-US.md

@@ -46,6 +46,7 @@
 | ----- | ----------- | ---- | ------------- |
 | disabled | whether menu item is disabled or not | boolean | false |
 | key | unique id of the menu item | string |  |
+| title | set display title for collapsed item | string |  |
 
 ### Menu.SubMenu
 

components/menu/index.jsx

@@ -45,6 +45,7 @@ const Menu = {
   mixins: [BaseMixin],
   inject: {
     layoutSiderContext: { default: {}},
+    configProvider: { default: {}},
   },
   model: {
     prop: 'selectedKeys',
@@ -176,26 +177,19 @@ const Menu = {
       const { openAnimation, openTransitionName } = this.$props
       let menuOpenAnimation = openAnimation || openTransitionName
       if (openAnimation === undefined && openTransitionName === undefined) {
-        switch (menuMode) {
-          case 'horizontal':
-            menuOpenAnimation = 'slide-up'
-            break
-          case 'vertical':
-          case 'vertical-left':
-          case 'vertical-right':
+        if (menuMode === 'horizontal') {
+          menuOpenAnimation = 'slide-up'
+        } else if (menuMode === 'inline') {
+          menuOpenAnimation = { on: animation }
+        } else {
           // When mode switch from inline
           // submenu should hide without animation
-            if (this.switchingModeFromInline) {
-              menuOpenAnimation = ''
-              this.switchingModeFromInline = false
-            } else {
-              menuOpenAnimation = 'zoom-big'
-            }
-            break
-          case 'inline':
-            menuOpenAnimation = { on: animation }
-            break
-          default:
+          if (this.switchingModeFromInline) {
+            menuOpenAnimation = ''
+            this.switchingModeFromInline = false
+          } else {
+            menuOpenAnimation = 'zoom-big'
+          }
         }
       }
       return menuOpenAnimation
@@ -204,7 +198,8 @@ const Menu = {
   render () {
     const { layoutSiderContext, $slots, $listeners } = this
     const { collapsedWidth } = layoutSiderContext
-    const { prefixCls, theme } = this.$props
+    const { getPopupContainer: getContextPopupContainer } = this.configProvider
+    const { prefixCls, theme, getPopupContainer } = this.$props
     const menuMode = this.getRealMenuMode()
     const menuOpenAnimation = this.getMenuOpenAnimation(menuMode)
 
@@ -216,6 +211,7 @@ const Menu = {
     const menuProps = {
       props: {
         ...omit(this.$props, ['inlineCollapsed']),
+        getPopupContainer: getPopupContainer || getContextPopupContainer,
         openKeys: this.sOpenKeys,
         mode: menuMode,
       },

components/menu/index.zh-CN.md

@@ -44,6 +44,7 @@
 | --- | --- | --- | --- |
 | disabled | 是否禁用 | boolean | false |
 | key | item 的唯一标志 | string |  |
+| title | 设置收缩时展示的悬浮标题 | string |  |
 
 ### Menu.SubMenu