@tamagui/sheet 1.0.1-beta.133 → 1.0.1-beta.136

package/src/Sheet.tsx

@@ -4,7 +4,6 @@ import {
   Slot,
   TamaguiElement,
   Theme,
-  composeEventHandlers,
   isClient,
   isWeb,
   mergeEvent,
@@ -16,13 +15,11 @@ import {
   useThemeName,
   withStaticProperties,
 } from '@tamagui/core'
-import { ScopedProps, createContextScope } from '@tamagui/create-context'
 import { Portal } from '@tamagui/portal'
 import { RemoveScroll } from '@tamagui/remove-scroll'
 import { XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import React, {
-  ReactNode,
   createContext,
   forwardRef,
   isValidElement,
@@ -36,74 +33,18 @@ import React, {
 import {
   Animated,
   GestureResponderEvent,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
   PanResponder,
   PanResponderGestureState,
-  ScrollView,
-  ScrollViewProps,
+  StyleSheet,
   View,
 } from 'react-native'
 
-const SHEET_NAME = 'Sheet'
-const SHEET_HANDLE_NAME = 'SheetHandle'
+import { SHEET_HANDLE_NAME, SHEET_NAME } from './SHEET_HANDLE_NAME'
+import { SheetProvider, useSheetContext } from './SheetContext'
+import { SheetScrollView } from './SheetScrollView'
+import { ScrollBridge, SheetProps, SheetScopedProps } from './types'
 
-type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>
-
-export type SheetProps = ScopedProps<
-  {
-    open?: boolean
-    defaultOpen?: boolean
-    onChangeOpen?: OpenChangeHandler
-    position?: number
-    defaultPosition?: number
-    snapPoints?: number[]
-    onChangePosition?: PositionChangeHandler
-    children?: ReactNode
-    dismissOnOverlayPress?: boolean
-    dismissOnSnapToBottom?: boolean
-    animationConfig?: Animated.SpringAnimationConfig
-    disableDrag?: boolean
-    modal?: boolean
-
-    /**
-     * @see https://github.com/theKashey/react-remove-scroll#usage
-     */
-    allowPinchZoom?: RemoveScrollProps['allowPinchZoom']
-  },
-  'Sheet'
->
-
-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'>
-> & {
-  hidden: boolean
-  setPosition: PositionChangeHandler
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>
-  allowPinchZoom: RemoveScrollProps['allowPinchZoom']
-  contentRef: React.RefObject<TamaguiElement>
-  dismissOnSnapToBottom: boolean
-  scrollBridge: ScrollBridge
-  modal: boolean
-}
-
-const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
-const [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(
-  SHEET_NAME,
-  {} as any
-)
+export { createSheetScope } from './SheetContext'
 
 /* -------------------------------------------------------------------------------------------------
  * SheetHandle
@@ -114,30 +55,31 @@ export const SheetHandleFrame = styled(XStack, {
   height: 10,
   borderRadius: 100,
   backgroundColor: '$background',
-  position: 'absolute',
-  pointerEvents: 'auto',
   zIndex: 10,
-  y: -18,
-  top: 0,
-  left: '35%',
-  right: '35%',
+  marginHorizontal: '35%',
+  marginBottom: '$2',
   opacity: 0.5,
 
   hoverStyle: {
     opacity: 0.7,
   },
-})
 
-type SheetScopedProps<A> = ScopedProps<A, 'Sheet'>
+  variants: {
+    open: {
+      true: {
+        pointerEvents: 'auto',
+      },
+      false: {
+        opacity: 0,
+        pointerEvents: 'none',
+      },
+    },
+  } as const,
+})
 
 export const SheetHandle = SheetHandleFrame.extractable(
   ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {
     const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)
-
-    if (context.open === false) {
-      return null
-    }
-
     return (
       <SheetHandleFrame
         onPress={() => {
@@ -146,6 +88,7 @@ export const SheetHandle = SheetHandleFrame.extractable(
           const nextPos = (context.position + 1) % max
           context.setPosition(nextPos)
         }}
+        open={context.open}
         {...props}
       />
     )
@@ -186,108 +129,17 @@ export const SheetOverlay = SheetOverlayFrame.extractable(
   ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {
     const context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet)
     return (
-      <RemoveScroll
-        enabled={context.open && context.modal}
-        as={Slot}
-        allowPinchZoom={context.allowPinchZoom}
-        shards={[context.contentRef]}
-        // causes lots of bugs on touch web on site
-        removeScrollBar={false}
-      >
-        <SheetOverlayFrame
-          closed={!context.open || context.hidden}
-          {...props}
-          onPress={mergeEvent(
-            props.onPress,
-            context.dismissOnOverlayPress
-              ? () => {
-                  context.setOpen(false)
-                }
-              : undefined
-          )}
-        />
-      </RemoveScroll>
-    )
-  }
-)
-
-/* -------------------------------------------------------------------------------------------------
- * 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
+      <SheetOverlayFrame
+        closed={!context.open || context.hidden}
         {...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
-            }
-          }
+        onPress={mergeEvent(
+          props.onPress,
+          context.dismissOnOverlayPress
+            ? () => {
+                context.setOpen(false)
+              }
+            : undefined
         )}
-        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,
-        ]}
       />
     )
   }
@@ -343,7 +195,7 @@ export const Sheet = withStaticProperties(
         dismissOnSnapToBottom = false,
         disableDrag: disableDragProp,
         modal = false,
-        allowPinchZoom,
+        handleDisableScroll = true,
       } = props
 
       if (process.env.NODE_ENV === 'development') {
@@ -363,9 +215,12 @@ export const Sheet = withStaticProperties(
       const scrollBridge = useConstant<ScrollBridge>(() => ({
         enabled: false,
         y: 0,
+        paneY: 0,
+        paneMinY: 0,
         scrollStartY: -1,
         drag: () => {},
         release: () => {},
+        scrollLock: false,
       }))
 
       const onChangeOpenInternal = (val: boolean) => {
@@ -431,6 +286,10 @@ export const Sheet = withStaticProperties(
       function stopSpring() {
         spring.current?.stop()
         spring.current = null
+        if (scrollBridge.onFinishAnimate) {
+          scrollBridge.onFinishAnimate()
+          scrollBridge.onFinishAnimate = undefined
+        }
       }
 
       // open must set position
@@ -491,6 +350,7 @@ export const Sheet = withStaticProperties(
       useEffect(() => {
         positionValue.current!.addListener(({ value }) => {
           at.current = value
+          scrollBridge.paneY = value
         })
         return () => {
           positionValue.current!.removeAllListeners()
@@ -505,6 +365,7 @@ export const Sheet = withStaticProperties(
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           const pos = positionValue.current!
           const minY = positions[0]
+          scrollBridge.paneMinY = minY
           let startY = at.current
 
           function makeUnselectable(val: boolean) {
@@ -516,14 +377,14 @@ export const Sheet = withStaticProperties(
             }
           }
 
-          const release = ({ vy, dy }: { dy: number; vy: number }) => {
+          const release = ({ vy, dragAt }: { dragAt: number; vy: number }) => {
             isExternalDrag = false
             previouslyScrolling = false
             makeUnselectable(false)
-            const at = dy + startY
+            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.33
+            const end = at + frameSize * vy * 0.2
             let closestPoint = 0
             let dist = Infinity
             for (let i = 0; i < positions.length; i++) {
@@ -540,25 +401,28 @@ export const Sheet = withStaticProperties(
           }
 
           const finish = (_e: GestureResponderEvent, state: PanResponderGestureState) => {
-            release(state)
+            release({
+              vy: state.vy,
+              dragAt: state.dy,
+            })
           }
 
           let previouslyScrolling = false
 
           const onMoveShouldSet = (_e: GestureResponderEvent, { dy }: PanResponderGestureState) => {
-            if (scrollBridge.enabled) {
-              if (scrollBridge.y !== 0) {
-                previouslyScrolling = true
-                return false
-              }
-              if (scrollBridge.y === 0 && dy < 0) {
-                return false
-              }
+            const isScrolled = scrollBridge.y !== 0
+            if (isScrolled) {
+              previouslyScrolling = true
+              return false
             }
             if (previouslyScrolling) {
               previouslyScrolling = false
               return true
             }
+            const isDraggingUp = dy < 0
+            if (!isScrolled && isDraggingUp) {
+              return false
+            }
             // we could do some detection of other touchables and cancel here..
             return Math.abs(dy) > 8
           }
@@ -571,27 +435,35 @@ export const Sheet = withStaticProperties(
 
           let isExternalDrag = false
 
+          function setPositionValue(next: number) {
+            // useful to debug any "jumping"
+            // if (process.env.NODE_ENV === 'development') {
+            //   const moveAmt = Math.abs(pos['_value'] - next)
+            //   if (moveAmt > 50) {
+            //     console.warn('!!!!!!!!!!!!jump!', moveAmt)
+            //     // debugger
+            //   }
+            // }
+            pos.setValue(next)
+          }
+
           scrollBridge.drag = (dy) => {
             if (!isExternalDrag) {
               isExternalDrag = true
               grant()
             }
             const to = dy + startY
-            pos.setValue(resisted(to, minY))
+            setPositionValue(resisted(to, minY))
           }
 
           scrollBridge.release = release
 
           return PanResponder.create({
-            onMoveShouldSetPanResponder: (...args) => {
-              const res = onMoveShouldSet(...args)
-              // console.log('res', res, scrollBridge.y)
-              return res
-            },
+            onMoveShouldSetPanResponder: onMoveShouldSet,
             onPanResponderGrant: grant,
             onPanResponderMove: (_e, { dy }) => {
               const to = dy + startY
-              pos.setValue(resisted(to, minY))
+              setPositionValue(resisted(to, minY))
             },
             onPanResponderEnd: finish,
             onPanResponderTerminate: finish,
@@ -640,7 +512,6 @@ export const Sheet = withStaticProperties(
           contentRef={contentRef}
           dismissOnOverlayPress={dismissOnOverlayPress}
           dismissOnSnapToBottom={dismissOnSnapToBottom}
-          allowPinchZoom={allowPinchZoom}
           open={open}
           hidden={isHidden}
           scope={__scopeSheet}
@@ -651,8 +522,7 @@ export const Sheet = withStaticProperties(
           scrollBridge={scrollBridge}
         >
           {isResizing ? null : overlayComponent}
-          {/* no fancy hidden animation etc for handle for now */}
-          {isHidden ? null : handleComponent}
+
           <Animated.View
             ref={ref}
             {...panResponder?.panHandlers}
@@ -673,7 +543,18 @@ export const Sheet = withStaticProperties(
               transform: [{ translateY }],
             }}
           >
+            {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> */}
           </Animated.View>
         </SheetProvider>
       )
@@ -752,5 +633,3 @@ export const SheetController = ({
     <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>
   )
 }
-
-export { createSheetScope }

package/src/SheetContext.tsx

@@ -0,0 +1,25 @@
+import { TamaguiElement } from '@tamagui/core'
+import { createContextScope } from '@tamagui/create-context'
+import React from 'react'
+
+import { SHEET_NAME } from './SHEET_HANDLE_NAME'
+import { PositionChangeHandler, ScrollBridge, SheetProps } from './types'
+
+type SheetContextValue = Required<
+  Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>
+> & {
+  hidden: boolean
+  setPosition: PositionChangeHandler
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  contentRef: React.RefObject<TamaguiElement>
+  dismissOnSnapToBottom: boolean
+  scrollBridge: ScrollBridge
+  modal: boolean
+}
+
+export const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
+
+export const [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(
+  SHEET_NAME,
+  {} as any
+)

package/src/SheetScrollView.tsx

@@ -0,0 +1,109 @@
+import React, { forwardRef, useRef, useState } from 'react'
+import { ScrollView, ScrollViewProps } from 'react-native'
+
+import { useSheetContext } from './SheetContext'
+import { SheetScopedProps } from './types'
+
+/* -------------------------------------------------------------------------------------------------
+ * 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({
+      lastPageY: 0,
+      dragAt: 0,
+      dys: [] as number[], // store a few recent dys to get velocity on release
+      isScrolling: false,
+    })
+
+    const release = () => {
+      scrollBridge.scrollStartY = -1
+      state.current.isScrolling = false
+      setScrollEnabled(true)
+      let vy = 0
+      if (state.current.dys.length) {
+        const recentDys = state.current.dys.slice(-10)
+        const dist = recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0
+        const avgDy = dist / recentDys.length
+        vy = avgDy * 0.04
+        console.table([{ vy, avgDy, dist, recentDys }])
+      }
+      state.current.dys = []
+      scrollBridge.release({
+        dragAt: state.current.dragAt,
+        vy,
+      })
+    }
+
+    return (
+      <ScrollView
+        ref={ref}
+        scrollEventThrottle={8}
+        scrollEnabled={scrollEnabled}
+        onScroll={(e) => {
+          const { y } = e.nativeEvent.contentOffset
+          scrollBridge.y = y
+          if (y > 0) {
+            scrollBridge.scrollStartY = -1
+          }
+        }}
+        onStartShouldSetResponder={() => {
+          scrollBridge.scrollStartY = -1
+          return true
+        }}
+        onMoveShouldSetResponder={() => true}
+        onResponderMove={(e) => {
+          const { pageY } = e.nativeEvent
+
+          if (state.current.isScrolling) {
+            return
+          }
+
+          if (scrollBridge.scrollStartY === -1) {
+            scrollBridge.scrollStartY = pageY
+            state.current.lastPageY = pageY
+          }
+
+          const dragAt = pageY - scrollBridge.scrollStartY
+          const dy = pageY - state.current.lastPageY
+          state.current.lastPageY = pageY // after dy
+          // const isAboveStart = dragAt <= 0
+          // const isDraggingDown = dy > 0
+          // const isScrollAtTop = scrollBridge.y <= 0
+          const isDraggingUp = dy < 0
+          const isPaneAtTop = scrollBridge.paneY <= scrollBridge.paneMinY
+
+          if ((dy === 0 || isDraggingUp) && isPaneAtTop) {
+            state.current.isScrolling = true
+            setScrollEnabled(true)
+            return
+          }
+
+          setScrollEnabled(false)
+          scrollBridge.drag(dragAt)
+          state.current.dragAt = dragAt
+          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}
+        // onResponderEnd={release}
+        // onResponderTerminate={release}
+        {...props}
+        style={[
+          {
+            flex: 1,
+          },
+          props.style,
+        ]}
+      />
+    )
+  }
+)

package/src/types.tsx

@@ -0,0 +1,44 @@
+import { ScopedProps } from '@tamagui/create-context'
+import { RemoveScroll } from '@tamagui/remove-scroll'
+import React, { ReactNode } from 'react'
+import { Animated } from 'react-native'
+
+export type SheetProps = ScopedProps<
+  {
+    open?: boolean
+    defaultOpen?: boolean
+    onChangeOpen?: OpenChangeHandler
+    position?: number
+    defaultPosition?: number
+    snapPoints?: number[]
+    onChangePosition?: PositionChangeHandler
+    children?: ReactNode
+    dismissOnOverlayPress?: boolean
+    dismissOnSnapToBottom?: boolean
+    animationConfig?: Animated.SpringAnimationConfig
+    handleDisableScroll?: boolean
+    disableDrag?: boolean
+    modal?: boolean
+  },
+  'Sheet'
+>
+
+export type PositionChangeHandler = (position: number) => void
+
+type OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>
+
+export type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>
+
+export type SheetScopedProps<A> = ScopedProps<A, 'Sheet'>
+
+export type ScrollBridge = {
+  enabled: boolean
+  y: number
+  paneY: number
+  paneMinY: number
+  scrollStartY: number
+  drag: (dy: number) => void
+  release: (state: { dragAt: number; vy: number }) => void
+  scrollLock: boolean
+  onFinishAnimate?: () => void
+}

package/types/SHEET_HANDLE_NAME.d.ts

@@ -0,0 +1,4 @@
+export declare const constants: {};
+export declare const SHEET_NAME = "Sheet";
+export declare const SHEET_HANDLE_NAME = "SheetHandle";
+//# sourceMappingURL=SHEET_HANDLE_NAME.d.ts.map