this repo has no description
1import {forwardRef} from 'react'
2import {type TextInput, View} from 'react-native'
3import {useLingui} from '@lingui/react/macro'
4
5import {HITSLOP_10} from '#/lib/constants'
6import {atoms as a, useTheme} from '#/alf'
7import {Button, ButtonIcon} from '#/components/Button'
8import * as TextField from '#/components/forms/TextField'
9import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass'
10import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
11import {IS_NATIVE} from '#/env'
12
13type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
14 label?: TextField.InputProps['label']
15 /**
16 * Called when the user presses the (X) button
17 */
18 onClearText?: () => void
19}
20
21export const SearchInput = forwardRef<TextInput, SearchInputProps>(
22 function SearchInput({value, label, onClearText, ...rest}, ref) {
23 const t = useTheme()
24 const {t: l} = useLingui()
25 const showClear = value && value.length > 0
26
27 return (
28 <View style={[a.w_full, a.relative]}>
29 <TextField.Root>
30 <TextField.Icon icon={MagnifyingGlassIcon} />
31 <TextField.Input
32 inputRef={ref}
33 label={label || l`Search`}
34 value={value}
35 placeholder={l`Search`}
36 returnKeyType="search"
37 keyboardAppearance={t.scheme}
38 selectTextOnFocus={IS_NATIVE}
39 autoFocus={false}
40 accessibilityRole="search"
41 autoCorrect={false}
42 autoComplete="off"
43 autoCapitalize="none"
44 style={[
45 showClear
46 ? {
47 paddingRight: 24,
48 }
49 : {},
50 ]}
51 {...rest}
52 />
53 </TextField.Root>
54
55 {showClear && (
56 <View
57 style={[
58 a.absolute,
59 a.z_20,
60 a.my_auto,
61 a.inset_0,
62 a.justify_center,
63 a.pr_sm,
64 {left: 'auto'},
65 ]}>
66 <Button
67 testID="searchTextInputClearBtn"
68 onPress={onClearText}
69 label={l`Clear search query`}
70 hitSlop={HITSLOP_10}
71 size="tiny"
72 shape="round"
73 variant="ghost"
74 color="secondary">
75 <ButtonIcon icon={X} size="xs" />
76 </Button>
77 </View>
78 )}
79 </View>
80 )
81 },
82)