github.com/tuotoo/go-ethereum@v1.7.4-0.20171121184211-049797d40a24/dashboard/assets/components/SideBar.jsx (about)

     1  // Copyright 2017 The go-ethereum Authors
     2  // This file is part of the go-ethereum library.
     3  //
     4  // The go-ethereum library is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Lesser General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // The go-ethereum 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
    12  // GNU Lesser General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Lesser General Public License
    15  // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, {Component} from 'react';
    18  import PropTypes from 'prop-types';
    19  import {withStyles} from 'material-ui/styles';
    20  import Drawer from 'material-ui/Drawer';
    21  import {IconButton} from "material-ui";
    22  import List, {ListItem, ListItemText} from 'material-ui/List';
    23  import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
    24  
    25  import {TAGS, DRAWER_WIDTH} from './Common.jsx';
    26  
    27  // Styles for the SideBar component.
    28  const styles = theme => ({
    29      drawerPaper: {
    30          position: 'relative',
    31          height:   '100%',
    32          width:    DRAWER_WIDTH,
    33      },
    34      drawerHeader: {
    35          display:            'flex',
    36          alignItems:         'center',
    37          justifyContent:     'flex-end',
    38          padding:            '0 8px',
    39          ...theme.mixins.toolbar,
    40          transitionDuration: {
    41              enter: theme.transitions.duration.enteringScreen,
    42              exit:  theme.transitions.duration.leavingScreen,
    43          }
    44      },
    45  });
    46  
    47  // SideBar renders a sidebar component.
    48  class SideBar extends Component {
    49      constructor(props) {
    50          super(props);
    51  
    52          // clickOn contains onClick event functions for the menu items.
    53          // Instantiate only once, and reuse the existing functions to prevent the creation of
    54          // new function instances every time the render method is triggered.
    55          this.clickOn = {};
    56          for(let key in TAGS) {
    57              const id = TAGS[key].id;
    58              this.clickOn[id] = event => {
    59                  event.preventDefault();
    60                  console.log(event.target.key);
    61                  this.props.changeContent(id);
    62              };
    63          }
    64      }
    65  
    66      render() {
    67          // The classes property is injected by withStyles().
    68          const {classes} = this.props;
    69  
    70          return (
    71              <Drawer
    72                  type="persistent"
    73                  classes={{paper: classes.drawerPaper,}}
    74                  open={this.props.opened}
    75              >
    76                  <div>
    77                      <div className={classes.drawerHeader}>
    78                          <IconButton onClick={this.props.close}>
    79                              <ChevronLeftIcon />
    80                          </IconButton>
    81                      </div>
    82                      <List>
    83                          {
    84                              Object.values(TAGS).map(tag => {
    85                                  return (
    86                                      <ListItem button key={tag.id} onClick={this.clickOn[tag.id]}>
    87                                          <ListItemText primary={tag.title} />
    88                                      </ListItem>
    89                                  );
    90                              })
    91                          }
    92                      </List>
    93                  </div>
    94              </Drawer>
    95          );
    96      }
    97  }
    98  
    99  SideBar.propTypes = {
   100      classes:       PropTypes.object.isRequired,
   101      opened:        PropTypes.bool.isRequired,
   102      close:         PropTypes.func.isRequired,
   103      changeContent: PropTypes.func.isRequired,
   104  };
   105  
   106  export default withStyles(styles)(SideBar);