Skip to content

Commit

Permalink
fix(sheet): Automatically nest zIndex for sheet inside sheet use cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@natew
natew committed Oct 23, 2022
1 parent b51bdec commit 8af9926
Showing 1 changed file with 67 additions and 52 deletions.
119 changes: 67 additions & 52 deletions packages/sheet/src/Sheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,9 +179,15 @@ const sheetComponents = {
ScrollView: SheetScrollView,
}

const ParentSheetContext = createContext({
zIndex: 40,
})

export const Sheet = withStaticProperties(
themeable(
forwardRef<View, SheetProps>(function Sheet(props, ref) {
const parentSheet = useContext(ParentSheetContext)

const {
__scopeSheet,
snapPoints: snapPointsProp = [80],
Expand All @@ -198,7 +204,7 @@ export const Sheet = withStaticProperties(
disableDrag: disableDragProp,
modal = false,
handleDisableScroll = true,
zIndex = 40,
zIndex = parentSheet.zIndex + 1,
} = props

if (process.env.NODE_ENV === 'development') {
Expand Down Expand Up @@ -511,60 +517,69 @@ export const Sheet = withStaticProperties(
}
}, [parentSheetContext, open])

const nextParentContext = useMemo(
() => ({
zIndex,
}),
[zIndex]
)

const contents = (
<SheetProvider
modal={modal}
contentRef={contentRef}
dismissOnOverlayPress={dismissOnOverlayPress}
dismissOnSnapToBottom={dismissOnSnapToBottom}
open={open}
hidden={isHidden}
scope={__scopeSheet}
position={position}
snapPoints={snapPoints}
setPosition={setPosition}
setOpen={setOpen}
scrollBridge={scrollBridge}
>
{isResizing || shouldHideParentSheet ? null : overlayComponent}

<AnimatedView
ref={ref}
{...panResponder?.panHandlers}
onLayout={(e) => {
const next = e.nativeEvent.layout.height
setFrameSize((prev) => {
const isBigChange = Math.abs(prev - next) > 50
setIsResizing(isBigChange)
return next
})
}}
pointerEvents={open && !shouldHideParentSheet ? 'auto' : 'none'}
style={[
{
position: 'absolute',
zIndex,
width: '100%',
height: '100%',
opacity: shouldHideParentSheet ? 0 : 1,
},
animatedStyle,
]}
<ParentSheetContext.Provider value={nextParentContext}>
<SheetProvider
modal={modal}
contentRef={contentRef}
dismissOnOverlayPress={dismissOnOverlayPress}
dismissOnSnapToBottom={dismissOnSnapToBottom}
open={open}
hidden={isHidden}
scope={__scopeSheet}
position={position}
snapPoints={snapPoints}
setPosition={setPosition}
setOpen={setOpen}
scrollBridge={scrollBridge}
>
{handleComponent}

<RemoveScroll
enabled={open && modal && handleDisableScroll}
as={Slot}
allowPinchZoom
shards={[contentRef]}
// causes lots of bugs on touch web on site
removeScrollBar={false}
{isResizing || shouldHideParentSheet ? null : overlayComponent}

<AnimatedView
ref={ref}
{...panResponder?.panHandlers}
onLayout={(e) => {
const next = e.nativeEvent.layout.height
setFrameSize((prev) => {
const isBigChange = Math.abs(prev - next) > 50
setIsResizing(isBigChange)
return next
})
}}
pointerEvents={open && !shouldHideParentSheet ? 'auto' : 'none'}
style={[
{
position: 'absolute',
zIndex,
width: '100%',
height: '100%',
opacity: shouldHideParentSheet ? 0 : 1,
},
animatedStyle,
]}
>
{isResizing ? null : frameComponent}
</RemoveScroll>
</AnimatedView>
</SheetProvider>
{handleComponent}

<RemoveScroll
enabled={open && modal && handleDisableScroll}
as={Slot}
allowPinchZoom
shards={[contentRef]}
// causes lots of bugs on touch web on site
removeScrollBar={false}
>
{isResizing ? null : frameComponent}
</RemoveScroll>
</AnimatedView>
</SheetProvider>
</ParentSheetContext.Provider>
)

if (preventShown) {
Expand Down

1 comment on commit 8af9926

@vercel
Copy link

@vercel vercel bot commented on 8af9926 Oct 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

site – ./

site-git-master-tamagui.vercel.app
site-tamagui.vercel.app
site-beta-beige.vercel.app

Please sign in to comment.