Perf menu (#3177)

* fix: menu parent dom  select class not work

* perf: ease-in-out update

Author: tangjinzhou

components/menu/__tests__/__snapshots__/demo.test.js.snap

@@ -276,7 +276,6 @@ const Menu = defineComponent({
       onMouseenter: this.handleMouseEnter,
       onTransitionend: this.handleTransitionEnd,
       children: getSlot(this),
-      openTransitionName: '', //issue解决后可去掉openTransitionName https://github.com/vuejs/vue-next/issues/1412
     };
     if (!hasProp(this, 'selectedKeys')) {
       delete menuProps.selectedKeys;

components/menu/index.tsx

@@ -98,7 +98,7 @@
 @ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
 @ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
 @ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+@ease-in-out: cubic-bezier(0.25, 0.8, 0.5, 1);
 @ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
 @ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
 @ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);

components/style/themes/default.less

@@ -42,7 +42,11 @@ const MenuItem = {
     // invoke customized ref to expose component to mixin
     this.callRef();
   },
+  mounted() {
+    this.updateParentMenuSelectedStatus();
+  },
   updated() {
+    this.updateParentMenuSelectedStatus();
     this.$nextTick(() => {
       const { active, parentMenu, eventKey } = this;
       if (!this.prevActive && active && (!parentMenu || !parentMenu[`scrolled-${eventKey}`])) {
@@ -58,10 +62,16 @@ const MenuItem = {
     this.callRef();
   },
   beforeUnmount() {
+    this.updateParentMenuSelectedStatus(false);
     const props = this.$props;
     this.__emit('destroy', props.eventKey);
   },
   methods: {
+    updateParentMenuSelectedStatus(status = this.isSelected) {
+      if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
+        this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
+      }
+    },
     onKeyDown(e) {
       const keyCode = e.keyCode;
       if (keyCode === KeyCode.ENTER) {
@@ -99,7 +109,7 @@ const MenuItem = {
       const info = {
         key: eventKey,
         keyPath: [eventKey],
-        item: this,
+        item: { ...this.$props },
         domEvent: e,
       };
 

components/vc-menu/MenuItem.jsx

@@ -9,7 +9,7 @@ import placements from './placements';
 import BaseMixin from '../_util/BaseMixin';
 import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../_util/props-util';
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
-import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
+import { noop, getMenuIdFromSubMenuEventKey } from './util';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { injectExtraPropsKey } from './FunctionProvider';
 
@@ -49,7 +49,7 @@ const SubMenu = {
     triggerSubMenuAction: PropTypes.string,
     popupClassName: PropTypes.string,
     getPopupContainer: PropTypes.func,
-    forceSubMenuRender: PropTypes.looseBool,
+    forceSubMenuRender: PropTypes.looseBool.def(true),
     openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     disabled: PropTypes.looseBool,
     subMenuOpenDelay: PropTypes.number.def(0.1),
@@ -100,21 +100,30 @@ const SubMenu = {
     this.subMenuTitle = undefined;
     return {
       // defaultActiveFirst: false,
+      childrenSelectedStatus: {},
     };
   },
+  computed: {
+    isChildrenSelected() {
+      return Object.values(this.childrenSelectedStatus).find(status => status);
+    },
+  },
   mounted() {
     this.$nextTick(() => {
       this.handleUpdated();
     });
+    this.updateParentMenuSelectedStatus();
   },
 
   updated() {
     this.$nextTick(() => {
       this.handleUpdated();
     });
+    this.updateParentMenuSelectedStatus();
   },
 
   beforeUnmount() {
+    this.updateParentMenuSelectedStatus(false);
     const { eventKey } = this;
     this.__emit('destroy', eventKey);
 
@@ -131,6 +140,18 @@ const SubMenu = {
     }
   },
   methods: {
+    updateParentMenuSelectedStatus(status = this.isChildrenSelected) {
+      if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
+        this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
+      }
+    },
+    setChildrenSelectedStatus(key, status) {
+      if (!status) {
+        delete this.childrenSelectedStatus[key];
+      } else {
+        this.childrenSelectedStatus[key] = status;
+      }
+    },
     handleUpdated() {
       const { mode, parentMenu, manualRef } = this;
 
@@ -310,11 +331,11 @@ const SubMenu = {
       }
     },
 
-    isChildrenSelected(children) {
-      const ret = { find: false };
-      loopMenuItemRecursively(children, this.$props.selectedKeys, ret);
-      return ret.find;
-    },
+    // isChildrenSelected(children) {
+    //   const ret = { find: false };
+    //   loopMenuItemRecursively(children, this.$props.selectedKeys, ret);
+    //   return ret.find;
+    // },
     // isOpen () {
     //   return this.$props.openKeys.indexOf(this.$props.eventKey) !== -1
     // },
@@ -412,7 +433,6 @@ const SubMenu = {
   render() {
     const props = { ...this.$props, ...this.$attrs };
     const { onEvents } = splitAttrs(props);
-    const { rootPrefixCls } = this;
     const isOpen = props.isOpen;
     const prefixCls = this.getPrefixCls();
     const isInlineMode = props.mode === 'inline';
@@ -425,7 +445,7 @@ const SubMenu = {
       [this.getOpenClassName()]: isOpen,
       [this.getActiveClassName()]: props.active || (isOpen && !isInlineMode),
       [this.getDisabledClassName()]: props.disabled,
-      [this.getSelectedClassName()]: this.isChildrenSelected(childrenTemp),
+      [this.getSelectedClassName()]: this.isChildrenSelected,
     };
 
     if (!this.internalMenuId) {
@@ -498,7 +518,7 @@ const SubMenu = {
     const popupPlacement = popupPlacementMap[props.mode];
     const popupAlign = props.popupOffset ? { offset: props.popupOffset } : {};
     let popupClassName = props.mode === 'inline' ? '' : props.popupClassName || '';
-    popupClassName = `${prefixCls}-popup ${rootPrefixCls} ${popupClassName}`;
+    popupClassName = `${prefixCls}-popup ${popupClassName}`;
     const liProps = {
       ...omit(onEvents, ['onClick']),
       ...mouseEvents,

components/vc-menu/SubMenu.jsx

@@ -116,7 +116,7 @@ const SubPopupMenu = {
       expandIcon: PropTypes.any,
       overflowedIndicator: PropTypes.any,
       children: PropTypes.any.def([]),
-      forceSubMenuRender: PropTypes.looseBool,
+      forceSubMenuRender: PropTypes.looseBool.def(true),
     },
     {
       prefixCls: 'rc-menu',

components/vc-menu/SubPopupMenu.jsx

@@ -30,7 +30,7 @@ export default {
   theme: PropTypes.oneOf(['light', 'dark']).def('light'),
   getPopupContainer: PropTypes.func,
   openTransitionName: PropTypes.string,
-  forceSubMenuRender: PropTypes.looseBool,
+  forceSubMenuRender: PropTypes.looseBool.def(true),
   selectable: PropTypes.looseBool,
   isRootMenu: PropTypes.looseBool.def(true),
   builtinPlacements: PropTypes.object.def(() => ({})),