From 2ff48471d66cdfdf3177fe9a3a1b6f2584b6ffb1 Mon Sep 17 00:00:00 2001
From: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
Date: Mon, 21 Mar 2022 16:23:59 -0300
Subject: [PATCH] chore: Evaluate SearchBox (#3909)

---
 app/containers/SearchBox.tsx | 103 ++++++++++++++---------------------
 1 file changed, 42 insertions(+), 61 deletions(-)

diff --git a/app/containers/SearchBox.tsx b/app/containers/SearchBox.tsx
index d30923e8..463413b7 100644
--- a/app/containers/SearchBox.tsx
+++ b/app/containers/SearchBox.tsx
@@ -1,22 +1,14 @@
 import React from 'react';
-import {
-	NativeSyntheticEvent,
-	StyleSheet,
-	TextInput as RNTextInput,
-	Text,
-	TextInputFocusEventData,
-	TextInputProps,
-	View
-} from 'react-native';
+import { StyleSheet, Text, TextInput as RNTextInput, 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 { withTheme } from '../theme';
-import { themes } from '../constants/colors';
+import TextInput from '../presentation/TextInput';
+import { useTheme } from '../theme';
 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) => (
-	<Touchable onPress={onCancelPress} style={styles.cancel}>
-		<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
-	</Touchable>
-);
+const CancelButton = ({ onCancelPress }: { onCancelPress?: Function }) => {
+	const { theme } = useTheme();
+	return (
+		<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}
-			/>
+const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox): React.ReactElement => {
+	const { theme } = useTheme();
+	return (
+		<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}
+					underlineColorAndroid='transparent'
+					theme={theme}
+					{...props}
+				/>
+			</View>
+			{hasCancel ? <CancelButton onCancelPress={onCancelPress} /> : null}
 		</View>
-		{hasCancel ? CancelButton(onCancelPress!, theme!) : null}
-	</View>
-);
+	);
+};
 
-export default withTheme(SearchBox);
+export default SearchBox;