[popups] action prop
#1236
[popups] action prop
#1236
Conversation
Remove keepMounted on portal child parts Remove unused imports Remove keepMounted prop in tests
Netlify deploy preview |
|
|
||
| const onFinished = useEventCallback(onFinishedParam); | ||
| const runOnceAnimationsFinish = useAnimationsFinished(animatedElementRef); | ||
| const openRef = useLatestRef(open); | ||
|
|
||
| useEnhancedEffect(() => { | ||
| React.useEffect(() => { |
There was a problem hiding this comment.
Change to regular useEffect as the timing lets Motion know the exit animation styles have been applied inside a single requestAnimationFrame when checking for element.getAnimations() when keepMounted=true
| }); | ||
|
|
||
| React.useImperativeHandle(params.unmountRef, () => ({ unmount: handleUnmount }), [handleUnmount]); |
There was a problem hiding this comment.
An API with a bunch of imperative methods could be useful in general, not just for this, so it could be named something more generic to future-proof it. This concept may be similar to using hooks, or component stores as in Ariakit. One difference is you can't "read" values in render, it's just for accessing internal methods/state inside event handlers & effects (since it's a ref).
There was a problem hiding this comment.
👍
A couple of Material UI components use this pattern and call the prop action (like https://github.com/mui/material-ui/blob/master/packages/mui-material/src/ButtonBase/ButtonBase.d.ts#L13)
github-actions
bot
added
PR: out-of-date
github-actions
bot
added
the
PR: out-of-date
Signed-off-by: atomiks <[email protected]>
github-actions
bot
removed
the
PR: out-of-date
github-actions
bot
added
the
PR: out-of-date
Signed-off-by: atomiks <[email protected]>
github-actions
bot
removed
the
PR: out-of-date
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Closes #1160
JavaScript animations page. I focused on
Motionfairly exclusively. Theactionprop holds imperative methods, currently justunmount.action.current.unmount()is for when animatingopacitydoesn't work in other libraries for the most part, asopacity: 0.9999is really the simplest solution.Motion experiments