Samuel Newman
101 lines
2.6 KiB
TypeScript
101 lines
2.6 KiB
TypeScript
import {
|
|
type NativeSyntheticEvent,
|
|
type TextInput,
|
|
type TextInputKeyPressEventData,
|
|
View,
|
|
} from 'react-native'
|
|
import {msg} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {HITSLOP_10} from '#/lib/constants'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, ButtonIcon} from '#/components/Button'
|
|
import * as TextField from '#/components/forms/TextField'
|
|
import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass'
|
|
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
|
|
import {IS_NATIVE} from '#/env'
|
|
|
|
type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
|
|
ref?: React.Ref<TextInput>
|
|
label?: TextField.InputProps['label']
|
|
/**
|
|
* Called when the user presses the (X) button
|
|
*/
|
|
onClearText?: () => void
|
|
/**
|
|
* Called when the user presses the Escape key
|
|
*/
|
|
onEscape?: () => void
|
|
}
|
|
|
|
export function SearchInput({
|
|
ref,
|
|
value,
|
|
label,
|
|
onClearText,
|
|
onEscape,
|
|
...rest
|
|
}: SearchInputProps) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const showClear = value && value.length > 0
|
|
|
|
const onKeyPress = (
|
|
evt: NativeSyntheticEvent<TextInputKeyPressEventData>,
|
|
) => {
|
|
if (evt.nativeEvent.key === 'Escape') {
|
|
onEscape?.()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={[a.w_full, a.relative]}>
|
|
<TextField.Root>
|
|
<TextField.Icon icon={MagnifyingGlassIcon} />
|
|
<TextField.Input
|
|
inputRef={ref}
|
|
label={label || _(msg`Search`)}
|
|
value={value}
|
|
placeholder={_(msg`Search`)}
|
|
returnKeyType="search"
|
|
keyboardAppearance={t.scheme}
|
|
selectTextOnFocus={IS_NATIVE}
|
|
autoFocus={false}
|
|
accessibilityRole="search"
|
|
autoCorrect={false}
|
|
autoComplete="off"
|
|
autoCapitalize="none"
|
|
onKeyPress={onKeyPress}
|
|
style={[!!showClear && a.pr_2xl]}
|
|
{...rest}
|
|
/>
|
|
</TextField.Root>
|
|
|
|
{showClear && (
|
|
<View
|
|
style={[
|
|
a.absolute,
|
|
a.z_20,
|
|
a.my_auto,
|
|
a.inset_0,
|
|
a.justify_center,
|
|
a.pr_sm,
|
|
{left: 'auto'},
|
|
]}>
|
|
<Button
|
|
testID="searchTextInputClearBtn"
|
|
onPress={onClearText}
|
|
label={_(msg`Clear search query`)}
|
|
hitSlop={HITSLOP_10}
|
|
size="tiny"
|
|
shape="round"
|
|
variant="ghost"
|
|
color="secondary">
|
|
<ButtonIcon icon={X} size="xs" />
|
|
</Button>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|