aboutsummaryrefslogtreecommitdiffstats
path: root/dashboard/assets/components/Header.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'dashboard/assets/components/Header.jsx')
-rw-r--r--dashboard/assets/components/Header.jsx132
1 files changed, 75 insertions, 57 deletions
diff --git a/dashboard/assets/components/Header.jsx b/dashboard/assets/components/Header.jsx
index 7cf57c9c0..e29507bef 100644
--- a/dashboard/assets/components/Header.jsx
+++ b/dashboard/assets/components/Header.jsx
@@ -1,3 +1,5 @@
+// @flow
+
// Copyright 2017 The go-ethereum Authors
// This file is part of the go-ethereum library.
//
@@ -15,73 +17,89 @@
// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {withStyles} from 'material-ui/styles';
+
+import withStyles from 'material-ui/styles/withStyles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
+import Transition from 'react-transition-group/Transition';
import IconButton from 'material-ui/IconButton';
-import MenuIcon from 'material-ui-icons/Menu';
+import Typography from 'material-ui/Typography';
+import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
-import {DRAWER_WIDTH} from './Common.jsx';
+import {DURATION} from './Common';
+// arrowDefault is the default style of the arrow button.
+const arrowDefault = {
+ transition: `transform ${DURATION}ms`,
+};
+// arrowTransition is the additional style of the arrow button corresponding to the transition's state.
+const arrowTransition = {
+ entered: {transform: 'rotate(180deg)'},
+};
// Styles for the Header component.
const styles = theme => ({
- appBar: {
- position: 'absolute',
- transition: theme.transitions.create(['margin', 'width'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- },
- appBarShift: {
- marginLeft: DRAWER_WIDTH,
- width: `calc(100% - ${DRAWER_WIDTH}px)`,
- transition: theme.transitions.create(['margin', 'width'], {
- easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.enteringScreen,
- }),
- },
- menuButton: {
- marginLeft: 12,
- marginRight: 20,
- },
- hide: {
- display: 'none',
- },
+ header: {
+ backgroundColor: theme.palette.background.appBar,
+ color: theme.palette.getContrastText(theme.palette.background.appBar),
+ zIndex: theme.zIndex.appBar,
+ },
+ toolbar: {
+ paddingLeft: theme.spacing.unit,
+ paddingRight: theme.spacing.unit,
+ },
+ mainText: {
+ paddingLeft: theme.spacing.unit,
+ },
});
+export type Props = {
+ classes: Object,
+ opened: boolean,
+ openSideBar: () => {},
+ closeSideBar: () => {},
+};
+// Header renders the header of the dashboard.
+class Header extends Component<Props> {
+ shouldComponentUpdate(nextProps) {
+ return nextProps.opened !== this.props.opened;
+ }
-// Header renders a header, which contains a sidebar opener icon when that is closed.
-class Header extends Component {
- render() {
- // The classes property is injected by withStyles().
- const {classes} = this.props;
+ // changeSideBar opens or closes the sidebar corresponding to the previous state.
+ changeSideBar = () => {
+ if (this.props.opened) {
+ this.props.closeSideBar();
+ } else {
+ this.props.openSideBar();
+ }
+ };
- return (
- <AppBar className={classNames(classes.appBar, this.props.opened && classes.appBarShift)}>
- <Toolbar disableGutters={!this.props.opened}>
- <IconButton
- color="contrast"
- aria-label="open drawer"
- onClick={this.props.open}
- className={classNames(classes.menuButton, this.props.opened && classes.hide)}
- >
- <MenuIcon />
- </IconButton>
- <Typography type="title" color="inherit" noWrap>
- Go Ethereum Dashboard
- </Typography>
- </Toolbar>
- </AppBar>
- );
- }
-}
+ // arrowButton is connected to the sidebar; changes its state.
+ arrowButton = (transitionState: string) => (
+ <IconButton onClick={this.changeSideBar}>
+ <ChevronLeftIcon
+ style={{
+ ...arrowDefault,
+ ...arrowTransition[transitionState],
+ }}
+ />
+ </IconButton>
+ );
-Header.propTypes = {
- classes: PropTypes.object.isRequired,
- opened: PropTypes.bool.isRequired,
- open: PropTypes.func.isRequired,
-};
+ render() {
+ const {classes, opened} = this.props; // The classes property is injected by withStyles().
+
+ return (
+ <AppBar position="static" className={classes.header}>
+ <Toolbar className={classes.toolbar}>
+ <Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
+ {this.arrowButton}
+ </Transition>
+ <Typography type="title" color="inherit" noWrap className={classes.mainText}>
+ Go Ethereum Dashboard
+ </Typography>
+ </Toolbar>
+ </AppBar>
+ );
+ }
+}
export default withStyles(styles)(Header);