Skip to content

Commit

Permalink
Perf menu2.0 (#3243)
Browse files Browse the repository at this point in the history 
close #3231 #3188
  • Loading branch information
@tangjinzhou
tangjinzhou authored Nov 23, 2020
1 parent 2d6b502 commit da6d243
Show file tree
Hide file tree
Showing 23 changed files with 497 additions and 615 deletions.
1 change: 0 additions & 1 deletion CHANGELOG.zh-CN.md
View file
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
Submodule antdv-demo updated from 7ccccc to ef8278
7 changes: 2 additions & 5 deletions components/menu/SubMenu.tsx
View file
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

Large diffs are not rendered by default.

144 changes: 72 additions & 72 deletions components/menu/__tests__/index.test.js
View file
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit da6d243

Please sign in to comment.