-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow nested sheets without boilerplate #5660
Conversation
|
src/components/Dialog/index.tsx
Outdated
@@ -50,8 +50,10 @@ export function Outer({ | |||
onClose, | |||
nativeOptions, | |||
testID, | |||
Portal = DefaultPortal, | |||
Portal: PortalProp, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we still need this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hailey seemed to want to keep it around, I'd be fine to rm personally
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh yea this is fine to RM now 👍
src/components/Portal.tsx
Outdated
@@ -72,3 +72,23 @@ const DefaultPortal = createPortalGroup() | |||
export const Provider = DefaultPortal.Provider | |||
export const Outlet = DefaultPortal.Outlet | |||
export const Portal = DefaultPortal.Portal | |||
|
|||
// when in native sheets, we want the default Portal to move to inside the sheet for children of the sheet | |||
export const DefaultPortalContext = React.createContext(DefaultPortal.Portal) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is "default" the right word here? I feel like we could just call it PortalContext
. The default is DefaultPortal
, which is aptly named in this file. But this context overrides, and in the spirit of "not thinking about it", I think usePortal
or like useParentPortal
might make more sense? No strong feelings, just spitballing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useDefaultPortal makes sense in the context of it maybe being passed in via prop instead. you shouldn't need to know that the default portal might get overridden if in a sheet
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for all the feedback on this 🙏
Co-authored-by: Hailey <me@haileyok.com> (cherry picked from commit cca344a)
Due to the strict necessity of iOS native sheets needing to be nested, we were creating new portal groups manually and then prop drilling to the sub-dialogs. This felt like a leaky abstraction, so this PR handles this automatically ✨
This has let me delete all of the unnecessary prop drilling in more cases. I've kept the prop around for the more general-purpose components for if we want to use it in future, but they're no longer used
How it works
<DefaultPortalOverride>
Test plan