From 8933cc524ef340d2e6e4674e9c33f6314ccd1aba Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 5 Jan 2019 10:54:18 +0800 Subject: [PATCH] feat: menu add title --- components/menu/MenuItem.jsx | 16 ++++++++--- components/menu/__tests__/index.test.js | 28 +++++++++++++++++++ components/menu/demo/inline-collapsed.md | 2 +- components/menu/index.en-US.md | 1 + components/menu/index.jsx | 34 +++++++++++------------- components/menu/index.zh-CN.md | 1 + 6 files changed, 59 insertions(+), 23 deletions(-) diff --git a/components/menu/MenuItem.jsx b/components/menu/MenuItem.jsx index d05574ed4..795ed8550 100644 --- a/components/menu/MenuItem.jsx +++ b/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 ( diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js index 155820da5..f59da61d4 100644 --- a/components/menu/__tests__/index.test.js +++ b/components/menu/__tests__/index.test.js @@ -455,4 +455,32 @@ describe('Menu', () => { }, 500) }) }) + + it('inline title', async () => { + const wrapper = mount({ + render () { + return ( + + + + + Option 1 + test + + + + ) + }, + }, { 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) + }) }) diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md index 5057490b8..700814a13 100644 --- a/components/menu/demo/inline-collapsed.md +++ b/components/menu/demo/inline-collapsed.md @@ -67,4 +67,4 @@ export default { }, } -``` \ No newline at end of file +``` diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index 4179e30f6..9b2d18b9e 100644 --- a/components/menu/index.en-US.md +++ b/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 diff --git a/components/menu/index.jsx b/components/menu/index.jsx index bcbb0d2cc..447a9ad26 100644 --- a/components/menu/index.jsx +++ b/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, }, diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index c4c4604ee..aa19701f4 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -44,6 +44,7 @@ | --- | --- | --- | --- | | disabled | 是否禁用 | boolean | false | | key | item 的唯一标志 | string | | +| title | 设置收缩时展示的悬浮标题 | string | | ### Menu.SubMenu