Select

1import * as React from "react";
2import { View, Text, Pressable, ScrollView, Platform } from "react-native";
3import { Ionicons } from "@expo/vector-icons";
4import { cn } from "@/lib/utils";
5import { Drawer, useDrawer } from "@/components/ui/drawer";
6 
7interface SelectProps {
8  value?: string;
9  onValueChange?: (value: string) => void;
10  placeholder?: string;
11  disabled?: boolean;
12  className?: string;
13  triggerClassName?: string;
14  contentClassName?: string;
15  size?: "small" | "medium" | "large" | "full" | number[];
16  initialSnapIndex?: number;
17  avoidKeyboard?: boolean;
18  children: React.ReactNode;
19}
20 
21interface SelectItemProps {
22  value: string;
23  children: React.ReactNode;
24  disabled?: boolean;
25  className?: string;
26  selectedValue?: string;
27}
28 
29interface SelectLabelProps {
30  children: React.ReactNode;
31  className?: string;
32}
33 
34interface SelectGroupProps {
35  children: React.ReactNode;
36  className?: string;
37}
38 
39interface SelectSeparatorProps {
40  className?: string;
41}
42 
43interface SelectContextValue {
44  selectedValue?: string;
45  onSelect: (value: string, label: React.ReactNode) => void;
46}
47 
48const SelectContext = React.createContext<SelectContextValue>({
49  selectedValue: undefined,
50  onSelect: () => { },
51});
52 
53const Select = React.forwardRef<View, SelectProps>(
54  (
55    {
56      value,
57      onValueChange,
58      placeholder,
59      disabled = false,
60      className,
61      triggerClassName,
62      contentClassName,
63      size = "medium",
64      initialSnapIndex = 0,
65      avoidKeyboard = true,
66      children,
67    },
68    ref
69  ) => {
70    const [open, setOpen] = React.useState(false);
71    const [selectedValue, setSelectedValue] = React.useState(value);
72    const [selectedLabel, setSelectedLabel] =
73      React.useState<React.ReactNode>("");
74 
75    React.useEffect(() => {
76      if (value !== selectedValue) {
77        setSelectedValue(value);
78      }
79    }, [value, selectedValue]);
80    React.useEffect(() => {
81      if (selectedValue === undefined) return;
82 
83      let found = false;
84 
85      const findLabel = (child: React.ReactNode) => {
86        if (!React.isValidElement(child)) return;
87 
88        const childElement = child as React.ReactElement<any>;
89 
90        if (
91          childElement.type === SelectItem &&
92          childElement.props.value === selectedValue
93        ) {
94          setSelectedLabel(childElement.props.children);
95          found = true;
96          return;
97        }
98 
99        if (childElement.type === SelectGroup) {
100// … truncated