github.com/sberex/go-sberex@v1.8.2-0.20181113200658-ed96ac38f7d7/dashboard/assets/components/Header.jsx (about)

     1  // @flow
     2  
     3  // This file is part of the go-sberex library. The go-sberex library is 
     4  // free software: you can redistribute it and/or modify it under the terms 
     5  // of the GNU Lesser General Public License as published by the Free 
     6  // Software Foundation, either version 3 of the License, or (at your option)
     7  // any later version.
     8  //
     9  // The go-sberex 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 GNU Lesser 
    12  // General Public License <http://www.gnu.org/licenses/> for more details.
    13  
    14  import React, {Component} from 'react';
    15  
    16  import withStyles from 'material-ui/styles/withStyles';
    17  import AppBar from 'material-ui/AppBar';
    18  import Toolbar from 'material-ui/Toolbar';
    19  import Transition from 'react-transition-group/Transition';
    20  import IconButton from 'material-ui/IconButton';
    21  import Typography from 'material-ui/Typography';
    22  import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
    23  
    24  import {DURATION} from '../common';
    25  
    26  // styles contains the constant styles of the component.
    27  const styles = {
    28  	arrow: {
    29  		default: {
    30  			transition: `transform ${DURATION}ms`,
    31  		},
    32  		transition: {
    33  			entered: {transform: 'rotate(180deg)'},
    34  		},
    35  	},
    36  };
    37  
    38  // themeStyles returns the styles generated from the theme for the component.
    39  const themeStyles = (theme: Object) => ({
    40  	header: {
    41  		backgroundColor: theme.palette.background.appBar,
    42  		color:           theme.palette.getContrastText(theme.palette.background.appBar),
    43  		zIndex:          theme.zIndex.appBar,
    44  	},
    45  	toolbar: {
    46  		paddingLeft:  theme.spacing.unit,
    47  		paddingRight: theme.spacing.unit,
    48  	},
    49  	title: {
    50  		paddingLeft: theme.spacing.unit,
    51  	},
    52  });
    53  
    54  export type Props = {
    55  	classes: Object, // injected by withStyles()
    56  	opened: boolean,
    57  	switchSideBar: () => void,
    58  };
    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  	// arrow renders a button, which changes the sidebar's state.
    67  	arrow = (transitionState: string) => (
    68  		<IconButton onClick={this.props.switchSideBar}>
    69  			<ChevronLeftIcon
    70  				style={{
    71  					...styles.arrow.default,
    72  					...styles.arrow.transition[transitionState],
    73  				}}
    74  			/>
    75  		</IconButton>
    76  	);
    77  
    78  	render() {
    79  		const {classes, opened} = this.props;
    80  
    81  		return (
    82  			<AppBar position='static' className={classes.header}>
    83  				<Toolbar className={classes.toolbar}>
    84  					<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
    85  						{this.arrow}
    86  					</Transition>
    87  					<Typography type='title' color='inherit' noWrap className={classes.title}>
    88  						Go Sberex Dashboard
    89  					</Typography>
    90  				</Toolbar>
    91  			</AppBar>
    92  		);
    93  	}
    94  }
    95  
    96  export default withStyles(themeStyles)(Header);