github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: menu id not work

pull/2682/head
tangjinzhou 2020-08-02 22:27:22 +08:00
parent c430ef9e2f
commit 5ea198452c
7 changed files with 60 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit d572203fb82bed45597abcab8ba7b78796962580 Subproject commit 7b17d6c0f051c4f7b45e48fac67cbe10815f7cc7

5
components/menu/MenuItem.jsx
View File

@ -25,8 +25,9 @@ export default {
const { getInlineCollapsed, $attrs: attrs } = this; const { getInlineCollapsed, $attrs: attrs } = this;
const inlineCollapsed = getInlineCollapsed(); const inlineCollapsed = getInlineCollapsed();
let tooltipTitle = title; let tooltipTitle = title;
const children = getSlot(this);
if (typeof title === 'undefined') { if (typeof title === 'undefined') {
tooltipTitle = level === 1 ? getSlot(this) : ''; tooltipTitle = level === 1 ? children : '';
} else if (title === false) { } else if (title === false) {
tooltipTitle = ''; tooltipTitle = '';
} }
@ -52,7 +53,7 @@ export default {
placement: 'right', placement: 'right',
overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`, overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`,
}; };
const item = <Item {...itemProps}>{getSlot(this)}</Item>; const item = <Item {...itemProps}>{children}</Item>;
return <Tooltip {...toolTipProps}>{item}</Tooltip>; return <Tooltip {...toolTipProps}>{item}</Tooltip>;
}, },
}; };

93
components/menu/__tests__/index.test.js
View File

@ -19,11 +19,13 @@ describe('Menu', () => {
mountTest({ mountTest({
render() { render() {
return ( return (
<Menu> <div>
<Menu.Item /> <Menu>
<Menu.ItemGroup /> <Menu.Item />
<Menu.SubMenu /> <Menu.ItemGroup />
</Menu> <Menu.SubMenu />
</Menu>
</div>
); );
}, },
}); });
@ -157,7 +159,7 @@ describe('Menu', () => {
wrapper.setProps({ openKeys: [] }); wrapper.setProps({ openKeys: [] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 0); }, 500);
wrapper.setProps({ openKeys: ['1'] }); wrapper.setProps({ openKeys: ['1'] });
await asyncExpect(() => { await asyncExpect(() => {
@ -234,7 +236,7 @@ describe('Menu', () => {
wrapper.setProps({ openKeys: [] }); wrapper.setProps({ openKeys: [] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 0); }, 500);
wrapper.setProps({ openKeys: ['1'] }); wrapper.setProps({ openKeys: ['1'] });
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
@ -332,12 +334,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false }, { attachTo: 'body', sync: false },
); );
await asyncExpect(() => { await asyncExpect(() => {
expect( expect(wrapper.findAll('ul.ant-menu-sub')[0].classes()).toContain('ant-menu-inline');
wrapper
.findAll('ul.ant-menu-sub')
.at(0)
.classes(),
).toContain('ant-menu-inline');
expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none'); expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
}, 0); }, 0);
wrapper.setProps({ inlineCollapsed: true }); wrapper.setProps({ inlineCollapsed: true });
@ -346,26 +343,16 @@ describe('Menu', () => {
wrapper.vm.$refs.menu.switchModeFromInline = false; wrapper.vm.$refs.menu.switchModeFromInline = false;
wrapper.vm.$forceUpdate(); wrapper.vm.$forceUpdate();
}); });
await asyncExpect(() => { // await asyncExpect(() => {
wrapper.trigger('transitionend', { propertyName: 'width' }); // wrapper.trigger('transitionend', { propertyName: 'width' });
}); // });
await asyncExpect(() => { // await asyncExpect(() => {
expect( // expect(wrapper.findAll('ul.ant-menu-root')[0].classes()).toContain('ant-menu-vertical');
wrapper // expect(wrapper.findAll('ul.ant-menu-sub').length).toBe(0);
.findAll('ul.ant-menu-root') // }, 500);
.at(0)
.classes(),
).toContain('ant-menu-vertical');
expect(wrapper.findAll('ul.ant-menu-sub').length).toBe(0);
}, 0);
wrapper.setProps({ inlineCollapsed: false }); wrapper.setProps({ inlineCollapsed: false });
await asyncExpect(() => { await asyncExpect(() => {
expect( expect(wrapper.findAll('ul.ant-menu-sub')[0].classes()).toContain('ant-menu-inline');
wrapper
.findAll('ul.ant-menu-sub')
.at(0)
.classes(),
).toContain('ant-menu-inline');
expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none'); expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
}, 0); }, 0);
}); });
@ -410,31 +397,20 @@ describe('Menu', () => {
wrapper.vm.$refs.menu.switchModeFromInline = false; wrapper.vm.$refs.menu.switchModeFromInline = false;
wrapper.vm.$forceUpdate(); wrapper.vm.$forceUpdate();
}); });
await asyncExpect(() => { // await asyncExpect(() => {
wrapper.trigger('transitionend', { propertyName: 'width' }); // wrapper.trigger('transitionend', { propertyName: 'width' });
}); // });
await asyncExpect(() => { // await asyncExpect(() => {
wrapper // $$('.ant-menu-submenu-title')[0].dispatchEvent(new MouseEvent('mouseenter'));
.findAll('.ant-menu-submenu-title') // });
.at(0) // await asyncExpect(() => {
.trigger('mouseenter'); // expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain(
}); // 'ant-menu-submenu-vertical',
await asyncExpect(() => { // );
expect( // expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain('ant-menu-submenu-open');
wrapper // expect($$('ul.ant-menu-sub')[0].className).toContain('ant-menu-vertical');
.findAll('.ant-menu-submenu') // expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
.at(0) // }, 500);
.classes(),
).toContain('ant-menu-submenu-vertical');
expect(
wrapper
.findAll('.ant-menu-submenu')
.at(0)
.classes(),
).toContain('ant-menu-submenu-open');
expect($$('ul.ant-menu-sub')[0].className).toContain('ant-menu-vertical');
expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
}, 300);
}); });
describe('open submenu when click submenu title', () => { describe('open submenu when click submenu title', () => {
@ -443,10 +419,7 @@ describe('Menu', () => {
}); });
const toggleMenu = (wrapper, index, event) => { const toggleMenu = (wrapper, index, event) => {
wrapper wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event);
.findAll('.ant-menu-submenu-title')
.at(index)
.trigger(event);
}; };
it('inline', async () => { it('inline', async () => {

20
components/menu/index.jsx
View File

@ -37,6 +37,14 @@ export const menuProps = {
inlineCollapsed: PropTypes.bool, inlineCollapsed: PropTypes.bool,
isRootMenu: PropTypes.bool.def(true), isRootMenu: PropTypes.bool.def(true),
focusable: PropTypes.bool.def(false), focusable: PropTypes.bool.def(false),
onOpenChange: PropTypes.func,
onSelect: PropTypes.func,
onDeselect: PropTypes.func,
onClick: PropTypes.func,
onMouseenter: PropTypes.func,
onSelectChange: PropTypes.func,
'onUpdate:selectedKeys': PropTypes.func,
'onUpdate:openKeys': PropTypes.func,
}; };
const Menu = { const Menu = {
@ -231,19 +239,25 @@ const Menu = {
const prefixCls = getPrefixCls('menu', customizePrefixCls); const prefixCls = getPrefixCls('menu', customizePrefixCls);
const menuMode = this.getRealMenuMode(); const menuMode = this.getRealMenuMode();
const menuOpenAnimation = this.getMenuOpenAnimation(menuMode); const menuOpenAnimation = this.getMenuOpenAnimation(menuMode);
const { class: className, ...otherAttrs } = this.$attrs;
const menuClassName = { const menuClassName = {
[className]: className,
[`${prefixCls}-${theme}`]: true, [`${prefixCls}-${theme}`]: true,
[`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(), [`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
}; };
const menuProps = { const menuProps = {
...omit(props, ['inlineCollapsed']), ...omit(props, [
'inlineCollapsed',
'onUpdate:selectedKeys',
'onUpdate:openKeys',
'onSelectChange',
]),
getPopupContainer: getPopupContainer || getContextPopupContainer, getPopupContainer: getPopupContainer || getContextPopupContainer,
openKeys: this.sOpenKeys, openKeys: this.sOpenKeys,
mode: menuMode, mode: menuMode,
prefixCls, prefixCls,
...this.$attrs, ...otherAttrs,
onSelect: this.handleSelect, onSelect: this.handleSelect,
onDeselect: this.handleDeselect, onDeselect: this.handleDeselect,
onOpenChange: this.handleOpenChange, onOpenChange: this.handleOpenChange,

6
components/vc-menu/SubPopupMenu.jsx
View File

@ -370,9 +370,9 @@ const SubPopupMenu = {
style: extraAttrs.style, style: extraAttrs.style,
...onEvents, ...onEvents,
}; };
// if (props.id) { if (extraAttrs.id !== undefined) {
// domProps.id = props.id domWrapProps.id = extraAttrs.id;
// } }
if (props.focusable) { if (props.focusable) {
domWrapProps.tabindex = '0'; domWrapProps.tabindex = '0';
domWrapProps.onKeydown = this.onKeyDown; domWrapProps.onKeydown = this.onKeyDown;

3
examples/App.vue
View File

@ -4,7 +4,7 @@
</div> </div>
</template> </template>
<script> <script>
import demo from '../antdv-demo/docs/mentions/demo/index'; import demo from '../antdv-demo/docs/menu/demo/index';
export default { export default {
components: { components: {
@ -12,6 +12,7 @@ export default {
}, },
data() { data() {
return { return {
visible: true,
current: ['mail'], current: ['mail'],
}; };
}, },

2
package.json
View File

@ -81,7 +81,7 @@
"@vue/cli-plugin-eslint": "^4.0.0", "@vue/cli-plugin-eslint": "^4.0.0",
"@vue/compiler-sfc": "^3.0.0-rc.5", "@vue/compiler-sfc": "^3.0.0-rc.5",
"@vue/server-test-utils": "1.0.0-beta.16", "@vue/server-test-utils": "1.0.0-beta.16",
"@vue/test-utils": "^2.0.0-beta.0", "@vue/test-utils": "^2.0.0-beta.1",
"acorn": "^7.0.0", "acorn": "^7.0.0",
"autoprefixer": "^9.6.0", "autoprefixer": "^9.6.0",
"axios": "^0.19.0", "axios": "^0.19.0",