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: Evaluate SidebarView - Typescript (#4089)

This commit is contained in:
Alex Junior 2022-05-06 22:19:27 -03:00 committed by GitHub
parent 8ca73e273a
commit 1346154b65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/stacks/InsideStack.tsx
View File

@ -223,6 +223,7 @@ const DrawerNavigator = () => {
return ( return (
<Drawer.Navigator <Drawer.Navigator
// @ts-ignore
drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />} drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}
drawerPosition={I18nManager.isRTL ? 'right' : 'left'} drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
screenOptions={{ swipeEnabled: false }} screenOptions={{ swipeEnabled: false }}

2
app/views/SettingsView/index.tsx
View File

@ -177,7 +177,7 @@ class SettingsView extends React.Component<ISettingsViewProps, any> {
<> <>
<List.Section> <List.Section>
<List.Separator /> <List.Separator />
<SidebarView /> <SidebarView theme={theme} />
<List.Separator /> <List.Separator />
</List.Section> </List.Section>
<List.Section> <List.Section>

76
app/views/SidebarView/index.tsx
View File

@ -19,16 +19,8 @@ import Navigation from '../../lib/navigation/appNavigation';
import SidebarItem from './SidebarItem'; import SidebarItem from './SidebarItem';
import styles from './styles'; import styles from './styles';
import { DrawerParamList } from '../../stacks/types'; import { DrawerParamList } from '../../stacks/types';
import { IUser } from '../../definitions'; import { IApplicationState, IUser } from '../../definitions';
import * as List from '../../containers/List';
interface ISeparatorProps {
theme: TSupportedThemes;
}
// TODO: remove this
const Separator = React.memo(({ theme }: ISeparatorProps) => (
<View style={[styles.separator, { borderColor: themes[theme].separatorColor }]} />
));
interface ISidebarState { interface ISidebarState {
showStatus: boolean; showStatus: boolean;
@ -36,8 +28,8 @@ interface ISidebarState {
interface ISidebarProps { interface ISidebarProps {
baseUrl: string; baseUrl: string;
navigation: DrawerNavigationProp<DrawerParamList>; navigation?: DrawerNavigationProp<DrawerParamList>;
state: DrawerNavigationState<DrawerParamList>; state?: DrawerNavigationState<DrawerParamList>;
Site_Name: string; Site_Name: string;
user: IUser; user: IUser;
theme: TSupportedThemes; theme: TSupportedThemes;
@ -161,7 +153,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
if (isMasterDetail) { if (isMasterDetail) {
return; return;
} }
navigation.closeDrawer(); navigation?.closeDrawer();
}; };
renderAdmin = () => { renderAdmin = () => {
@ -172,13 +164,13 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
const routeName = isMasterDetail ? 'AdminPanelView' : 'AdminPanelStackNavigator'; const routeName = isMasterDetail ? 'AdminPanelView' : 'AdminPanelStackNavigator';
return ( return (
<> <>
<Separator theme={theme!} /> <List.Separator />
<SidebarItem <SidebarItem
text={I18n.t('Admin_Panel')} text={I18n.t('Admin_Panel')}
left={<CustomIcon name='settings' size={20} color={themes[theme!].titleText} />} left={<CustomIcon name='settings' size={20} color={themes[theme].titleText} />}
onPress={() => this.sidebarNavigate(routeName)} onPress={() => this.sidebarNavigate(routeName)}
testID='sidebar-admin' testID='sidebar-admin'
theme={theme!} theme={theme}
current={this.currentItemKey === routeName} current={this.currentItemKey === routeName}
/> />
</> </>
@ -191,34 +183,34 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
<> <>
<SidebarItem <SidebarItem
text={I18n.t('Chats')} text={I18n.t('Chats')}
left={<CustomIcon name='message' size={20} color={themes[theme!].titleText} />} left={<CustomIcon name='message' size={20} color={themes[theme].titleText} />}
onPress={() => this.sidebarNavigate('ChatsStackNavigator')} onPress={() => this.sidebarNavigate('ChatsStackNavigator')}
testID='sidebar-chats' testID='sidebar-chats'
theme={theme!} theme={theme}
current={this.currentItemKey === 'ChatsStackNavigator'} current={this.currentItemKey === 'ChatsStackNavigator'}
/> />
<SidebarItem <SidebarItem
text={I18n.t('Profile')} text={I18n.t('Profile')}
left={<CustomIcon name='user' size={20} color={themes[theme!].titleText} />} left={<CustomIcon name='user' size={20} color={themes[theme].titleText} />}
onPress={() => this.sidebarNavigate('ProfileStackNavigator')} onPress={() => this.sidebarNavigate('ProfileStackNavigator')}
testID='sidebar-profile' testID='sidebar-profile'
theme={theme!} theme={theme}
current={this.currentItemKey === 'ProfileStackNavigator'} current={this.currentItemKey === 'ProfileStackNavigator'}
/> />
<SidebarItem <SidebarItem
text={I18n.t('Display')} text={I18n.t('Display')}
left={<CustomIcon name='sort' size={20} color={themes[theme!].titleText} />} left={<CustomIcon name='sort' size={20} color={themes[theme].titleText} />}
onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')} onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')}
testID='sidebar-display' testID='sidebar-display'
theme={theme!} theme={theme}
current={this.currentItemKey === 'DisplayPrefStackNavigator'} current={this.currentItemKey === 'DisplayPrefStackNavigator'}
/> />
<SidebarItem <SidebarItem
text={I18n.t('Settings')} text={I18n.t('Settings')}
left={<CustomIcon name='administration' size={20} color={themes[theme!].titleText} />} left={<CustomIcon name='administration' size={20} color={themes[theme].titleText} />}
onPress={() => this.sidebarNavigate('SettingsStackNavigator')} onPress={() => this.sidebarNavigate('SettingsStackNavigator')}
testID='sidebar-settings' testID='sidebar-settings'
theme={theme!} theme={theme}
current={this.currentItemKey === 'SettingsStackNavigator'} current={this.currentItemKey === 'SettingsStackNavigator'}
/> />
{this.renderAdmin()} {this.renderAdmin()}
@ -232,8 +224,8 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
<SidebarItem <SidebarItem
text={user.statusText || I18n.t('Edit_Status')} text={user.statusText || I18n.t('Edit_Status')}
left={<Status size={24} status={user?.status} />} left={<Status size={24} status={user?.status} />}
theme={theme!} theme={theme}
right={<CustomIcon name='edit' size={20} color={themes[theme!].titleText} />} right={<CustomIcon name='edit' size={20} color={themes[theme].titleText} />}
onPress={() => this.sidebarNavigate('StatusView')} onPress={() => this.sidebarNavigate('StatusView')}
testID='sidebar-custom-status' testID='sidebar-custom-status'
/> />
@ -247,12 +239,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
return null; return null;
} }
return ( return (
<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}> <SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} vertical={isMasterDetail}>
<ScrollView <ScrollView
style={[ style={[
styles.container, styles.container,
{ {
backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground backgroundColor: isMasterDetail ? themes[theme].backgroundColor : themes[theme].focusedBackground
} }
]} ]}
{...scrollPersistTaps}> {...scrollPersistTaps}>
@ -261,12 +253,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
<Avatar text={user.username} style={styles.avatar} size={30} /> <Avatar text={user.username} style={styles.avatar} size={30} />
<View style={styles.headerTextContainer}> <View style={styles.headerTextContainer}>
<View style={styles.headerUsername}> <View style={styles.headerUsername}>
<Text numberOfLines={1} style={[styles.username, { color: themes[theme!].titleText }]}> <Text numberOfLines={1} style={[styles.username, { color: themes[theme].titleText }]}>
{useRealName ? user.name : user.username} {useRealName ? user.name : user.username}
</Text> </Text>
</View> </View>
<Text <Text
style={[styles.currentServerText, { color: themes[theme!].titleText }]} style={[styles.currentServerText, { color: themes[theme].titleText }]}
numberOfLines={1} numberOfLines={1}
accessibilityLabel={`Connected to ${baseUrl}`}> accessibilityLabel={`Connected to ${baseUrl}`}>
{Site_Name} {Site_Name}
@ -275,14 +267,14 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<Separator theme={theme!} /> <List.Separator />
{allowStatusMessage ? this.renderCustomStatus() : null} {allowStatusMessage ? this.renderCustomStatus() : null}
{!isMasterDetail ? ( {!isMasterDetail ? (
<> <>
<Separator theme={theme!} /> <List.Separator />
{this.renderNavigation()} {this.renderNavigation()}
<Separator theme={theme!} /> <List.Separator />
</> </>
) : ( ) : (
<>{this.renderAdmin()}</> <>{this.renderAdmin()}</>
@ -293,18 +285,18 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
} }
} }
const mapStateToProps = (state: any) => ({ const mapStateToProps = (state: IApplicationState) => ({
Site_Name: state.settings.Site_Name, Site_Name: state.settings.Site_Name as string,
user: getUserSelector(state), user: getUserSelector(state),
baseUrl: state.server.server, baseUrl: state.server.server,
loadingServer: state.server.loading, loadingServer: state.server.loading,
useRealName: state.settings.UI_Use_Real_Name, useRealName: state.settings.UI_Use_Real_Name as boolean,
allowStatusMessage: state.settings.Accounts_AllowUserStatusMessageChange, allowStatusMessage: state.settings.Accounts_AllowUserStatusMessageChange as boolean,
isMasterDetail: state.app.isMasterDetail, isMasterDetail: state.app.isMasterDetail,
viewStatisticsPermission: state.permissions['view-statistics'], viewStatisticsPermission: state.permissions['view-statistics'] as string[],
viewRoomAdministrationPermission: state.permissions['view-room-administration'], viewRoomAdministrationPermission: state.permissions['view-room-administration'] as string[],
viewUserAdministrationPermission: state.permissions['view-user-administration'], viewUserAdministrationPermission: state.permissions['view-user-administration'] as string[],
viewPrivilegedSettingPermission: state.permissions['view-privileged-setting'] viewPrivilegedSettingPermission: state.permissions['view-privileged-setting'] as string[]
}); });
export default connect(mapStateToProps)(withTheme(Sidebar)) as any; export default connect(mapStateToProps)(withTheme(Sidebar));