Unverified Commit 691bf1ef authored by Gerzon Z's avatar Gerzon Z Committed by GitHub
Browse files

Chore: Migrate react-navigation to TypeScript (#3480)



Co-authored-by: default avatarAlexAlexandre <alexalexandrejr@gmail.com>
parent 4af97f19
......@@ -3,6 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { connect } from 'react-redux';
import { SetUsernameStackParamList, StackParamList } from './navigationTypes';
import Navigation from './lib/Navigation';
import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';
......@@ -17,7 +18,7 @@ import { ThemeContext } from './theme';
import { setCurrentScreen } from './utils/log';
// SetUsernameStack
const SetUsername = createStackNavigator();
const SetUsername = createStackNavigator<SetUsernameStackParamList>();
const SetUsernameStack = () => (
<SetUsername.Navigator screenOptions={defaultHeader}>
<SetUsername.Screen name='SetUsernameView' component={SetUsernameView} />
......@@ -25,7 +26,7 @@ const SetUsernameStack = () => (
);
// App
const Stack = createStackNavigator();
const Stack = createStackNavigator<StackParamList>();
const App = React.memo(({ root, isMasterDetail }: { root: string; isMasterDetail: boolean }) => {
if (!root) {
return null;
......
......@@ -17,7 +17,7 @@ export const useActionSheet = () => useContext(context);
const { Provider, Consumer } = context;
export const withActionSheet = <P extends object>(Component: React.ComponentType<P>) =>
export const withActionSheet = (Component: any): any =>
forwardRef((props: any, ref: ForwardedRef<any>) => (
<Consumer>{(contexts: any) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
));
......
......@@ -31,7 +31,7 @@ interface IEmojiPickerProps {
customEmojis?: any;
style: object;
theme?: string;
onEmojiSelected?: Function;
onEmojiSelected?: ((emoji: any) => void) | ((keyboardId: any, params?: any) => void);
tabEmojiStyle?: object;
}
......@@ -201,4 +201,5 @@ const mapStateToProps = (state: any) => ({
customEmojis: state.customEmojis
});
export default connect(mapStateToProps)(withTheme(EmojiPicker));
// TODO - remove this as any, at the new PR to fix the HOC erros
export default connect(mapStateToProps)(withTheme(EmojiPicker)) as any;
......@@ -423,4 +423,4 @@ const mapStateToProps = (state: any) => ({
services: state.login.services
});
export default connect(mapStateToProps)(withTheme(LoginServices));
export default connect(mapStateToProps)(withTheme(LoginServices)) as any;
......@@ -13,7 +13,7 @@ interface IMessageBoxEmojiKeyboard {
}
export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {
private readonly baseUrl: any;
private readonly baseUrl: string;
constructor(props: IMessageBoxEmojiKeyboard) {
super(props);
......
......@@ -1124,4 +1124,4 @@ const dispatchToProps = {
typing: (rid: any, status: any) => userTypingAction(rid, status)
};
// @ts-ignore
export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox));
export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox)) as any;
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, TextInputProps, View } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import TextInput from '../presentation/TextInput';
......@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
});
interface ISearchBox {
onChangeText: () => void;
onChangeText: TextInputProps['onChangeText'];
onSubmitEditing: () => void;
hasCancel: boolean;
onCancelPress: Function;
......
export interface IAttachment {
title: string;
type: string;
description: string;
title_link?: string;
image_url?: string;
image_type?: string;
video_url?: string;
video_type?: string;
}
export interface IMessage {
msg: string;
}
export interface IRocketChatRecord {
id: string;
updatedAt: Date;
}
import { IRocketChatRecord } from './IRocketChatRecord';
export enum RoomType {
GROUP = 'p',
DIRECT = 'd',
CHANNEL = 'c',
OMNICHANNEL = 'l',
THREAD = 'thread'
}
export interface IRoom extends IRocketChatRecord {
rid: string;
t: RoomType;
name: string;
fname: string;
prid?: string;
tmid?: string;
topic?: string;
teamMain?: boolean;
teamId?: string;
encrypted?: boolean;
visitor?: boolean;
autoTranslateLanguage?: boolean;
autoTranslate?: boolean;
observe?: Function;
usedCannedResponse: string;
}
export interface IServer {
name: string;
iconURL: string;
useRealName: boolean;
FileUpload_MediaTypeWhiteList: string;
FileUpload_MaxFileSize: number;
roomsUpdatedAt: Date;
version: string;
lastLocalAuthenticatedSession: Date;
autoLock: boolean;
autoLockTime: number | null;
biometry: boolean | null;
uniqueID: string;
enterpriseModules: string;
E2E_Enable: boolean;
}
......@@ -22,7 +22,7 @@ export interface IDimensionsContextProps {
export const DimensionsContext = React.createContext<Partial<IDimensionsContextProps>>(Dimensions.get('window'));
export function withDimensions(Component: any) {
export function withDimensions(Component: any): any {
const DimensionsComponent = (props: any) => (
<DimensionsContext.Consumer>{contexts => <Component {...props} {...contexts} />}</DimensionsContext.Consumer>
);
......
......@@ -161,4 +161,5 @@ const mapStateToProps = state => ({
showAvatar: state.sortPreferences.showAvatar,
displayMode: state.sortPreferences.displayMode
});
export default connect(mapStateToProps)(withDimensions(withTheme(QueueListView)));
......@@ -24,7 +24,7 @@ import { selectServerFailure } from '../actions/server';
import { useSsl } from '../utils/url';
import EventEmitter from '../utils/events';
import { updatePermission } from '../actions/permissions';
import { TEAM_TYPE } from '../definition/ITeam';
import { TEAM_TYPE } from '../definitions/ITeam';
import { updateSettings } from '../actions/settings';
import { compareServerVersion, methods } from './utils';
import reduxStore from './createStore';
......
import { NavigatorScreenParams } from '@react-navigation/core';
import { IRoom } from './definitions/IRoom';
import { IServer } from './definitions/IServer';
import { IAttachment } from './definitions/IAttachment';
import { MasterDetailInsideStackParamList } from './stacks/MasterDetailStack/types';
import { OutsideParamList, InsideStackParamList } from './stacks/types';
export type SetUsernameStackParamList = {
SetUsernameView: {
title: string;
};
};
export type StackParamList = {
AuthLoading: undefined;
OutsideStack: NavigatorScreenParams<OutsideParamList>;
InsideStack: NavigatorScreenParams<InsideStackParamList>;
MasterDetailStack: NavigatorScreenParams<MasterDetailInsideStackParamList>;
SetUsernameStack: NavigatorScreenParams<SetUsernameStackParamList>;
};
export type ShareInsideStackParamList = {
ShareListView: undefined;
ShareView: {
attachments: IAttachment[];
isShareView?: boolean;
isShareExtension: boolean;
serverInfo: IServer;
text: string;
room: IRoom;
thread: any; // TODO: Change
};
SelectServerView: undefined;
};
export type ShareOutsideStackParamList = {
WithoutServersView: undefined;
};
export type ShareAppStackParamList = {
AuthLoading?: undefined;
OutsideStack?: NavigatorScreenParams<ShareOutsideStackParamList>;
InsideStack?: NavigatorScreenParams<ShareInsideStackParamList>;
};
......@@ -25,6 +25,7 @@ import { setCurrentScreen } from './utils/log';
import AuthLoadingView from './views/AuthLoadingView';
import { DimensionsContext } from './dimensions';
import debounce from './utils/debounce';
import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './navigationTypes';
interface IDimensions {
width: number;
......@@ -46,7 +47,7 @@ interface IState {
fontScale: number;
}
const Inside = createStackNavigator();
const Inside = createStackNavigator<ShareInsideStackParamList>();
const InsideStack = () => {
const { theme } = useContext(ThemeContext);
......@@ -65,24 +66,19 @@ const InsideStack = () => {
);
};
const Outside = createStackNavigator();
const Outside = createStackNavigator<ShareOutsideStackParamList>();
const OutsideStack = () => {
const { theme } = useContext(ThemeContext);
return (
<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
<Outside.Screen
name='WithoutServersView'
component={WithoutServersView}
/* @ts-ignore*/
options={WithoutServersView.navigationOptions}
/>
<Outside.Screen name='WithoutServersView' component={WithoutServersView} options={WithoutServersView.navigationOptions} />
</Outside.Navigator>
);
};
// App
const Stack = createStackNavigator();
const Stack = createStackNavigator<ShareAppStackParamList>();
export const App = ({ root }: any) => (
<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
<>
......@@ -112,7 +108,7 @@ class Root extends React.Component<{}, IState> {
this.init();
}
componentWillUnmount() {
componentWillUnmount(): void {
RocketChat.closeShareExtension();
unsubscribeTheme();
}
......
import React from 'react';
import { I18nManager } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { ThemeContext } from '../theme';
import { ModalAnimation, StackAnimation, defaultHeader, themedHeader } from '../utils/navigation';
import Sidebar from '../views/SidebarView';
// Chats Stack
import RoomView from '../views/RoomView';
import RoomsListView from '../views/RoomsListView';
......@@ -37,10 +36,8 @@ import { themes } from '../constants/colors';
import ProfileView from '../views/ProfileView';
import UserPreferencesView from '../views/UserPreferencesView';
import UserNotificationPrefView from '../views/UserNotificationPreferencesView';
// Display Preferences View
import DisplayPrefsView from '../views/DisplayPrefsView';
// Settings Stack
import SettingsView from '../views/SettingsView';
import SecurityPrivacyView from '../views/SecurityPrivacyView';
......@@ -49,21 +46,16 @@ import LanguageView from '../views/LanguageView';
import ThemeView from '../views/ThemeView';
import DefaultBrowserView from '../views/DefaultBrowserView';
import ScreenLockConfigView from '../views/ScreenLockConfigView';
// Admin Stack
import AdminPanelView from '../views/AdminPanelView';
// NewMessage Stack
import NewMessageView from '../views/NewMessageView';
import CreateChannelView from '../views/CreateChannelView';
// E2ESaveYourPassword Stack
import E2ESaveYourPasswordView from '../views/E2ESaveYourPasswordView';
import E2EHowItWorksView from '../views/E2EHowItWorksView';
// E2EEnterYourPassword Stack
import E2EEnterYourPasswordView from '../views/E2EEnterYourPasswordView';
// InsideStackNavigator
import AttachmentView from '../views/AttachmentView';
import ModalBlockView from '../views/ModalBlockView';
......@@ -75,20 +67,33 @@ import QueueListView from '../ee/omnichannel/views/QueueListView';
import AddChannelTeamView from '../views/AddChannelTeamView';
import AddExistingChannelView from '../views/AddExistingChannelView';
import SelectListView from '../views/SelectListView';
import {
AdminPanelStackParamList,
ChatsStackParamList,
DisplayPrefStackParamList,
DrawerParamList,
E2EEnterYourPasswordStackParamList,
E2ESaveYourPasswordStackParamList,
InsideStackParamList,
NewMessageStackParamList,
ProfileStackParamList,
SettingsStackParamList
} from './types';
// ChatsStackNavigator
const ChatsStack = createStackNavigator();
const ChatsStack = createStackNavigator<ChatsStackParamList>();
const ChatsStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<ChatsStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<ChatsStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<ChatsStack.Screen name='RoomsListView' component={RoomsListView} />
<ChatsStack.Screen name='RoomView' component={RoomView} />
<ChatsStack.Screen name='RoomActionsView' component={RoomActionsView} options={RoomActionsView.navigationOptions} />
<ChatsStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
<ChatsStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
<ChatsStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} options={RoomMembersView.navigationOptions} />
<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} />
<ChatsStack.Screen
name='SearchMessagesView'
component={SearchMessagesView}
......@@ -126,13 +131,9 @@ const ChatsStackNavigator = () => {
component={ThreadMessagesView}
options={ThreadMessagesView.navigationOptions}
/>
<ChatsStack.Screen name='TeamChannelsView' component={TeamChannelsView} options={TeamChannelsView.navigationOptions} />
<ChatsStack.Screen name='TeamChannelsView' component={TeamChannelsView} />
<ChatsStack.Screen name='CreateChannelView' component={CreateChannelView} options={CreateChannelView.navigationOptions} />
<ChatsStack.Screen
name='AddChannelTeamView'
component={AddChannelTeamView}
options={AddChannelTeamView.navigationOptions}
/>
<ChatsStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
<ChatsStack.Screen
name='AddExistingChannelView'
component={AddExistingChannelView}
......@@ -141,32 +142,21 @@ const ChatsStackNavigator = () => {
<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} options={MarkdownTableView.navigationOptions} />
<ChatsStack.Screen name='ReadReceiptsView' component={ReadReceiptsView} options={ReadReceiptsView.navigationOptions} />
<ChatsStack.Screen name='QueueListView' component={QueueListView} options={QueueListView.navigationOptions} />
<ChatsStack.Screen
name='CannedResponsesListView'
component={CannedResponsesListView}
options={CannedResponsesListView.navigationOptions}
/>
<ChatsStack.Screen
name='CannedResponseDetail'
component={CannedResponseDetail}
options={CannedResponseDetail.navigationOptions}
/>
<ChatsStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
<ChatsStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
</ChatsStack.Navigator>
);
};
// ProfileStackNavigator
const ProfileStack = createStackNavigator();
const ProfileStack = createStackNavigator<ProfileStackParamList>();
const ProfileStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<ProfileStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<ProfileStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<ProfileStack.Screen name='ProfileView' component={ProfileView} options={ProfileView.navigationOptions} />
<ProfileStack.Screen
name='UserPreferencesView'
component={UserPreferencesView}
options={UserPreferencesView.navigationOptions}
/>
<ProfileStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
<ProfileStack.Screen
name='UserNotificationPrefView'
component={UserNotificationPrefView}
......@@ -178,18 +168,15 @@ const ProfileStackNavigator = () => {
};
// SettingsStackNavigator
const SettingsStack = createStackNavigator();
const SettingsStack = createStackNavigator<SettingsStackParamList>();
const SettingsStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<SettingsStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<SettingsStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<SettingsStack.Screen name='SettingsView' component={SettingsView} options={SettingsView.navigationOptions} />
<SettingsStack.Screen
name='SecurityPrivacyView'
component={SecurityPrivacyView}
options={SecurityPrivacyView.navigationOptions}
/>
<SettingsStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
<SettingsStack.Screen
name='E2EEncryptionSecurityView'
component={E2EEncryptionSecurityView}
......@@ -212,31 +199,33 @@ const SettingsStackNavigator = () => {
};
// AdminPanelStackNavigator
const AdminPanelStack = createStackNavigator();
const AdminPanelStack = createStackNavigator<AdminPanelStackParamList>();
const AdminPanelStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<AdminPanelStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<AdminPanelStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<AdminPanelStack.Screen name='AdminPanelView' component={AdminPanelView} options={AdminPanelView.navigationOptions} />
</AdminPanelStack.Navigator>
);
};
// DisplayPreferenceNavigator
const DisplayPrefStack = createStackNavigator();
const DisplayPrefStack = createStackNavigator<DisplayPrefStackParamList>();
const DisplayPrefStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<DisplayPrefStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<DisplayPrefStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<DisplayPrefStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} />
</DisplayPrefStack.Navigator>
);
};
// DrawerNavigator
const Drawer = createDrawerNavigator();
const Drawer = createDrawerNavigator<DrawerParamList>();
const DrawerNavigator = () => {
const { theme } = React.useContext(ThemeContext);
......@@ -257,12 +246,13 @@ const DrawerNavigator = () => {
};
// NewMessageStackNavigator
const NewMessageStack = createStackNavigator();
const NewMessageStack = createStackNavigator<NewMessageStackParamList>();
const NewMessageStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<NewMessageStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<NewMessageStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<NewMessageStack.Screen name='NewMessageView' component={NewMessageView} options={NewMessageView.navigationOptions} />
<NewMessageStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />
<NewMessageStack.Screen
......@@ -276,12 +266,13 @@ const NewMessageStackNavigator = () => {
};
// E2ESaveYourPasswordStackNavigator
const E2ESaveYourPasswordStack = createStackNavigator();
const E2ESaveYourPasswordStack = createStackNavigator<E2ESaveYourPasswordStackParamList>();
const E2ESaveYourPasswordStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<E2ESaveYourPasswordStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<E2ESaveYourPasswordStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<E2ESaveYourPasswordStack.Screen
name='E2ESaveYourPasswordView'
component={E2ESaveYourPasswordView}
......@@ -297,12 +288,13 @@ const E2ESaveYourPasswordStackNavigator = () => {
};
// E2EEnterYourPasswordStackNavigator
const E2EEnterYourPasswordStack = createStackNavigator();
const E2EEnterYourPasswordStack = createStackNavigator<E2EEnterYourPasswordStackParamList>();
const E2EEnterYourPasswordStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
return (
<E2EEnterYourPasswordStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<E2EEnterYourPasswordStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<E2EEnterYourPasswordStack.Screen
name='E2EEnterYourPasswordView'
component={E2EEnterYourPasswordView}
......@@ -313,7 +305,7 @@ const E2EEnterYourPasswordStackNavigator = () => {
};
// InsideStackNavigator
const InsideStack = createStackNavigator();
const InsideStack = createStackNavigator<InsideStackParamList>();
const InsideStackNavigator = () => {
const { theme } = React.useContext(ThemeContext);
......
import React from 'react';
import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import PropTypes from 'prop-types';
import { StackNavigationProp } from '@react-navigation/stack';
import { NavigationContainerProps } from '@react-navigation/core';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
interface IModalContainer extends NavigationContainerProps {
navigation: StackNavigationProp<any>;
children: React.ReactNode;
theme: string;
}
const styles = StyleSheet.create({
root: {
flex: 1,
......@@ -12,11 +19,11 @@ const styles = StyleSheet.create({
justifyContent: 'center'
},
backdrop: {
...StyleSheet.absoluteFill
...StyleSheet.absoluteFillObject
}
});
export const ModalContainer = ({ navigation, children, theme }) => (
export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => (
<View style={[styles.root, { backgroundColor: `${themes[theme].backdropColor}70` }]}>
<TouchableWithoutFeedback onPress={() => navigation.pop()}>
<View style={styles.backdrop} />
......@@ -24,9 +31,3 @@ export const ModalContainer = ({ navigation, children, theme }) => (
<View style={sharedStyles.modalFormSheet}>{children}</View>
</View>
);
ModalContainer.propTypes = {
navigation: PropTypes.object,
children: PropTypes.element,
theme: PropTypes.string
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment