From a887ec5b8fd7e5699fe707097221241c90eddbcd Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 18 May 2021 23:39:47 +0800
Subject: [PATCH] refactor: menu

---
 components/_util/transition.tsx           | 12 ++++--------
 components/menu/src/InlineSubMenuList.tsx | 20 +++++++++++++++-----
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx
index d6c3c238c..1e49b0bab 100644
--- a/components/_util/transition.tsx
+++ b/components/_util/transition.tsx
@@ -92,23 +92,20 @@ export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
 };
 
 export declare type MotionEventHandler = (
-  element: HTMLElement,
+  element: Element,
   done?: () => void,
 ) => CSSProperties | void;
 
-export declare type MotionEndEventHandler = (
-  element: HTMLElement,
-  done?: () => void,
-) => boolean | void;
+export declare type MotionEndEventHandler = (element: Element, done?: () => void) => boolean | void;
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
-const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
+const getCurrentHeight: MotionEventHandler = (node: any) => ({ height: node.offsetHeight });
 // const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
 //   (event as TransitionEvent).propertyName === 'height';
 
-export interface CSSMotionProps extends Partial<BaseTransitionProps<HTMLElement>> {
+export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
   name?: string;
   css?: boolean;
 }
@@ -116,7 +113,6 @@ export interface CSSMotionProps extends Partial<BaseTransitionProps<HTMLElement>
 const collapseMotion: CSSMotionProps = {
   name: 'ant-motion-collapse',
   appear: true,
-  css: false,
   // onAppearStart: getCollapsedHeight,
   onBeforeEnter: getCollapsedHeight,
   onEnter: getRealHeight,
diff --git a/components/menu/src/InlineSubMenuList.tsx b/components/menu/src/InlineSubMenuList.tsx
index 5bf53b5a9..71cdd1e1b 100644
--- a/components/menu/src/InlineSubMenuList.tsx
+++ b/components/menu/src/InlineSubMenuList.tsx
@@ -1,7 +1,9 @@
 import { computed, defineComponent, ref, watch } from '@vue/runtime-core';
+import Transition from 'ant-design-vue/es/_util/transition';
 import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
 import { MenuMode } from './interface';
 import SubMenuList from './SubMenuList';
+
 export default defineComponent({
   name: 'InlineSubMenuList',
   inheritAttrs: false,
@@ -12,10 +14,12 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const fixedMode: MenuMode = 'inline';
-    const { prefixCls, forceSubMenuRender, motion, mode } = useInjectMenu();
+    const { prefixCls, forceSubMenuRender, motion, mode, defaultMotions } = useInjectMenu();
     const sameModeRef = computed(() => mode.value === fixedMode);
     const destroy = ref(!sameModeRef.value);
 
+    const mergedOpen = computed(() => (sameModeRef.value ? props.open : false));
+
     // ================================= Effect =================================
     // Reset destroy state when mode change back
     watch(
@@ -27,9 +31,11 @@ export default defineComponent({
       },
       { flush: 'post' },
     );
-    let transitionProps = computed(() => {
-      return { appear: props.keyPath.length > 1, css: false };
-    });
+
+    const mergedMotion = computed(() => ({
+      ...(motion.value || defaultMotions.value?.[fixedMode]),
+      appear: props.keyPath.length <= 1,
+    }));
 
     return () => {
       if (destroy.value) {
@@ -42,7 +48,11 @@ export default defineComponent({
             locked: !sameModeRef.value,
           }}
         >
-          <SubMenuList id={props.id}>{slots.default?.()}</SubMenuList>
+          <Transition {...mergedMotion.value}>
+            <SubMenuList v-show={mergedOpen.value} id={props.id}>
+              {slots.default?.()}
+            </SubMenuList>
+          </Transition>
         </MenuContextProvider>
       );
     };