Skip to content

Perf menu2.0 #3243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 23, 2020
Merged

Perf menu2.0 #3243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bdf57b0
perf: menu
tangjinzhou Nov 22, 2020
977b967
perf: update menu
tangjinzhou Nov 22, 2020
c8c0d0f
perf: update menu
tangjinzhou Nov 22, 2020
8a997e2
perf: update menu
tangjinzhou Nov 22, 2020
527b23a
style: lint
tangjinzhou Nov 22, 2020
7241222
perf: menu
tangjinzhou Nov 22, 2020
52ff56d
perf: menu
tangjinzhou Nov 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion CHANGELOG.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@

---


## 2.0.0-rc.1

`2020-11-14`
Expand Down
2 changes: 1 addition & 1 deletion antdv-demo
Open in desktop
Submodule antdv-demo updated from 7ccccc to ef8278
7 changes: 2 additions & 5 deletions components/menu/SubMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { defineComponent, inject } from 'vue';
import { SubMenu as VcSubMenu } from '../vc-menu';
import classNames from '../_util/classNames';
import Omit from 'omit.js';
import { getSlot } from '../_util/props-util';
import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';

export type MenuTheme = 'light' | 'dark';
Expand Down Expand Up @@ -38,8 +36,7 @@ export default defineComponent({
popupClassName: classNames(`${rootPrefixCls}-${antdMenuTheme}`, popupClassName),
ref: 'subMenu',
...$attrs,
...Omit($slots, ['default']),
};
return <VcSubMenu {...props}>{getSlot(this)}</VcSubMenu>;
} as any;
return <VcSubMenu {...props} v-slots={$slots}></VcSubMenu>;
},
});
214 changes: 23 additions & 191 deletions components/menu/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

144 changes: 72 additions & 72 deletions components/menu/__tests__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-submenu-selected').length).toBe(2);
expect($$('.ant-menu-submenu-selected').length).toBe(1);
});
});
it('should accept defaultOpenKeys in mode horizontal', async () => {
Expand All @@ -73,7 +73,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
});
});

Expand Down Expand Up @@ -121,44 +121,44 @@ describe('Menu', () => {
});
});

// it('horizontal', async () => {
// const wrapper = mount(
// {
// props: {
// openKeys: {
// type: Array,
// default() {
// return ['1'];
// },
// },
// },
// render() {
// return (
// <Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
// <SubMenu key="1" title="submenu1">
// <Menu.Item key="submenu1">Option 1</Menu.Item>
// <Menu.Item key="submenu2">Option 2</Menu.Item>
// </SubMenu>
// <Menu.Item key="2">menu2</Menu.Item>
// </Menu>
// );
// },
// },
// { attachTo: 'body', sync: false },
// );
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
// }, 100);
// wrapper.setProps({ openKeys: [] });
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
// }, 500);
it('horizontal', async () => {
const wrapper = mount(
{
props: {
openKeys: {
type: Array,
default() {
return ['1'];
},
},
},
render() {
return (
<Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
},
},
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
});
wrapper.setProps({ openKeys: [] });
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 500);

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

it('inline', async () => {
const wrapper = mount(
Expand Down Expand Up @@ -382,7 +382,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect(wrapper.findAll('.ant-menu-sub').length).not.toBe(0);
expect(wrapper.findAll('.ant-menu-sub').length).toBe(0);
});
wrapper.setProps({ inlineCollapsed: true });
await asyncExpect(() => {
Expand Down Expand Up @@ -433,7 +433,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).toBe('none');
expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'click');
}, 0);
await asyncExpect(() => {
Expand Down Expand Up @@ -464,7 +464,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'mouseenter');
}, 0);
await asyncExpect(() => {
Expand All @@ -477,36 +477,36 @@ describe('Menu', () => {
}, 500);
});

// it('horizontal', async () => {
// const wrapper = mount(
// {
// render() {
// return (
// <Menu mode="horizontal">
// <SubMenu key="1" title="submenu1">
// <Menu.Item key="submenu1">Option 1</Menu.Item>
// <Menu.Item key="submenu2">Option 2</Menu.Item>
// </SubMenu>
// <Menu.Item key="2">menu2</Menu.Item>
// </Menu>
// );
// },
// },
// { attachTo: 'body', sync: false },
// );
// await asyncExpect(() => {
// // expect($$('.ant-menu-sub').length).toBe(0);
// toggleMenu(wrapper, 3, 'mouseenter');
// }, 0);
// await asyncExpect(() => {
// // expect($$('.ant-menu-sub').length).toBe(1);
// expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
// toggleMenu(wrapper, 1, 'mouseleave');
// }, 500);
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].style.display).toBe('none');
// }, 500);
// });
fit('horizontal', async () => {
const wrapper = mount(
{
render() {
return (
<Menu mode="horizontal">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
},
},
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 1, 'mouseenter');
}, 100);
await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1);
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
toggleMenu(wrapper, 1, 'mouseleave');
}, 500);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 500);
});
});

it('inline title', async () => {
Expand Down
6 changes: 3 additions & 3 deletions components/menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import PropTypes from '../_util/vue-types';
import animation from '../_util/openAnimation';
import warning from '../_util/warning';
import Item from './MenuItem';
import { hasProp, getOptionProps, getSlot } from '../_util/props-util';
import { hasProp, getOptionProps } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import commonPropsType from '../vc-menu/commonPropsType';
import { defaultConfigProvider } from '../config-provider';
Expand Down Expand Up @@ -275,7 +275,7 @@ const Menu = defineComponent({
onOpenChange: this.handleOpenChange,
onMouseenter: this.handleMouseEnter,
onTransitionend: this.handleTransitionEnd,
children: getSlot(this),
// children: getSlot(this),
};
if (!hasProp(this, 'selectedKeys')) {
delete menuProps.selectedKeys;
Expand All @@ -300,7 +300,7 @@ const Menu = defineComponent({
menuProps.openKeys = [];
}

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

Expand Down
2 changes: 1 addition & 1 deletion components/menu/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@
&-popup {
position: absolute;
z-index: @zindex-dropdown;
background: @menu-popup-bg;
// background: @menu-popup-bg;
border-radius: @border-radius-base;

.submenu-title-wrapper {
Expand Down
6 changes: 3 additions & 3 deletions components/table/filterDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,6 @@ export default defineComponent({
const { column } = this;
const { sSelectedKeys: selectedKeys } = this;
const multiple = 'filterMultiple' in column ? column.filterMultiple : true;

const input = multiple ? (
<Checkbox checked={selectedKeys && selectedKeys.indexOf(item.value) >= 0} />
) : (
Expand Down Expand Up @@ -281,8 +280,9 @@ export default defineComponent({
onDeselect={this.setSelectedKeys}
selectedKeys={originSelectedKeys}
getPopupContainer={getPopupContainer}
children={this.renderMenus(column.filters)}
></Menu>
>
{this.renderMenus(column.filters)}
</Menu>
<div class={`${prefixCls}-dropdown-btns`}>
<a class={`${prefixCls}-dropdown-link confirm`} onClick={this.handleConfirm}>
{locale.filterConfirm}
Expand Down
8 changes: 4 additions & 4 deletions components/table/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,10 +181,10 @@ export interface TableState {
}

export interface TransformCellTextProps {
text: any,
column: ColumnProps,
record: any,
index: number
text: any;
column: ColumnProps;
record: any;
index: number;
}

// export type SelectionItemSelectFn = (key: string[]) => any;
Expand Down
4 changes: 1 addition & 3 deletions components/table/style/size.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,11 @@
}

tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical -
1px;
margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical - 1px;
}
}
}


// ================================================================
// = Middle =
// ================================================================
Expand Down
14 changes: 14 additions & 0 deletions components/tag/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,17 @@ exports[`renders ./antdv-demo/docs/tag/demo/controlled.md correctly 1`] = `
`;

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>`;

exports[`renders ./antdv-demo/docs/tag/demo/status.md correctly 1`] = `
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Without icon</span></div>
<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>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">With icon</span></div>
<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>
<!----></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>
<!----></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>
<!----></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>
<!----></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>
<!----></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>
<!----></span>
</div>
`;
5 changes: 3 additions & 2 deletions components/vc-mentions/src/DropdownMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ export default {
}}
onBlur={onBlur}
onFocus={onFocus}
children={[
>
{[
...options.map((option, index) => {
const { value, disabled, children } = option;
return (
Expand All @@ -58,7 +59,7 @@ export default {
</MenuItem>
),
].filter(Boolean)}
/>
</Menu>
);
},
};
4 changes: 2 additions & 2 deletions components/vc-menu/DOMWrap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,8 @@ const DOMWrap = {
// put all the overflowed item inside a submenu
// with a title of overflow indicator ('...')
const copy = getSlot(this)[0];
const { title, ...rest } = getAllProps(copy); // eslint-disable-line no-unused-vars
const allProps = getAllProps(copy) || {};
const { title, extraProps, ...rest } = { ...allProps, ...allProps.extraProps }; // eslint-disable-line no-unused-vars
let style = {};
let key = `${keyPrefix}-overflowed-indicator`;
let eventKey = `${keyPrefix}-overflowed-indicator`;
Expand Down Expand Up @@ -136,7 +137,6 @@ const DOMWrap = {
key,
style,
};

return <SubMenu {...subMenuProps}>{overflowedItems}</SubMenu>;
},

Expand Down
2 changes: 1 addition & 1 deletion components/vc-menu/Divider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default {
};
},
render() {
const { rootPrefixCls } = {...this.$props, ...this.injectExtraProps};
const { rootPrefixCls } = { ...this.$props, ...this.injectExtraProps };
const { class: className = '', style } = this.$attrs;
return <li class={[className, `${rootPrefixCls}-item-divider`]} style={style} />;
},
Expand Down
13 changes: 10 additions & 3 deletions components/vc-menu/FunctionProvider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
// import PropTypes from '../_util/vue-types';
import { provide, reactive } from 'vue';
import { computed, provide } from 'vue';
import { propTypes } from '../vc-progress/src/types';
export const injectExtraPropsKey = Symbol();
const FunctionProvider = {
inheritAttrs: false,
setup(props, { slots, attrs }) {
provide(injectExtraPropsKey, reactive(attrs));
props: {
extraProps: propTypes.object,
},
setup(props, { slots }) {
provide(
injectExtraPropsKey,
computed(() => props.extraProps),
);
return () => slots.default?.();
},
};
Expand Down
Loading