@tamagui/sheet 1.27.0 → 1.27.2

package/src/createSheet.tsx

@@ -1,57 +1,29 @@
-import { AdaptParentContext } from '@tamagui/adapt'
 import { useComposedRefs } from '@tamagui/compose-refs'
 import {
   GetProps,
   StackProps,
   TamaguiComponentExpectingVariants,
-  Theme,
-  isClient,
-  isTouchable,
-  isWeb,
   mergeEvent,
-  themeable,
-  useAnimationDriver,
   useDidFinishSSR,
-  useEvent,
-  useIsomorphicLayoutEffect,
-  useThemeName,
   withStaticProperties,
 } from '@tamagui/core'
-import { Portal } from '@tamagui/portal'
 import { RemoveScroll } from '@tamagui/remove-scroll'
-import { useKeyboardVisible } from '@tamagui/use-keyboard-visible'
 import {
   FunctionComponent,
   RefAttributes,
-  createContext,
   forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
+  useLayoutEffect,
   useMemo,
-  useRef,
-  useState,
 } from 'react'
-import {
-  Animated,
-  GestureResponderEvent,
-  Keyboard,
-  PanResponder,
-  PanResponderGestureState,
-  Platform,
-  View,
-} from 'react-native'
+import { Platform, View } from 'react-native'
 
 import { SHEET_HANDLE_NAME, SHEET_NAME, SHEET_OVERLAY_NAME } from './constants'
 import { getNativeSheet } from './nativeSheet'
-import { SheetProvider, useSheetContext } from './SheetContext'
+import { useSheetContext } from './SheetContext'
+import { SheetImplementationCustom } from './SheetImplementationCustom'
 import { SheetScrollView } from './SheetScrollView'
 import { SheetProps, SheetScopedProps } from './types'
-import { useSheetChildren } from './useSheetChildren'
 import { useSheetController } from './useSheetController'
-import { useSheetOpenState } from './useSheetOpenState'
-import { useSheetProviderProps } from './useSheetProviderProps'
-import { useSheetSnapPoints } from './useSheetSnapPoints'
 
 type SharedSheetProps = {
   open?: boolean
@@ -65,15 +37,15 @@ export type CreateSheetProps = {
   Overlay: TamaguiComponentExpectingVariants<BaseProps, SharedSheetProps>
 }
 
-const selectionStyleSheet = isClient ? document.createElement('style') : null
-if (selectionStyleSheet) {
-  document.head.appendChild(selectionStyleSheet)
-}
-
 export function createSheet({ Handle, Frame, Overlay }: CreateSheetProps) {
   const SheetHandle = Handle.extractable(
     ({ __scopeSheet, ...props }: SheetScopedProps<GetProps<typeof Handle>>) => {
       const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)
+
+      if (context.onlyShowFrame) {
+        return null
+      }
+
       return (
         <Handle
           onPress={() => {
@@ -95,22 +67,46 @@ export function createSheet({ Handle, Frame, Overlay }: CreateSheetProps) {
    * -----------------------------------------------------------------------------------------------*/
 
   const SheetOverlay = Overlay.extractable(
-    ({ __scopeSheet, ...props }: SheetScopedProps<GetProps<typeof Overlay>>) => {
+    (propsIn: SheetScopedProps<GetProps<typeof Overlay>>) => {
+      const { __scopeSheet, ...props } = propsIn
       const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)
-      return (
-        <Overlay
-          open={context.open && !context.hidden}
-          {...props}
-          onPress={mergeEvent(
-            props.onPress as any,
-            context.dismissOnOverlayPress
-              ? () => {
-                  context.setOpen(false)
-                }
-              : undefined
-          )}
-        />
+
+      // this ones a bit weird for legacy reasons, we need to hoist it above <Sheet /> AnimatedView
+      // so we just pass it up to context
+
+      const element = useMemo(
+        () => (
+          <Overlay
+            open={context.open && !context.hidden}
+            {...props}
+            onPress={mergeEvent(
+              props.onPress as any,
+              context.dismissOnOverlayPress
+                ? () => {
+                    context.setOpen(false)
+                  }
+                : undefined
+            )}
+          />
+        ),
+        [
+          context.open,
+          props,
+          context.hidden,
+          props.onPress,
+          context.dismissOnOverlayPress,
+        ]
       )
+
+      useLayoutEffect(() => {
+        context.onOverlayComponent?.(element)
+      }, [element])
+
+      if (context.onlyShowFrame) {
+        return null
+      }
+
+      return null
     }
   )
 
@@ -121,12 +117,51 @@ export function createSheet({ Handle, Frame, Overlay }: CreateSheetProps) {
   const SheetFrame = Frame.extractable(
     forwardRef(
       (
-        { __scopeSheet, ...props }: SheetScopedProps<GetProps<typeof Frame>>,
+        {
+          __scopeSheet,
+          children,
+          ...props
+        }: SheetScopedProps<
+          GetProps<typeof Frame> & {
+            disableHideBottomOverflow?: boolean
+          }
+        >,
         forwardedRef
       ) => {
         const context = useSheetContext(SHEET_NAME, __scopeSheet)
         const composedContentRef = useComposedRefs(forwardedRef, context.contentRef)
-        return <Frame ref={composedContentRef} {...props} />
+
+        return (
+          <>
+            <RemoveScroll
+              forwardProps
+              enabled={context.removeScrollEnabled}
+              allowPinchZoom
+              shards={[context.contentRef]}
+              // causes lots of bugs on touch web on site
+              removeScrollBar={false}
+            >
+              <Frame ref={composedContentRef} {...props}>
+                {children}
+              </Frame>
+            </RemoveScroll>
+
+            {/* below frame hide when bouncing past 100% */}
+            {!props.disableHideBottomOverflow && (
+              <Frame
+                {...props}
+                children={null}
+                position="absolute"
+                bottom={0}
+                maxHeight={300}
+                left={0}
+                right={0}
+                borderRadius={0}
+                shadowOpacity={0}
+              />
+            )}
+          </>
+        )
       }
     )
   )
@@ -174,392 +209,4 @@ export function createSheet({ Handle, Frame, Overlay }: CreateSheetProps) {
   })
 }
 
-// set all the way off screen
-const HIDDEN_SIZE = 10_000
-
-const ParentSheetContext = createContext({
-  zIndex: 100_000,
-})
-
-const SheetImplementationCustom = themeable(
-  forwardRef<View, SheetProps>(function SheetImplementationCustom(props, forwardedRef) {
-    const parentSheet = useContext(ParentSheetContext)
-
-    const {
-      animationConfig,
-      forceRemoveScrollEnabled = null,
-      disableDrag: disableDragProp,
-      modal = false,
-      zIndex = parentSheet.zIndex + 1,
-      moveOnKeyboardChange = false,
-      portalProps,
-    } = props
-
-    const state = useSheetOpenState(props)
-    const providerProps = useSheetProviderProps(props, state)
-    const { positions, maxSnapPoint, screenSize } = useSheetSnapPoints(providerProps)
-
-    const { position, contentRef, setPosition, scrollBridge, frameSize, setFrameSize } =
-      providerProps
-
-    const { open, isHidden, controller } = state
-
-    const { frameComponent, handleComponent, bottomCoverComponent, overlayComponent } =
-      useSheetChildren(props.children)
-
-    const sheetRef = useRef<View>(null)
-    const ref = useComposedRefs(forwardedRef, sheetRef)
-
-    const driver = useAnimationDriver()
-    if (!driver) {
-      throw new Error('Must set animations in tamagui.config.ts')
-    }
-
-    const disableDrag = disableDragProp ?? controller?.disableDrag
-    const keyboardIsVisible = useKeyboardVisible()
-    const themeName = useThemeName()
-
-    const { useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle } =
-      driver
-
-    const animatedNumber = useAnimatedNumber(HIDDEN_SIZE)
-
-    // native only fix
-    const at = useRef(0)
-
-    useAnimatedNumberReaction(
-      {
-        value: animatedNumber,
-        hostRef: sheetRef,
-      },
-      (value) => {
-        if (!driver.isReactNative) return
-        at.current = value
-        scrollBridge.paneY = value
-      }
-    )
-
-    function stopSpring() {
-      animatedNumber.stop()
-      if (scrollBridge.onFinishAnimate) {
-        scrollBridge.onFinishAnimate()
-        scrollBridge.onFinishAnimate = undefined
-      }
-    }
-
-    // we need to set this *after* fully closed to 0, to avoid it overlapping
-    // the page when resizing quickly on web for example
-    const [opacity, setOpacity] = useState(open ? 1 : 0)
-    if (open && opacity === 0) {
-      setOpacity(1)
-    }
-    useEffect(() => {
-      if (!open) {
-        // need to wait for animation complete, for now lets just do it naively
-        const tm = setTimeout(() => {
-          setOpacity(0)
-        }, 400)
-        return () => {
-          clearTimeout(tm)
-        }
-      }
-    }, [open])
-
-    const animateTo = useEvent((position: number) => {
-      const current = animatedNumber.getValue()
-      if (isHidden && open) return
-      if (!current) return
-      if (frameSize === 0) return
-      const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : screenSize
-      const toValue = isHidden || position === -1 ? hiddenValue : positions[position]
-      if (at.current === toValue) return
-      stopSpring()
-      if (isHidden) {
-        animatedNumber.setValue(toValue, {
-          type: 'timing',
-          duration: 0,
-        })
-        at.current = toValue
-        return
-      }
-      // dont bounce on initial measure to bottom
-      const overshootClamping = at.current === HIDDEN_SIZE
-      animatedNumber.setValue(toValue, {
-        ...animationConfig,
-        type: 'spring',
-        overshootClamping,
-      })
-    })
-
-    useIsomorphicLayoutEffect(() => {
-      animateTo(position)
-    }, [isHidden, frameSize, position, animateTo])
-
-    /**
-     * This is a hacky workaround for native:
-     */
-    const [isShowingInnerSheet, setIsShowingInnerSheet] = useState(false)
-    const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet
-    const parentSheetContext = useContext(SheetInsideSheetContext)
-    const onInnerSheet = useCallback((hasChild: boolean) => {
-      setIsShowingInnerSheet(hasChild)
-    }, [])
-
-    const panResponder = useMemo(
-      () => {
-        if (disableDrag) return
-        if (!frameSize) return
-        if (isShowingInnerSheet) return
-
-        const minY = positions[0]
-        scrollBridge.paneMinY = minY
-        let startY = at.current
-
-        function makeUnselectable(val: boolean) {
-          if (!selectionStyleSheet) return
-          if (!val) {
-            selectionStyleSheet.innerText = ''
-          } else {
-            selectionStyleSheet.innerText =
-              ':root * { user-select: none !important; -webkit-user-select: none !important; }'
-          }
-        }
-
-        const release = ({ vy, dragAt }: { dragAt: number; vy: number }) => {
-          isExternalDrag = false
-          previouslyScrolling = false
-          makeUnselectable(false)
-          const at = dragAt + startY
-          // seems liky vy goes up to about 4 at the very most (+ is down, - is up)
-          // lets base our multiplier on the total layout height
-          const end = at + frameSize * vy * 0.2
-          let closestPoint = 0
-          let dist = Infinity
-          for (let i = 0; i < positions.length; i++) {
-            const position = positions[i]
-            const curDist = end > position ? end - position : position - end
-            if (curDist < dist) {
-              dist = curDist
-              closestPoint = i
-            }
-          }
-          // have to call both because state may not change but need to snap back
-          setPosition(closestPoint)
-          animateTo(closestPoint)
-        }
-
-        const finish = (_e: GestureResponderEvent, state: PanResponderGestureState) => {
-          release({
-            vy: state.vy,
-            dragAt: state.dy,
-          })
-        }
-
-        let previouslyScrolling = false
-
-        const onMoveShouldSet = (
-          _e: GestureResponderEvent,
-          { dy }: PanResponderGestureState
-        ) => {
-          const isScrolled = scrollBridge.y !== 0
-          const isDraggingUp = dy < 0
-          // we can treat near top instead of exactly to avoid trouble with springs
-          const isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY
-          if (isScrolled) {
-            previouslyScrolling = true
-            return false
-          }
-          // prevent drag once at top and pulling up
-          if (isNearTop) {
-            if (!isScrolled && isDraggingUp) {
-              return false
-            }
-          }
-          // we could do some detection of other touchables and cancel here..
-          return Math.abs(dy) > 5
-        }
-
-        const grant = () => {
-          makeUnselectable(true)
-          stopSpring()
-          startY = at.current
-        }
-
-        let isExternalDrag = false
-
-        scrollBridge.drag = (dy) => {
-          if (!isExternalDrag) {
-            isExternalDrag = true
-            grant()
-          }
-          const to = dy + startY
-          animatedNumber.setValue(resisted(to, minY), { type: 'direct' })
-        }
-
-        scrollBridge.release = release
-
-        return PanResponder.create({
-          onMoveShouldSetPanResponder: onMoveShouldSet,
-          onPanResponderGrant: grant,
-          onPanResponderMove: (_e, { dy }) => {
-            const toFull = dy + startY
-            const to = resisted(toFull, minY)
-            animatedNumber.setValue(to, { type: 'direct' })
-          },
-          onPanResponderEnd: finish,
-          onPanResponderTerminate: finish,
-          onPanResponderRelease: finish,
-        })
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]
-    )
-
-    const animatedStyle = useAnimatedNumberStyle(animatedNumber, (val) => {
-      'worklet'
-      const translateY = frameSize === 0 ? HIDDEN_SIZE : val
-      return {
-        transform: [{ translateY }],
-      }
-    })
-
-    const sizeBeforeKeyboard = useRef<number | null>(null)
-    useEffect(() => {
-      if (isWeb || !moveOnKeyboardChange) return
-      const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
-        if (sizeBeforeKeyboard.current !== null) return
-        sizeBeforeKeyboard.current = animatedNumber.getValue()
-        animatedNumber.setValue(
-          Math.max(animatedNumber.getValue() - e.endCoordinates.height, 0)
-        )
-      })
-      const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-        if (sizeBeforeKeyboard.current === null) return
-        animatedNumber.setValue(sizeBeforeKeyboard.current)
-        sizeBeforeKeyboard.current = null
-      })
-
-      return () => {
-        keyboardDidHideListener.remove()
-        keyboardDidShowListener.remove()
-      }
-    }, [])
-
-    // temp until reanimated useAnimatedNumber fix
-    const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View
-
-    useIsomorphicLayoutEffect(() => {
-      if (!(parentSheetContext && open)) return
-      parentSheetContext(true)
-      return () => {
-        parentSheetContext(false)
-      }
-    }, [parentSheetContext, open])
-
-    const nextParentContext = useMemo(
-      () => ({
-        zIndex,
-      }),
-      [zIndex]
-    )
-
-    const handleLayout = useCallback(
-      (e) => {
-        let next = e.nativeEvent?.layout.height
-        if (isWeb && isTouchable && !open) {
-          // temp fix ios bug where it doesn't go below dynamic bottom...
-          next += 100
-        }
-        if (!next) return
-        setFrameSize(() => next)
-      },
-      [keyboardIsVisible]
-    )
-
-    const removeScrollEnabled = forceRemoveScrollEnabled ?? (open && modal)
-
-    const contents = (
-      <ParentSheetContext.Provider value={nextParentContext}>
-        <SheetProvider {...providerProps}>
-          {shouldHideParentSheet ? null : overlayComponent}
-
-          <AnimatedView
-            ref={ref}
-            {...panResponder?.panHandlers}
-            onLayout={handleLayout}
-            pointerEvents={open && !shouldHideParentSheet ? 'auto' : 'none'}
-            //  @ts-ignore
-            animation={props.animation}
-            style={[
-              {
-                position: 'absolute',
-                zIndex,
-                width: '100%',
-                height: `${maxSnapPoint}%`,
-                opacity,
-              },
-              animatedStyle,
-            ]}
-          >
-            {handleComponent}
-
-            {bottomCoverComponent}
-            {/* @ts-ignore */}
-            <RemoveScroll
-              forwardProps
-              enabled={removeScrollEnabled}
-              allowPinchZoom
-              shards={[contentRef]}
-              // causes lots of bugs on touch web on site
-              removeScrollBar={false}
-            >
-              {frameComponent}
-            </RemoveScroll>
-          </AnimatedView>
-        </SheetProvider>
-      </ParentSheetContext.Provider>
-    )
-
-    const adaptContext = useContext(AdaptParentContext)
-
-    if (modal) {
-      const modalContents = (
-        <Portal zIndex={zIndex} {...portalProps}>
-          <Theme forceClassName name={themeName}>
-            <AdaptParentContext.Provider value={adaptContext}>
-              {contents}
-            </AdaptParentContext.Provider>
-          </Theme>
-        </Portal>
-      )
-
-      if (isWeb) {
-        return modalContents
-      }
-
-      // on native we don't support multiple modals yet... fix for now is to hide outer one
-      return (
-        <SheetInsideSheetContext.Provider value={onInnerSheet}>
-          {modalContents}
-        </SheetInsideSheetContext.Provider>
-      )
-    }
-
-    return contents
-  })
-)
-
-const SheetInsideSheetContext = createContext<((hasChild: boolean) => void) | null>(null)
-
 /* -------------------------------------------------------------------------------------------------*/
-
-function resisted(y: number, minY: number, maxOverflow = 25) {
-  if (y < minY) {
-    const past = minY - y
-    const pctPast = Math.min(maxOverflow, past) / maxOverflow
-    const diminishBy = 1.1 - Math.pow(0.1, pctPast)
-    const extra = -diminishBy * maxOverflow
-    return minY + extra
-  }
-  return y
-}

package/src/helpers.tsx

@@ -0,0 +1,10 @@
+export function resisted(y: number, minY: number, maxOverflow = 25) {
+  if (y < minY) {
+    const past = minY - y
+    const pctPast = Math.min(maxOverflow, past) / maxOverflow
+    const diminishBy = 1.1 - Math.pow(0.1, pctPast)
+    const extra = -diminishBy * maxOverflow
+    return minY + extra
+  }
+  return y
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './Sheet'
+export * from './useSheet'
 export * from './createSheet'
 export * from './SheetController'
 export * from './useSheetController'

package/src/nativeSheet.tsx

@@ -3,7 +3,6 @@ import { FunctionComponent, useEffect, useRef } from 'react'
 
 import { SheetProvider } from './SheetContext'
 import { SheetProps } from './types'
-import { useSheetChildren } from './useSheetChildren'
 import { useSheetOpenState } from './useSheetOpenState'
 import { useSheetProviderProps } from './useSheetProviderProps'
 
@@ -26,7 +25,6 @@ export function setupNativeSheet(platform: SheetNativePlatforms, Implementation:
       const providerProps = useSheetProviderProps(props, state)
       // const { position } = providerProps
       // const { positions } = useSheetSnapPoints(providerProps)
-      const { frameComponent } = useSheetChildren(props.children)
 
       const { open, setOpen } = state
       const ref = useRef<{
@@ -45,9 +43,9 @@ export function setupNativeSheet(platform: SheetNativePlatforms, Implementation:
 
       return (
         <>
-          <SheetProvider {...providerProps}>
+          <SheetProvider {...providerProps} onlyShowFrame>
             <Implementation ref={ref} onModalDismiss={() => setOpen(false)}>
-              {frameComponent}
+              {props.children}
             </Implementation>
 
             {/* for some reason select triggers wont show on native if this isn't inside the actual tree not inside implementation... */}
@@ -59,7 +57,7 @@ export function setupNativeSheet(platform: SheetNativePlatforms, Implementation:
               width={0}
               height={0}
             >
-              {frameComponent}
+              {props.children}
             </YStack>
           </SheetProvider>
         </>

package/src/useSheet.tsx

@@ -0,0 +1,3 @@
+import { useSheetContext } from './SheetContext'
+
+export const useSheet = () => useSheetContext('', undefined)

package/src/useSheetController.tsx

@@ -8,6 +8,7 @@ export const useSheetController = () => {
     controller,
     isHidden,
     isShowingNonSheet,
+    disableDrag: controller?.disableDrag,
   }
 }