Browse Source

fix: MenuItem should not render Tooltip when inlineCollapsed is false

pull/15705/head
zy410419243 6 years ago
parent
commit
ae8b52c290
  1. 20
      components/menu/MenuItem.tsx
  2. 27
      components/menu/__tests__/index.test.js

20
components/menu/MenuItem.tsx

@ -1,7 +1,7 @@
import * as React from 'react';
import { Item } from 'rc-menu';
import Tooltip from '../tooltip';
import { ClickParam } from './index';
import { ClickParam } from '.';
export interface MenuItemProps {
rootPrefixCls?: string;
@ -16,33 +16,29 @@ export interface MenuItemProps {
onMouseLeave?: (e: { key: string; domEvent: MouseEvent }) => void;
}
class MenuItem extends React.Component<MenuItemProps> {
static isMenuItem = 1;
export default class MenuItem extends React.Component<MenuItemProps> {
static isMenuItem = true;
private menuItem: this;
onKeyDown = (e: React.MouseEvent<HTMLElement>) => {
this.menuItem.onKeyDown(e);
};
saveMenuItem = (menuItem: this) => {
this.menuItem = menuItem;
};
render() {
const { level, children, rootPrefixCls } = this.props;
const { title, ...rest } = this.props;
let titleNode;
titleNode = title || (level === 1 ? children : '');
render() {
const { rootPrefixCls, title, ...rest } = this.props;
return (
<Tooltip
title={titleNode}
title={title}
placement="right"
overlayClassName={`${rootPrefixCls}-inline-collapsed-tooltip`}
>
<Item {...rest} title={title} ref={this.saveMenuItem} />
<Item {...rest} rootPrefixCls={rootPrefixCls} title={title} ref={this.saveMenuItem} />
</Tooltip>
);
}
}
export default MenuItem;

27
components/menu/__tests__/index.test.js

@ -588,4 +588,31 @@ describe('Menu', () => {
wrapper.update();
expect(wrapper.instance().contextSiderCollapsed).toBe(false);
});
it('MenuItem should not render Tooltip when inlineCollapsed is false', () => {
const wrapper = mount(
<Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
<Menu.Item key="mail">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="app">
<Icon type="appstore" />
Navigation Two
</Menu.Item>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>,
);
wrapper
.find('MenuItem')
.first()
.simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-inner').length).toBe(0);
});
});

Loading…
Cancel
Save