@tamagui/sheet 1.0.1-beta.113 → 1.0.1-beta.116

package/src/Sheet.tsx

@@ -4,12 +4,15 @@ import {
   Slot,
   TamaguiElement,
   Theme,
+  composeEventHandlers,
   isClient,
   isWeb,
   mergeEvent,
   styled,
   themeable,
+  useConstant,
   useEvent,
+  useIsomorphicLayoutEffect,
   useThemeName,
   withStaticProperties,
 } from '@tamagui/core'
@@ -26,7 +29,6 @@ import React, {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -34,8 +36,12 @@ import React, {
 import {
   Animated,
   GestureResponderEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   PanResponder,
   PanResponderGestureState,
+  ScrollView,
+  ScrollViewProps,
   View,
 } from 'react-native'
 
@@ -72,6 +78,14 @@ type PositionChangeHandler = (position: number) => void
 
 type OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>
 
+type ScrollBridge = {
+  enabled: boolean
+  y: number
+  scrollStartY: number
+  drag: (dy: number) => void
+  release: (state: { dy: number; vy: number }) => void
+}
+
 type SheetContextValue = Required<
   Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>
 > & {
@@ -81,6 +95,8 @@ type SheetContextValue = Required<
   allowPinchZoom: RemoveScrollProps['allowPinchZoom']
   contentRef: React.RefObject<TamaguiElement>
   dismissOnSnapToBottom: boolean
+  scrollBridge: ScrollBridge
+  modal: boolean
 }
 
 const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
@@ -89,6 +105,10 @@ const [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(
   {} as any
 )
 
+/* -------------------------------------------------------------------------------------------------
+ * SheetHandle
+ * -----------------------------------------------------------------------------------------------*/
+
 export const SheetHandleFrame = styled(XStack, {
   name: SHEET_HANDLE_NAME,
   height: 10,
@@ -132,6 +152,10 @@ export const SheetHandle = SheetHandleFrame.extractable(
   }
 )
 
+/* -------------------------------------------------------------------------------------------------
+ * SheetOverlay
+ * -----------------------------------------------------------------------------------------------*/
+
 const SHEET_OVERLAY_NAME = 'SheetOverlay'
 
 export const SheetOverlayFrame = styled(YStack, {
@@ -163,7 +187,7 @@ export const SheetOverlay = SheetOverlayFrame.extractable(
     const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)
     return (
       <RemoveScroll
-        enabled={context.open}
+        enabled={context.open && context.modal}
         as={Slot}
         allowPinchZoom={context.allowPinchZoom}
         shards={[context.contentRef]}
@@ -187,6 +211,92 @@ export const SheetOverlay = SheetOverlayFrame.extractable(
   }
 )
 
+/* -------------------------------------------------------------------------------------------------
+ * SheetScrollView
+ * -----------------------------------------------------------------------------------------------*/
+
+const SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'
+
+export const SheetScrollView = forwardRef<ScrollView, ScrollViewProps>(
+  ({ __scopeSheet, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {
+    const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)
+    const [scrollEnabled, setScrollEnabled] = useState(true)
+    const state = useRef({
+      dy: 0,
+      // store a few recent dys to get velocity on release
+      dys: [] as number[],
+    })
+
+    const release = () => {
+      setScrollEnabled(true)
+      const recentDys = state.current.dys.slice(-10)
+      const dist = recentDys.length
+        ? recentDys.reduce((a, b, i) => a + b - (recentDys[i - 1] ?? recentDys[0]), 0)
+        : 0
+      const avgDy = dist / recentDys.length
+      const vy = avgDy * 0.075
+      state.current.dys = []
+      scrollBridge.release({
+        dy: state.current.dy,
+        vy,
+      })
+    }
+
+    return (
+      <ScrollView
+        ref={ref}
+        scrollEventThrottle={16} // todo release we can just grab the last dY and estimate vY using a sample of last dYs
+        {...props}
+        scrollEnabled={props.scrollEnabled || scrollEnabled}
+        onScroll={composeEventHandlers<NativeSyntheticEvent<NativeScrollEvent>>(
+          props.onScroll,
+          (e) => {
+            const { y } = e.nativeEvent.contentOffset
+            scrollBridge.y = y
+            if (y > 0) {
+              scrollBridge.scrollStartY = -1
+            }
+          }
+        )}
+        onResponderMove={composeEventHandlers(props.onResponderMove, (e) => {
+          const { pageY } = e.nativeEvent
+          if (scrollBridge.y <= 0) {
+            if (scrollBridge.scrollStartY === -1) {
+              scrollBridge.scrollStartY = pageY
+            }
+            const dy = pageY - scrollBridge.scrollStartY
+            if (dy <= 0) {
+              setScrollEnabled(true)
+              return
+            }
+            setScrollEnabled(false)
+            scrollBridge.drag(dy)
+            state.current.dy = dy
+            state.current.dys.push(dy)
+            // only do every so often, cut down to 10 again
+            if (state.current.dys.length > 100) {
+              state.current.dys = state.current.dys.slice(-10)
+            }
+          }
+        })}
+        onResponderReject={composeEventHandlers(props.onResponderReject, release)}
+        onResponderTerminate={composeEventHandlers(props.onResponderTerminate, release)}
+        onResponderRelease={composeEventHandlers(props.onResponderRelease, release)}
+        style={[
+          {
+            flex: 1,
+          },
+          props.style,
+        ]}
+      />
+    )
+  }
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Sheet
+ * -----------------------------------------------------------------------------------------------*/
+
 const selectionStyleSheet = isClient ? document.createElement('style') : null
 if (selectionStyleSheet) {
   document.head.appendChild(selectionStyleSheet)
@@ -232,16 +342,31 @@ export const Sheet = withStaticProperties(
         animationConfig,
         dismissOnSnapToBottom = false,
         disableDrag: disableDragProp,
-        modal,
+        modal = false,
         allowPinchZoom,
       } = props
 
+      if (process.env.NODE_ENV === 'development') {
+        if (snapPointsProp.some((p) => p < 0 || p > 100)) {
+          console.warn(
+            `⚠️ Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`
+          )
+        }
+      }
+
       // allows for sheets to be controlled by other components
       const controller = useContext(SheetControllerContext)
       const isHidden = controller?.hidden || false
       const disableDrag = disableDragProp ?? controller?.disableDrag
       const themeName = useThemeName()
       const contentRef = React.useRef<TamaguiElement>(null)
+      const scrollBridge = useConstant<ScrollBridge>(() => ({
+        enabled: false,
+        y: 0,
+        scrollStartY: -1,
+        drag: () => {},
+        release: () => {},
+      }))
 
       const onChangeOpenInternal = (val: boolean) => {
         controller?.onChangeOpen?.(val)
@@ -293,7 +418,7 @@ export const Sheet = withStaticProperties(
       }
 
       const [isResizing, setIsResizing] = useState(true)
-      useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         if (!isResizing) {
           setIsResizing(true)
         }
@@ -355,7 +480,7 @@ export const Sheet = withStaticProperties(
         })
       })
 
-      useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         animateTo(position)
       }, [isHidden, frameSize, position, animateTo])
 
@@ -370,64 +495,108 @@ export const Sheet = withStaticProperties(
         }
       }, [])
 
-      const panResponder = useMemo(() => {
-        if (disableDrag) return
-        if (!frameSize) return
-
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const pos = positionValue.current!
-        const minY = positions[0]
-        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 panResponder = useMemo(
+        () => {
+          if (disableDrag) return
+          if (!frameSize) return
+
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          const pos = positionValue.current!
+          const minY = positions[0]
+          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 finish = (_e: GestureResponderEvent, { vy, dy }: PanResponderGestureState) => {
-          makeUnselectable(false)
-          const at = dy + 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.33
-          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
+          const release = ({ vy, dy }: { dy: number; vy: number }) => {
+            isExternalDrag = false
+            previouslyScrolling = false
+            makeUnselectable(false)
+            const at = dy + 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.33
+            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(state)
           }
-          // have to call both because state may not change but need to snap back
-          setPosition(closestPoint)
-          animateTo(closestPoint)
-        }
 
-        return PanResponder.create({
-          onMoveShouldSetPanResponder: (_e, { dy }) => {
+          let previouslyScrolling = false
+
+          const onMoveShouldSet = (_e: GestureResponderEvent, { dy }: PanResponderGestureState) => {
+            if (scrollBridge.y !== 0) {
+              previouslyScrolling = true
+              return false
+            }
+            if (scrollBridge.y === 0 && dy < 0) {
+              return false
+            }
+            if (previouslyScrolling) {
+              previouslyScrolling = false
+              return true
+            }
             // we could do some detection of other touchables and cancel here..
-            return Math.abs(dy) > 6
-          },
-          onPanResponderGrant: () => {
+            return Math.abs(dy) > 8
+          }
+
+          const grant = () => {
             makeUnselectable(true)
             stopSpring()
             startY = at.current
-          },
-          onPanResponderMove: (_e, { dy }) => {
+          }
+
+          let isExternalDrag = false
+
+          scrollBridge.drag = (dy) => {
+            if (!isExternalDrag) {
+              isExternalDrag = true
+              grant()
+            }
             const to = dy + startY
             pos.setValue(resisted(to, minY))
-          },
-          onPanResponderEnd: finish,
-          onPanResponderTerminate: finish,
-          onPanResponderRelease: finish,
-        })
-      }, [disableDrag, animateTo, frameSize, positions, setPosition])
+          }
+
+          scrollBridge.release = release
+
+          return PanResponder.create({
+            onMoveShouldSetPanResponder: (...args) => {
+              const res = onMoveShouldSet(...args)
+              // console.log('res', res, scrollBridge.y)
+              return res
+            },
+            onPanResponderGrant: grant,
+            onPanResponderMove: (_e, { dy }) => {
+              const to = dy + startY
+              pos.setValue(resisted(to, minY))
+            },
+            onPanResponderEnd: finish,
+            onPanResponderTerminate: finish,
+            onPanResponderRelease: finish,
+          })
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [disableDrag, animateTo, frameSize, positions, setPosition]
+      )
 
       let handleComponent: React.ReactElement | null = null
       let overlayComponent: React.ReactElement | null = null
@@ -461,6 +630,7 @@ export const Sheet = withStaticProperties(
 
       const contents = (
         <SheetProvider
+          modal={modal}
           contentRef={contentRef}
           dismissOnOverlayPress={dismissOnOverlayPress}
           dismissOnSnapToBottom={dismissOnSnapToBottom}
@@ -472,6 +642,7 @@ export const Sheet = withStaticProperties(
           snapPoints={snapPoints}
           setPosition={setPosition}
           setOpen={setOpen}
+          scrollBridge={scrollBridge}
         >
           {isResizing ? null : overlayComponent}
           {/* no fancy hidden animation etc for handle for now */}
@@ -516,9 +687,12 @@ export const Sheet = withStaticProperties(
     Handle: SheetHandle,
     Frame: SheetFrame,
     Overlay: SheetOverlay,
+    ScrollView: SheetScrollView,
   }
 )
 
+/* -------------------------------------------------------------------------------------------------*/
+
 function getPercentSize(point?: number, frameSize?: number) {
   if (!frameSize) return 0
   if (point === undefined) {

package/types/Sheet.d.ts

@@ -3,7 +3,7 @@ import { ScopedProps } from '@tamagui/create-context';
 import { RemoveScroll } from '@tamagui/remove-scroll';
 import { XStackProps } from '@tamagui/stacks';
 import React, { ReactNode } from 'react';
-import { Animated, View } from 'react-native';
+import { Animated, ScrollView, ScrollViewProps, View } from 'react-native';
 declare type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>;
 export declare type SheetProps = ScopedProps<{
     open?: boolean;
@@ -79,6 +79,7 @@ export declare const SheetOverlayFrame: import("@tamagui/core").TamaguiComponent
 }>;
 export declare type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>;
 export declare const SheetOverlay: ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => JSX.Element;
+export declare const SheetScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;
 export declare const SheetFrameFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
@@ -156,6 +157,7 @@ export declare const Sheet: ((props: Omit<{
         __scopeSheet?: import("@tamagui/create-context").Scope<any>;
     } & React.RefAttributes<unknown>>;
     Overlay: ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => JSX.Element;
+    ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;
 };
 declare type SheetControllerContextValue = {
     disableDrag?: boolean;

package/types/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../src/Sheet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../src/Sheet.tsx"],"names":[],"mappings":"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"}