sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Evaluate HeaderButton - TypeScript (#3925) 

* update: `HeaderButton` components

* update: types

* fix types

* fix lint and update snapshot

Co-authored-by: GleidsonDaniel <gleidson10daniel@hotmail.com>
This commit is contained in:
Gerzon Z 2022-03-24 15:55:01 -04:00 committed by GitHub
parent 891ada8942
commit f9064bf5af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/containers/HeaderButton/Common.tsx
View File

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

4
app/containers/HeaderButton/HeaderButtonContainer.tsx
View File

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

34
app/containers/HeaderButton/HeaderButtonItem.tsx
View File

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

2
app/containers/HeaderButton/HeaderButtonItemBadge.tsx
View File

@ -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; export default Badge;

2
storybook/stories/__snapshots__/HeaderButtons.storyshot
View File

File diff suppressed because one or more lines are too long