import React from 'react'; import { NativeSyntheticEvent, StyleSheet, Text, TextInputFocusEventData, TextInputProps, View } from 'react-native'; import Touchable from 'react-native-platform-touchable'; import TextInput from '../presentation/TextInput'; import I18n from '../i18n'; import { CustomIcon } from '../lib/Icons'; import sharedStyles from '../views/Styles'; import { withTheme } from '../theme'; import { themes } from '../constants/colors'; import { isIOS } from '../utils/deviceInfo'; const styles = StyleSheet.create({ container: { flexDirection: 'row', alignItems: 'center', flex: 1 }, searchBox: { alignItems: 'center', borderRadius: 10, flexDirection: 'row', fontSize: 17, height: 36, margin: 16, marginVertical: 10, paddingHorizontal: 10, flex: 1 }, input: { flex: 1, fontSize: 17, marginLeft: 8, paddingTop: 0, paddingBottom: 0, ...sharedStyles.textRegular }, cancel: { marginRight: 15 }, cancelText: { ...sharedStyles.textRegular, fontSize: 17 } }); interface ISearchBox { value?: string; onChangeText: TextInputProps['onChangeText']; onSubmitEditing?: () => void; hasCancel?: boolean; onCancelPress?: Function; theme?: string; inputRef?: React.Ref<unknown>; testID?: string; onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void; } const CancelButton = (onCancelPress: Function, theme: string) => ( <Touchable onPress={onCancelPress} style={styles.cancel}> <Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text> </Touchable> ); const SearchBox = ({ onChangeText, onSubmitEditing, testID, hasCancel, onCancelPress, inputRef, theme, ...props }: ISearchBox) => ( <View style={[ styles.container, { backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground } ]}> <View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}> <CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} /> <TextInput ref={inputRef} autoCapitalize='none' autoCorrect={false} blurOnSubmit clearButtonMode='while-editing' placeholder={I18n.t('Search')} returnKeyType='search' style={styles.input} testID={testID} underlineColorAndroid='transparent' onChangeText={onChangeText} onSubmitEditing={onSubmitEditing} theme={theme!} {...props} /> </View> {hasCancel ? CancelButton(onCancelPress!, theme!) : null} </View> ); export default withTheme(SearchBox);