Chore: Evaluate HeaderButton - TypeScript (#3925)

* update: `HeaderButton` components

* update: types

* fix types

* fix lint and update snapshot

Co-authored-by: GleidsonDaniel <gleidson10daniel@hotmail.com>

app/containers/HeaderButton/Common.tsx

@@ -6,20 +6,22 @@ import Container from './HeaderButtonContainer';
 import Item from './HeaderButtonItem';
 
 interface IHeaderButtonCommon {
-	navigation: any;
+	navigation?: any; // TODO: Evaluate proper type
-	onPress?(): void;
+	onPress?: () => void;
 	testID?: string;
 }
 
 // Left
-export const Drawer = React.memo(({ navigation, testID, ...props }: Partial<IHeaderButtonCommon>) => (
+export const Drawer = React.memo(
+	({ navigation, testID, onPress = navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => (
 		<Container left>
-		<Item iconName='hamburguer' onPress={() => navigation.toggleDrawer()} testID={testID} {...props} />
+			<Item iconName='hamburguer' onPress={onPress} testID={testID} {...props} />
 		</Container>
-));
+	)
+);
 
 export const CloseModal = React.memo(
-	({ navigation, testID, onPress = () => navigation.pop(), ...props }: IHeaderButtonCommon) => (
+	({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => (
 		<Container left>
 			<Item iconName='close' onPress={onPress} testID={testID} {...props} />
 		</Container>
@@ -29,9 +31,9 @@ export const CloseModal = React.memo(
 export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container left>
 		{isIOS ? (
-			<Item title={I18n.t('Cancel')} onPress={onPress!} testID={testID} />
+			<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
 		) : (
-			<Item iconName='close' onPress={onPress!} testID={testID} />
+			<Item iconName='close' onPress={onPress} testID={testID} />
 		)}
 	</Container>
 ));
@@ -39,22 +41,22 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButto
 // Right
 export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='kebab' onPress={onPress!} testID={testID} />
+		<Item iconName='kebab' onPress={onPress} testID={testID} />
 	</Container>
 ));
 
-export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
+export const Download = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
 	<Container>
-		<Item iconName='download' onPress={onPress!} testID={testID} {...props} />
+		<Item iconName='download' onPress={onPress} testID={testID} {...props} />
 	</Container>
 ));
 
-export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
+export const Preferences = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
 	<Container>
-		<Item iconName='settings' onPress={onPress!} testID={testID} {...props} />
+		<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
 	</Container>
 ));
 
-export const Legal = React.memo(({ navigation, testID }: Partial<IHeaderButtonCommon>) => (
+export const Legal = React.memo(({ navigation, testID, onPress = navigation?.navigate('LegalView') }: IHeaderButtonCommon) => (
-	<More onPress={() => navigation.navigate('LegalView')} testID={testID} />
+	<More onPress={onPress} testID={testID} />
 ));

app/containers/HeaderButton/HeaderButtonContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 interface IHeaderButtonContainer {
-	children: React.ReactNode;
+	children?: React.ReactElement | (React.ReactElement | null)[] | null;
 	left?: boolean;
 }
 
@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Container = ({ children, left = false }: IHeaderButtonContainer) => (
+const Container = ({ children, left = false }: IHeaderButtonContainer): React.ReactElement => (
 	<View style={[styles.container, left ? styles.left : styles.right]}>{children}</View>
 );
 

app/containers/HeaderButton/HeaderButtonItem.tsx

@@ -3,16 +3,15 @@ import { Platform, StyleSheet, Text } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import { CustomIcon } from '../../lib/Icons';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
 interface IHeaderButtonItem {
 	title?: string;
 	iconName?: string;
-	onPress: <T>(arg: T) => void;
+	onPress?: <T>(arg: T) => void;
 	testID?: string;
-	theme?: string;
 	badge?(): void;
 }
 
@@ -40,19 +39,22 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonItem) => (
+const Item = ({ title, iconName, onPress, testID, badge }: IHeaderButtonItem): React.ReactElement => {
+	const { theme } = useTheme();
+	return (
 		<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
 			<>
 				{iconName ? (
-				<CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
+					<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
 				) : (
-				<Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
+					<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
 				)}
 				{badge ? badge() : null}
 			</>
 		</Touchable>
 	);
+};
 
 Item.displayName = 'HeaderButton.Item';
 
-export default withTheme(Item);
+export default Item;

app/containers/HeaderButton/HeaderButtonItemBadge.tsx

@@ -15,6 +15,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const Badge = ({ ...props }) => <UnreadBadge {...props} style={styles.badgeContainer} small />;
+export const Badge = ({ ...props }): React.ReactElement => <UnreadBadge {...props} style={styles.badgeContainer} small />;
 
 export default Badge;