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