chore: optimize logic of default motion; (#328)

Author: kerm1it

src/Menu.tsx

@@ -48,8 +48,9 @@ export interface MenuProps
   overflowedIndicator?: React.ReactNode;
   /** Menu motion define */
   motion?: MotionType;
-  /** Default menu motion */
-  defaultMotion?: MotionType;
+
+  /** Default menu motion of each mode */
+  defaultMotions?: Partial<{ [key in MenuMode | 'other']: MotionType }>;
 
   /** @deprecated Please use `motion` instead */
   openTransitionName?: string;
@@ -395,7 +396,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
       ...omit(this.props, [
         'collapsedWidth',
         'siderCollapsed',
-        'defaultMotion',
+        'defaultMotions',
       ]),
     };
     const mode = this.getRealMenuMode();
@@ -413,7 +414,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
       onMouseEnter: this.onMouseEnter,
       onTransitionEnd: this.onTransitionEnd,
       parentMenu: this,
-      motion: getMotion(this.props, this.state),
+      motion: getMotion(this.props, this.state, mode),
     };
 
     delete props.openAnimation;

src/index.tsx

@@ -1,7 +1,7 @@
-import Menu from './Menu';
+import Menu, { MenuProps } from './Menu';
 import SubMenu from './SubMenu';
 import MenuItem from './MenuItem';
-import MenuItemGroup from './MenuItemGroup';
+import MenuItemGroup, { MenuItemGroupProps } from './MenuItemGroup';
 import Divider from './Divider';
 
 export {
@@ -11,6 +11,8 @@ export {
   MenuItemGroup,
   MenuItemGroup as ItemGroup,
   Divider,
+  MenuProps,
+  MenuItemGroupProps,
 };
 
 export default Menu;

src/utils/legacyUtil.ts

@@ -1,9 +1,14 @@
 import warning from 'rc-util/lib/warning';
-import { MotionType, TransitionNameType, OpenAnimation } from '../interface';
+import {
+  MotionType,
+  TransitionNameType,
+  OpenAnimation,
+  MenuMode,
+} from '../interface';
 
 interface GetMotionProps {
   motion?: MotionType;
-  defaultMotion?: MotionType;
+  defaultMotions?: Partial<{ [key in MenuMode | 'other']: MotionType }>;
   openAnimation?: OpenAnimation;
   openTransitionName?: TransitionNameType;
   prefixCls?: string;
@@ -17,11 +22,12 @@ export function getMotion(
   {
     prefixCls,
     motion,
-    defaultMotion,
+    defaultMotions = {},
     openAnimation,
     openTransitionName,
   }: GetMotionProps,
   { switchingModeFromInline }: GetMotionState,
+  menuMode: MenuMode,
 ): MotionType {
   if (motion) {
     return motion;
@@ -43,8 +49,14 @@ export function getMotion(
       motionName: openTransitionName,
     };
   }
+  // Default logic
+  const defaultMotion = defaultMotions[menuMode];
+
+  if (defaultMotion) {
+    return defaultMotion;
+  }
 
   // When mode switch from inline
   // submenu should hide without animation
-  return switchingModeFromInline ? null : defaultMotion;
+  return switchingModeFromInline ? null : defaultMotions.other;
 }

tests/Menu.spec.js

@@ -643,12 +643,25 @@ describe('Menu', () => {
   });
 
   describe('motion', () => {
-    it('defaultMotion should work correctly', () => {
+    it('defaultMotions should work correctly', () => {
+      const defaultMotions = {
+        inline: { motionName: 'inlineMotion' },
+        horizontal: { motionName: 'horizontalMotion' },
+        other: { motionName: 'defaultMotion' },
+      };
       const wrapper = mount(
-        <Menu mode="inline" defaultMotion={{ motionName: 'defaultMotion1' }} />,
+        <Menu mode="inline" defaultMotions={defaultMotions} />,
       );
-      expect(getMotion(wrapper.props(), wrapper.state())).toEqual({
-        motionName: 'defaultMotion1',
+      expect(getMotion(wrapper.props(), wrapper.state(), 'inline')).toEqual({
+        motionName: 'inlineMotion',
+      });
+      expect(getMotion(wrapper.props(), wrapper.state(), 'horizontal')).toEqual(
+        {
+          motionName: 'horizontalMotion',
+        },
+      );
+      expect(getMotion(wrapper.props(), wrapper.state(), 'vertical')).toEqual({
+        motionName: 'defaultMotion',
       });
     });