Skip to content

Instantly share code, notes, and snippets.

@romreed

romreed/DrawerNavigator.js

Created February 28, 2018 12:32
Show Gist options
  • Save romreed/5aa59e9627489e1c8490e4b088bbd4aa to your computer and use it in GitHub Desktop.
Save romreed/5aa59e9627489e1c8490e4b088bbd4aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DrawerNavigator.js
import React, {Component} from 'react';
import {Image, Platform, Dimensions, ScrollView, BackHandler} from "react-native";
import {
Content,
Thumbnail,
Body,
Text,
List,
ListItem,
Icon as Icons,
Container,
Left,
Right,
Badge,
Button,
View,
StyleProvider,
getTheme,
variables,
Toast
} from "native-base";
import {addNavigationHelpers, DrawerNavigator, NavigationActions, StackNavigator} from "react-navigation";
import {resetActionAuth} from '../actions/navigate'
import Icon from 'react-native-vector-icons/FontAwesome';
import Octicons from 'react-native-vector-icons/Octicons';
import PropTypes from 'prop-types';
import TaskListScene from '../scenes/task/TaskListScene'
import BonusScene from '../scenes/BonusScene'
import NewsScene from '../scenes/news/NewsScene'
import SettingsScene from '../scenes/SettingsScene'
import GameScene from '../scenes/GameScene'
import AddressProgramScene from '../scenes/AddressProgramScene'
import NetworksScene from '../scenes/NetworksScene'
import RouteScene from '../scenes/RouteScene'
import ChartScene from '../scenes/ChartScene'
import MonitoringScene from '../scenes/MonitoringScene'
import ConsultantScene from '../scenes/ConsultantScene'
import FirstScreen from '../scenes/FirstScreen'
import ConsultantPhotoAnswerScene from '../scenes/ConsultPhotoAnswerScene'
import ConsultantManageScene from '../scenes/ConsultantManageScene'
import TradePlansList from '../scenes/TradePlansList'
import SimpleForm from '../scenes/task/SimpleForm';
import SDCard from '../scenes/task/SDCard';
import SDCityCard from '../scenes/task/SDCityCard';
import SimpleFormNativeBase from '../scenes/task/SimpleFormNativeBase'
import TradePointDetails from '../scenes/task/TradePointDetails'
import ConsultantCreateSchedule from '../scenes/ConsultantCreateSchedule'
import ChooseTT from '../scenes/ChooseTT'
import CheckListScene from '../scenes/CheckListScene'
import RoutTTDetails from '../scenes/RoutTTDetails'
import PhotoReport from '../scenes/PhotoReport'
import PhotoReportList from '../scenes/PhotoReportList'
import Synchronization from '../scenes/Synchronization'
// import {access, Admin, Manager, Supervisor, Consultant} from "../core/roles"
import {connect} from "react-redux";
import {API_URL} from '../middleware/api'
import AuthScene from "../scenes/auth/AuthScene";
import ManageRouteScene from "../scenes/ManageRouteScene";
import FileDownload from "../scenes/FileDownload";
import TaskTestScene from "../scenes/task/TaskTestScene";
import TestListScene from "../scenes/TestListScene";
import SupervisorCreateRoutes from "../scenes/SupervisorCreateRoutes";
import AddVisits from "../scenes/AddVisits";
import VisitBeginEnd from "../scenes/VisitBeginEnd";
import photoReport from "../reducer/photoReport";
import consultantReduser from "../reducer/consultantReduser";
import testReduser from "../reducer/testReduser";
const dimen = Dimensions.get('window');
const isIphoneX = () => Platform.OS === 'ios' &&
!Platform.isPad &&
!Platform.isTVOS &&
(dimen.height === 812 || dimen.width === 812)
const isIpad = () => Platform.OS === 'ios' && Platform.isPad &&
(dimen.height === 1024 || dimen.width === 1366)
const marginTop = () => Platform.OS === 'ios' ? isIphoneX() ? 5 : 25 : 0
export const LOGOUT = 'logout';
const AppNavigator =
DrawerNavigator(
{
TaskListScene: {screen: TaskListScene},
AuthScene: {screen: AuthScene},
NewsScene: {screen: NewsScene},
BonusScene: {screen: BonusScene},
GameScene: {screen: GameScene},
SettingsScene: {screen: SettingsScene},
AddressProgramScene: {screen: AddressProgramScene},
NetworksScene: {screen: NetworksScene},
ChartScene: {screen: ChartScene},
MonitoringScene: {screen: MonitoringScene},
ConsultantScene: {screen: ConsultantScene},
FirstScreen: {screen: FirstScreen},
ConsultantPhotoAnswerScene: {screen: ConsultantPhotoAnswerScene},
ConsultantManageScene: {screen: ConsultantManageScene},
SimpleForm: {screen: SimpleForm},
SDCard: {screen: SDCard},
SDCityCard: {screen: SDCityCard},
CheckListScene: {screen: CheckListScene},
SimpleFormNativeBase: {screen: SimpleFormNativeBase},
TradePointDetails: {screen: TradePointDetails},
RouteScene: {screen: RouteScene},
ConsultantCreateSchedule: {screen: ConsultantCreateSchedule},
ChooseTT: {screen: ChooseTT},
RoutTTDetails: {screen: RoutTTDetails},
PhotoReport: {screen: PhotoReport},
PhotoReportList: {screen: PhotoReportList},
ManageRouteScene: {screen: ManageRouteScene},
TradePlansList: {screen: TradePlansList},
FileDownload: {screen: FileDownload},
TaskTestScene: {screen: TaskTestScene},
TestListScene: {screen: TestListScene},
SupervisorCreateRoutes: {screen: SupervisorCreateRoutes},
AddVisits: {screen: AddVisits},
VisitBeginEnd: {screen: VisitBeginEnd},
Synchronization: {screen: Synchronization},
}, {
drawerBackgroundColor: "#e2e2e3",
initialRouteName: 'FirstScreen',
contentComponent: props => {
const role = props.screenProps.role;
const avatar = API_URL + props.screenProps.auth.userProfile.avatar;
const notSyncedMonitoring = Object.keys(props.screenProps.monitorings).length !== 0;
const notSyncedCheckList = Object.keys(props.screenProps.checkLists).length !== 0;
const notSyncedPhotoreports = props.screenProps.photoreports !== undefined && Object.keys(props.screenProps.photoreports).length !== 0;
const notSyncedPhotoreportsUpdate = props.screenProps.photoreportsUpdate !== undefined && Object.keys(props.screenProps.photoreportsUpdate).length !== 0;
const notSyncedTasksDone = props.screenProps.tasksDone !== undefined && Object.keys(props.screenProps.tasksDone).length !== 0;
const notSyncedTasksReject = props.screenProps.tasksReject !== undefined && Object.keys(props.screenProps.tasksReject).length !== 0;
const notSyncedTasksUpdate = props.screenProps.tasksUpdate !== undefined && Object.keys(props.screenProps.tasksUpdate).length !== 0;
const notSyncedTests = props.screenProps.tests !== undefined && Object.keys(props.screenProps.tests).length !== 0;
const isAtWork = Object.keys(props.screenProps.auth.workData).length !== 0;
// console.log('isAtWork', isAtWork)
// console.log('avatar', avatar)
return (
<ScrollView>
<Content bounces={false} style={{flex: 1, backgroundColor: "#e2e2e3", top: -1}}>
<View style={{height: 20, backgroundColor: "#369ad6"}}/>
<List style={styles.listStyle}>
{<ListItem style={styles.listItemThumb}>
{
avatar.length !== 0 ?
<Thumbnail style={{width: 50, height: 50}}
source={{uri: avatar}}/>
:
<Icons name="ios-contact" style={{fontSize: 80, color: "#fff"}}/>
}
<Body>
<Text style={{
color: "#fff",
fontSize: 20
}}>{props.screenProps.auth.userProfile.fio}</Text>
<Text
style={{
color: "#fff",
fontSize: 16
}}>{props.screenProps.auth.userProfile.phone}</Text>
</Body>
</ListItem>}
{(role === 'Consultant' || role === 'Supervisor') && (<ListItem button noBorder
onPress={() => isAtWork ? props.navigation.navigate("ConsultantManageScene") : props.navigation.navigate("ConsultantScene")}
style={styles.listItem}>
<Left style={styles.left}>
<Icon name="clock-o" size={20} style={styles.icon}/>
<Text style={styles.text}>
Учет рабочего времени
</Text>
</Left>
</ListItem>)}
{(role === 'Manager' || role === 'ADM') &&
<ListItem button noBorder
onPress={() => props.navigation.navigate("AddressProgramScene")}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="md-globe" style={styles.icon}/>
<Text style={styles.text}>
Адресная программа
</Text>
</Left>
</ListItem>}
{(role === 'Supervisor') &&
<ListItem button noBorder
onPress={() => props.navigation.navigate("RouteScene", {title: 'Адресная программа'})}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="md-globe" style={styles.icon}/>
<Text style={styles.text}>
Адресная программа
</Text>
</Left>
</ListItem>}
{(role === 'Manager' || role === 'ADM')
&& <ListItem button noBorder
onPress={() => props.navigation.navigate("NetworksScene")
}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="md-git-network" style={styles.icon}/>
<Text style={styles.text}>
Сети
</Text>
</Left>
</ListItem>}
{/*{role==='Supervisor'&&<ListItem button noBorder*/}
{/*{role==="Supervisor"*/}
{/*&&*/}
{/*<ListItem button noBorder*/}
{/*onPress={() => props.navigation.navigate("RouteScene", {title: 'Маршруты'})}*/}
{/*style={styles.listItem}>*/}
{/*<Left style={styles.left}>*/}
{/*<Icon name="suitcase" size = {20} style={styles.icon}/>*/}
{/*<Text style={styles.text}>*/}
{/*Маршруты*/}
{/*</Text>*/}
{/*</Left>*/}
{/*</ListItem>*/}
{/*}*/}
{role==='Consultant'
?
<ListItem button noBorder
onPress={() => props.navigation.navigate("ChooseTT", {route: "ConsultantCreateSchedule"})}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="md-analytics" style={styles.icon}/>
<Text style={styles.text}>
График работы
</Text>
</Left>
</ListItem>
:null
}
{role==="Supervisor"
?
<ListItem button noBorder
onPress={() => props.navigation.navigate("ChooseTT", {route: "SupervisorCreateRoutes"})}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="md-analytics" style={styles.icon}/>
<Text style={styles.text}>
Маршруты
</Text>
</Left>
</ListItem>
:null
}
{(role === 'Consultant'||role === 'Supervisor')&& <ListItem button noBorder
onPress={() => props.navigation.navigate("TaskListScene")}
style={styles.listItem}>
<Left style={styles.left}>
<Octicons name="tasklist" size={20} style={styles.icon}/>
<Text style={styles.text}>
Задачи
</Text>
</Left>
</ListItem>}
{/*{(role==='Consultant'||role==='Supervisor')&&(<ListItem button noBorder*/}
{<ListItem button noBorder
onPress={() => props.navigation.navigate("RouteScene", {title: 'Мониторинг'})}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="md-desktop" style={styles.icon}/>
<Text style={styles.text}>
Мониторинг
</Text>
</Left>
</ListItem>}
{role==='Consultant'&&<ListItem button noBorder
onPress={() => props.navigation.navigate("TradePlansList")}
style={styles.listItem}>
<Left style={styles.left}>
<Icon name="shopping-basket" size={20} style={styles.icon}/>
<Text style={styles.text}>
План продаж
</Text>
</Left>
</ListItem>}
{<ListItem button noBorder
onPress={() => props.navigation.navigate("PhotoReportList")}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="camera" style={styles.icon}/>
<Text style={styles.text}>
Фотоотчет
</Text>
</Left>
</ListItem>}
{<ListItem button noBorder onPress={() => props.navigation.navigate("FileDownload")}
style={styles.listItem}>
<Left style={styles.left}>
<Icon name="book" size={20} style={styles.icon}/>
<Text style={styles.text}>
Обучение
</Text>
</Left>
</ListItem>}
{<ListItem button noBorder
onPress={() => props.navigation.navigate("TestListScene")}
style={styles.listItem}>
<Left style={styles.left}>
<Icon name="tasks" size={20} style={styles.icon}/>
<Text style={styles.text}>
Тесты
</Text>
</Left>
</ListItem>}
{<ListItem button noBorder
onPress={() => props.navigation.navigate("SettingsScene")}
style={styles.listItem}>
<Left style={styles.left}>
<Icon name="user" size={20} style={styles.icon}/>
<Text style={styles.text}>
Профиль
</Text>
</Left>
</ListItem>}
{(notSyncedMonitoring || notSyncedCheckList || notSyncedPhotoreports || notSyncedPhotoreportsUpdate || notSyncedTasksDone || notSyncedTasksReject || notSyncedTasksUpdate || notSyncedTests) &&
<ListItem button noBorder
onPress={() => props.navigation.navigate("Synchronization")}
style={styles.listItem}>
<Left style={styles.left}>
<Octicons name="sync" size={20} style={styles.icon}/>
<Text style={styles.text}>
Необходима синхронизация
</Text>
</Left>
</ListItem>}
{<ListItem button noBorder
onPress={() => {
props.navigation.navigate("AuthScene")
}}
style={styles.listItem}>
<Left style={styles.left}>
<Icons name="md-exit" style={styles.icon}/>
<Text style={styles.text}>
Выход
</Text>
</Left>
</ListItem>}
</List>
</Content>
</ScrollView>
)
}
})
class AppWithNavigationState extends Component {
render() {
const {dispatch, nav, auth, role} = this.props;
return (
<AppNavigator
screenProps={this.props}
/>
)
}
}
AppWithNavigationState.propTypes = {
dispatch: PropTypes.func.isRequired,
nav: PropTypes.object.isRequired,
};
const mapStateToProps = state => ({
nav: state.nav,
auth: state.auth,
monitorings: state.loadSKU.monitorings,
checkLists: state.checkList.checkLists,
photoreports: photoReport.photoreports,
photoreportsUpdate: photoReport.photoreportsUpdate,
tasksDone: consultantReduser.tasksDone,
tasksReject: consultantReduser.tasksReject,
tasksUpdate: consultantReduser.tasksUpdate,
tests: testReduser.tests,
role: state.auth.userProfile.role,
});
export default connect(mapStateToProps)(AppWithNavigationState);
const styles = {
listStyle: {
paddingTop: 0,
},
listItemThumb: {
backgroundColor: "#369ad6",
marginLeft: 0,
paddingLeft: 10,
paddingTop: Platform.OS === 'ios' ? isIphoneX() ? 25 : 10 : 10
},
listItem: {
backgroundColor: "#e2e2e3",
marginLeft: 5
},
left: {
alignItems: "center",
backgroundColor: "#e2e2e3"
},
icon: {
textAlign: 'center',
color: '#727278'
},
text: {
fontSize: 17,
marginLeft: 5,
paddingBottom: 2,
color: '#5a5a5f'
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment