github.com/oskarth/go-ethereum@v1.6.8-0.20191013093314-dac24a9d3494/dashboard/assets/components/Header.jsx (about)

     1  // @flow
     2  
     3  // Copyright 2017 The go-ethereum Authors
     4  // This file is part of the go-ethereum library.
     5  //
     6  // The go-ethereum library is free software: you can redistribute it and/or modify
     7  // it under the terms of the GNU Lesser General Public License as published by
     8  // the Free Software Foundation, either version 3 of the License, or
     9  // (at your option) any later version.
    10  //
    11  // The go-ethereum library is distributed in the hope that it will be useful,
    12  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    13  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    14  // GNU Lesser General Public License for more details.
    15  //
    16  // You should have received a copy of the GNU Lesser General Public License
    17  // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
    18  
    19  import React, {Component} from 'react';
    20  
    21  import withStyles from 'material-ui/styles/withStyles';
    22  import AppBar from 'material-ui/AppBar';
    23  import Toolbar from 'material-ui/Toolbar';
    24  import IconButton from 'material-ui/IconButton';
    25  import Icon from 'material-ui/Icon';
    26  import MenuIcon from 'material-ui-icons/Menu';
    27  import Typography from 'material-ui/Typography';
    28  
    29  // styles contains the constant styles of the component.
    30  const styles = {
    31  	header: {
    32  		height: '8%',
    33  	},
    34  	toolbar: {
    35  		height: '100%',
    36  	},
    37  };
    38  
    39  // themeStyles returns the styles generated from the theme for the component.
    40  const themeStyles = (theme: Object) => ({
    41  	header: {
    42  		backgroundColor: theme.palette.grey[900],
    43  		color:           theme.palette.getContrastText(theme.palette.grey[900]),
    44  		zIndex:          theme.zIndex.appBar,
    45  	},
    46  	toolbar: {
    47  		paddingLeft:  theme.spacing.unit,
    48  		paddingRight: theme.spacing.unit,
    49  	},
    50  	title: {
    51  		paddingLeft: theme.spacing.unit,
    52  		fontSize:    3 * theme.spacing.unit,
    53  	},
    54  });
    55  
    56  export type Props = {
    57  	classes: Object, // injected by withStyles()
    58  	switchSideBar: () => void,
    59  };
    60  
    61  // Header renders the header of the dashboard.
    62  class Header extends Component<Props> {
    63  	render() {
    64  		const {classes} = this.props;
    65  
    66  		return (
    67  			<AppBar position='static' className={classes.header} style={styles.header}>
    68  				<Toolbar className={classes.toolbar} style={styles.toolbar}>
    69  					<IconButton onClick={this.props.switchSideBar}>
    70  						<Icon>
    71  							<MenuIcon />
    72  						</Icon>
    73  					</IconButton>
    74  					<Typography type='title' color='inherit' noWrap className={classes.title}>
    75  						Go Ethereum Dashboard
    76  					</Typography>
    77  				</Toolbar>
    78  			</AppBar>
    79  		);
    80  	}
    81  }
    82  
    83  export default withStyles(themeStyles)(Header);