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
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useIsFocused } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createStackNavigator, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { ThemeContext } from '../../theme';
import { FadeFromCenterModal, StackAnimation, defaultHeader, themedHeader } from '../../utils/navigation';
// Chats Stack
import RoomView from '../../views/RoomView';
import RoomsListView from '../../views/RoomsListView';
......@@ -46,7 +44,6 @@ import UserPreferencesView from '../../views/UserPreferencesView';
import UserNotificationPrefView from '../../views/UserNotificationPreferencesView';
import SecurityPrivacyView from '../../views/SecurityPrivacyView';
import E2EEncryptionSecurityView from '../../views/E2EEncryptionSecurityView';
// InsideStackNavigator
import AttachmentView from '../../views/AttachmentView';
import ModalBlockView from '../../views/ModalBlockView';
......@@ -63,9 +60,15 @@ import AddChannelTeamView from '../../views/AddChannelTeamView';
import AddExistingChannelView from '../../views/AddExistingChannelView';
import SelectListView from '../../views/SelectListView';
import { ModalContainer } from './ModalContainer';
import {
MasterDetailChatsStackParamList,
MasterDetailDrawerParamList,
MasterDetailInsideStackParamList,
ModalStackParamList
} from './types';
// ChatsStackNavigator
const ChatsStack = createStackNavigator();
const ChatsStack = createStackNavigator<MasterDetailChatsStackParamList>();
const ChatsStackNavigator = React.memo(() => {
const { theme } = React.useContext(ThemeContext);
......@@ -82,28 +85,35 @@ const ChatsStackNavigator = React.memo(() => {
}, [isFocused]);
return (
<ChatsStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<ChatsStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<ChatsStack.Screen name='RoomView' component={RoomView} options={{ headerShown: false }} />
</ChatsStack.Navigator>
);
});
// DrawerNavigator
const Drawer = createDrawerNavigator();
const Drawer = createDrawerNavigator<MasterDetailDrawerParamList>();
const DrawerNavigator = React.memo(() => (
<Drawer.Navigator
// @ts-ignore
drawerContent={({ navigation, state }) => <RoomsListView navigation={navigation} state={state} />}
drawerType='permanent'>
<Drawer.Screen name='ChatsStackNavigator' component={ChatsStackNavigator} />
</Drawer.Navigator>
));
const ModalStack = createStackNavigator();
const ModalStackNavigator = React.memo(({ navigation }) => {
export interface INavigation {
navigation: StackNavigationProp<ModalStackParamList>;
}
const ModalStack = createStackNavigator<ModalStackParamList>();
const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
const { theme } = React.useContext(ThemeContext);
return (
<ModalContainer navigation={navigation} theme={theme}>
<ModalStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<ModalStack.Navigator
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<ModalStack.Screen
name='RoomActionsView'
component={RoomActionsView}
......@@ -120,11 +130,7 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
/>
<ModalStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} options={InviteUsersView.navigationOptions} />
<ModalStack.Screen
name='AddChannelTeamView'
component={AddChannelTeamView}
options={AddChannelTeamView.navigationOptions}
/>
<ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
<ModalStack.Screen
name='AddExistingChannelView'
component={AddExistingChannelView}
......@@ -162,16 +168,8 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
component={ForwardLivechatView}
options={ForwardLivechatView.navigationOptions}
/>
<ModalStack.Screen
name='CannedResponsesListView'
component={CannedResponsesListView}
options={CannedResponsesListView.navigationOptions}
/>
<ModalStack.Screen
name='CannedResponseDetail'
component={CannedResponseDetail}
options={CannedResponseDetail.navigationOptions}
/>
<ModalStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
<ModalStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
<ModalStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
<ModalStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
<ModalStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
......@@ -226,21 +224,13 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
component={E2EEnterYourPasswordView}
options={E2EEnterYourPasswordView.navigationOptions}
/>
<ModalStack.Screen
name='UserPreferencesView'
component={UserPreferencesView}
options={UserPreferencesView.navigationOptions}
/>
<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
<ModalStack.Screen
name='UserNotificationPrefView'
component={UserNotificationPrefView}
options={UserNotificationPrefView.navigationOptions}
/>
<ModalStack.Screen
name='SecurityPrivacyView'
component={SecurityPrivacyView}
options={SecurityPrivacyView.navigationOptions}
/>
<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
<ModalStack.Screen
name='E2EEncryptionSecurityView'
component={E2EEncryptionSecurityView}
......@@ -251,16 +241,14 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
);
});
ModalStackNavigator.propTypes = {
navigation: PropTypes.object
};
// InsideStackNavigator
const InsideStack = createStackNavigator();
const InsideStack = createStackNavigator<MasterDetailInsideStackParamList>();
const InsideStackNavigator = React.memo(() => {
const { theme } = React.useContext(ThemeContext);
return (
<InsideStack.Navigator mode='modal' screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...FadeFromCenterModal }}>
<InsideStack.Navigator
mode='modal'
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...FadeFromCenterModal } as StackNavigationOptions}>
<InsideStack.Screen name='DrawerNavigator' component={DrawerNavigator} options={{ headerShown: false }} />
<InsideStack.Screen name='ModalStackNavigator' component={ModalStackNavigator} options={{ headerShown: false }} />
<InsideStack.Screen name='AttachmentView' component={AttachmentView} />
......
import { TextInputProps } from 'react-native';
import { NavigatorScreenParams } from '@react-navigation/core';
import { IAttachment } from '../../definitions/IAttachment';
import { IMessage } from '../../definitions/IMessage';
import { IRoom, RoomType } from '../../definitions/IRoom';
export type MasterDetailChatsStackParamList = {
RoomView: {
rid: string;
t: RoomType;
tmid?: string;
message?: string;
name?: string;
fname?: string;
prid?: string;
room: IRoom;
jumpToMessageId?: string;
jumpToThreadId?: string;
roomUserId?: string;
};
};
export type MasterDetailDrawerParamList = {
ChatsStackNavigator: NavigatorScreenParams<MasterDetailChatsStackParamList>;
};
export type ModalStackParamList = {
RoomActionsView: {
room: IRoom;
member: any;
rid: string;
t: RoomType;
joined: boolean;
};
RoomInfoView: {
room: IRoom;
member: any;
rid: string;
t: RoomType;
};
SelectListView: {
data: any;
title: string;
infoText: string;
nextAction: Function;
showAlert: boolean;
isSearch: boolean;
onSearch: Function;
isRadio?: boolean;
};
RoomInfoEditView: {
rid: string;
};
RoomMembersView: {
rid: string;
room: IRoom;
};
SearchMessagesView: {
rid: string;
t: RoomType;
encrypted?: boolean;
showCloseModal?: boolean;
};
SelectedUsersView: {
maxUsers: number;
showButton: boolean;
title: string;
buttonText: string;
nextAction: Function;
};
InviteUsersView: {
rid: string;
};
AddChannelTeamView: {
teamId?: string;
teamChannels: []; // TODO: Change
};
AddExistingChannelView: {
teamId?: boolean;
};
InviteUsersEditView: {
rid: string;
};
MessagesView: {
rid: string;
t: RoomType;
name: string;
};
AutoTranslateView: {
rid: string;
room: IRoom;
};
DirectoryView: undefined;
QueueListView: undefined;
NotificationPrefView: {
rid: string;
room: IRoom;
};
VisitorNavigationView: {
rid: string;
};
ForwardLivechatView: {
rid: string;
};
CannedResponsesListView: {
rid: string;
};
CannedResponseDetail: {
cannedResponse: {
shortcut: string;
text: string;
scopeName: string;
tags: string[];
};
room: IRoom;
};
LivechatEditView: {
room: IRoom;
roomUser: any; // TODO: Change
};
PickerView: {
title: string;
data: []; // TODO: Change
value: any; // TODO: Change
onChangeText: TextInputProps['onChangeText'];
goBack: Function;
onChangeValue: Function;
};
ThreadMessagesView: {
rid: string;
t: RoomType;
};
TeamChannelsView: {
teamId: string;
};
MarkdownTableView: {
renderRows: Function;
tableWidth: number;
};
ReadReceiptsView: {
messageId: string;
};
SettingsView: undefined;
LanguageView: undefined;
ThemeView: undefined;
DefaultBrowserView: undefined;
ScreenLockConfigView: undefined;
StatusView: undefined;
ProfileView: undefined;
DisplayPrefsView: undefined;
AdminPanelView: undefined;
NewMessageView: undefined;
SelectedUsersViewCreateChannel: {
maxUsers: number;
showButton: boolean;
title: string;
buttonText: string;
nextAction: Function;
}; // TODO: Change
CreateChannelView: {
isTeam?: boolean; // TODO: To check
teamId?: string;
};
CreateDiscussionView: {
channel: IRoom;
message: IMessage;
showCloseModal: boolean;
};
E2ESaveYourPasswordView: undefined;
E2EHowItWorksView: {
showCloseModal: boolean;
};
E2EEnterYourPasswordView: undefined;
UserPreferencesView: undefined;
UserNotificationPrefView: undefined;
SecurityPrivacyView: undefined;
E2EEncryptionSecurityView: undefined;
};
export type MasterDetailInsideStackParamList = {
DrawerNavigator: NavigatorScreenParams<Partial<MasterDetailDrawerParamList>>; // TODO: Change
ModalStackNavigator: NavigatorScreenParams<ModalStackParamList>;
AttachmentView: {
attachment: IAttachment;
};
ModalBlockView: {
data: any; // TODO: Change
};
JitsiMeetView: {
rid: string;
url: string;
onlyAudio?: boolean;
};
ShareView: {
attachments: IAttachment[];
isShareView?: boolean;
serverInfo: {};
text: string;
room: IRoom;
thread: any; // TODO: Change
};
};
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
import { connect } from 'react-redux';
import { ThemeContext } from '../theme';
import { ModalAnimation, StackAnimation, defaultHeader, themedHeader } from '../utils/navigation';
// Outside Stack
import NewServerView from '../views/NewServerView';
import WorkspaceView from '../views/WorkspaceView';
......@@ -14,37 +13,34 @@ import SendEmailConfirmationView from '../views/SendEmailConfirmationView';
import RegisterView from '../views/RegisterView';
import LegalView from '../views/LegalView';
import AuthenticationWebView from '../views/AuthenticationWebView';
import { OutsideModalParamList, OutsideParamList } from './types';
// Outside
const Outside = createStackNavigator();
const Outside = createStackNavigator<OutsideParamList>();
const _OutsideStack = () => {
const { theme } = React.useContext(ThemeContext);
return (
<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
<Outside.Screen name='NewServerView' component={NewServerView} options={NewServerView.navigationOptions} />
<Outside.Screen name='WorkspaceView' component={WorkspaceView} options={WorkspaceView.navigationOptions} />
<Outside.Screen name='LoginView' component={LoginView} options={LoginView.navigationOptions} />
<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} options={ForgotPasswordView.navigationOptions} />
<Outside.Screen
name='SendEmailConfirmationView'
component={SendEmailConfirmationView}
options={SendEmailConfirmationView.navigationOptions}
/>
<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />
<Outside.Screen name='LegalView' component={LegalView} options={LegalView.navigationOptions} />
</Outside.Navigator>
);
};
const mapStateToProps = state => ({
const mapStateToProps = (state: any) => ({
root: state.app.root
});
const OutsideStack = connect(mapStateToProps)(_OutsideStack);
// OutsideStackModal
const OutsideModal = createStackNavigator();
const OutsideModal = createStackNavigator<OutsideModalParamList>();
const OutsideStackModal = () => {
const { theme } = React.useContext(ThemeContext);
......
import { NavigatorScreenParams } from '@react-navigation/core';
import { TextInputProps } from 'react-native';
import Model from '@nozbe/watermelondb/Model';
import { IOptionsField } from '../views/NotificationPreferencesView/options';
import { IServer } from '../definitions/IServer';
import { IAttachment } from '../definitions/IAttachment';
import { IMessage } from '../definitions/IMessage';
import { IRoom, RoomType } from '../definitions/IRoom';
export type ChatsStackParamList = {
RoomsListView: undefined;
RoomView: {
rid: string;
t: RoomType;
tmid?: string;
message?: string;
name?: string;
fname?: string;
prid?: string;
room: IRoom;
jumpToMessageId?: string;
jumpToThreadId?: string;
roomUserId?: string;
};
RoomActionsView: {
room: IRoom;
member: any;
rid: string;
t: RoomType;
joined: boolean;
};
SelectListView: {
data: any;
title: string;
infoText: string;
nextAction: Function;
showAlert: boolean;
isSearch: boolean;
onSearch: Function;
isRadio?: boolean;
};
RoomInfoView: {
room: IRoom;
member: any;
rid: string;
t: RoomType;
};
RoomInfoEditView: {
rid: string;
};
RoomMembersView: {
rid: string;
room: IRoom;
};
SearchMessagesView: {
rid: string;
t: RoomType;
encrypted?: boolean;
showCloseModal?: boolean;
};
SelectedUsersView: {
maxUsers?: number;
showButton?: boolean;
title?: string;
buttonText?: string;
nextAction?: Function;
};
InviteUsersView: {
rid: string;
};
InviteUsersEditView: {
rid: string;
};
MessagesView: {
rid: string;
t: RoomType;
name: string;
};
AutoTranslateView: {
rid: string;
room: IRoom;
};
DirectoryView: undefined;
NotificationPrefView: {
rid: string;
room: Model;
};
VisitorNavigationView: {
rid: string;
};
ForwardLivechatView: {
rid: string;
};
LivechatEditView: {
room: IRoom;
roomUser: any; // TODO: Change
};
PickerView: {
title: string;
data: IOptionsField[];
value?: any; // TODO: Change
onChangeText?: ((text: string) => IOptionsField[]) | ((term?: string) => Promise<any>);
goBack?: boolean;
onChangeValue: Function;
};
ThreadMessagesView: {
rid: string;
t: RoomType;
};
TeamChannelsView: {
teamId: string;
};
CreateChannelView: {
isTeam?: boolean; // TODO: To check
teamId?: string;
};
AddChannelTeamView: {
teamId?: string;
teamChannels: []; // TODO: Change
};
AddExistingChannelView: {
teamId?: string;
teamChannels: []; // TODO: Change
};
MarkdownTableView: {
renderRows: (drawExtraBorders?: boolean) => JSX.Element;
tableWidth: number;
};
ReadReceiptsView: {
messageId: string;
};
QueueListView: undefined;
CannedResponsesListView: {
rid: string;
};
CannedResponseDetail: {
cannedResponse: {
shortcut: string;
text: string;
scopeName: string;
tags: string[];
};
room: IRoom;
};
};
export type ProfileStackParamList = {
ProfileView: undefined;
UserPreferencesView: undefined;
UserNotificationPrefView: undefined;
PickerView: {
title: string;
data: IOptionsField[];
value: any; // TODO: Change
onChangeText?: TextInputProps['onChangeText'];
goBack?: Function;
onChangeValue: Function;
};
};
export type SettingsStackParamList = {
SettingsView: undefined;
SecurityPrivacyView: undefined;
E2EEncryptionSecurityView: undefined;
LanguageView: undefined;
ThemeView: undefined;
DefaultBrowserView: undefined;
ScreenLockConfigView: undefined;
ProfileView: undefined;
DisplayPrefsView: undefined;
};
export type AdminPanelStackParamList = {
AdminPanelView: undefined;
};
export type DisplayPrefStackParamList = {
DisplayPrefsView: undefined;
};
export type DrawerParamList = {
ChatsStackNavigator: NavigatorScreenParams<ChatsStackParamList>;
ProfileStackNavigator: NavigatorScreenParams<ProfileStackParamList>;
SettingsStackNavigator: NavigatorScreenParams<SettingsStackParamList>;
AdminPanelStackNavigator: NavigatorScreenParams<AdminPanelStackParamList>;
DisplayPrefStackNavigator: NavigatorScreenParams<DisplayPrefStackParamList>;
};
export type NewMessageStackParamList = {
NewMessageView: undefined;