1import type { RefObject } from "react";
2import { Pressable, TextInput, type TextInputInstance, View } from "react-native";
3
4import { SymbolView } from "./AppSymbol";
5import { useAndroidControlSizing } from "./useAndroidControlSizing";
6
7export function MaterialSearchField({
8 inputRef,
9 accessibilityLabel,
10 clearAccessibilityLabel,
11 placeholder,
12 value,
13 onChangeText,
14}: {
15 readonly inputRef: RefObject<TextInputInstance | null>;
16 readonly accessibilityLabel: string;
17 readonly clearAccessibilityLabel: string;
18 readonly placeholder: string;
19 readonly value: string;
20 readonly onChangeText: (value: string) => void;
21}) {
22 const { scale, mediumIconSize } = useAndroidControlSizing();
23 return (
24 <View
25 className="min-w-0 flex-1 flex-row items-center rounded-full border border-input-border bg-input"
26 style={{
27 minHeight: Math.max(48, 42 * scale),
28 gap: 7 * scale,
29 paddingHorizontal: 10.5 * scale,
30 }}
31 >
32 <SymbolView
33 name="magnifyingglass"
34 size={mediumIconSize}
35 tintColorClassName="accent-foreground-muted"
36 />
37 <TextInput
38 ref={inputRef}
39 accessibilityLabel={accessibilityLabel}
40 autoFocus
41 autoCapitalize="none"
42 autoCorrect={false}
43 returnKeyType="search"
44 placeholder={placeholder}
45 placeholderTextColorClassName="accent-placeholder"
46 selectionColorClassName="accent-focus/32"
47 cursorColorClassName="accent-focus"
48 selectionHandleColorClassName="accent-focus"
49 className="min-w-0 flex-1 font-sans text-base text-foreground"
50 style={{ paddingVertical: 7 * scale }}
51 value={value}
52 onChangeText={onChangeText}
53 />
54 {value.length > 0 ? (
55 <Pressable
56 accessibilityLabel={clearAccessibilityLabel}
57 accessibilityRole="button"
58 hitSlop={10}
59 onPress={() => {
60 onChangeText("");
61 inputRef.current?.focus();
62 }}
63 >
64 <SymbolView
65 name="xmark.circle.fill"
66 size={mediumIconSize}
67 tintColorClassName="accent-foreground-muted"
68 />
69 </Pressable>
70 ) : null}
71 </View>
72 );
73}