Skip to content

Commit da6d243

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

23 files changed

+497
-615
lines changed

‎CHANGELOG.zh-CN.md

-1
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

+2-5
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

+23-191
Large diffs are not rendered by default.

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

+72-72
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

+3-3
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

+1-1
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

+3-3
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

+4-4
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

+1-3
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
// ================================================================

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

+14
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,17 @@ exports[`renders ./antdv-demo/docs/tag/demo/controlled.md correctly 1`] = `
2727
`;
2828
2929
exports[`renders ./antdv-demo/docs/tag/demo/hot-tags.md correctly 1`] = `<div><span>Categories:</span><span class="ant-tag ant-tag-checkable">Movies</span><span class="ant-tag ant-tag-checkable">Books</span><span class="ant-tag ant-tag-checkable">Music</span><span class="ant-tag ant-tag-checkable">Sports</span></div>`;
30+
31+
exports[`renders ./antdv-demo/docs/tag/demo/status.md correctly 1`] = `
32+
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Without icon</span></div>
33+
<div><span class="ant-tag ant-tag-success">success<!----></span><span class="ant-tag ant-tag-processing">processing<!----></span><span class="ant-tag ant-tag-error">error<!----></span><span class="ant-tag ant-tag-warning">warning<!----></span><span class="ant-tag ant-tag-default">default<!----></span></div>
34+
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">With icon</span></div>
35+
<div><span class="ant-tag ant-tag-success"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> success </span>
36+
<!----></span><span class="ant-tag ant-tag-processing"><span role="img" aria-label="sync" class="anticon anticon-sync"><svg class="anticon-spin" data-icon="sync" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"></path></svg></span><span> processing </span>
37+
<!----></span><span class="ant-tag ant-tag-error"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> error </span>
38+
<!----></span><span class="ant-tag ant-tag-warning"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span><span> warning </span>
39+
<!----></span><span class="ant-tag ant-tag-default"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span><span> waiting </span>
40+
<!----></span><span class="ant-tag ant-tag-default"><span role="img" aria-label="minus-circle" class="anticon anticon-minus-circle"><svg class="" data-icon="minus-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> stop </span>
41+
<!----></span>
42+
</div>
43+
`;

‎components/vc-mentions/src/DropdownMenu.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ export default {
3737
}}
3838
onBlur={onBlur}
3939
onFocus={onFocus}
40-
children={[
40+
>
41+
{[
4142
...options.map((option, index) => {
4243
const { value, disabled, children } = option;
4344
return (
@@ -58,7 +59,7 @@ export default {
5859
</MenuItem>
5960
),
6061
].filter(Boolean)}
61-
/>
62+
</Menu>
6263
);
6364
},
6465
};

‎components/vc-menu/DOMWrap.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ const DOMWrap = {
100100
// put all the overflowed item inside a submenu
101101
// with a title of overflow indicator ('...')
102102
const copy = getSlot(this)[0];
103-
const { title, ...rest } = getAllProps(copy); // eslint-disable-line no-unused-vars
103+
const allProps = getAllProps(copy) || {};
104+
const { title, extraProps, ...rest } = { ...allProps, ...allProps.extraProps }; // eslint-disable-line no-unused-vars
104105
let style = {};
105106
let key = `${keyPrefix}-overflowed-indicator`;
106107
let eventKey = `${keyPrefix}-overflowed-indicator`;
@@ -136,7 +137,6 @@ const DOMWrap = {
136137
key,
137138
style,
138139
};
139-
140140
return <SubMenu {...subMenuProps}>{overflowedItems}</SubMenu>;
141141
},
142142

‎components/vc-menu/Divider.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default {
1616
};
1717
},
1818
render() {
19-
const { rootPrefixCls } = {...this.$props, ...this.injectExtraProps};
19+
const { rootPrefixCls } = { ...this.$props, ...this.injectExtraProps };
2020
const { class: className = '', style } = this.$attrs;
2121
return <li class={[className, `${rootPrefixCls}-item-divider`]} style={style} />;
2222
},

‎components/vc-menu/FunctionProvider.jsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
// import PropTypes from '../_util/vue-types';
2-
import { provide, reactive } from 'vue';
2+
import { computed, provide } from 'vue';
3+
import { propTypes } from '../vc-progress/src/types';
34
export const injectExtraPropsKey = Symbol();
45
const FunctionProvider = {
56
inheritAttrs: false,
6-
setup(props, { slots, attrs }) {
7-
provide(injectExtraPropsKey, reactive(attrs));
7+
props: {
8+
extraProps: propTypes.object,
9+
},
10+
setup(props, { slots }) {
11+
provide(
12+
injectExtraPropsKey,
13+
computed(() => props.extraProps),
14+
);
815
return () => slots.default?.();
916
},
1017
};

0 commit comments

Comments
 (0)