github.com/alexdevranger/node-1.8.27@v0.0.0-20221128213301-aa5841e41d2d/dashboard/assets/components/SideBar.jsx (about)

     1  // @flow
     2  
     3  // Copyright 2017 The go-ethereum Authors
     4  // This file is part of the go-dubxcoin library.
     5  //
     6  // The go-dubxcoin library is free software: you can redistribute it and/or modify
     7  // it under the terms of the GNU Lesser General Public License as published by
     8  // the Free Software Foundation, either version 3 of the License, or
     9  // (at your option) any later version.
    10  //
    11  // The go-dubxcoin library is distributed in the hope that it will be useful,
    12  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    13  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    14  // GNU Lesser General Public License for more details.
    15  //
    16  // You should have received a copy of the GNU Lesser General Public License
    17  // along with the go-dubxcoin library. If not, see <http://www.gnu.org/licenses/>.
    18  
    19  import React, { Component } from "react";
    20  
    21  import withStyles from "material-ui/styles/withStyles";
    22  import List, { ListItem, ListItemIcon, ListItemText } from "material-ui/List";
    23  import Icon from "material-ui/Icon";
    24  import Transition from "react-transition-group/Transition";
    25  import { Icon as FontAwesome } from "react-fa";
    26  
    27  import { MENU, DURATION } from "../common";
    28  
    29  // styles contains the constant styles of the component.
    30  const styles = {
    31    menu: {
    32      default: {
    33        transition: `margin-left ${DURATION}ms`,
    34      },
    35      transition: {
    36        entered: { marginLeft: -200 },
    37      },
    38    },
    39  };
    40  
    41  // themeStyles returns the styles generated from the theme for the component.
    42  const themeStyles = (theme) => ({
    43    list: {
    44      background: theme.palette.grey[900],
    45    },
    46    listItem: {
    47      minWidth: theme.spacing.unit * 7,
    48    },
    49    icon: {
    50      fontSize: theme.spacing.unit * 3,
    51    },
    52  });
    53  
    54  export type Props = {
    55    classes: Object, // injected by withStyles()
    56    opened: boolean,
    57    changeContent: (string) => void,
    58  };
    59  
    60  // SideBar renders the sidebar of the dashboard.
    61  class SideBar extends Component<Props> {
    62    shouldComponentUpdate(nextProps) {
    63      return nextProps.opened !== this.props.opened;
    64    }
    65  
    66    // clickOn returns a click event handler function for the given menu item.
    67    clickOn = (menu) => (event) => {
    68      event.preventDefault();
    69      this.props.changeContent(menu);
    70    };
    71  
    72    // menuItems returns the menu items corresponding to the sidebar state.
    73    menuItems = (transitionState) => {
    74      const { classes } = this.props;
    75      const children = [];
    76      MENU.forEach((menu) => {
    77        children.push(
    78          <ListItem
    79            button
    80            key={menu.id}
    81            onClick={this.clickOn(menu.id)}
    82            className={classes.listItem}
    83          >
    84            <ListItemIcon>
    85              <Icon className={classes.icon}>
    86                <FontAwesome name={menu.icon} />
    87              </Icon>
    88            </ListItemIcon>
    89            <ListItemText
    90              primary={menu.title}
    91              style={{
    92                ...styles.menu.default,
    93                ...styles.menu.transition[transitionState],
    94                padding: 0,
    95              }}
    96            />
    97          </ListItem>
    98        );
    99      });
   100      return children;
   101    };
   102  
   103    // menu renders the list of the menu items.
   104    menu = (transitionState: Object) => (
   105      <div className={this.props.classes.list}>
   106        <List>{this.menuItems(transitionState)}</List>
   107      </div>
   108    );
   109  
   110    render() {
   111      return (
   112        <Transition
   113          mountOnEnter
   114          in={this.props.opened}
   115          timeout={{ enter: DURATION }}
   116        >
   117          {this.menu}
   118        </Transition>
   119      );
   120    }
   121  }
   122  
   123  export default withStyles(themeStyles)(SideBar);