acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

rm forwardRef

Browse Source
This commit is contained in:
Samuel Newman
2025-08-06 17:13:10 +03:00
parent 0bd1053798
commit 48c53603d8
1 changed files with 73 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/forms/SearchInput.tsx
+73 -68
View File
@@ -1,4 +1,3 @@
import {forwardRef} from 'react'
import { import {
type NativeSyntheticEvent, type NativeSyntheticEvent,
type TextInput, type TextInput,
@@ -17,6 +16,7 @@ import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
type SearchInputProps = Omit<TextField.InputProps, 'label'> & { type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
ref?: React.Ref<TextInput>
label?: TextField.InputProps['label'] label?: TextField.InputProps['label']
/** /**
* Called when the user presses the (X) button * Called when the user presses the (X) button
@@ -28,74 +28,79 @@ type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
onEscape?: () => void onEscape?: () => void
} }
export const SearchInput = forwardRef<TextInput, SearchInputProps>( export function SearchInput({
function SearchInput({value, label, onClearText, onEscape, ...rest}, ref) { ref,
const t = useTheme() value,
const {_} = useLingui() label,
const showClear = value && value.length > 0 onClearText,
onEscape,
...rest
}: SearchInputProps) {
const t = useTheme()
const {_} = useLingui()
const showClear = value && value.length > 0
const onKeyPress = ( const onKeyPress = (
evt: NativeSyntheticEvent<TextInputKeyPressEventData>, evt: NativeSyntheticEvent<TextInputKeyPressEventData>,
) => { ) => {
if (evt.nativeEvent.key === 'Escape') { if (evt.nativeEvent.key === 'Escape') {
onEscape?.() onEscape?.()
}
} }
}
return ( return (
<View style={[a.w_full, a.relative]}> <View style={[a.w_full, a.relative]}>
<TextField.Root> <TextField.Root>
<TextField.Icon icon={MagnifyingGlassIcon} /> <TextField.Icon icon={MagnifyingGlassIcon} />
<TextField.Input <TextField.Input
inputRef={ref} inputRef={ref}
label={label || _(msg`Search`)} label={label || _(msg`Search`)}
value={value} value={value}
placeholder={_(msg`Search`)} placeholder={_(msg`Search`)}
returnKeyType="search" returnKeyType="search"
keyboardAppearance={t.scheme} keyboardAppearance={t.scheme}
selectTextOnFocus={isNative} selectTextOnFocus={isNative}
autoFocus={false} autoFocus={false}
accessibilityRole="search" accessibilityRole="search"
autoCorrect={false} autoCorrect={false}
autoComplete="off" autoComplete="off"
autoCapitalize="none" autoCapitalize="none"
onKeyPress={onKeyPress} onKeyPress={onKeyPress}
style={[ style={[
showClear showClear
? { ? {
paddingRight: 24, paddingRight: 24,
} }
: {}, : {},
]} ]}
{...rest} {...rest}
/> />
</TextField.Root> </TextField.Root>
{showClear && ( {showClear && (
<View <View
style={[ style={[
a.absolute, a.absolute,
a.z_20, a.z_20,
a.my_auto, a.my_auto,
a.inset_0, a.inset_0,
a.justify_center, a.justify_center,
a.pr_sm, a.pr_sm,
{left: 'auto'}, {left: 'auto'},
]}> ]}>
<Button <Button
testID="searchTextInputClearBtn" testID="searchTextInputClearBtn"
onPress={onClearText} onPress={onClearText}
label={_(msg`Clear search query`)} label={_(msg`Clear search query`)}
hitSlop={HITSLOP_10} hitSlop={HITSLOP_10}
size="tiny" size="tiny"
shape="round" shape="round"
variant="ghost" variant="ghost"
color="secondary"> color="secondary">
<ButtonIcon icon={X} size="xs" /> <ButtonIcon icon={X} size="xs" />
</Button> </Button>
</View> </View>
)} )}
</View> </View>
) )
}, }
)