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

* dashboard: minor design change

* dashboard: Flow integration, message API

* dashboard: minor polishes, exclude misspell linter

dashboard/assets/components/SideBar.jsx

@@ -1,3 +1,5 @@
+// @flow
+
 // Copyright 2017 The go-ethereum Authors
 // This file is part of the go-ethereum library.
 //
@@ -15,92 +17,106 @@
 // 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 {withStyles} from 'material-ui/styles';
-import Drawer from 'material-ui/Drawer';
-import {IconButton} from "material-ui";
-import List, {ListItem, ListItemText} from 'material-ui/List';
-import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
 
-import {TAGS, DRAWER_WIDTH} from './Common.jsx';
+import withStyles from 'material-ui/styles/withStyles';
+import List, {ListItem, ListItemIcon, ListItemText} from 'material-ui/List';
+import Icon from 'material-ui/Icon';
+import Transition from 'react-transition-group/Transition';
+import {Icon as FontAwesome} from 'react-fa';
 
+import {MENU, DURATION} from './Common';
+
+// menuDefault is the default style of the menu.
+const menuDefault = {
+	transition: `margin-left ${DURATION}ms`,
+};
+// menuTransition is the additional style of the menu corresponding to the transition's state.
+const menuTransition = {
+	entered: {marginLeft: -200},
+};
 // Styles for the SideBar component.
 const styles = theme => ({
-    drawerPaper: {
-        position: 'relative',
-        height:   '100%',
-        width:    DRAWER_WIDTH,
-    },
-    drawerHeader: {
-        display:            'flex',
-        alignItems:         'center',
-        justifyContent:     'flex-end',
-        padding:            '0 8px',
-        ...theme.mixins.toolbar,
-        transitionDuration: {
-            enter: theme.transitions.duration.enteringScreen,
-            exit:  theme.transitions.duration.leavingScreen,
-        }
-    },
+	list: {
+		background: theme.palette.background.appBar,
+	},
+	listItem: {
+		minWidth: theme.spacing.unit * 3,
+	},
+	icon: {
+		fontSize: theme.spacing.unit * 3,
+	},
 });
+export type Props = {
+	classes: Object,
+	opened: boolean,
+	changeContent: () => {},
+};
+// SideBar renders the sidebar of the dashboard.
+class SideBar extends Component<Props> {
+	constructor(props) {
+		super(props);
 
-// SideBar renders a sidebar component.
-class SideBar extends Component {
-    constructor(props) {
-        super(props);
+		// clickOn contains onClick event functions for the menu items.
+		// Instantiate only once, and reuse the existing functions to prevent the creation of
+		// new function instances every time the render method is triggered.
+		this.clickOn = {};
+		MENU.forEach((menu) => {
+			this.clickOn[menu.id] = (event) => {
+				event.preventDefault();
+				props.changeContent(menu.id);
+			};
+		});
+	}
 
-        // clickOn contains onClick event functions for the menu items.
-        // Instantiate only once, and reuse the existing functions to prevent the creation of
-        // new function instances every time the render method is triggered.
-        this.clickOn = {};
-        for(let key in TAGS) {
-            const id = TAGS[key].id;
-            this.clickOn[id] = event => {
-                event.preventDefault();
-                console.log(event.target.key);
-                this.props.changeContent(id);
-            };
-        }
-    }
+	shouldComponentUpdate(nextProps) {
+		return nextProps.opened !== this.props.opened;
+	}
 
-    render() {
-        // The classes property is injected by withStyles().
-        const {classes} = this.props;
+	menuItems = (transitionState) => {
+		const {classes} = this.props;
+		const children = [];
+		MENU.forEach((menu) => {
+			children.push(
+				<ListItem button key={menu.id} onClick={this.clickOn[menu.id]} className={classes.listItem}>
+					<ListItemIcon>
+						<Icon className={classes.icon}>
+							<FontAwesome name={menu.icon} />
+						</Icon>
+					</ListItemIcon>
+					<ListItemText
+						primary={menu.title}
+						style={{
+							...menuDefault,
+							...menuTransition[transitionState],
+							padding: 0,
+						}}
+					/>
+				</ListItem>,
+			);
+		});
+		return children;
+	};
 
-        return (
-            <Drawer
-                type="persistent"
-                classes={{paper: classes.drawerPaper,}}
-                open={this.props.opened}
-            >
-                <div>
-                    <div className={classes.drawerHeader}>
-                        <IconButton onClick={this.props.close}>
-                            <ChevronLeftIcon />
-                        </IconButton>
-                    </div>
-                    <List>
-                        {
-                            Object.values(TAGS).map(tag => {
-                                return (
-                                    <ListItem button key={tag.id} onClick={this.clickOn[tag.id]}>
-                                        <ListItemText primary={tag.title} />
-                                    </ListItem>
-                                );
-                            })
-                        }
-                    </List>
-                </div>
-            </Drawer>
-        );
-    }
+	// menu renders the list of the menu items.
+	menu = (transitionState) => {
+		const {classes} = this.props; // The classes property is injected by withStyles().
+
+		return (
+			<div className={classes.list}>
+				<List>
+					{this.menuItems(transitionState)}
+				</List>
+			</div>
+		);
+	};
+
+	render() {
+		return (
+			<Transition mountOnEnter in={this.props.opened} timeout={{enter: DURATION}}>
+				{this.menu}
+			</Transition>
+		);
+	}
 }
 
-SideBar.propTypes = {
-    classes:       PropTypes.object.isRequired,
-    opened:        PropTypes.bool.isRequired,
-    close:         PropTypes.func.isRequired,
-    changeContent: PropTypes.func.isRequired,
-};
-
 export default withStyles(styles)(SideBar);