fix: vertical animation not being affected by inline (#578)

* fix: vertical animation not being affected by inline

* test: inline does not affect vertical motion

* chore: optimize logic

Author: JarvisArt

src/SubMenu/PopupTrigger.tsx

@@ -62,9 +62,18 @@ export default function PopupTrigger({
   const popupPlacement = popupPlacementMap[mode];
 
   const targetMotion = getMotion(mode, motion, defaultMotions);
+  const targetMotionRef = React.useRef(targetMotion);
+
+  if (mode !== 'inline') {
+    /**
+     * PopupTrigger is only used for vertical and horizontal types.
+     * When collapsed is unfolded, the inline animation will destroy the vertical animation.
+     */
+    targetMotionRef.current = targetMotion;
+  }
 
   const mergedMotion: CSSMotionProps = {
-    ...targetMotion,
+    ...targetMotionRef.current,
     leavedClassName: `${prefixCls}-hidden`,
     removeOnLeave: false,
     motionAppear: true,

tests/Menu.spec.js

@@ -574,6 +574,22 @@ describe('Menu', () => {
       rerender(genMenu({ mode: 'vertical' }));
       expect(global.triggerProps.popupMotion.motionName).toEqual('bambooLight');
     });
+
+    it('inline does not affect vertical motion', () => {
+      const genMenu = props => (
+        <Menu defaultMotions={defaultMotions} {...props}>
+          <SubMenu key="bamboo">
+            <MenuItem key="light" />
+          </SubMenu>
+        </Menu>
+      );
+
+      const { rerender } = render(genMenu({ mode: 'vertical' }));
+      rerender(genMenu({ mode: 'inline' }));
+      expect(global.triggerProps.popupMotion.motionName).toEqual(
+        'defaultMotion',
+      );
+    });
   });
 
   it('onMouseEnter should work', () => {