56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { View, TextInput, TouchableOpacity, ViewStyle } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './searchInput.styles';
|
|
import { SearchInputProps } from './searchInput.props';
|
|
|
|
export const SearchInput: React.FC<SearchInputProps> = ({
|
|
value,
|
|
onChangeText,
|
|
placeholder = 'Search...',
|
|
onClear,
|
|
style,
|
|
...rest
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const handleClear = () => {
|
|
onChangeText('');
|
|
if (onClear) {
|
|
onClear();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, style as ViewStyle]}>
|
|
<Icon
|
|
name="search-outline"
|
|
size={20}
|
|
color={colors.textSecondary}
|
|
style={styles.searchIcon}
|
|
/>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.textMuted}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
returnKeyType="search"
|
|
{...rest}
|
|
/>
|
|
{value.length > 0 && (
|
|
<TouchableOpacity
|
|
style={styles.clearButton}
|
|
onPress={handleClear}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Icon name="close-circle" size={20} color={colors.textMuted} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|