Skip to content

Commit da6d243

Browse files
tangjinzhoutangjinzhou
authored
Perf menu2.0 (#3243)
close #3231 #3188
1 parent 2d6b502 commit da6d243

File tree

23 files changed

+497
-615
lines changed

23 files changed

+497
-615
lines changed

‎CHANGELOG.zh-CN.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010

1111
---
1212

13-
1413
## 2.0.0-rc.1
1514

1615
`2020-11-14`

‎antdv-demo‎

‎components/menu/SubMenu.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { defineComponent, inject } from 'vue';
22
import { SubMenu as VcSubMenu } from '../vc-menu';
33
import classNames from '../_util/classNames';
4-
import Omit from 'omit.js';
5-
import { getSlot } from '../_util/props-util';
64
import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
75

86
export type MenuTheme = 'light' | 'dark';
@@ -38,8 +36,7 @@ export default defineComponent({
3836
popupClassName: classNames(`${rootPrefixCls}-${antdMenuTheme}`, popupClassName),
3937
ref: 'subMenu',
4038
...$attrs,
41-
...Omit($slots, ['default']),
42-
};
43-
return <VcSubMenu {...props}>{getSlot(this)}</VcSubMenu>;
39+
} as any;
40+
return <VcSubMenu {...props} v-slots={$slots}></VcSubMenu>;
4441
},
4542
});

‎components/menu/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 23 additions & 191 deletions
Large diffs are not rendered by default.

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

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ describe('Menu', () => {
5252
{ attachTo: 'body', sync: false },
5353
);
5454
await asyncExpect(() => {
55-
expect($$('.ant-menu-submenu-selected').length).toBe(2);
55+
expect($$('.ant-menu-submenu-selected').length).toBe(1);
5656
});
5757
});
5858
it('should accept defaultOpenKeys in mode horizontal', async () => {
@@ -73,7 +73,7 @@ describe('Menu', () => {
7373
{ attachTo: 'body', sync: false },
7474
);
7575
await asyncExpect(() => {
76-
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
76+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
7777
});
7878
});
7979

@@ -121,44 +121,44 @@ describe('Menu', () => {
121121
});
122122
});
123123

124-
// it('horizontal', async () => {
125-
// const wrapper = mount(
126-
// {
127-
// props: {
128-
// openKeys: {
129-
// type: Array,
130-
// default() {
131-
// return ['1'];
132-
// },
133-
// },
134-
// },
135-
// render() {
136-
// return (
137-
// <Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
138-
// <SubMenu key="1" title="submenu1">
139-
// <Menu.Item key="submenu1">Option 1</Menu.Item>
140-
// <Menu.Item key="submenu2">Option 2</Menu.Item>
141-
// </SubMenu>
142-
// <Menu.Item key="2">menu2</Menu.Item>
143-
// </Menu>
144-
// );
145-
// },
146-
// },
147-
// { attachTo: 'body', sync: false },
148-
// );
149-
// await asyncExpect(() => {
150-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
151-
// }, 100);
152-
// wrapper.setProps({ openKeys: [] });
153-
// await asyncExpect(() => {
154-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
155-
// }, 500);
124+
it('horizontal', async () => {
125+
const wrapper = mount(
126+
{
127+
props: {
128+
openKeys: {
129+
type: Array,
130+
default() {
131+
return ['1'];
132+
},
133+
},
134+
},
135+
render() {
136+
return (
137+
<Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
138+
<SubMenu key="1" title="submenu1">
139+
<Menu.Item key="submenu1">Option 1</Menu.Item>
140+
<Menu.Item key="submenu2">Option 2</Menu.Item>
141+
</SubMenu>
142+
<Menu.Item key="2">menu2</Menu.Item>
143+
</Menu>
144+
);
145+
},
146+
},
147+
{ attachTo: 'body', sync: false },
148+
);
149+
await asyncExpect(() => {
150+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
151+
});
152+
wrapper.setProps({ openKeys: [] });
153+
await asyncExpect(() => {
154+
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
155+
}, 500);
156156

157-
// wrapper.setProps({ openKeys: ['1'] });
158-
// await asyncExpect(() => {
159-
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
160-
// }, 0);
161-
// });
157+
wrapper.setProps({ openKeys: ['1'] });
158+
await asyncExpect(() => {
159+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
160+
}, 0);
161+
});
162162

163163
it('inline', async () => {
164164
const wrapper = mount(
@@ -382,7 +382,7 @@ describe('Menu', () => {
382382
{ attachTo: 'body', sync: false },
383383
);
384384
await asyncExpect(() => {
385-
expect(wrapper.findAll('.ant-menu-sub').length).not.toBe(0);
385+
expect(wrapper.findAll('.ant-menu-sub').length).toBe(0);
386386
});
387387
wrapper.setProps({ inlineCollapsed: true });
388388
await asyncExpect(() => {
@@ -433,7 +433,7 @@ describe('Menu', () => {
433433
{ attachTo: 'body', sync: false },
434434
);
435435
await asyncExpect(() => {
436-
expect($$('.ant-menu-sub')[0].style.display).toBe('none');
436+
expect($$('.ant-menu-sub').length).toBe(0);
437437
toggleMenu(wrapper, 0, 'click');
438438
}, 0);
439439
await asyncExpect(() => {
@@ -464,7 +464,7 @@ describe('Menu', () => {
464464
{ attachTo: 'body', sync: false },
465465
);
466466
await asyncExpect(() => {
467-
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
467+
expect($$('.ant-menu-sub').length).toBe(0);
468468
toggleMenu(wrapper, 0, 'mouseenter');
469469
}, 0);
470470
await asyncExpect(() => {
@@ -477,36 +477,36 @@ describe('Menu', () => {
477477
}, 500);
478478
});
479479

480-
// it('horizontal', async () => {
481-
// const wrapper = mount(
482-
// {
483-
// render() {
484-
// return (
485-
// <Menu mode="horizontal">
486-
// <SubMenu key="1" title="submenu1">
487-
// <Menu.Item key="submenu1">Option 1</Menu.Item>
488-
// <Menu.Item key="submenu2">Option 2</Menu.Item>
489-
// </SubMenu>
490-
// <Menu.Item key="2">menu2</Menu.Item>
491-
// </Menu>
492-
// );
493-
// },
494-
// },
495-
// { attachTo: 'body', sync: false },
496-
// );
497-
// await asyncExpect(() => {
498-
// // expect($$('.ant-menu-sub').length).toBe(0);
499-
// toggleMenu(wrapper, 3, 'mouseenter');
500-
// }, 0);
501-
// await asyncExpect(() => {
502-
// // expect($$('.ant-menu-sub').length).toBe(1);
503-
// expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
504-
// toggleMenu(wrapper, 1, 'mouseleave');
505-
// }, 500);
506-
// await asyncExpect(() => {
507-
// expect($$('.ant-menu-sub')[0].style.display).toBe('none');
508-
// }, 500);
509-
// });
480+
fit('horizontal', async () => {
481+
const wrapper = mount(
482+
{
483+
render() {
484+
return (
485+
<Menu mode="horizontal">
486+
<SubMenu key="1" title="submenu1">
487+
<Menu.Item key="submenu1">Option 1</Menu.Item>
488+
<Menu.Item key="submenu2">Option 2</Menu.Item>
489+
</SubMenu>
490+
<Menu.Item key="2">menu2</Menu.Item>
491+
</Menu>
492+
);
493+
},
494+
},
495+
{ attachTo: 'body', sync: false },
496+
);
497+
await asyncExpect(() => {
498+
expect($$('.ant-menu-sub').length).toBe(0);
499+
toggleMenu(wrapper, 1, 'mouseenter');
500+
}, 100);
501+
await asyncExpect(() => {
502+
expect($$('.ant-menu-sub').length).toBe(1);
503+
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
504+
toggleMenu(wrapper, 1, 'mouseleave');
505+
}, 500);
506+
await asyncExpect(() => {
507+
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
508+
}, 500);
509+
});
510510
});
511511

512512
it('inline title', async () => {

‎components/menu/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import PropTypes from '../_util/vue-types';
66
import animation from '../_util/openAnimation';
77
import warning from '../_util/warning';
88
import Item from './MenuItem';
9-
import { hasProp, getOptionProps, getSlot } from '../_util/props-util';
9+
import { hasProp, getOptionProps } from '../_util/props-util';
1010
import BaseMixin from '../_util/BaseMixin';
1111
import commonPropsType from '../vc-menu/commonPropsType';
1212
import { defaultConfigProvider } from '../config-provider';
@@ -275,7 +275,7 @@ const Menu = defineComponent({
275275
onOpenChange: this.handleOpenChange,
276276
onMouseenter: this.handleMouseEnter,
277277
onTransitionend: this.handleTransitionEnd,
278-
children: getSlot(this),
278+
// children: getSlot(this),
279279
};
280280
if (!hasProp(this, 'selectedKeys')) {
281281
delete menuProps.selectedKeys;
@@ -300,7 +300,7 @@ const Menu = defineComponent({
300300
menuProps.openKeys = [];
301301
}
302302

303-
return <VcMenu {...menuProps} class={menuClassName} vSlots={omit(this.$slots, ['defalut'])} />;
303+
return <VcMenu {...menuProps} class={menuClassName} v-slots={this.$slots} />;
304304
},
305305
});
306306

‎components/menu/style/index.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@
190190
&-popup {
191191
position: absolute;
192192
z-index: @zindex-dropdown;
193-
background: @menu-popup-bg;
193+
// background: @menu-popup-bg;
194194
border-radius: @border-radius-base;
195195

196196
.submenu-title-wrapper {

‎components/table/filterDropdown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,6 @@ export default defineComponent({
228228
const { column } = this;
229229
const { sSelectedKeys: selectedKeys } = this;
230230
const multiple = 'filterMultiple' in column ? column.filterMultiple : true;
231-
232231
const input = multiple ? (
233232
<Checkbox checked={selectedKeys && selectedKeys.indexOf(item.value) >= 0} />
234233
) : (
@@ -281,8 +280,9 @@ export default defineComponent({
281280
onDeselect={this.setSelectedKeys}
282281
selectedKeys={originSelectedKeys}
283282
getPopupContainer={getPopupContainer}
284-
children={this.renderMenus(column.filters)}
285-
></Menu>
283+
>
284+
{this.renderMenus(column.filters)}
285+
</Menu>
286286
<div class={`${prefixCls}-dropdown-btns`}>
287287
<a class={`${prefixCls}-dropdown-link confirm`} onClick={this.handleConfirm}>
288288
{locale.filterConfirm}

‎components/table/interface.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -181,10 +181,10 @@ export interface TableState {
181181
}
182182

183183
export interface TransformCellTextProps {
184-
text: any,
185-
column: ColumnProps,
186-
record: any,
187-
index: number
184+
text: any;
185+
column: ColumnProps;
186+
record: any;
187+
index: number;
188188
}
189189

190190
// export type SelectionItemSelectFn = (key: string[]) => any;

‎components/table/style/size.less‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,11 @@
3232
}
3333

3434
tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
35-
margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical -
36-
1px;
35+
margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical - 1px;
3736
}
3837
}
3938
}
4039

41-
4240
// ================================================================
4341
// = Middle =
4442
// ================================================================

0 commit comments

Comments
 (0)