@tamagui/sheet 1.0.1-beta.111 → 1.0.1-beta.114

package/src/Sheet.tsx

@@ -9,7 +9,9 @@ import {
   mergeEvent,
   styled,
   themeable,
+  useConstant,
   useEvent,
+  useIsomorphicLayoutEffect,
   useThemeName,
   withStaticProperties,
 } from '@tamagui/core'
@@ -26,7 +28,6 @@ import React, {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -36,6 +37,8 @@ import {
   GestureResponderEvent,
   PanResponder,
   PanResponderGestureState,
+  ScrollView,
+  ScrollViewProps,
   View,
 } from 'react-native'
 
@@ -72,6 +75,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 +92,7 @@ type SheetContextValue = Required<
   allowPinchZoom: RemoveScrollProps['allowPinchZoom']
   contentRef: React.RefObject<TamaguiElement>
   dismissOnSnapToBottom: boolean
+  scrollBridge: ScrollBridge
 }
 
 const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
@@ -89,6 +101,10 @@ const [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(
   {} as any
 )
 
+/* -------------------------------------------------------------------------------------------------
+ * SheetHandle
+ * -----------------------------------------------------------------------------------------------*/
+
 export const SheetHandleFrame = styled(XStack, {
   name: SHEET_HANDLE_NAME,
   height: 10,
@@ -132,6 +148,10 @@ export const SheetHandle = SheetHandleFrame.extractable(
   }
 )
 
+/* -------------------------------------------------------------------------------------------------
+ * SheetOverlay
+ * -----------------------------------------------------------------------------------------------*/
+
 const SHEET_OVERLAY_NAME = 'SheetOverlay'
 
 export const SheetOverlayFrame = styled(YStack, {
@@ -187,15 +207,98 @@ 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.1
+      state.current.dys = []
+      scrollBridge.release({
+        dy: state.current.dy,
+        vy,
+      })
+    }
+
+    return (
+      <ScrollView
+        ref={ref}
+        onScrollBeginDrag={() => {
+          console.log('begin drag')
+        }}
+        scrollEventThrottle={16}
+        scrollEnabled={scrollEnabled}
+        onScroll={(e) => {
+          const { y } = e.nativeEvent.contentOffset
+          scrollBridge.y = y
+          if (y > 0) {
+            scrollBridge.scrollStartY = -1
+          }
+        }}
+        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)
+            }
+          }
+        }}
+        onResponderRelease={release}
+        // todo release we can just grab the last dY and estimate vY using a sample of last dYs
+        {...props}
+        style={[
+          {
+            flex: 1,
+          },
+          props.style,
+        ]}
+      />
+    )
+  }
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Sheet
+ * -----------------------------------------------------------------------------------------------*/
+
 const selectionStyleSheet = isClient ? document.createElement('style') : null
 if (selectionStyleSheet) {
   document.head.appendChild(selectionStyleSheet)
 }
 
-const SHEET_FRAME_NAME = 'SheetFrame'
-
 export const SheetFrameFrame = styled(YStack, {
-  name: SHEET_FRAME_NAME,
+  name: SHEET_NAME,
   flex: 1,
   backgroundColor: '$background',
   borderTopLeftRadius: '$4',
@@ -208,7 +311,7 @@ export const SheetFrameFrame = styled(YStack, {
 
 export const SheetFrame = SheetFrameFrame.extractable(
   forwardRef(({ __scopeSheet, ...props }: SheetScopedProps<YStackProps>, forwardedRef) => {
-    const context = useSheetContext(SHEET_FRAME_NAME, __scopeSheet)
+    const context = useSheetContext(SHEET_NAME, __scopeSheet)
     const composedContentRef = useComposedRefs(forwardedRef, context.contentRef)
     return <SheetFrameFrame ref={composedContentRef} {...props} />
   })
@@ -238,12 +341,27 @@ export const Sheet = withStaticProperties(
         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)
@@ -295,7 +413,7 @@ export const Sheet = withStaticProperties(
       }
 
       const [isResizing, setIsResizing] = useState(true)
-      useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         if (!isResizing) {
           setIsResizing(true)
         }
@@ -322,98 +440,158 @@ export const Sheet = withStaticProperties(
       )
 
       const animateTo = useEvent((position: number) => {
-        const pos = positionValue.current
+        const current = positionValue.current
         if (isHidden && open) return
-        if (!pos) return
+        if (!current) return
         if (frameSize === 0) return
         const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize
         const toValue = isHidden || position === -1 ? hiddenValue : positions[position]
-        if (pos['_value'] === toValue) return
+        if (at.current === toValue) return
         stopSpring()
         if (isHidden || isResizing) {
           if (isResizing) {
             setIsResizing(false)
           }
-          Animated.timing(pos, {
+          Animated.timing(current, {
             useNativeDriver: !isWeb,
             toValue,
             duration: 0,
           }).start()
+          at.current = toValue
           return
         }
         // dont bounce on initial measure to bottom
-        const overshootClamping = pos['_value'] === HIDDEN_SIZE
-        spring.current = Animated.spring(pos, {
+        const overshootClamping = at.current === HIDDEN_SIZE
+        spring.current = Animated.spring(current, {
           useNativeDriver: !isWeb,
           toValue,
           overshootClamping,
           ...animationConfig,
         })
-        spring.current.start(({ finished }) => finished && stopSpring())
+        spring.current.start(({ finished }) => {
+          if (finished) {
+            stopSpring()
+          }
+        })
       })
 
-      useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         animateTo(position)
       }, [isHidden, frameSize, position, animateTo])
 
-      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 = pos['_value']
-
-        function makeUnselectable(val: boolean) {
-          if (!selectionStyleSheet) return
-          if (!val) {
-            selectionStyleSheet.innerText = ``
-          } else {
-            selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`
-          }
+      // native only fix
+      const at = useRef(0)
+      useEffect(() => {
+        positionValue.current!.addListener(({ value }) => {
+          at.current = value
+        })
+        return () => {
+          positionValue.current!.removeAllListeners()
         }
+      }, [])
+
+      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 = pos['_value']
-          },
-          onPanResponderMove: (_e, { dy }) => {
+            startY = at.current
+          }
+
+          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
@@ -427,7 +605,7 @@ export const Sheet = withStaticProperties(
             case 'SheetHandle':
               handleComponent = child
               break
-            case 'SheetFrame':
+            case 'Sheet':
               frameComponent = child
               break
             case 'SheetOverlay':
@@ -458,6 +636,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 */}
@@ -489,25 +668,25 @@ export const Sheet = withStaticProperties(
 
       if (modal) {
         return (
-          <Portal visible={open}>
+          <Portal>
             <Theme name={themeName}>{contents}</Theme>
           </Portal>
         )
       }
 
       return contents
-    }),
-    {
-      componentName: 'Sheet',
-    }
+    })
   ),
   {
     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":"AACA,OAAO,EACL,QAAQ,EAYT,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,WAAW,EAAsB,MAAM,yBAAyB,CAAA;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAU,WAAW,EAAuB,MAAM,iBAAiB,CAAA;AAE1E,OAAO,KAAK,EAAE,EACZ,SAAS,EAWV,MAAM,OAAO,CAAA;AACd,OAAO,EACL,QAAQ,EAIR,IAAI,EACL,MAAM,cAAc,CAAA;AAKrB,aAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;AAElE,oBAAY,UAAU,GAAG,WAAW,CAClC;IACE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,gBAAgB,CAAC,EAAE,qBAAqB,CAAA;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,eAAe,CAAC,EAAE,QAAQ,CAAC,qBAAqB,CAAA;IAChD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IAKf,cAAc,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;CACrD,EACD,OAAO,CACR,CAAA;AAED,aAAK,qBAAqB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;AAEvD,aAAK,iBAAiB,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;AAalG,QAAA,MAA2B,gBAAgB,+CAAkC,CAAA;AAM7E,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiB3B,CAAA;AAEF,aAAK,gBAAgB,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA;AAElD,eAAO,MAAM,WAAW,+BACO,iBAAiB,WAAW,CAAC,uBAmB3D,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;EAoB5B,CAAA;AAEF,oBAAY,iBAAiB,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAElE,eAAO,MAAM,YAAY,+BACM,iBAAiB,iBAAiB,CAAC,gBA0BjE,CAAA;AASD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAU1B,CAAA;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;iCAMtB,CAAA;AAKD,eAAO,MAAM,KAAK;;;;;;;;eApKH,SAAS;;;;;;qBAUH,iBAAiB,CAAC,gBAAgB,CAAC;;;;;;;yCAgDzB,iBAAiB,WAAW,CAAC;;;;;;;;;;;;;0CAgD7B,iBAAiB,iBAAiB,CAAC;CA2VjE,CAAA;AAwBD,aAAK,2BAA2B,GAAG;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC,CAAA;CACxF,CAAA;AAID,eAAO,MAAM,eAAe;eAI2B,eAAe;iBAgBrE,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../src/Sheet.tsx"],"names":[],"mappings":"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"}