Popover

1import * as React from "react"
2import {
3  View,
4  Text,
5  Pressable,
6  Modal,
7  TouchableWithoutFeedback,
8  Platform,
9  Animated,
10} from "react-native"
11import { cn } from "@/lib/utils"
12 
13interface PopoverProps {
14  children: React.ReactNode
15  className?: string
16}
17 
18interface PopoverTriggerProps {
19  children: React.ReactNode
20  className?: string
21  disabled?: boolean
22  asChild?: boolean
23}
24 
25interface PopoverAnchorProps {
26  children: React.ReactNode
27  className?: string
28}
29 
30interface PopoverContentProps {
31  children: React.ReactNode
32  className?: string
33  align?: "start" | "center" | "end"
34  side?: "top" | "right" | "bottom" | "left"
35  sideOffset?: number
36}
37 
38const PopoverContext = React.createContext<{
39  open: boolean
40  setOpen: React.Dispatch<React.SetStateAction<boolean>>
41  triggerRef: React.RefObject<View>
42  triggerLayout: { x: number; y: number; width: number; height: number } | null
43  setTriggerLayout: React.Dispatch<React.SetStateAction<{ x: number; y: number; width: number; height: number } | null>>
44  contentLayout: { width: number; height: number } | null
45  setContentLayout: React.Dispatch<React.SetStateAction<{ width: number; height: number } | null>>
46  isAnimating: boolean
47  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>
48}>({
49  open: false,
50  setOpen: () => { },
51  triggerRef: { current: null },
52  triggerLayout: null,
53  setTriggerLayout: () => { },
54  contentLayout: null,
55  setContentLayout: () => { },
56  isAnimating: false,
57  setIsAnimating: () => { },
58})
59 
60const Popover = React.forwardRef<View, PopoverProps>(
61  ({ children, className, ...props }, ref) => {
62    const [open, setOpen] = React.useState(false)
63    const triggerRef = React.useRef<View>(null)
64    const [triggerLayout, setTriggerLayout] = React.useState<{ x: number; y: number; width: number; height: number } | null>(null)
65    const [contentLayout, setContentLayout] = React.useState<{ width: number; height: number } | null>(null)
66    const [isAnimating, setIsAnimating] = React.useState(false)
67 
68    return (
69      <PopoverContext.Provider
70        value={{
71          open,
72          setOpen,
73          triggerRef,
74          triggerLayout,
75          setTriggerLayout,
76          contentLayout,
77          setContentLayout,
78          isAnimating,
79          setIsAnimating,
80        }}
81      >
82        <View ref={ref} className={cn("", className)} {...props}>
83          {children}
84        </View>
85      </PopoverContext.Provider>
86    )
87  }
88)
89 
90Popover.displayName = "Popover"
91 
92// … truncated