@tamagui/sheet 1.0.1-beta.100 → 1.0.1-beta.103

package/src/Sheet.tsx

@@ -1,29 +1,83 @@
-import { isSSR, isWeb, styled, themeable, withStaticProperties } from '@tamagui/core'
+import {
+  GetProps,
+  Theme,
+  isClient,
+  isWeb,
+  mergeEvent,
+  styled,
+  themeable,
+  useEvent,
+  useIsomorphicLayoutEffect,
+  useThemeName,
+  withStaticProperties,
+} from '@tamagui/core'
 import { ScopedProps, createContextScope } from '@tamagui/create-context'
+import { Portal } from '@tamagui/portal'
 import { XStack, XStackProps, YStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import React, {
   ReactNode,
+  createContext,
   forwardRef,
   isValidElement,
-  useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
-import { Animated, LayoutRectangle, PanResponder, View } from 'react-native'
+import {
+  Animated,
+  GestureResponderEvent,
+  PanResponder,
+  PanResponderGestureState,
+  View,
+} from 'react-native'
+
+const SHEET_NAME = 'Sheet'
+const SHEET_HANDLE_NAME = 'SheetHandle'
+
+export type SheetProps = ScopedProps<
+  {
+    open?: boolean
+    defaultOpen?: boolean
+    onChangeOpen?: OpenChangeHandler
+    position?: number
+    defaultPosition?: number
+    snapPoints?: number[]
+    onChangePosition?: PositionChangeHandler
+    children?: ReactNode
+    dismissOnOverlayPress?: boolean
+    animationConfig?: Animated.SpringAnimationConfig
+    disableDrag?: boolean
+    modal?: boolean
+  },
+  'Sheet'
+>
 
 type PositionChangeHandler =
   | ((position: number) => void)
   | React.Dispatch<React.SetStateAction<number>>
 
-const DRAWER_NAME = 'Drawer'
-const DRAWER_HANDLE_NAME = 'DrawerHandle'
+type OpenChangeHandler = ((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>
+
+type SheetContextValue = Required<
+  Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>
+> & {
+  hidden: boolean
+  setPosition: React.Dispatch<React.SetStateAction<number>>
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+}
 
-export const DrawerHandleFrame = styled(XStack, {
-  name: DRAWER_HANDLE_NAME,
+const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
+const [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(
+  SHEET_NAME,
+  {} as any
+)
+
+export const SheetHandleFrame = styled(XStack, {
+  name: SHEET_HANDLE_NAME,
   height: 10,
   borderRadius: 100,
   backgroundColor: '$background',
@@ -41,12 +95,18 @@ export const DrawerHandleFrame = styled(XStack, {
   },
 })
 
-export const DrawerHandle = DrawerHandleFrame.extractable(
-  ({ __scopeDrawer, ...props }: ScopedProps<XStackProps, 'Drawer'>) => {
-    const context = useDrawerContext(DRAWER_HANDLE_NAME, __scopeDrawer)
+type SheetScopedProps<A> = ScopedProps<A, 'Sheet'>
+
+export const SheetHandle = SheetHandleFrame.extractable(
+  ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => {
+    const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)
+
+    if (context.open === false) {
+      return null
+    }
 
     return (
-      <DrawerHandleFrame
+      <SheetHandleFrame
         onPress={() => {
           const nextPos = (context.position + 1) % context.snapPoints.length
           context.setPosition(nextPos)
@@ -57,145 +117,231 @@ export const DrawerHandle = DrawerHandleFrame.extractable(
   }
 )
 
-type DrawerContextValue = {
-  position: number
-  snapPoints: number[]
-  setPosition: React.Dispatch<React.SetStateAction<number>>
-}
-
-const [createDrawerContext, createDrawerScope] = createContextScope(DRAWER_NAME)
-const [DrawerProvider, useDrawerContext] = createDrawerContext<DrawerContextValue>(
-  DRAWER_NAME,
-  {} as any
-)
-
-export const DrawerBackdrop = styled(YStack, {
-  name: 'DrawerBackdrop',
+export const SheetOverlayFrame = styled(YStack, {
+  name: 'SheetOverlay',
+  // TODO this should be $background without opacity and just customized by theme
   backgroundColor: '$color',
   fullscreen: true,
   opacity: 0.2,
+  zIndex: 0,
+
+  variants: {
+    closed: {
+      true: {
+        opacity: 0,
+        pointerEvents: 'none',
+      },
+      false: {
+        pointerEvents: 'auto',
+      },
+      // TODO still have as const bug
+    } as const,
+  },
 })
 
-export const DrawerFrame = styled(YStack, {
-  name: 'DrawerFrame',
+export type SheetOverlayProps = GetProps<typeof SheetOverlayFrame>
+
+export const SheetOverlay = SheetOverlayFrame.extractable(
+  ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => {
+    const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet)
+    return (
+      <SheetOverlayFrame
+        closed={!context.open || context.hidden}
+        {...props}
+        onPress={mergeEvent(
+          props.onPress,
+          context.dismissOnOverlayPress
+            ? () => {
+                context.setOpen(false)
+              }
+            : undefined
+        )}
+      />
+    )
+  }
+)
+
+const selectionStyleSheet = isClient ? document.createElement('style') : null
+if (selectionStyleSheet) {
+  document.head.appendChild(selectionStyleSheet)
+}
+
+export const SheetFrame = styled(YStack, {
+  name: 'SheetFrame',
   flex: 1,
   backgroundColor: '$background',
   borderTopLeftRadius: '$4',
   borderTopRightRadius: '$4',
   padding: '$4',
   width: '100%',
+  pointerEvents: 'auto',
 })
 
-export type DrawerProps = ScopedProps<
-  {
-    open?: boolean
-    defaultOpen?: boolean
-    defaultPosition?: number
-    snapPoints?: number[]
-    position?: number
-    onChangePosition?: PositionChangeHandler
-    children?: ReactNode
-  },
-  'Drawer'
->
-
-const useIsSSR = () => {
-  const [val, setVal] = useState(isWeb ? isSSR : false)
-  useEffect(() => {
-    if (isWeb && !isSSR) {
-      setVal(false)
-    }
-  }, [])
-  return val
-}
+// set all the way off screen
+const HIDDEN_SIZE = 10_000
 
-export const Drawer = withStaticProperties(
+export const Sheet = withStaticProperties(
   themeable(
-    forwardRef<View, DrawerProps>((props, ref) => {
+    forwardRef<View, SheetProps>((props, ref) => {
       const {
-        __scopeDrawer,
+        __scopeSheet,
         snapPoints: snapPointsProp = [80, 10],
+        open: openProp,
+        defaultOpen,
         children: childrenProp,
         position: positionProp,
         onChangePosition,
+        onChangeOpen,
         defaultPosition,
-        ...rest
+        dismissOnOverlayPress = true,
+        animationConfig,
+        disableDrag: disableDragProp,
+        modal,
       } = props
-      const isServerSide = useIsSSR()
 
-      const [position, setPosition] = useControllableState({
+      // 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 onChangeOpenInternal = (val: boolean) => {
+        controller?.onChangeOpen?.(val)
+        onChangeOpen?.(val)
+      }
+
+      const [open, setOpen] = useControllableState({
+        prop: controller?.open ?? openProp,
+        defaultProp: defaultOpen || true,
+        onChange: onChangeOpenInternal,
+        strategy: controller ? 'most-recent-wins' : 'prop-wins',
+      })
+
+      const [frameSize, setFrameSize] = useState<number>(0)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])
+
+      // lets set -1 to be always the "open = false" position
+      const [position_, setPosition] = useControllableState({
         prop: positionProp,
-        defaultProp: defaultPosition || 0,
+        defaultProp: defaultPosition || (open ? 0 : -1),
         onChange: onChangePosition,
-        strategy: 'most-recent-wins',
       })
-
-      const [layout, setLayout] = useState<LayoutRectangle>()
+      const position = open === false ? -1 : position_
 
       const positionValue = useRef<Animated.Value>()
       if (!positionValue.current) {
-        positionValue.current = new Animated.Value(position)
+        positionValue.current = new Animated.Value(HIDDEN_SIZE)
       }
 
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])
-
-      // we can put non-server side hooks after conditional because based on env
-      if (isServerSide) {
-        return null
-      }
+      const [isResizing, setIsResizing] = useState(true)
+      useLayoutEffect(() => {
+        if (!isResizing) {
+          setIsResizing(true)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [modal])
 
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       const spring = useRef<Animated.CompositeAnimation | null>(null)
-
       function stopSpring() {
         spring.current?.stop()
         spring.current = null
       }
 
-      // eslint-disable-next-line react-hooks/rules-of-hooks
+      // open must set position
+      const shouldSetPositionOpen = open && position < 0
+      useEffect(() => {
+        if (shouldSetPositionOpen) {
+          setPosition(0)
+        }
+      }, [setPosition, shouldSetPositionOpen])
+
       const positions = useMemo(
-        () => snapPoints.map((point) => getYForPosition(point, layout)),
-        [layout, snapPoints]
+        () => snapPoints.map((point) => getPercentSize(point, frameSize)),
+        [frameSize, snapPoints]
       )
 
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const animateTo = useCallback(
-        (position: number) => {
-          if (!positionValue.current) return
-          const toValue = positions[position]
-          stopSpring()
-          spring.current = Animated.spring(positionValue.current, {
+      const animateTo = useEvent((position: number) => {
+        const pos = positionValue.current
+        if (isHidden && open) return
+        if (!pos) 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
+        stopSpring()
+        if (isHidden || isResizing) {
+          if (isResizing) {
+            setIsResizing(false)
+          }
+          Animated.timing(pos, {
             useNativeDriver: !isWeb,
             toValue,
-          })
-          spring.current.start(({ finished }) => finished && stopSpring())
-        },
-        [positions]
-      )
+            duration: 0,
+          }).start()
+          return
+        }
+        // dont bounce on initial measure to bottom
+        const overshootClamping = pos['_value'] === HIDDEN_SIZE
+        spring.current = Animated.spring(pos, {
+          useNativeDriver: !isWeb,
+          toValue,
+          overshootClamping,
+          ...animationConfig,
+        })
+        spring.current.start(({ finished }) => finished && stopSpring())
+      })
 
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       useLayoutEffect(() => {
         animateTo(position)
-      }, [position, animateTo])
+      }, [isHidden, frameSize, position, animateTo])
 
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       const panResponder = useMemo(() => {
-        if (!layout) return
-        console.log('setup pan')
+        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; }`
+          }
+        }
+
+        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
+            }
+          }
+          // have to call both because state may not change but need to snap back
+          setPosition(closestPoint)
+          animateTo(closestPoint)
+        }
+
         return PanResponder.create({
           onMoveShouldSetPanResponder: (_e, { dy }) => {
             // we could do some detection of other touchables and cancel here..
-            // console.log('wut is', _e)
             return Math.abs(dy) > 6
           },
           onPanResponderGrant: () => {
+            makeUnselectable(true)
             stopSpring()
             startY = pos['_value']
           },
@@ -203,94 +349,110 @@ export const Drawer = withStaticProperties(
             const to = dy + startY
             pos.setValue(resisted(to, minY))
           },
-          onPanResponderRelease: (_e, { vy, dy }) => {
-            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 + layout.height * 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)
-          },
+          onPanResponderEnd: finish,
+          onPanResponderTerminate: finish,
+          onPanResponderRelease: finish,
         })
-      }, [layout, positions, setPosition])
+      }, [disableDrag, animateTo, frameSize, positions, setPosition])
 
       let handleComponent: React.ReactElement | null = null
-      let backdropComponent: React.ReactElement | null = null
+      let overlayComponent: React.ReactElement | null = null
       let frameComponent: React.ReactElement | null = null
 
+      // TODO do more radix-like and don't require direct children descendents
       React.Children.forEach(childrenProp, (child) => {
         if (isValidElement(child)) {
-          switch (child.type?.['staticConfig'].componentName) {
-            case 'DrawerHandle':
+          const name = child.type?.['staticConfig']?.componentName
+          switch (name) {
+            case 'SheetHandle':
               handleComponent = child
               break
-            case 'DrawerFrame':
+            case 'SheetFrame':
               frameComponent = child
               break
-            case 'DrawerBackdrop':
-              backdropComponent = child
+            case 'SheetOverlay':
+              overlayComponent = child
               break
             default:
-              console.warn('Warning: passed invalid child to Drawer', child)
+              console.warn('Warning: passed invalid child to Sheet', child)
           }
         }
       })
 
-      return (
-        <DrawerProvider
-          scope={__scopeDrawer}
+      const preventShown = controller?.hidden && controller?.open
+
+      if (preventShown) {
+        return null
+      }
+
+      const contents = (
+        <SheetProvider
+          dismissOnOverlayPress={dismissOnOverlayPress}
+          open={open}
+          hidden={isHidden}
+          scope={__scopeSheet}
           position={position}
           snapPoints={snapPoints}
           setPosition={setPosition}
+          setOpen={setOpen}
         >
-          {backdropComponent}
-          {handleComponent}
+          {isResizing ? null : overlayComponent}
+          {/* no fancy hidden animation etc for handle for now */}
+          {isHidden ? null : handleComponent}
           <Animated.View
+            ref={ref}
             {...panResponder?.panHandlers}
             onLayout={(e) => {
-              setLayout(e.nativeEvent.layout)
+              const next = e.nativeEvent.layout.height
+              setFrameSize((prev) => {
+                const isBigChange = Math.abs(prev - next) > 50
+                setIsResizing(isBigChange)
+                return next
+              })
             }}
+            pointerEvents={open ? 'auto' : 'none'}
             style={{
+              position: 'absolute',
+              zIndex: 10,
               width: '100%',
               height: '100%',
-              transform: [{ translateY: positionValue.current }],
+              transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : positionValue.current }],
             }}
           >
-            {frameComponent}
+            {isResizing ? null : frameComponent}
           </Animated.View>
-        </DrawerProvider>
+        </SheetProvider>
       )
+
+      if (modal) {
+        return (
+          <Portal>
+            <Theme name={themeName}>{contents}</Theme>
+          </Portal>
+        )
+      }
+
+      return contents
     }),
     {
-      componentName: 'Drawer',
+      componentName: 'Sheet',
     }
   ),
   {
-    Handle: DrawerHandle,
-    Frame: DrawerFrame,
-    Backdrop: DrawerBackdrop,
+    Handle: SheetHandle,
+    Frame: SheetFrame,
+    Overlay: SheetOverlay,
   }
 )
 
-function getYForPosition(point?: number, layout?: LayoutRectangle) {
-  if (!layout) return 0
+function getPercentSize(point?: number, frameSize?: number) {
+  if (!frameSize) return 0
   if (point === undefined) {
     console.warn(`No snapPoint`)
     return 0
   }
   const pct = point / 100
-  const next = layout.height - pct * layout.height
+  const next = frameSize - pct * frameSize
   return next
 }
 
@@ -305,4 +467,36 @@ function resisted(y: number, minY: number, maxOverflow = 25) {
   return y
 }
 
-export { createDrawerScope }
+type SheetControllerContextValue = {
+  disableDrag?: boolean
+  open?: boolean
+  // hide without "closing" to prevent re-animation when shown again
+  hidden?: boolean
+  onChangeOpen?: React.Dispatch<React.SetStateAction<boolean>> | ((val: boolean) => void)
+}
+
+const SheetControllerContext = createContext<SheetControllerContextValue | null>(null)
+
+export const SheetController = ({
+  children,
+  onChangeOpen: onChangeOpenProp,
+  ...value
+}: Partial<SheetControllerContextValue> & { children?: React.ReactNode }) => {
+  const onChangeOpen = useEvent(onChangeOpenProp)
+
+  const memoValue = useMemo(
+    () => ({
+      open: value.open,
+      hidden: value.hidden,
+      disableDrag: value.disableDrag,
+      onChangeOpen,
+    }),
+    [onChangeOpen, value.open, value.hidden, value.disableDrag]
+  )
+
+  return (
+    <SheetControllerContext.Provider value={memoValue}>{children}</SheetControllerContext.Provider>
+  )
+}
+
+export { createSheetScope }