cleanup transition completion Reason

tailwindlabs · Dec 6, 2022 · fdfcc94 · fdfcc94
1 parent a31ebc6
commit fdfcc94
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 36 deletions.
diff --git a/packages/@headlessui-react/src/components/transitions/utils/transition.test.ts b/packages/@headlessui-react/src/components/transitions/utils/transition.test.ts
@@ -1,4 +1,4 @@
-import { Reason, transition } from './transition'
+import { transition } from './transition'
 
 import { reportChanges } from '../../../test-utils/report-dom-node-changes'
 import { disposables } from '../../../utils/disposables'
@@ -26,7 +26,7 @@ it('should be possible to transition', async () => {
     )
   )
 
-  await new Promise((resolve) => {
+  await new Promise<void>((resolve) => {
     transition(
       element,
       {
@@ -83,7 +83,7 @@ it('should wait the correct amount of time to finish a transition', async () =>
     )
   )
 
-  let reason = await new Promise((resolve) => {
+  await new Promise<void>((resolve) => {
     transition(
       element,
       {
@@ -101,7 +101,6 @@ it('should wait the correct amount of time to finish a transition', async () =>
   })
 
   await new Promise((resolve) => d.nextFrame(resolve))
-  expect(reason).toBe(Reason.Ended)
 
   // Initial render:
   expect(snapshots[0].content).toEqual(`<div style="transition-duration: ${duration}ms;"></div>`)
@@ -153,7 +152,7 @@ it('should keep the delay time into account', async () => {
     )
   )
 
-  let reason = await new Promise((resolve) => {
+  await new Promise<void>((resolve) => {
     transition(
       element,
       {
@@ -171,7 +170,6 @@ it('should keep the delay time into account', async () => {
   })
 
   await new Promise((resolve) => d.nextFrame(resolve))
-  expect(reason).toBe(Reason.Ended)
 
   let estimatedDuration = Number(
     (snapshots[snapshots.length - 1].recordedAt - snapshots[snapshots.length - 2].recordedAt) /

diff --git a/packages/@headlessui-react/src/components/transitions/utils/transition.ts b/packages/@headlessui-react/src/components/transitions/utils/transition.ts
@@ -10,15 +10,7 @@ function removeClasses(node: HTMLElement, ...classes: string[]) {
   node && classes.length > 0 && node.classList.remove(...classes)
 }
 
-export enum Reason {
-  // Transition succesfully ended
-  Ended = 'ended',
-
-  // Transition was cancelled
-  Cancelled = 'cancelled',
-}
-
-function waitForTransition(node: HTMLElement, done: (reason: Reason) => void) {
+function waitForTransition(node: HTMLElement, done: () => void) {
   let d = disposables()
 
   if (!node) return d.dispose
@@ -43,24 +35,24 @@ function waitForTransition(node: HTMLElement, done: (reason: Reason) => void) {
   if (totalDuration !== 0) {
     if (process.env.NODE_ENV === 'test') {
       let dispose = d.setTimeout(() => {
-        done(Reason.Ended)
+        done()
         dispose()
       }, totalDuration)
     } else {
       let dispose = d.addEventListener(node, 'transitionend', (event) => {
         if (event.target !== event.currentTarget) return
-        done(Reason.Ended)
+        done()
         dispose()
       })
     }
   } else {
     // No transition is happening, so we should cleanup already. Otherwise we have to wait until we
     // get disposed.
-    done(Reason.Ended)
+    done()
   }
 
   // If we get disposed before the transition finishes, we should cleanup anyway.
-  d.add(() => done(Reason.Cancelled))
+  d.add(() => done())
 
   return d.dispose
 }
@@ -77,7 +69,7 @@ export function transition(
     entered: string[]
   },
   show: boolean,
-  done?: (reason: Reason) => void
+  done?: () => void
 ) {
   let direction = show ? 'enter' : 'leave'
   let d = disposables()
@@ -121,13 +113,11 @@ export function transition(
     removeClasses(node, ...from)
     addClasses(node, ...to)
 
-    waitForTransition(node, (reason) => {
-      if (reason === Reason.Ended) {
-        removeClasses(node, ...base)
-        addClasses(node, ...classes.entered)
-      }
+    waitForTransition(node, () => {
+      removeClasses(node, ...base)
+      addClasses(node, ...classes.entered)
 
-      return _done(reason)
+      return _done()
     })
   })
 

diff --git a/packages/@headlessui-react/src/hooks/use-transition.ts b/packages/@headlessui-react/src/hooks/use-transition.ts
@@ -1,8 +1,7 @@
 import { MutableRefObject } from 'react'
 
-import { Reason, transition } from '../components/transitions/utils/transition'
+import { transition } from '../components/transitions/utils/transition'
 import { disposables } from '../utils/disposables'
-import { match } from '../utils/match'
 
 import { useDisposables } from './use-disposables'
 import { useIsMounted } from './use-is-mounted'
@@ -47,15 +46,9 @@ export function useTransition({ container, direction, classes, onStart, onStop }
     onStart.current(latestDirection.current)
 
     dd.add(
-      transition(node, classes.current, latestDirection.current === 'enter', (reason) => {
+      transition(node, classes.current, latestDirection.current === 'enter', () => {
         dd.dispose()
-
-        match(reason, {
-          [Reason.Ended]() {
-            onStop.current(latestDirection.current)
-          },
-          [Reason.Cancelled]: () => {},
-        })
+        onStop.current(latestDirection.current)
       })
     )