89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import 'typeface-roboto'; // contains the font for material UI
|
|
import { withStyles } from 'material-ui/styles';
|
|
import AppBar from 'material-ui/AppBar';
|
|
import Tabs, { Tab } from 'material-ui/Tabs';
|
|
import GeneralTab from './Tabs/generalTab';
|
|
import PeerTab from './Tabs/peerTab';
|
|
import FileTab from './Tabs/fileTab';
|
|
|
|
|
|
|
|
|
|
//Redux
|
|
import {connect} from 'react-redux';
|
|
import * as actionTypes from '../store/actions'
|
|
|
|
function TabContainer(props) {
|
|
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
|
|
}
|
|
|
|
TabContainer.propTypes = {
|
|
children: PropTypes.node.isRequired,
|
|
};
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
// flexGrow: 1,
|
|
// marginTop: theme.spacing.unit * 3,
|
|
//backgroundColor: theme.palette.background.paper,
|
|
backgroundColor: '#e5e5e5',
|
|
height: '100%',
|
|
boxShadow: '0 0 20px #000',
|
|
},
|
|
});
|
|
|
|
class BasicTabs extends React.Component {
|
|
|
|
|
|
handleChange = (event, value) => {
|
|
//this.setState({ value });
|
|
this.props.changeTab(value)
|
|
};
|
|
|
|
render() {
|
|
const { classes } = this.props;
|
|
|
|
return (
|
|
|
|
<div className={classes.root}>
|
|
<div className="DragHandle"> {/* making the appbar draggable */}
|
|
<AppBar position="static">
|
|
<Tabs value={this.props.selectedTab} onChange={this.handleChange}>
|
|
<Tab label="General"/>
|
|
<Tab label="Peers"/>
|
|
<Tab label="Files"/>
|
|
<Tab label="Speed"/>
|
|
<Tab label="Logger" href="#basic-tabs"/>
|
|
</Tabs>
|
|
</AppBar>
|
|
</div>
|
|
{this.props.selectedTab === 0 && <TabContainer><GeneralTab /></TabContainer>}
|
|
{this.props.selectedTab === 1 && <TabContainer><PeerTab /></TabContainer>}
|
|
{this.props.selectedTab === 2 && <TabContainer><FileTab /></TabContainer>}
|
|
{this.props.selectedTab === 3 && <TabContainer>Speed</TabContainer>}
|
|
{this.props.selectedTab === 4 && <TabContainer>Logger</TabContainer>}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
BasicTabs.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
};
|
|
|
|
const mapStateToProps = state => {
|
|
return {
|
|
selectedTab: state.selectedTab,
|
|
};
|
|
}
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
changeTab: (selectedTab) => dispatch({type: actionTypes.SELECTED_TAB, selectedTab }),
|
|
}
|
|
}
|
|
|
|
|
|
export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(BasicTabs)); |