github.com/tuotoo/go-ethereum@v1.7.4-0.20171121184211-049797d40a24/dashboard/assets/components/Main.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 classNames from 'classnames';
    20  import {withStyles} from 'material-ui/styles';
    21  
    22  import {TAGS, DRAWER_WIDTH} from "./Common.jsx";
    23  import Home from './Home.jsx';
    24  
    25  // ContentSwitch chooses and renders the proper page content.
    26  class ContentSwitch extends Component {
    27      render() {
    28          switch(this.props.active) {
    29              case TAGS.home.id:
    30                  return <Home memory={this.props.memory} traffic={this.props.traffic} shouldUpdate={this.props.shouldUpdate} />;
    31              case TAGS.chain.id:
    32                  return null;
    33              case TAGS.transactions.id:
    34                  return null;
    35              case TAGS.network.id:
    36                  // Only for testing.
    37                  return null;
    38              case TAGS.system.id:
    39                  return null;
    40              case TAGS.logs.id:
    41                  return <div>{this.props.logs.map((log, index) => <div key={index}>{log}</div>)}</div>;
    42          }
    43          return null;
    44      }
    45  }
    46  
    47  ContentSwitch.propTypes = {
    48      active:       PropTypes.string.isRequired,
    49      shouldUpdate: PropTypes.object.isRequired,
    50  };
    51  
    52  // styles contains the styles for the Main component.
    53  const styles = theme => ({
    54      content: {
    55          width:           '100%',
    56          marginLeft:      -DRAWER_WIDTH,
    57          flexGrow:        1,
    58          backgroundColor: theme.palette.background.default,
    59          padding:         theme.spacing.unit * 3,
    60          transition:      theme.transitions.create('margin', {
    61              easing:   theme.transitions.easing.sharp,
    62              duration: theme.transitions.duration.leavingScreen,
    63          }),
    64          marginTop:                    56,
    65          overflow:                     'auto',
    66          [theme.breakpoints.up('sm')]: {
    67              content: {
    68                  height:    'calc(100% - 64px)',
    69                  marginTop: 64,
    70              },
    71          },
    72      },
    73      contentShift: {
    74          marginLeft: 0,
    75          transition: theme.transitions.create('margin', {
    76              easing:   theme.transitions.easing.easeOut,
    77              duration: theme.transitions.duration.enteringScreen,
    78          }),
    79      },
    80  });
    81  
    82  // Main renders a component for the page content.
    83  class Main extends Component {
    84      render() {
    85          // The classes property is injected by withStyles().
    86          const {classes} = this.props;
    87  
    88          return (
    89              <main className={classNames(classes.content, this.props.opened && classes.contentShift)}>
    90                  <ContentSwitch
    91                      active={this.props.active}
    92                      memory={this.props.memory}
    93                      traffic={this.props.traffic}
    94                      logs={this.props.logs}
    95                      shouldUpdate={this.props.shouldUpdate}
    96                  />
    97              </main>
    98          );
    99      }
   100  }
   101  
   102  Main.propTypes = {
   103      classes:      PropTypes.object.isRequired,
   104      opened:       PropTypes.bool.isRequired,
   105      active:       PropTypes.string.isRequired,
   106      shouldUpdate: PropTypes.object.isRequired,
   107  };
   108  
   109  export default withStyles(styles)(Main);