diff options
Diffstat (limited to 'src/view/com/util/forms/SearchInput.tsx')
-rw-r--r-- | src/view/com/util/forms/SearchInput.tsx | 124 |
1 files changed, 0 insertions, 124 deletions
diff --git a/src/view/com/util/forms/SearchInput.tsx b/src/view/com/util/forms/SearchInput.tsx deleted file mode 100644 index 5a21d8fdd..000000000 --- a/src/view/com/util/forms/SearchInput.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react' -import { - StyleProp, - StyleSheet, - TextInput, - TouchableOpacity, - View, - ViewStyle, -} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {HITSLOP_10} from 'lib/constants' -import {MagnifyingGlassIcon} from 'lib/icons' -import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' - -interface Props { - query: string - setIsInputFocused?: (v: boolean) => void - onChangeQuery: (v: string) => void - onPressCancelSearch: () => void - onSubmitQuery: () => void - style?: StyleProp<ViewStyle> -} - -export interface SearchInputRef { - focus?: () => void -} - -export const SearchInput = React.forwardRef<SearchInputRef, Props>( - function SearchInput( - { - query, - setIsInputFocused, - onChangeQuery, - onPressCancelSearch, - onSubmitQuery, - style, - }, - ref, - ) { - const theme = useTheme() - const pal = usePalette('default') - const {_} = useLingui() - const textInput = React.useRef<TextInput>(null) - - const onPressCancelSearchInner = React.useCallback(() => { - onPressCancelSearch() - textInput.current?.blur() - }, [onPressCancelSearch, textInput]) - - React.useImperativeHandle(ref, () => ({ - focus: () => textInput.current?.focus(), - blur: () => textInput.current?.blur(), - })) - - return ( - <View style={[pal.viewLight, styles.container, style]}> - <MagnifyingGlassIcon style={[pal.icon, styles.icon]} size={21} /> - <TextInput - testID="searchTextInput" - ref={textInput} - placeholder={_(msg`Search`)} - placeholderTextColor={pal.colors.textLight} - selectTextOnFocus - returnKeyType="search" - value={query} - style={[pal.text, styles.input]} - keyboardAppearance={theme.colorScheme} - onFocus={() => setIsInputFocused?.(true)} - onBlur={() => setIsInputFocused?.(false)} - onChangeText={onChangeQuery} - onSubmitEditing={onSubmitQuery} - accessibilityRole="search" - accessibilityLabel={_(msg`Search`)} - accessibilityHint="" - autoCorrect={false} - autoCapitalize="none" - /> - {query ? ( - <TouchableOpacity - onPress={onPressCancelSearchInner} - accessibilityRole="button" - accessibilityLabel={_(msg`Clear search query`)} - accessibilityHint="" - hitSlop={HITSLOP_10}> - <FontAwesomeIcon - icon="xmark" - size={16} - style={pal.textLight as FontAwesomeIconStyle} - /> - </TouchableOpacity> - ) : undefined} - </View> - ) - }, -) - -const styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - borderRadius: 30, - paddingHorizontal: 12, - paddingVertical: 8, - }, - icon: { - marginRight: 6, - alignSelf: 'center', - }, - input: { - flex: 1, - fontSize: 17, - minWidth: 0, // overflow mitigation for firefox - }, - cancelBtn: { - paddingLeft: 10, - }, -}) |