github.com/SmartMeshFoundation/Spectrum@v0.0.0-20220621030607-452a266fee1e/dashboard/assets/components/Header.jsx (about)

     1  // @flow
     2  
     3  // Copyright 2017 The Spectrum Authors
     4  // This file is part of the Spectrum library.
     5  //
     6  // The Spectrum 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 Spectrum 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 Spectrum 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  // arrowDefault is the default style of the arrow button.
    32  const arrowDefault = {
    33  	transition: `transform ${DURATION}ms`,
    34  };
    35  // arrowTransition is the additional style of the arrow button corresponding to the transition's state.
    36  const arrowTransition = {
    37  	entered: {transform: 'rotate(180deg)'},
    38  };
    39  // Styles for the Header component.
    40  const styles = theme => ({
    41  	header: {
    42  		backgroundColor: theme.palette.background.appBar,
    43  		color:           theme.palette.getContrastText(theme.palette.background.appBar),
    44  		zIndex:          theme.zIndex.appBar,
    45  	},
    46  	toolbar: {
    47  		paddingLeft:  theme.spacing.unit,
    48  		paddingRight: theme.spacing.unit,
    49  	},
    50  	mainText: {
    51  		paddingLeft: theme.spacing.unit,
    52  	},
    53  });
    54  export type Props = {
    55  	classes: Object,
    56  	opened: boolean,
    57  	openSideBar: () => {},
    58  	closeSideBar: () => {},
    59  };
    60  // Header renders the header of the dashboard.
    61  class Header extends Component<Props> {
    62  	shouldComponentUpdate(nextProps) {
    63  		return nextProps.opened !== this.props.opened;
    64  	}
    65  
    66  	// changeSideBar opens or closes the sidebar corresponding to the previous state.
    67  	changeSideBar = () => {
    68  		if (this.props.opened) {
    69  			this.props.closeSideBar();
    70  		} else {
    71  			this.props.openSideBar();
    72  		}
    73  	};
    74  
    75  	// arrowButton is connected to the sidebar; changes its state.
    76  	arrowButton = (transitionState: string) => (
    77  		<IconButton onClick={this.changeSideBar}>
    78  			<ChevronLeftIcon
    79  				style={{
    80  					...arrowDefault,
    81  					...arrowTransition[transitionState],
    82  				}}
    83  			/>
    84  		</IconButton>
    85  	);
    86  
    87  	render() {
    88  		const {classes, opened} = this.props; // The classes property is injected by withStyles().
    89  
    90  		return (
    91  			<AppBar position="static" className={classes.header}>
    92  				<Toolbar className={classes.toolbar}>
    93  					<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
    94  						{this.arrowButton}
    95  					</Transition>
    96  					<Typography type="title" color="inherit" noWrap className={classes.mainText}>
    97  						Go Ethereum Dashboard
    98  					</Typography>
    99  				</Toolbar>
   100  			</AppBar>
   101  		);
   102  	}
   103  }
   104  
   105  export default withStyles(styles)(Header);