|
|
|
'use strict';
|
|
|
|
import React, {Component} from 'react';
|
|
|
|
import {Navigator, View, StyleSheet} from 'react-native';
|
|
|
|
import {bindActionCreators} from 'redux';
|
|
|
|
import {connect} from 'react-redux';
|
|
|
|
import Ionicons from 'react-native-vector-icons/Ionicons';
|
|
|
|
import Drawer from 'react-native-drawer';
|
|
|
|
|
|
|
|
import * as menuActions from '../actions/menuActions';
|
|
|
|
import MenuApp from '../containers/menuApp';
|
|
|
|
import CalcApp from '../containers/calcApp';
|
|
|
|
import HelpApp from '../containers/helpApp';
|
|
|
|
|
|
|
|
class Nav extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { state, actions } = this.props;
|
|
|
|
|
|
|
|
const drawerStyles = {
|
|
|
|
drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
|
|
|
|
main: {paddingLeft: 3},
|
|
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
toolbar: {
|
|
|
|
backgroundColor: '#e9eaed',
|
|
|
|
height: 56,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Drawer
|
|
|
|
open={state.isOpen}
|
|
|
|
type="overlay"
|
|
|
|
content={<MenuApp />}
|
|
|
|
tapToClose={true}
|
|
|
|
openDrawerOffset={(viewport) => viewport.width - 250}
|
|
|
|
captureGestures={true}
|
|
|
|
panCloseMask={0.3}
|
|
|
|
closedDrawerOffset={-3}
|
|
|
|
styles={drawerStyles}
|
|
|
|
tweenHandler={(ratio) => ({
|
|
|
|
main: { opacity: 1, },
|
|
|
|
mainOverlay: { opacity: ratio/2, backgroundColor: 'black', },
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<Ionicons.ToolbarAndroid
|
|
|
|
navIconName={"md-menu"}
|
|
|
|
onIconClicked={actions.menuopen}
|
|
|
|
style={styles.toolbar}
|
|
|
|
subtitle={state.subtitle}
|
|
|
|
title="Exact Resistor Calculator"
|
|
|
|
/>
|
|
|
|
<View style={{flex: 1}}>
|
|
|
|
<Navigator
|
|
|
|
renderScene={(route, navigator) => {
|
|
|
|
switch (state.page) {
|
|
|
|
case 'main':
|
|
|
|
return <CalcApp />;
|
|
|
|
case 'help':
|
|
|
|
return <HelpApp />;
|
|
|
|
default:
|
|
|
|
return <CalcApp />;
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
</Drawer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(state => ({
|
|
|
|
state: state.menu
|
|
|
|
}), (dispatch) => ({
|
|
|
|
actions: bindActionCreators(menuActions, dispatch)
|
|
|
|
}))(Nav);
|