feat: add menu template support

Author: tangjinzhou

antdv-demo

@@ -8,7 +8,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) {
@@ -24,18 +24,25 @@ export default function connect(mapStateToProps) {
       setup() {
         return {
           storeContext: inject('storeContext', {}),
+          injectExtraProps: injectExtraPropsKey ? inject(injectExtraPropsKey, () => ({})) : {},
         };
       },
       data() {
         this.store = this.storeContext.store;
-        this.preProps = getOptionProps(this);
+        this.preProps = { ...getOptionProps(this), ...this.injectExtraProps };
         watchEffect(() => {
           if (mapStateToProps && mapStateToProps.length === 2) {
-            this.subscribed = finalMapStateToProps(this.store.getState(), this.$props);
+            this.subscribed = finalMapStateToProps(this.store.getState(), {
+              ...this.$props,
+              ...this.injectExtraProps,
+            });
           }
         });
         return {
-          subscribed: finalMapStateToProps(this.store.getState(), this.$props),
+          subscribed: finalMapStateToProps(this.store.getState(), {
+            ...this.$props,
+            ...this.injectExtraProps,
+          }),
         };
       },
       mounted() {
@@ -50,7 +57,7 @@ export default function connect(mapStateToProps) {
           if (!this.unsubscribe) {
             return;
           }
-          const props = getOptionProps(this);
+          const props = { ...getOptionProps(this), ...this.injectExtraProps };
           const nextSubscribed = finalMapStateToProps(this.store.getState(), props);
           if (
             !shallowEqual(this.preProps, props) ||
@@ -79,12 +86,12 @@ export default function connect(mapStateToProps) {
       },
       render() {
         const { $slots = {}, subscribed, store, $attrs } = this;
-        const props = getOptionProps(this);
+        const props = { ...getOptionProps(this), ...this.injectExtraProps };
         this.preProps = { ...props };
         const wrapProps = {
+          ...$attrs,
           ...props,
           ...subscribed,
-          ...$attrs,
           store,
           ref: 'wrappedInstance',
         };

components/_util/store/connect.jsx

@@ -0,0 +1,17 @@
+import PropTypes from '../_util/vue-types';
+import { provide, reactive } from 'vue';
+
+const FunctionProvider = {
+  inheritAttrs: false,
+  props: {
+    injectExtraPropsKey: PropTypes.string,
+  },
+  setup(props, { slots, attrs }) {
+    if (props.injectExtraPropsKey) {
+      provide(props.injectExtraPropsKey, reactive(attrs));
+    }
+    return () => slots.default && slots.default();
+  },
+};
+
+export default FunctionProvider;

components/vc-menu/FunctionProvider.jsx

@@ -6,7 +6,7 @@ import { connect } from '../_util/store';
 import { noop, menuAllProps } from './util';
 import { getComponent, getSlot, findDOMNode } from '../_util/props-util';
 import { inject } from 'vue';
-
+const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
 const props = {
   attribute: PropTypes.object,
   rootPrefixCls: PropTypes.string,
@@ -199,10 +199,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 };

components/vc-menu/MenuItem.jsx

@@ -13,7 +13,7 @@ import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './u
 import getTransitionProps from '../_util/getTransitionProps';
 
 let guid = 0;
-
+const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
 const popupPlacementMap = {
   horizontal: 'bottomLeft',
   vertical: 'rightTop',
@@ -337,6 +337,7 @@ const SubMenu = {
     },
     renderChildren(children) {
       const props = { ...this.$props, ...this.$attrs };
+
       const subPopupMenuProps = {
         mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
         visible: props.isOpen,
@@ -541,7 +542,7 @@ const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, su
     active: activeKey[subMenuKey] === eventKey,
     selectedKeys,
   };
-})(SubMenu);
+}, injectExtraPropsKey)(SubMenu);
 
 connected.isSubMenu = true;
 

components/vc-menu/SubMenu.jsx

@@ -6,15 +6,15 @@ import KeyCode from '../_util/KeyCode';
 import classNames from '../_util/classNames';
 import { getKeyFromChildrenIndex, loopMenuItem, noop, isMobileDevice, menuAllProps } from './util';
 import DOMWrap from './DOMWrap';
-import { cloneElement } from '../_util/vnode';
 import {
   initDefaultProps,
   getOptionProps,
   getComponent,
   splitAttrs,
   getPropsData,
 } from '../_util/props-util';
-
+import FunctionProvider from './FunctionProvider';
+const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
 function allDisabled(arr) {
   if (!arr.length) {
     return true;
@@ -323,7 +323,11 @@ const SubPopupMenu = {
       if (props.mode === 'inline' || isMobileDevice()) {
         newChildProps.triggerSubMenuAction = 'click';
       }
-      return cloneElement(child, newChildProps);
+      return (
+        <FunctionProvider injectExtraPropsKey={injectExtraPropsKey} {...newChildProps}>
+          {child}
+        </FunctionProvider>
+      );
     },
 
     renderMenuItem(c, i, subMenuKey) {
@@ -389,4 +393,4 @@ const SubPopupMenu = {
   },
 };
 
-export default connect()(SubPopupMenu);
+export default connect(undefined)(SubPopupMenu);