verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Migrate E2EHowItWorksView to hooks (#4416) 

* remove navigation obligatory

* remove the obliglatory to use theme with the withTheme HOC

* migrate E2EHowItWorksView to hooks

* remove navigate options

* adds non-null assertion because theme is injected
This commit is contained in:
Gleidson Daniel Silva 2022-08-11 11:50:03 -03:00 committed by GitHub
parent a101d319e5
commit 92111afa6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { StackActions, useNavigation } from '@react-navigation/native';
import { isIOS } from '../../lib/methods/helpers';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { isIOS } from '../../lib/methods/helpers';
import Container from './HeaderButtonContainer'; import Container from './HeaderButtonContainer';
import Item, { IHeaderButtonItem } from './HeaderButtonItem'; import Item, { IHeaderButtonItem } from './HeaderButtonItem';
@ -18,13 +19,22 @@ export const Drawer = React.memo(
) )
); );
export const CloseModal = React.memo( export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => ( const { dispatch } = useNavigation();
return (
<Container left> <Container left>
<Item iconName='close' onPress={onPress} testID={testID} {...props} /> <Item
iconName='close'
onPress={arg => {
if (onPress) return onPress(arg);
dispatch(StackActions.pop());
}}
testID={testID}
{...props}
/>
</Container> </Container>
) );
); });
export const CancelModal = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => ( export const CancelModal = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
<Container left> <Container left>

28
app/containers/markdown/index.tsx
View File

@ -22,14 +22,14 @@ import { formatText } from './formatText';
import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces'; import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
import { TGetCustomEmoji } from '../../definitions/IEmoji'; import { TGetCustomEmoji } from '../../definitions/IEmoji';
import { formatHyperlink } from './formatHyperlink'; import { formatHyperlink } from './formatHyperlink';
import { TSupportedThemes } from '../../theme'; import { TSupportedThemes, withTheme } from '../../theme';
import { themes } from '../../lib/constants'; import { themes } from '../../lib/constants';
export { default as MarkdownPreview } from './Preview'; export { default as MarkdownPreview } from './Preview';
interface IMarkdownProps { interface IMarkdownProps {
msg?: string | null; msg?: string | null;
theme: TSupportedThemes; theme?: TSupportedThemes;
md?: MarkdownAST; md?: MarkdownAST;
mentions?: IUserMention[]; mentions?: IUserMention[];
getCustomEmoji?: TGetCustomEmoji; getCustomEmoji?: TGetCustomEmoji;
@ -158,9 +158,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
style={[ style={[
{ {
...styles.codeInline, ...styles.codeInline,
color: themes[theme].bodyText, color: themes[theme!].bodyText,
backgroundColor: themes[theme].bannerBackground, backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme].bannerBackground borderColor: themes[theme!].bannerBackground
}, },
...style ...style
]} ]}
@ -177,9 +177,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
style={[ style={[
{ {
...styles.codeBlock, ...styles.codeBlock,
color: themes[theme].bodyText, color: themes[theme!].bodyText,
backgroundColor: themes[theme].bannerBackground, backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme].bannerBackground borderColor: themes[theme!].bannerBackground
}, },
...style ...style
]} ]}
@ -200,7 +200,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
return null; return null;
} }
return ( return (
<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}> <Text style={[styles.text, style, { color: themes[theme!].bodyText }]} numberOfLines={numberOfLines}>
{children} {children}
</Text> </Text>
); );
@ -209,7 +209,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
renderLink = ({ children, href }: any) => { renderLink = ({ children, href }: any) => {
const { theme, onLinkPress } = this.props; const { theme, onLinkPress } = this.props;
return ( return (
<MarkdownLink link={href} theme={theme} onLinkPress={onLinkPress}> <MarkdownLink link={href} theme={theme!} onLinkPress={onLinkPress}>
{children} {children}
</MarkdownLink> </MarkdownLink>
); );
@ -261,7 +261,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
// @ts-ignore // @ts-ignore
const textStyle = styles[`heading${level}Text`]; const textStyle = styles[`heading${level}Text`];
return ( return (
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}> <Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].bodyText }]}>
{children} {children}
</Text> </Text>
); );
@ -289,13 +289,13 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
renderBlockQuote = ({ children }: { children: JSX.Element }) => { renderBlockQuote = ({ children }: { children: JSX.Element }) => {
const { theme } = this.props; const { theme } = this.props;
return <MarkdownBlockQuote theme={theme}>{children}</MarkdownBlockQuote>; return <MarkdownBlockQuote theme={theme!}>{children}</MarkdownBlockQuote>;
}; };
renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => { renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<MarkdownTable numColumns={numColumns} theme={theme}> <MarkdownTable numColumns={numColumns} theme={theme!}>
{children} {children}
</MarkdownTable> </MarkdownTable>
); );
@ -354,4 +354,4 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
} }
} }
export default Markdown; export default withTheme(Markdown);

6
app/stacks/InsideStack.tsx
View File

@ -282,11 +282,7 @@ const E2ESaveYourPasswordStackNavigator = () => {
component={E2ESaveYourPasswordView} component={E2ESaveYourPasswordView}
options={E2ESaveYourPasswordView.navigationOptions} options={E2ESaveYourPasswordView.navigationOptions}
/> />
<E2ESaveYourPasswordStack.Screen <E2ESaveYourPasswordStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
name='E2EHowItWorksView'
component={E2EHowItWorksView}
options={E2EHowItWorksView.navigationOptions}
/>
</E2ESaveYourPasswordStack.Navigator> </E2ESaveYourPasswordStack.Navigator>
); );
}; };

2
app/stacks/MasterDetailStack/index.tsx
View File

@ -200,7 +200,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
component={E2ESaveYourPasswordView} component={E2ESaveYourPasswordView}
options={E2ESaveYourPasswordView.navigationOptions} options={E2ESaveYourPasswordView.navigationOptions}
/> />
<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} options={E2EHowItWorksView.navigationOptions} /> <ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
<ModalStack.Screen <ModalStack.Screen
name='E2EEnterYourPasswordView' name='E2EEnterYourPasswordView'
component={E2EEnterYourPasswordView} component={E2EEnterYourPasswordView}

49
app/views/E2EHowItWorksView.tsx
View File

@ -1,20 +1,18 @@
import React from 'react'; import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native'; import { StyleSheet } from 'react-native';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import SafeAreaView from '../containers/SafeAreaView';
import { themes } from '../lib/constants';
import * as HeaderButton from '../containers/HeaderButton'; import * as HeaderButton from '../containers/HeaderButton';
import Markdown from '../containers/markdown'; import Markdown from '../containers/markdown';
import { withTheme } from '../theme'; import SafeAreaView from '../containers/SafeAreaView';
import I18n from '../i18n'; import I18n from '../i18n';
import { E2ESaveYourPasswordStackParamList } from '../stacks/types'; import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
import { IBaseScreen } from '../definitions'; import { useTheme } from '../theme';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
padding: 44, padding: 16
paddingTop: 32
}, },
info: { info: {
fontSize: 14, fontSize: 14,
@ -22,31 +20,28 @@ const styles = StyleSheet.create({
} }
}); });
type TE2EHowItWorksViewProps = IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>; const E2EHowItWorksView = (): React.ReactElement => {
const { setOptions } = useNavigation();
const { colors } = useTheme();
const { params } = useRoute<RouteProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>>();
class E2EHowItWorksView extends React.Component<TE2EHowItWorksViewProps, any> { useEffect(() => {
static navigationOptions = ({ route, navigation }: Pick<TE2EHowItWorksViewProps, 'navigation' | 'route'>) => { setOptions({
const showCloseModal = route.params?.showCloseModal;
return {
title: I18n.t('How_It_Works'), title: I18n.t('How_It_Works'),
headerLeft: showCloseModal ? () => <HeaderButton.CloseModal navigation={navigation} /> : undefined headerLeft: params?.showCloseModal ? () => <HeaderButton.CloseModal /> : undefined
}; });
}; }, []);
render() { const infoStyle = [styles.info, { color: colors.bodyText }];
const { theme } = this.props;
const infoStyle = [styles.info, { color: themes[theme].bodyText }];
return ( return (
<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} testID='e2e-how-it-works-view'> <SafeAreaView style={[styles.container, { backgroundColor: colors.backgroundColor }]} testID='e2e-how-it-works-view'>
<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} theme={theme} /> <Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} theme={theme} /> <Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} theme={theme} /> <Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} />
<Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} theme={theme} /> <Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} />
</SafeAreaView> </SafeAreaView>
); );
} };
}
export default withTheme(E2EHowItWorksView); export default E2EHowItWorksView;