Combobox

1import * as React from "react";
2import {
3  View,
4  Text,
5  Pressable,
6  Platform,
7  FlatList,
8  TextInput,
9} from "react-native";
10import { Ionicons } from "@expo/vector-icons";
11import { cn } from "@/lib/utils";
12import { Drawer, useDrawer } from "@/components/ui/drawer";
13import { Input } from "@/components/ui/input";
14 
15interface ComboboxProps {
16  value?: string | string[];
17  onValueChange?: (value: string | string[]) => void;
18  placeholder?: string;
19  searchPlaceholder?: string;
20  disabled?: boolean;
21  className?: string;
22  triggerClassName?: string;
23  contentClassName?: string;
24  multiple?: boolean;
25  items: {
26    value: string;
27    label: string;
28    disabled?: boolean;
29  }[];
30  filter?: (item: ComboboxProps["items"][0], search: string) => boolean;
31  emptyText?: string;
32}
33 
34interface ComboboxItemProps {
35  value: string;
36  children: React.ReactNode;
37  disabled?: boolean;
38  className?: string;
39  onSelect?: (value: string) => void;
40  selectedValue?: string | string[];
41  multiple?: boolean;
42}
43 
44interface ComboboxLabelProps {
45  children: React.ReactNode;
46  className?: string;
47}
48 
49interface ComboboxGroupProps {
50  children: React.ReactNode;
51  className?: string;
52}
53 
54interface ComboboxSeparatorProps {
55  className?: string;
56}
57 
58const ComboboxSearchInput = ({
59  placeholder = "Search...",
60  value,
61  onChangeText,
62}: {
63  placeholder?: string;
64  value: string;
65  onChangeText: (text: string) => void;
66}) => {
67  const inputRef = React.useRef<TextInput>(null);
68 
69  const handleClear = () => {
70    onChangeText("");
71    inputRef.current?.clear();
72  };
73 
74  return (
75    <View className="px-4 py-2">
76      <View className="relative mb-2">
77        <Input
78          ref={inputRef}
79          placeholder={placeholder}
80          placeholderTextColor="#9CA3AF"
81          className="pl-10"
82          value={value}
83          onChangeText={onChangeText}
84          autoCapitalize="none"
85          autoCorrect={false}
86          returnKeyType="search"
87        />
88        <View className="absolute left-3 top-1/2 transform -translate-y-1/2">
89          <Ionicons name="search" size={20} color="#9CA3AF" />
90        </View>
91        {value.length > 0 && (
92          <View className="absolute right-3 top-1/2 transform -translate-y-1/2">
93            <Pressable onPress={handleClear} hitSlop={8}>
94              <Ionicons name="close-circle" size={18} color="#9CA3AF" />
95            </Pressable>
96          </View>
97        )}
98      </View>
99    </View>
100  );
101};
102 
103// … truncated