Chore: Evaluate HeaderButton - TypeScript (#3925)

* update: `HeaderButton` components * update: types * fix types * fix lint and update snapshot Co-authored-by: GleidsonDaniel <gleidson10daniel@hotmail.com>
RocketChat · Mar 24, 2022 · f9064bf · f9064bf
1 parent 891ada8
commit f9064bf
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 37 deletions.
diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx
@@ -6,20 +6,22 @@ import Container from './HeaderButtonContainer';
 import Item from './HeaderButtonItem';
 
 interface IHeaderButtonCommon {
-	navigation: any;
-	onPress?(): void;
+	navigation?: any; // TODO: Evaluate proper type
+	onPress?: () => void;
 	testID?: string;
 }
 
 // Left
-export const Drawer = React.memo(({ navigation, testID, ...props }: Partial<IHeaderButtonCommon>) => (
-	<Container left>
-		<Item iconName='hamburguer' onPress={() => navigation.toggleDrawer()} testID={testID} {...props} />
-	</Container>
-));
+export const Drawer = React.memo(
+	({ navigation, testID, onPress = navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => (
+		<Container left>
+			<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,32 +31,32 @@ 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>
 ));
 
 // 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>) => (
-	<More onPress={() => navigation.navigate('LegalView')} testID={testID} />
+export const Legal = React.memo(({ navigation, testID, onPress = navigation?.navigate('LegalView') }: IHeaderButtonCommon) => (
+	<More onPress={onPress} testID={testID} />
 ));
diff --git a/app/containers/HeaderButton/HeaderButtonContainer.tsx b/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>
 );
 

diff --git a/app/containers/HeaderButton/HeaderButtonItem.tsx b/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) => (
-	<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
-		<>
-			{iconName ? (
-				<CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
-			) : (
-				<Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
-			)}
-			{badge ? badge() : null}
-		</>
-	</Touchable>
-);
+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} />
+				) : (
+					<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;
diff --git a/app/containers/HeaderButton/HeaderButtonItemBadge.tsx b/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;