github.com/vantum/vantum@v0.0.0-20180815184342-fe37d5f7a990/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 Transition from 'react-transition-group/Transition';
    25  import IconButton from 'material-ui/IconButton';
    26  import Typography from 'material-ui/Typography';
    27  import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
    28  
    29  import {DURATION} from '../common';
    30  
    31  // styles contains the constant styles of the component.
    32  const styles = {
    33  	arrow: {
    34  		default: {
    35  			transition: `transform ${DURATION}ms`,
    36  		},
    37  		transition: {
    38  			entered: {transform: 'rotate(180deg)'},
    39  		},
    40  	},
    41  };
    42  
    43  // themeStyles returns the styles generated from the theme for the component.
    44  const themeStyles = (theme: Object) => ({
    45  	header: {
    46  		backgroundColor: theme.palette.background.appBar,
    47  		color:           theme.palette.getContrastText(theme.palette.background.appBar),
    48  		zIndex:          theme.zIndex.appBar,
    49  	},
    50  	toolbar: {
    51  		paddingLeft:  theme.spacing.unit,
    52  		paddingRight: theme.spacing.unit,
    53  	},
    54  	title: {
    55  		paddingLeft: theme.spacing.unit,
    56  	},
    57  });
    58  
    59  export type Props = {
    60  	classes: Object, // injected by withStyles()
    61  	opened: boolean,
    62  	switchSideBar: () => void,
    63  };
    64  
    65  // Header renders the header of the dashboard.
    66  class Header extends Component<Props> {
    67  	shouldComponentUpdate(nextProps) {
    68  		return nextProps.opened !== this.props.opened;
    69  	}
    70  
    71  	// arrow renders a button, which changes the sidebar's state.
    72  	arrow = (transitionState: string) => (
    73  		<IconButton onClick={this.props.switchSideBar}>
    74  			<ChevronLeftIcon
    75  				style={{
    76  					...styles.arrow.default,
    77  					...styles.arrow.transition[transitionState],
    78  				}}
    79  			/>
    80  		</IconButton>
    81  	);
    82  
    83  	render() {
    84  		const {classes, opened} = this.props;
    85  
    86  		return (
    87  			<AppBar position='static' className={classes.header}>
    88  				<Toolbar className={classes.toolbar}>
    89  					<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
    90  						{this.arrow}
    91  					</Transition>
    92  					<Typography type='title' color='inherit' noWrap className={classes.title}>
    93  						Go Ethereum Dashboard
    94  					</Typography>
    95  				</Toolbar>
    96  			</AppBar>
    97  		);
    98  	}
    99  }
   100  
   101  export default withStyles(themeStyles)(Header);