chore: Evaluate SearchBox (#3909)

app/containers/SearchBox.tsx

@@ -1,22 +1,14 @@
 import React from 'react';
-import {
+import { StyleSheet, Text, TextInput as RNTextInput, TextInputProps, View } from 'react-native';
-	NativeSyntheticEvent,
-	StyleSheet,
-	TextInput as RNTextInput,
-	Text,
-	TextInputFocusEventData,
-	TextInputProps,
-	View
-} from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
-import TextInput from '../presentation/TextInput';
+import { themes } from '../constants/colors';
 import I18n from '../i18n';
 import { CustomIcon } from '../lib/Icons';
-import sharedStyles from '../views/Styles';
+import TextInput from '../presentation/TextInput';
-import { withTheme } from '../theme';
+import { useTheme } from '../theme';
-import { themes } from '../constants/colors';
 import { isIOS } from '../utils/deviceInfo';
+import sharedStyles from '../views/Styles';
 
 const styles = StyleSheet.create({
 	container: {
@@ -52,60 +44,49 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface ISearchBox {
+interface ISearchBox extends TextInputProps {
 	value?: string;
-	onChangeText: TextInputProps['onChangeText'];
-	onSubmitEditing?: () => void;
 	hasCancel?: boolean;
 	onCancelPress?: Function;
-	theme?: string;
 	inputRef?: React.Ref<RNTextInput>;
-	testID?: string;
-	onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 }
 
-const CancelButton = (onCancelPress: Function, theme: string) => (
+const CancelButton = ({ onCancelPress }: { onCancelPress?: Function }) => {
-	<Touchable onPress={onCancelPress} style={styles.cancel}>
+	const { theme } = useTheme();
-		<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
+	return (
-	</Touchable>
+		<Touchable onPress={onCancelPress} style={styles.cancel}>
-);
+			<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
+		</Touchable>
+	);
+};
 
-const SearchBox = ({
+const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox): React.ReactElement => {
-	onChangeText,
+	const { theme } = useTheme();
-	onSubmitEditing,
+	return (
-	testID,
+		<View
-	hasCancel,
+			style={[
-	onCancelPress,
+				styles.container,
-	inputRef,
+				{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
-	theme,
+			]}>
-	...props
+			<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
-}: ISearchBox) => (
+				<CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
-	<View
+				<TextInput
-		style={[
+					ref={inputRef}
-			styles.container,
+					autoCapitalize='none'
-			{ backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground }
+					autoCorrect={false}
-		]}>
+					blurOnSubmit
-		<View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}>
+					clearButtonMode='while-editing'
-			<CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} />
+					placeholder={I18n.t('Search')}
-			<TextInput
+					returnKeyType='search'
-				ref={inputRef}
+					style={styles.input}
-				autoCapitalize='none'
+					underlineColorAndroid='transparent'
-				autoCorrect={false}
+					theme={theme}
-				blurOnSubmit
+					{...props}
-				clearButtonMode='while-editing'
+				/>
-				placeholder={I18n.t('Search')}
+			</View>
-				returnKeyType='search'
+			{hasCancel ? <CancelButton onCancelPress={onCancelPress} /> : null}
-				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);
+export default SearchBox;