Select

1import {
2  createContext,
3  useCallback,
4  useContext,
5  useEffect,
6  useMemo,
7  useRef,
8  useState,
9} from "react";
10import {
11  type GestureResponderEvent,
12  Pressable,
13  type PressableProps,
14} from "react-native";
15import Animated, {
16  Easing,
17  interpolate,
18  useAnimatedStyle,
19  useSharedValue,
20  withTiming,
21} from "react-native-reanimated";
22import { cn, mergeRefs } from "@/lib/utils";
23import { ActionInput } from "./action-input";
24import {
25  BottomSheet,
26  BottomSheetBody,
27  BottomSheetContent,
28  BottomSheetFooter,
29  BottomSheetHeader,
30  BottomSheetTitle,
31} from "./bottom-sheet";
32import { CheckIcon, ChevronDownIcon } from "./icons";
33import { InputAddon, type InputAddonChild, InputAddonIcon } from "./input";
34import {
35  Popover,
36  PopoverContent,
37  PopoverOverlay,
38  PopoverPortal,
39  usePopover,
40} from "./popover";
41import { Slot } from "./slot";
42import { Text } from "./text";
43 
44// Constants
45const ANIMATION_DURATION = 280;
46const ANIMATION_EASING = Easing.out(Easing.cubic);
47 
48// Types
49type LayoutPosition = {
50  pageX: number;
51  pageY: number;
52  width: number;
53  height: number;
54};
55 
56type SelectValueType = number | string;
57 
58type SelectOption<T> = {
59  value: T;
60  label: string;
61};
62 
63type SelectContextProps<T> = {
64  open: boolean;
65  onOpenChange: (open: boolean) => void;
66  options: SelectOption<T>[];
67  value?: T;
68  onValueChange: (value: T) => void;
69  selectedValue?: T;
70  setSelectedValue: (value: T) => void;
71  onConfirm: (value?: T) => void;
72  onCancel: () => void;
73  disabled?: boolean;
74  invalid?: boolean;
75  placeholder: string;
76  popoverTriggerPosition?: LayoutPosition;
77  setPopoverTriggerPosition: (position?: LayoutPosition) => void;
78};
79 
80type SelectItemContextProps<T> = {
81  value: T;
82};
83 
84type SelectProps<T extends SelectValueType> = {
85  open?: boolean;
86  onOpenChange?: (open: boolean) => void;
87  options: SelectOption<T>[];
88  value?: T;
89  onValueChange?: (value: T) => void;
90  disabled?: boolean;
91  invalid?: boolean;
92  placeholder?: string;
93  children: React.ReactNode;
94};
95 
96type SelectTriggerProps = React.ComponentPropsWithRef<typeof Pressable> & {
97  asChild?: boolean;
98};
99 
100type SelectItemProps<T> = SelectOption<T> & Omit<PressableProps, "onPress">;
101 
102type SelectContentProps<T> = {
103  children:
104    | React.ReactElement<SelectItemProps<T>>
105    | React.ReactElement<SelectItemProps<T>>[];
106};
107 
108type SelectContentPopoverProps<T> = React.ComponentProps<
109  typeof PopoverContent
110> &
111  SelectContentProps<T>;
112 
113type SelectContentSheetConfirmProps = PressableProps & {
114// … truncated