@tamagui/sheet 3.0.0-beta.924.1 → 3.0.0

package/src/useSheetProviderProps.tsx

@@ -1,137 +1,25 @@
-import React from 'react'
-import type { TamaguiElement } from '@tamagui/core'
 import { useConfiguration } from '@tamagui/core'
 import { useConstant } from '@tamagui/use-constant'
-import { useControllableState } from '@tamagui/use-controllable-state'
 
 import type { ScrollBridge, SheetProps } from './types'
 import type { SheetOpenState } from './useSheetOpenState'
-
-export type SheetContextValue = ReturnType<typeof useSheetProviderProps> & {
-  keyboardOccludedHeight: number
-  // whether the soft keyboard is currently open. distinct from
-  // keyboardOccludedHeight (which is 0 once the sheet fits above the keyboard):
-  // the fit-mode height freeze must persist for the whole time the keyboard is
-  // open, not just while occluded, or it releases and the sheet collapses.
-  isKeyboardVisible: boolean
-  // the sheet's pre-keyboard frame height (web). SheetScrollView pins its height
-  // to this while the keyboard is open so the frame translates at full size
-  // instead of collapsing to a consumer maxHeight that shrank with the viewport.
-  // 0 when not applicable.
-  keyboardStableFrameHeight: number
-  setHasScrollView: (val: boolean) => void
-}
+import { useSheetState } from './useSheetState'
+
+export type SheetContextValue =
+  | (ReturnType<typeof useSheetProviderProps> & {
+      keyboardOccludedHeight: number
+      isKeyboardVisible: boolean
+      keyboardStableFrameHeight: number
+      setHasScrollView: (val: boolean) => void
+    })
+  | (Omit<ReturnType<typeof useSheetState>, 'maxContentSize'> & {
+      onlyShowContainer: true
+      scrollBridge?: undefined
+    })
 
 export function useSheetProviderProps(props: SheetProps, state: SheetOpenState) {
-  const handleRef = React.useRef<TamaguiElement>(null)
-  const contentRef = React.useRef<TamaguiElement>(null)
-  const [frameSize, setFrameSize] = React.useState<number>(0)
-  const [maxContentSize, setMaxContentSize] = React.useState<number>(0)
-  const snapPointsMode = props.snapPointsMode ?? 'percent'
-  const snapPointsProp: (string | number)[] =
-    props.snapPoints ??
-    (snapPointsMode === 'percent'
-      ? [80]
-      : snapPointsMode === 'constant'
-        ? [256]
-        : ['fit'])
-  const hasFit = snapPointsProp[0] === 'fit'
-
-  const snapPoints = React.useMemo(
-    () => (props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),
-
-    [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]
-  )
-
-  // lets set -1 to be always the "open = false" position
-  const [position_, setPositionImmediate] = useControllableState({
-    prop: props.position,
-    defaultProp: props.defaultPosition || (state.open ? 0 : -1),
-    onChange: props.onPositionChange,
-    strategy: 'most-recent-wins',
-  })
-
-  const position = state.open === false ? -1 : position_
-
-  const { open } = state
-
-  const setPosition = React.useCallback(
-    (next: number) => {
-      // close on dismissOnSnapToBottom (and set position so it animates)
-      if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
-        state.setOpen(false)
-      } else {
-        setPositionImmediate(next)
-      }
-    },
-    [props.dismissOnSnapToBottom, snapPoints.length, setPositionImmediate, state.setOpen]
-  )
-
-  if (process.env.NODE_ENV === 'development') {
-    if (
-      snapPointsMode === 'mixed' &&
-      snapPoints.some((p) => {
-        if (typeof p === 'string') {
-          if (p === 'fit') {
-            return false
-          }
-          if (p.endsWith('%')) {
-            const n = Number(p.slice(0, -1))
-            return n < 0 || n > 100
-          }
-          return true
-        }
-        return typeof p !== 'number' || p < 0
-      })
-    ) {
-      console.warn(
-        '⚠️ Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or "fit" when snapPointsMode is mixed'
-      )
-    }
-    if (snapPointsMode === 'mixed' && snapPoints.indexOf('fit') > 0) {
-      console.warn(
-        '⚠️ Invalid snapPoint given, "fit" must be the first/largest snap point when snapPointsMode is mixed'
-      )
-    }
-    if (
-      snapPointsMode === 'fit' &&
-      (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) ||
-        snapPoints[0] !== 'fit')
-    ) {
-      console.warn(
-        '⚠️ Invalid snapPoint given, there are no snap points when snapPointsMode is fit'
-      )
-    }
-    if (
-      snapPointsMode === 'constant' &&
-      snapPoints.some((p) => typeof p !== 'number' || p < 0)
-    ) {
-      console.warn(
-        '⚠️ Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant'
-      )
-    }
-    if (
-      snapPointsMode === 'percent' &&
-      snapPoints.some((p) => typeof p !== 'number' || p < 0 || p > 100)
-    ) {
-      console.warn(
-        '⚠️ Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent'
-      )
-    }
-  }
-
-  // reset position to fully open on re-open after dismissOnSnapToBottom
-  if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {
-    setPositionImmediate(0)
-  }
-
-  // open must set position
-  const shouldSetPositionOpen = open && position < 0
-  React.useEffect(() => {
-    if (shouldSetPositionOpen) {
-      setPosition(0)
-    }
-  }, [setPosition, shouldSetPositionOpen])
+  const { maxContentSize, ...sheetState } = useSheetState(props, state)
+  const { frameSize, snapPointsMode, snapPoints, open } = sheetState
 
   const { animationDriver } = useConfiguration()
   if (!animationDriver) {
@@ -181,31 +69,12 @@ export function useSheetProviderProps(props: SheetProps, state: SheetOpenState)
       ? frameSize / ((typeof maxSnapPoint === 'number' ? maxSnapPoint : 100) / 100)
       : maxContentSize
 
-  const providerProps = {
+  return {
+    ...sheetState,
     screenSize,
     maxSnapPoint,
     disableRemoveScroll,
     scrollBridge,
-    modal: !!props.modal,
-    open: state.open,
-    setOpen: state.setOpen,
-    hidden: !!state.isHidden,
-    contentRef,
-    handleRef,
-    frameSize,
-    setFrameSize,
-    dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,
-    dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,
-    scope: props.scope ?? '',
-    hasFit,
-    position,
-    snapPoints,
-    snapPointsMode,
-    setMaxContentSize,
-    setPosition,
-    setPositionImmediate,
-    onlyShowContainer: false,
+    onlyShowContainer: false as const,
   }
-
-  return providerProps
 }

package/src/useSheetScrollViewGestures.native.ts

@@ -1,5 +1,8 @@
 import { useRef } from 'react'
-import type { GestureResponderEvent, ScrollView as RNScrollView } from 'react-native'
+import type {
+  GestureResponderEvent,
+  ScrollViewInstance as RNScrollView,
+} from 'react-native'
 import type { ScrollBridge } from './types'
 
 interface ResponderState {

package/src/useSheetState.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import type { TamaguiElement } from '@tamagui/core'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import type { SheetProps } from './types'
+import type { SheetOpenState } from './useSheetOpenState'
+
+export function useSheetState(props: SheetProps, state: SheetOpenState) {
+  const handleRef = React.useRef<TamaguiElement>(null)
+  const contentRef = React.useRef<TamaguiElement>(null)
+  const [frameSize, setFrameSize] = React.useState<number>(0)
+  const [maxContentSize, setMaxContentSize] = React.useState<number>(0)
+  const snapPointsMode = props.snapPointsMode ?? 'percent'
+  const snapPointsProp: (string | number)[] =
+    props.snapPoints ??
+    (snapPointsMode === 'percent'
+      ? [80]
+      : snapPointsMode === 'constant'
+        ? [256]
+        : ['fit'])
+  const hasFit = snapPointsProp[0] === 'fit'
+
+  const snapPoints = React.useMemo(
+    () => (props.dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp),
+
+    [JSON.stringify(snapPointsProp), props.dismissOnSnapToBottom]
+  )
+
+  // lets set -1 to be always the "open = false" position
+  const [position_, setPositionImmediate] = useControllableState({
+    prop: props.position,
+    defaultProp: props.defaultPosition || (state.open ? 0 : -1),
+    onChange: props.onPositionChange,
+    strategy: state.strategy,
+  })
+
+  const position = state.open === false ? -1 : position_
+
+  const { open } = state
+
+  const setPosition = React.useCallback(
+    (next: number) => {
+      // close on dismissOnSnapToBottom (and set position so it animates)
+      if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
+        state.setOpen(false)
+      } else {
+        setPositionImmediate(next)
+      }
+    },
+    [props.dismissOnSnapToBottom, snapPoints.length, setPositionImmediate, state.setOpen]
+  )
+
+  if (process.env.NODE_ENV === 'development') {
+    if (
+      snapPointsMode === 'mixed' &&
+      snapPoints.some((p) => {
+        if (typeof p === 'string') {
+          if (p === 'fit') {
+            return false
+          }
+          if (p.endsWith('%')) {
+            const n = Number(p.slice(0, -1))
+            return n < 0 || n > 100
+          }
+          return true
+        }
+        return typeof p !== 'number' || p < 0
+      })
+    ) {
+      console.warn(
+        '⚠️ Invalid snapPoint given, snapPoints must be positive numeric values, string percentages between 0-100%, or "fit" when snapPointsMode is mixed'
+      )
+    }
+    if (snapPointsMode === 'mixed' && snapPoints.indexOf('fit') > 0) {
+      console.warn(
+        '⚠️ Invalid snapPoint given, "fit" must be the first/largest snap point when snapPointsMode is mixed'
+      )
+    }
+    if (
+      snapPointsMode === 'fit' &&
+      (snapPoints.length !== (props.dismissOnSnapToBottom ? 2 : 1) ||
+        snapPoints[0] !== 'fit')
+    ) {
+      console.warn(
+        '⚠️ Invalid snapPoint given, there are no snap points when snapPointsMode is fit'
+      )
+    }
+    if (
+      snapPointsMode === 'constant' &&
+      snapPoints.some((p) => typeof p !== 'number' || p < 0)
+    ) {
+      console.warn(
+        '⚠️ Invalid snapPoint given, snapPoints must be positive numeric values when snapPointsMode is constant'
+      )
+    }
+    if (
+      snapPointsMode === 'percent' &&
+      snapPoints.some((p) => typeof p !== 'number' || p < 0 || p > 100)
+    ) {
+      console.warn(
+        '⚠️ Invalid snapPoint given, snapPoints must be numeric values between 0 and 100 when snapPointsMode is percent'
+      )
+    }
+  }
+
+  // reset position to fully open on re-open after dismissOnSnapToBottom
+  if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {
+    setPositionImmediate(0)
+  }
+
+  // open must set position
+  const shouldSetPositionOpen = open && position < 0
+  React.useEffect(() => {
+    if (shouldSetPositionOpen) {
+      setPosition(0)
+    }
+  }, [setPosition, shouldSetPositionOpen])
+
+  return {
+    modal: !!props.modal,
+    open: state.open,
+    setOpen: state.setOpen,
+    hidden: !!state.isHidden,
+    contentRef,
+    handleRef,
+    frameSize,
+    setFrameSize,
+    maxContentSize,
+    dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,
+    dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,
+    scope: props.scope ?? '',
+    hasFit,
+    position,
+    snapPoints,
+    snapPointsMode,
+    setMaxContentSize,
+    setPosition,
+    setPositionImmediate,
+  }
+}