Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
2.7 kB · 86 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687import React from 'react'import {type TextInput, View} from 'react-native'import {msg} from '@lingui/macro'import {useLingui} from '@lingui/react'
import {HITSLOP_10} from '#/lib/constants'import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'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'> & { label?: TextField.InputProps['label'] /** * Called when the user presses the (X) button */ onClearText?: () => void}
export const SearchInput = React.forwardRef<TextInput, SearchInputProps>( function SearchInput({value, label, onClearText, ...rest}, ref) { const t = useTheme() const {_} = useLingui() const showClear = value && value.length > 0
const enableSquareButtons = useEnableSquareButtons()
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" style={[ showClear ? { paddingRight: 24, } : {}, ]} {...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={enableSquareButtons ? 'square' : 'round'} variant="ghost" color="secondary"> <ButtonIcon icon={X} size="xs" /> </Button> </View> )} </View> ) },)