dashboard: integrate Flow, sketch message API (#15713)

* dashboard: minor design change

* dashboard: Flow integration, message API

* dashboard: minor polishes, exclude misspell linter

1 files changed, 75 insertions, 57 deletions

diff --git a/dashboard/assets/components/Header.jsx b/dashboard/assets/components/Header.jsx
index 7cf57c9c0..e29507bef 100644
--- a/dashboard/assets/components/Header.jsx
+++ b/dashboard/assets/components/Header.jsx
@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright 2017 The go-ethereum Authors
 // This file is part of the go-ethereum library.
 //
@@ -15,73 +17,89 @@
 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
 
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {withStyles} from 'material-ui/styles';
+
+import withStyles from 'material-ui/styles/withStyles';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
+import Transition from 'react-transition-group/Transition';
 import IconButton from 'material-ui/IconButton';
-import MenuIcon from 'material-ui-icons/Menu';
+import Typography from 'material-ui/Typography';
+import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
 
-import {DRAWER_WIDTH} from './Common.jsx';
+import {DURATION} from './Common';
 
+// arrowDefault is the default style of the arrow button.
+const arrowDefault = {
+	transition: `transform ${DURATION}ms`,
+};
+// arrowTransition is the additional style of the arrow button corresponding to the transition's state.
+const arrowTransition = {
+	entered: {transform: 'rotate(180deg)'},
+};
 // Styles for the Header component.
 const styles = theme => ({
-    appBar: {
-        position:   'absolute',
-        transition: theme.transitions.create(['margin', 'width'], {
-            easing:   theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-    },
-    appBarShift: {
-        marginLeft: DRAWER_WIDTH,
-        width:      `calc(100% - ${DRAWER_WIDTH}px)`,
-        transition: theme.transitions.create(['margin', 'width'], {
-            easing:   theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    },
-    menuButton: {
-        marginLeft:  12,
-        marginRight: 20,
-    },
-    hide: {
-        display: 'none',
-    },
+	header: {
+		backgroundColor: theme.palette.background.appBar,
+		color:           theme.palette.getContrastText(theme.palette.background.appBar),
+		zIndex:          theme.zIndex.appBar,
+	},
+	toolbar: {
+		paddingLeft:  theme.spacing.unit,
+		paddingRight: theme.spacing.unit,
+	},
+	mainText: {
+		paddingLeft: theme.spacing.unit,
+	},
 });
+export type Props = {
+	classes: Object,
+	opened: boolean,
+	openSideBar: () => {},
+	closeSideBar: () => {},
+};
+// Header renders the header of the dashboard.
+class Header extends Component<Props> {
+	shouldComponentUpdate(nextProps) {
+		return nextProps.opened !== this.props.opened;
+	}
 
-// Header renders a header, which contains a sidebar opener icon when that is closed.
-class Header extends Component {
-    render() {
-        // The classes property is injected by withStyles().
-        const {classes} = this.props;
+	// changeSideBar opens or closes the sidebar corresponding to the previous state.
+	changeSideBar = () => {
+		if (this.props.opened) {
+			this.props.closeSideBar();
+		} else {
+			this.props.openSideBar();
+		}
+	};
 
-        return (
-            <AppBar className={classNames(classes.appBar, this.props.opened && classes.appBarShift)}>
-                <Toolbar disableGutters={!this.props.opened}>
-                    <IconButton
-                        color="contrast"
-                        aria-label="open drawer"
-                        onClick={this.props.open}
-                        className={classNames(classes.menuButton, this.props.opened && classes.hide)}
-                    >
-                        <MenuIcon />
-                    </IconButton>
-                    <Typography type="title" color="inherit" noWrap>
-                        Go Ethereum Dashboard
-                    </Typography>
-                </Toolbar>
-            </AppBar>
-        );
-    }
-}
+	// arrowButton is connected to the sidebar; changes its state.
+	arrowButton = (transitionState: string) => (
+		<IconButton onClick={this.changeSideBar}>
+			<ChevronLeftIcon
+				style={{
+					...arrowDefault,
+					...arrowTransition[transitionState],
+				}}
+			/>
+		</IconButton>
+	);
 
-Header.propTypes = {
-    classes: PropTypes.object.isRequired,
-    opened:  PropTypes.bool.isRequired,
-    open:    PropTypes.func.isRequired,
-};
+	render() {
+		const {classes, opened} = this.props; // The classes property is injected by withStyles().
+
+		return (
+			<AppBar position="static" className={classes.header}>
+				<Toolbar className={classes.toolbar}>
+					<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
+						{this.arrowButton}
+					</Transition>
+					<Typography type="title" color="inherit" noWrap className={classes.mainText}>
+						Go Ethereum Dashboard
+					</Typography>
+				</Toolbar>
+			</AppBar>
+		);
+	}
+}
 
 export default withStyles(styles)(Header);