github.com/chainopen/ethchaincode@v0.0.0-20190924072703-d975acdaa1c6/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/core/styles/withStyles';
    22  import AppBar from '@material-ui/core/AppBar';
    23  import Toolbar from '@material-ui/core/Toolbar';
    24  import IconButton from '@material-ui/core/IconButton';
    25  import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
    26  import {faBars} from '@fortawesome/free-solid-svg-icons';
    27  import Typography from '@material-ui/core/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  						<FontAwesomeIcon icon={faBars} />
    71  					</IconButton>
    72  					<Typography type='title' color='inherit' noWrap className={classes.title}>
    73  						Go Ethereum Dashboard
    74  					</Typography>
    75  				</Toolbar>
    76  			</AppBar>
    77  		);
    78  	}
    79  }
    80  
    81  export default withStyles(themeStyles)(Header);