@hanzogui/sheet 2.0.0

package/src/GestureSheetContext.tsx

@@ -0,0 +1,62 @@
+import type React from 'react'
+import { createContext, useContext, type RefObject } from 'react'
+
+export interface GestureSheetContextValue {
+  /**
+   * The sheet's pan gesture object, used for simultaneousHandlers
+   * in ScrollView to coordinate gestures
+   */
+  panGesture: any | null
+  /**
+   * Ref to the pan gesture for simultaneousHandlers prop
+   */
+  panGestureRef: RefObject<any> | null
+  /**
+   * Whether the sheet is currently being dragged by the user
+   */
+  isDragging: boolean
+  /**
+   * Set whether panning should be blocked (e.g., when scrolling)
+   */
+  setBlockPan: (blocked: boolean) => void
+  /**
+   * Whether pan gesture is currently blocked
+   */
+  blockPan: boolean
+}
+
+const GestureSheetContext = createContext<GestureSheetContextValue | null>(null)
+
+export function useGestureSheetContext(): GestureSheetContextValue | null {
+  return useContext(GestureSheetContext)
+}
+
+export interface GestureSheetProviderProps {
+  children: React.ReactNode
+  isDragging: boolean
+  blockPan: boolean
+  setBlockPan: (blocked: boolean) => void
+  panGesture: any | null
+  panGestureRef: RefObject<any> | null
+}
+
+export function GestureSheetProvider({
+  children,
+  isDragging,
+  blockPan,
+  setBlockPan,
+  panGesture,
+  panGestureRef,
+}: GestureSheetProviderProps) {
+  const value: GestureSheetContextValue = {
+    panGesture,
+    panGestureRef,
+    isDragging,
+    blockPan,
+    setBlockPan,
+  }
+
+  return (
+    <GestureSheetContext.Provider value={value}>{children}</GestureSheetContext.Provider>
+  )
+}

package/src/Sheet.tsx

@@ -0,0 +1,114 @@
+import { styled } from '@hanzogui/core'
+import { XStack, YStack } from '@hanzogui/stacks'
+
+import { SHEET_HANDLE_NAME, SHEET_NAME, SHEET_OVERLAY_NAME } from './constants'
+import { createSheet } from './createSheet'
+
+export { createSheetScope } from './SheetContext'
+export * from './types'
+
+/* -------------------------------------------------------------------------------------------------
+ * SheetHandle
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Handle = styled(XStack, {
+  name: SHEET_HANDLE_NAME,
+
+  variants: {
+    open: {
+      true: {
+        opacity: 1,
+        pointerEvents: 'auto',
+      },
+      false: {
+        opacity: 0,
+        pointerEvents: 'none',
+      },
+    },
+
+    unstyled: {
+      false: {
+        height: 10,
+        borderRadius: 100,
+        backgroundColor: '$background',
+        zIndex: 10,
+        marginHorizontal: '35%',
+        marginBottom: '$2',
+        opacity: 0.5,
+
+        hoverStyle: {
+          opacity: 0.7,
+        },
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * SheetOverlay
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Overlay = styled(YStack, {
+  name: SHEET_OVERLAY_NAME,
+
+  variants: {
+    open: {
+      true: {
+        pointerEvents: 'auto',
+      },
+      false: {
+        pointerEvents: 'none',
+      },
+    },
+
+    unstyled: {
+      false: {
+        fullscreen: true,
+        position: 'absolute',
+        backgroundColor: '$background',
+        zIndex: 100_000 - 1,
+        pointerEvents: 'auto',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * Sheet
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Frame = styled(YStack, {
+  name: SHEET_NAME,
+
+  variants: {
+    unstyled: {
+      false: {
+        flex: 1,
+        backgroundColor: '$background',
+        borderTopLeftRadius: '$true',
+        borderTopRightRadius: '$true',
+        width: '100%',
+        maxHeight: '100%',
+        overflow: 'hidden',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+export const Sheet = createSheet({
+  Frame,
+  Handle,
+  Overlay,
+})

package/src/SheetContext.tsx

@@ -0,0 +1,11 @@
+import { createContextScope } from '@hanzogui/create-context'
+
+import { SHEET_NAME } from './constants'
+import type { SheetContextValue } from './useSheetProviderProps'
+
+export const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
+
+export const [SheetProvider, useSheetContext] = createSheetContext<SheetContextValue>(
+  SHEET_NAME,
+  {} as any
+)

package/src/SheetController.tsx

@@ -0,0 +1,44 @@
+import React, { useId, useRef } from 'react'
+import { useEvent } from '@hanzogui/core'
+import type { ReactNode } from 'react'
+
+import type { SheetControllerContextValue } from './useSheetController'
+import { SheetControllerContext } from './useSheetController'
+
+export const SheetController = ({
+  children,
+  onOpenChange: onOpenChangeProp,
+  open,
+  hidden,
+  disableDrag,
+}: Partial<SheetControllerContextValue> & { children?: ReactNode }) => {
+  const onOpenChange = useEvent(onOpenChangeProp)
+  const id = useId()
+
+  // track hidden transitions to signal adapt handoff
+  // when hidden goes from true -> false while open, the sheet should skip animation
+  const wasHiddenRef = useRef(hidden)
+  let skipNextAnimation = false
+  if (wasHiddenRef.current && !hidden && open) {
+    skipNextAnimation = true
+  }
+  wasHiddenRef.current = hidden
+
+  const memoValue = React.useMemo(
+    () => ({
+      id,
+      open,
+      hidden,
+      disableDrag,
+      onOpenChange,
+      skipNextAnimation,
+    }),
+    [id, onOpenChange, open, hidden, disableDrag, skipNextAnimation]
+  )
+
+  return (
+    <SheetControllerContext.Provider value={memoValue}>
+      {children}
+    </SheetControllerContext.Provider>
+  )
+}