feat: update vc-menu

components/_util/store/connect.jsx

@@ -26,6 +26,7 @@ export default function connect (mapStateToProps) {
       },
       data () {
         this.store = this.storeContext.store
+        this.preProps = { ...omit(getOptionProps(this), ['__propsSymbol__']) }
         return {
           subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
         }
@@ -49,10 +50,10 @@ export default function connect (mapStateToProps) {
           if (!this.unsubscribe) {
             return
           }
-
-          const nextState = finnalMapStateToProps(this.store.getState(), this.$props)
-          if (!shallowEqual(this.subscribed, nextState)) {
-            this.subscribed = nextState
+          const props = getOptionProps(this)
+          const nextSubscribed = finnalMapStateToProps(this.store.getState(), props)
+          if (!shallowEqual(this.preProps, props) || !shallowEqual(this.subscribed, nextSubscribed)) {
+            this.subscribed = nextSubscribed
           }
         },
 
@@ -74,8 +75,10 @@ export default function connect (mapStateToProps) {
         },
       },
       render () {
+        this.preProps = { ...this.$props }
         const { $listeners, $slots = {}, $attrs, $scopedSlots, subscribed, store } = this
         const props = getOptionProps(this)
+        this.preProps = { ...omit(props, ['__propsSymbol__']) }
         const wrapProps = {
           props: {
             ...props,

components/menu/demo/index.vue

@@ -1,6 +1,7 @@
 <script>
 import Horizontal from './horizontal'
 import InlineCollapsed from './inline-collapsed'
+import Inline from './inline'
 import SiderCurrent from './sider-current'
 import SwitchMode from './switch-mode'
 import Theme from './theme'
@@ -32,6 +33,7 @@ export default {
         <md cn={md.cn} us={md.us}/>
         <Horizontal />
         <InlineCollapsed />
+        <Inline />
         <SiderCurrent />
         <SwitchMode />
         <Theme />

components/vc-menu/Menu.jsx

@@ -162,7 +162,6 @@ const Menu = {
         openTransitionName: this.getOpenTransitionName(),
         parentMenu: this,
         children: this.$slots.default || [],
-        __propsSymbol__: Symbol(),
       },
       class: `${props.prefixCls}-root`,
       on: {

components/vc-menu/SubMenu.jsx

@@ -362,7 +362,6 @@ const SubMenu = {
           itemIcon: getComponentFromProp(this, 'itemIcon'),
           expandIcon: getComponentFromProp(this, 'expandIcon'),
           children,
-          __propsSymbol__: Symbol(),
         },
         on: {
           click: this.onSubMenuClick,

components/vc-menu/SubPopupMenu.jsx

@@ -37,14 +37,6 @@ export function saveRef (key, c) {
   if (c) {
     const index = this.instanceArrayKeyIndexMap[key]
     this.instanceArray[index] = c
-    // const index = this.instanceArray.indexOf(c)
-    // if (index !== -1) {
-    //   // update component if it's already inside instanceArray
-    //   this.instanceArray[index] = c
-    // } else {
-    //   // add component if it's not in instanceArray yet;
-    //   this.instanceArray.push(c)
-    // }
   }
 }
 export function getActiveKey (props, originalActiveKey) {
@@ -145,18 +137,6 @@ const SubPopupMenu = {
       updateActiveKey(props.store, getEventKey(props), activeKey)
     }
   },
-  // watch: {
-  //   __propsSymbol__ () {
-  //     const props = getOptionProps(this)
-  //     const storeActiveKey = this.getStore().getState().activeKey[this.getEventKey()]
-  //     const originalActiveKey = 'activeKey' in props ? props.activeKey
-  //       : storeActiveKey
-  //     const activeKey = getActiveKey(props, originalActiveKey)
-  //     if (activeKey !== originalActiveKey || storeActiveKey !== activeKey) {
-  //       updateActiveKey(this.getStore(), this.getEventKey(), activeKey)
-  //     }
-  //   },
-  // },
   methods: {
     // all keyboard events callbacks run from here at first
     onKeyDown  (e, callback) {
@@ -221,7 +201,7 @@ const SubPopupMenu = {
 
     step (direction) {
       let children = this.getFlatInstanceArray()
-      const activeKey = this.$props.store.getState().activeKey[this.getEventKey(this.$props)]
+      const activeKey = this.$props.store.getState().activeKey[getEventKey(this.$props)]
       const len = children.length
       if (!len) {
         return null
@@ -290,7 +270,8 @@ const SubPopupMenu = {
       const props = this.$props
       const key = getKeyFromChildrenIndex(child, props.eventKey, i)
       const childProps = child.componentOptions.propsData || {}
-      const isActive = key === state.activeKey
+
+      const isActive = key === state.activeKey[getEventKey(this.$props)]
       if (!childProps.disabled) {
         // manualRef的执行顺序不能保证，使用key映射ref在this.instanceArray中的位置
         this.instanceArrayKeyIndexMap[key] = Object.keys(this.instanceArrayKeyIndexMap).length