Fix Transition events order
#1585
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| import { defer } from '../../utils/defer' | ||
|
|
||
| type TransitionDirection = 'enter' | 'leave' | 'idle' | ||
| let fakeDefer = () => defer<TransitionDirection>() // One day we will be able to do ReturnType<typeof genericFunction<T>> |
There was a problem hiding this comment.
I thought this already worked?
async function genericFunction<T>(foo: T): Promise<T> {
return foo
}
type Cool<T> = ReturnType<typeof genericFunction<T>>
type A = Cool<"foo">
// A === Promise<"foo">There was a problem hiding this comment.
As does this:
type Cool2 = ReturnType<typeof genericFunction<"bar">> // Cool2 === Promise<"bar">There was a problem hiding this comment.
Oh, my editor disagrees 😅
There was a problem hiding this comment.
The version we are on doesn't support this, but we can bump the version 👍
There was a problem hiding this comment.
(this causes other issues, let's tackle this in a different PR)
There was a problem hiding this comment.
Oooh interesting. I'm guessing VSCode isn't using the project version of typescript for checks like that for some reason
| onStop.current(latestDirection.current) | ||
| }, | ||
| [Reason.Cancelled]: () => {}, | ||
| [Reason.Ended]: () => void onStop.current(latestDirection.current), |
There was a problem hiding this comment.
clever use of void :D
| leave: () => { | ||
| setState(TreeStates.Hidden) | ||
| unregister(id) | ||
| return events.current.afterLeave() |
There was a problem hiding this comment.
This feels so much better 🎉
|
So, so, so much better! I still think the order of the before events should be reversed (out -> in) but I know why they're not in React at least. Can you give this a try with Vue to make sure we match the order in both places (or I can port this if you want). I have a feeling, for some reason, that the order might already be reversed there if you implement this. |
This will allow us to setup a promise that can be resolved or rejected at a later point in time, deferred if you will.
We will prefer `onStart`, `onStop` instead, and handle the events in the `Transition` component instead.
Also rely on the {before,after}[Enter,Leave] events instead of a `done`
function for unmounting which makes things simpler.
Always report that the current component is done.
RobinMalfait
force-pushed
the
transition-improvements
branch
from
86a4647
to
cbbaed7
Compare
Both return values are the same so there is no need to make them `void`.
It didn’t work out in the end
# Conflicts: # packages/@headlessui-react/src/components/transitions/transition.tsx
This PR fixes an issue where the order of
{before,after}{Enter,Leave}don't happen at the correcttime.