github.com/tuotoo/go-ethereum@v1.7.4-0.20171121184211-049797d40a24/dashboard/assets/components/Header.jsx (about)

     1  // Copyright 2017 The go-ethereum Authors
     2  // This file is part of the go-ethereum library.
     3  //
     4  // The go-ethereum library is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Lesser General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // The go-ethereum library is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    12  // GNU Lesser General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Lesser General Public License
    15  // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, {Component} from 'react';
    18  import PropTypes from 'prop-types';
    19  import classNames from 'classnames';
    20  import {withStyles} from 'material-ui/styles';
    21  import AppBar from 'material-ui/AppBar';
    22  import Toolbar from 'material-ui/Toolbar';
    23  import Typography from 'material-ui/Typography';
    24  import IconButton from 'material-ui/IconButton';
    25  import MenuIcon from 'material-ui-icons/Menu';
    26  
    27  import {DRAWER_WIDTH} from './Common.jsx';
    28  
    29  // Styles for the Header component.
    30  const styles = theme => ({
    31      appBar: {
    32          position:   'absolute',
    33          transition: theme.transitions.create(['margin', 'width'], {
    34              easing:   theme.transitions.easing.sharp,
    35              duration: theme.transitions.duration.leavingScreen,
    36          }),
    37      },
    38      appBarShift: {
    39          marginLeft: DRAWER_WIDTH,
    40          width:      `calc(100% - ${DRAWER_WIDTH}px)`,
    41          transition: theme.transitions.create(['margin', 'width'], {
    42              easing:   theme.transitions.easing.easeOut,
    43              duration: theme.transitions.duration.enteringScreen,
    44          }),
    45      },
    46      menuButton: {
    47          marginLeft:  12,
    48          marginRight: 20,
    49      },
    50      hide: {
    51          display: 'none',
    52      },
    53  });
    54  
    55  // Header renders a header, which contains a sidebar opener icon when that is closed.
    56  class Header extends Component {
    57      render() {
    58          // The classes property is injected by withStyles().
    59          const {classes} = this.props;
    60  
    61          return (
    62              <AppBar className={classNames(classes.appBar, this.props.opened && classes.appBarShift)}>
    63                  <Toolbar disableGutters={!this.props.opened}>
    64                      <IconButton
    65                          color="contrast"
    66                          aria-label="open drawer"
    67                          onClick={this.props.open}
    68                          className={classNames(classes.menuButton, this.props.opened && classes.hide)}
    69                      >
    70                          <MenuIcon />
    71                      </IconButton>
    72                      <Typography type="title" color="inherit" noWrap>
    73                          Go Ethereum Dashboard
    74                      </Typography>
    75                  </Toolbar>
    76              </AppBar>
    77          );
    78      }
    79  }
    80  
    81  Header.propTypes = {
    82      classes: PropTypes.object.isRequired,
    83      opened:  PropTypes.bool.isRequired,
    84      open:    PropTypes.func.isRequired,
    85  };
    86  
    87  export default withStyles(styles)(Header);