// @flow // Copyright 2017 The go-ethereum Authors // This file is part of the go-ethereum library. // // The go-ethereum library is free software: you can redistribute it and/or modify // it under the terms of the GNU Lesser General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // The go-ethereum library is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU Lesser General Public License for more details. // // You should have received a copy of the GNU Lesser General Public License // along with the go-ethereum library. If not, see . import React, {Component} from 'react'; import withStyles from '@material-ui/core/styles/withStyles'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import Icon from '@material-ui/core/Icon'; import Transition from 'react-transition-group/Transition'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {MENU, DURATION} from '../common'; // styles contains the constant styles of the component. const styles = { menu: { default: { transition: `margin-left ${DURATION}ms`, }, transition: { entered: {marginLeft: -200}, }, }, }; // themeStyles returns the styles generated from the theme for the component. const themeStyles = theme => ({ list: { background: theme.palette.grey[900], }, listItem: { minWidth: theme.spacing.unit * 7, }, icon: { fontSize: theme.spacing.unit * 3, overflow: 'unset', }, }); export type Props = { classes: Object, // injected by withStyles() opened: boolean, changeContent: string => void, }; type State = {} // SideBar renders the sidebar of the dashboard. class SideBar extends Component { shouldComponentUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any) { return nextProps.opened !== this.props.opened; } // clickOn returns a click event handler function for the given menu item. clickOn = menu => (event) => { event.preventDefault(); this.props.changeContent(menu); }; // menuItems returns the menu items corresponding to the sidebar state. menuItems = (transitionState) => { const {classes} = this.props; const children = []; MENU.forEach((menu) => { children.push(( )); }); return children; }; // menu renders the list of the menu items. menu = (transitionState: Object) => (
{this.menuItems(transitionState)}
); render() { return ( {this.menu} ); } } export default withStyles(themeStyles)(SideBar);