From ce1148838b09fc2ce68654a2ac9598c8bba22b32 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Wed, 28 Oct 2020 11:31:32 +0800 Subject: [PATCH] feat: menu support nest component --- components/_util/store/connect.jsx | 42 +++++++++++++++---- .../__tests__/__snapshots__/demo.test.js.snap | 4 +- .../__tests__/__snapshots__/demo.test.js.snap | 12 +++--- components/vc-menu/DOMWrap.jsx | 7 +++- components/vc-menu/FunctionProvider.jsx | 15 +++++++ components/vc-menu/MenuItem.jsx | 13 +++--- components/vc-menu/MenuItemGroup.jsx | 18 +++++--- components/vc-menu/SubMenu.jsx | 15 ++++--- components/vc-menu/SubPopupMenu.jsx | 9 ++-- 9 files changed, 98 insertions(+), 37 deletions(-) create mode 100644 components/vc-menu/FunctionProvider.jsx diff --git a/components/_util/store/connect.jsx b/components/_util/store/connect.jsx index 792a0a279..ca970e4dc 100644 --- a/components/_util/store/connect.jsx +++ b/components/_util/store/connect.jsx @@ -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 ( diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap index 576bca6d8..cb081120a 100644 --- a/components/layout/__tests__/__snapshots__/demo.test.js.snap +++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap @@ -322,7 +322,7 @@ exports[`renders ./antdv-demo/docs/layout/demo/top-side.md correctly 1`] = `