fix(comp:drawer): destroyOnHide drawer doesn't destroy if visible is …

…set false before enter transition
IDuxFE · Jan 26, 2024 · 1156a4f · 1156a4f
1 parent d062236
commit 1156a4f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/packages/components/drawer/src/Drawer.tsx b/packages/components/drawer/src/Drawer.tsx
@@ -51,7 +51,8 @@ export default defineComponent({
     const mask = computed(() => props.mask ?? config.mask)
     const mergedDistance = computed(() => props.distance ?? config.distance)
 
-    const { loaded, delayedLoaded, visible, setVisible, animatedVisible, mergedVisible } = useVisible(props)
+    const { loaded, delayedLoaded, visible, setVisible, animatedVisible, isAnimating, mergedVisible } =
+      useVisible(props)
     const currentZIndex = useZIndex(toRef(props, 'zIndex'), toRef(common, 'overlayZIndex'), visible)
 
     const drawerElRef = ref<HTMLElement>()
@@ -69,6 +70,7 @@ export default defineComponent({
       visible,
       delayedLoaded,
       animatedVisible,
+      isAnimating,
       mergedVisible,
       currentZIndex,
       levelAction,
@@ -110,6 +112,9 @@ function useVisible(props: DrawerProps) {
   const loaded = ref<boolean>(false)
   const delayedLoaded = ref<boolean>(false)
   const delayedVisible = ref<boolean>(false)
+  const isAnimating = ref(false)
+  const animatedVisible = ref<boolean>(false)
+
   watch(
     visible,
     v => {
@@ -123,30 +128,23 @@ function useVisible(props: DrawerProps) {
       } else {
         delayedVisible.value = v
       }
+
+      isAnimating.value = true
     },
     {
       immediate: true,
     },
   )
 
-  const animatedVisible = ref<boolean>()
-
-  const mergedVisible = computed(() => {
-    const currVisible = visible.value
-    const currAnimatedVisible = animatedVisible.value
-    if (currAnimatedVisible === undefined || currVisible) {
-      return currVisible
-    }
-    return currAnimatedVisible
-  })
+  const mergedVisible = computed(() => visible.value || (isAnimating.value ? animatedVisible.value : visible.value))
 
   onDeactivated(() => {
     if (mergedVisible.value && props.closeOnDeactivated) {
       setVisible(false)
     }
   })
 
-  return { loaded, delayedLoaded, visible: delayedVisible, setVisible, animatedVisible, mergedVisible }
+  return { loaded, delayedLoaded, visible: delayedVisible, setVisible, animatedVisible, isAnimating, mergedVisible }
 }
 
 function useScrollStrategy(props: DrawerProps, mask: ComputedRef<boolean>, mergedVisible: ComputedRef<boolean>) {

diff --git a/packages/components/drawer/src/DrawerWrapper.tsx b/packages/components/drawer/src/DrawerWrapper.tsx
@@ -52,6 +52,7 @@ export default defineComponent({
       visible,
       delayedLoaded,
       animatedVisible,
+      isAnimating,
       mergedVisible,
       currentZIndex,
       levelAction,
@@ -130,7 +131,7 @@ export default defineComponent({
       sentinelEndRef,
     )
 
-    const { onEnter, onAfterEnter, onAfterLeave } = useEvents(props, wrapperRef, animatedVisible)
+    const { onEnter, onAfterEnter, onAfterLeave } = useEvents(props, wrapperRef, animatedVisible, isAnimating)
 
     onMounted(() => {
       watchVisibleChange(props, wrapperRef, sentinelStartRef, mask)
@@ -292,6 +293,7 @@ function useEvents(
   props: DrawerProps,
   wrapperRef: Ref<HTMLDivElement | undefined>,
   animatedVisible: Ref<boolean | undefined>,
+  isAnimating: Ref<boolean>,
 ) {
   let lastOutSideActiveElement: HTMLElement | null = null
   const onEnter = () => {
@@ -311,6 +313,7 @@ function useEvents(
 
     callEmit(props.onAfterOpen)
     animatedVisible.value = true
+    isAnimating.value = false
   }
 
   const onAfterLeave = () => {
@@ -330,6 +333,7 @@ function useEvents(
 
     callEmit(props.onAfterClose)
     animatedVisible.value = false
+    isAnimating.value = false
   }
   return { onEnter, onAfterEnter, onAfterLeave }
 }
diff --git a/packages/components/drawer/src/token.ts b/packages/components/drawer/src/token.ts
@@ -18,7 +18,8 @@ export interface DrawerContext {
   drawerElRef: Ref<HTMLElement | undefined>
   visible: Ref<boolean>
   delayedLoaded: Ref<boolean>
-  animatedVisible: Ref<boolean | undefined>
+  animatedVisible: Ref<boolean>
+  isAnimating: Ref<boolean>
   mergedVisible: ComputedRef<boolean>
   currentZIndex: ComputedRef<number>
   levelAction: Ref<'push' | 'pull' | undefined>