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

feat: menu support nest component

Browse Source
pull/3143/head
tanjinzhou 4 years ago
parent dae751368b
commit ce1148838b
9 changed files with 98 additions and 37 deletions
Show Stats Download Patch File Download Diff File

42
components/_util/store/connect.jsx
Unescape View File

@ -9,7 +9,7 @@ function getDisplayName(WrappedComponent) {
}
const defaultMapStateToProps = () => ({});
export default function connect(mapStateToProps) {
export default function connect(mapStateToProps, injectExtraPropsKey) {
const shouldSubscribe = !!mapStateToProps;
const finalMapStateToProps = mapStateToProps || defaultMapStateToProps;
return function wrapWithConnect(WrappedComponent) {
@ -25,18 +25,43 @@ export default function connect(mapStateToProps) {
props,
inject: {
storeContext: { default: () => ({}) },
...(injectExtraPropsKey
? {
injectExtraContext: {
from: injectExtraPropsKey,
default: () => ({}),
},
}
: {}),
},
computed: {
injectExtraProps() {
return this.injectExtraContext ? this.injectExtraContext.$attrs : {};
},
injectExtraListeners() {
return this.injectExtraContext ? this.injectExtraContext.$listeners : {};
},
},
data() {
this.store = this.storeContext.store;
this.preProps = omit(getOptionProps(this), ['__propsSymbol__']);
this.preProps = {
...omit(getOptionProps(this), ['__propsSymbol__']),
...this.injectExtraProps,
};
return {
subscribed: finalMapStateToProps(this.store.getState(), this.$props),
subscribed: finalMapStateToProps(this.store.getState(), {
...this.$props,
...this.injectExtraProps,
}),
};
},
watch: {
__propsSymbol__() {
if (mapStateToProps && mapStateToProps.length === 2) {
this.subscribed = finalMapStateToProps(this.store.getState(), this.$props);
this.subscribed = finalMapStateToProps(this.store.getState(), {
...this.$props,
...this.injectExtraProps,
});
}
},
},
@ -52,7 +77,10 @@ export default function connect(mapStateToProps) {
if (!this.unsubscribe) {
return;
}
const props = omit(getOptionProps(this), ['__propsSymbol__']);
const props = {
...omit(getOptionProps(this), ['__propsSymbol__']),
...this.injectExtraProps,
};
const nextSubscribed = finalMapStateToProps(this.store.getState(), props);
if (
!shallowEqual(this.preProps, props) ||
@ -81,7 +109,7 @@ export default function connect(mapStateToProps) {
},
render() {
const { $slots = {}, $scopedSlots, subscribed, store } = this;
const props = getOptionProps(this);
const props = { ...getOptionProps(this), ...this.injectExtraProps };
this.preProps = { ...omit(props, ['__propsSymbol__']) };
const wrapProps = {
props: {
@ -89,7 +117,7 @@ export default function connect(mapStateToProps) {
...subscribed,
store,
},
on: getListeners(this),
on: { ...getListeners(this), ...this.injectExtraListeners },
scopedSlots: $scopedSlots,
};
return (

4
components/layout/__tests__/__snapshots__/demo.test.js.snap
Unescape View File

@ -322,7 +322,7 @@ exports[`renders ./antdv-demo/docs/layout/demo/top-side.md correctly 1`] = `
<div class="ant-layout-sider-children">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="sub1$Menu"><span><i aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">
option1
@ -393,7 +393,7 @@ exports[`renders ./antdv-demo/docs/layout/demo/top-side-2.md correctly 1`] = `
<div class="ant-layout-sider-children">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="sub1$Menu"><span><i aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">
option1

12
components/menu/__tests__/__snapshots__/demo.test.js.snap
Unescape View File

@ -36,7 +36,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline.md correctly 1`] = `
<div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="sub1$Menu"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li class="ant-menu-item-group">
<div class="ant-menu-item-group-title"><i aria-label="icon: qq" class="anticon anticon-qq"><svg viewBox="64 64 896 896" data-icon="qq" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
@ -91,7 +91,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline-collapsed.md correctly 1`] =
<path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0 0 60.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path>
</svg></i> <span>Option 3</span></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="sub1$Menu"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">
Option 5
@ -119,7 +119,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/sider-current.md correctly 1`] = `
<div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="width: 256px;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="sub1$Menu"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">
Option 1
@ -163,7 +163,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
Navigation Two
</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: appstore" class="anticon anticon-appstore"><svg viewBox="64 64 896 896" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="sub1$Menu"><span><i aria-label="icon: appstore" class="anticon anticon-appstore"><svg viewBox="64 64 896 896" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">
Option 3
@ -194,7 +194,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/template.md correctly 1`] = `
<path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 0 0-282.8 117.1 398.19 398.19 0 0 0-85.7 127.1A397.61 397.61 0 0 0 72 552a398.46 398.46 0 0 0 117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 0 0 472 952a398.46 398.46 0 0 0 282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 0 0 872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 0 1 470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 0 0 589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 0 1 166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path>
</svg></i> <span>Option 1</span></li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" menuinfo="[object Object]">
<div aria-expanded="true" aria-owns="2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="2$Menu"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline" menuinfo="[object Object]">
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 48px;"><span><i aria-label="icon: mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></i><span>Navigation 3</span></span><i class="ant-menu-submenu-arrow"></i></div>
@ -220,7 +220,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
Navigation Two
</li>
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i aria-label="icon: appstore" class="anticon anticon-appstore"><svg viewBox="64 64 896 896" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;" aria-expanded="true" aria-owns="sub1$Menu"><span><i aria-label="icon: appstore" class="anticon anticon-appstore"><svg viewBox="64 64 896 896" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></i><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">
Option 3

7
components/vc-menu/DOMWrap.jsx
Unescape View File

@ -4,7 +4,7 @@ import SubMenu from './SubMenu';
import BaseMixin from '../_util/BaseMixin';
import { getWidth, setStyle, menuAllProps } from './util';
import { cloneElement } from '../_util/vnode';
import { getClass, getPropsData, getEvents, getListeners } from '../_util/props-util';
import { getClass, getPropsData as getProps, getEvents, getListeners } from '../_util/props-util';
const canUseDOM = !!(
typeof window !== 'undefined' &&
@ -20,6 +20,11 @@ if (canUseDOM) {
require('mutationobserver-shim');
}
const getPropsData = vnode => {
const { data: { attrs } = {} } = vnode;
return { ...getProps(vnode), ...attrs };
};
const DOMWrap = {
name: 'DOMWrap',
mixins: [BaseMixin],

15
components/vc-menu/FunctionProvider.jsx
Unescape View File

@ -0,0 +1,15 @@
export const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
const FunctionProvider = {
inheritAttrs: false,
provide() {
return {
[injectExtraPropsKey]: this,
};
},
render() {
const { $slots: slots } = this;
return slots.default[0];
},
};
export default FunctionProvider;

13
components/vc-menu/MenuItem.jsx
Unescape View File

@ -5,7 +5,7 @@ import scrollIntoView from 'dom-scroll-into-view';
import { connect } from '../_util/store';
import { noop, menuAllProps } from './util';
import { getComponentFromProp, getListeners } from '../_util/props-util';
import { injectExtraPropsKey } from './FunctionProvider';
const props = {
attribute: PropTypes.object,
rootPrefixCls: PropTypes.string,
@ -202,10 +202,13 @@ const MenuItem = {
},
};
const connected = connect(({ activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
active: activeKey[subMenuKey] === eventKey,
isSelected: selectedKeys.indexOf(eventKey) !== -1,
}))(MenuItem);
const connected = connect(
({ activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
active: activeKey[subMenuKey] === eventKey,
isSelected: selectedKeys.indexOf(eventKey) !== -1,
}),
injectExtraPropsKey,
)(MenuItem);
export default connected;
export { props as menuItemProps };

18
components/vc-menu/MenuItemGroup.jsx
Unescape View File

@ -1,7 +1,6 @@
import PropTypes from '../_util/vue-types';
import { getComponentFromProp, getListeners } from '../_util/props-util';
// import { menuAllProps } from './util'
import { injectExtraPropsKey } from './FunctionProvider';
const MenuItemGroup = {
name: 'MenuItemGroup',
@ -16,19 +15,28 @@ const MenuItemGroup = {
title: PropTypes.any,
},
isMenuItemGroup: true,
inject: {
injectExtraProps: {
from: injectExtraPropsKey,
default: () => ({}),
},
},
methods: {
renderInnerMenuItem(item) {
const { renderMenuItem, index, subMenuKey } = this.$props;
const { renderMenuItem, index, subMenuKey } = {
...this.$props,
...this.injectExtraProps.$attrs,
};
return renderMenuItem(item, index, subMenuKey);
},
},
render() {
const props = { ...this.$props };
const props = { ...this.$props, ...this.injectExtraProps.$attrs, ...this.$attrs };
const { rootPrefixCls, title } = props;
const titleClassName = `${rootPrefixCls}-item-group-title`;
const listClassName = `${rootPrefixCls}-item-group-list`;
// menuAllProps.props.forEach(key => delete props[key])
const listeners = { ...getListeners(this) };
const listeners = { ...getListeners(this), ...this.injectExtraProps.$listeners };
delete listeners.click;
return (

15
components/vc-menu/SubMenu.jsx
Unescape View File

@ -10,6 +10,7 @@ import { getComponentFromProp, filterEmpty, getListeners } from '../_util/props-
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
import getTransitionProps from '../_util/getTransitionProps';
import { injectExtraPropsKey } from './FunctionProvider';
let guid = 0;
@ -542,12 +543,14 @@ const SubMenu = {
);
},
};
const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
isOpen: openKeys.indexOf(eventKey) > -1,
active: activeKey[subMenuKey] === eventKey,
selectedKeys,
}))(SubMenu);
const connected = connect(
({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
isOpen: openKeys.indexOf(eventKey) > -1,
active: activeKey[subMenuKey] === eventKey,
selectedKeys,
}),
injectExtraPropsKey,
)(SubMenu);
connected.isSubMenu = true;

9
components/vc-menu/SubPopupMenu.jsx
Unescape View File

@ -6,7 +6,6 @@ import KeyCode from '../_util/KeyCode';
import classNames from 'classnames';
import { getKeyFromChildrenIndex, loopMenuItem, noop, isMobileDevice } from './util';
import DOMWrap from './DOMWrap';
import { cloneElement } from '../_util/vnode';
import {
initDefaultProps,
getOptionProps,
@ -15,7 +14,7 @@ import {
getComponentFromProp,
getListeners,
} from '../_util/props-util';
import FunctionProvider from './FunctionProvider';
function allDisabled(arr) {
if (!arr.length) {
return true;
@ -312,7 +311,7 @@ const SubPopupMenu = {
}
const childListeners = getEvents(child);
const newChildProps = {
props: {
attrs: {
mode: childProps.mode || props.mode,
level: props.level,
inlineIndent: props.inlineIndent,
@ -349,9 +348,9 @@ const SubPopupMenu = {
};
// ref: https://github.com/ant-design/ant-design/issues/13943
if (props.mode === 'inline' || isMobileDevice()) {
newChildProps.props.triggerSubMenuAction = 'click';
newChildProps.attrs.triggerSubMenuAction = 'click';
}
return cloneElement(child, newChildProps);
return <FunctionProvider {...newChildProps}>{child}</FunctionProvider>;
},
renderMenuItem(c, i, subMenuKey) {

Write Preview
Loading…
Cancel
Save