In implementation of ToolTip fade transitions, I ran into some issues. Here are some notes for future development that should make this kind of stuff easier:
ContextMenu currently handles isExpanded (adds/removes dom nodes). This makes it difficult to implement transitions as a consumer of ContextMenu, because ContextMenu has to know when a transition is finished before it can remove the dom node, for example.
Possible solutions:
build transitions into ContextMenu. This is not optimal as we'd like to be able to keep those concerns decoupled, to remain flexible on how a consumer of ContextMenu would like to apply transitions.
build ContextMenu.FlyOut out of a react-motion element. The consumer could then pass any react-motion configuration props to ContextMenu.FlyOut. Unfortuntely, this would obviously hard-couple ContextMenu to react-motion.
Pull positioning logic in ContextMenu out into utility functions. Components that need more flexibility than ContextMenu currently offers could simply compose on top of Portal and perform any positioning directly.
In implementation of
ToolTip
fade transitions, I ran into some issues. Here are some notes for future development that should make this kind of stuff easier:ContextMenu
currently handlesisExpanded
(adds/removes dom nodes). This makes it difficult to implement transitions as a consumer ofContextMenu
, becauseContextMenu
has to know when a transition is finished before it can remove the dom node, for example.Possible solutions:
ContextMenu
. This is not optimal as we'd like to be able to keep those concerns decoupled, to remain flexible on how a consumer ofContextMenu
would like to apply transitions.ContextMenu.FlyOut
out of areact-motion
element. The consumer could then pass anyreact-motion
configuration props toContextMenu.FlyOut
. Unfortuntely, this would obviously hard-coupleContextMenu
toreact-motion
.ContextMenu
out into utility functions. Components that need more flexibility thanContextMenu
currently offers could simply compose on top ofPortal
and perform any positioning directly.