github.com/isti4github/eth-ecc@v0.0.0-20201227085832-c337f2d99319/dashboard/assets/components/Main.jsx (about)

     1  // @flow
     2  
     3  // Copyright 2017 The go-ethereum Authors
     4  // This file is part of the go-ethereum library.
     5  //
     6  // The go-ethereum 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-ethereum 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-ethereum library. If not, see <http://www.gnu.org/licenses/>.
    18  
    19  import React, {Component} from 'react';
    20  
    21  import withStyles from '@material-ui/core/styles/withStyles';
    22  
    23  import Network from 'Network';
    24  import Logs from 'Logs';
    25  import Footer from 'Footer';
    26  import {MENU} from '../common';
    27  import type {Content} from '../types/content';
    28  
    29  // styles contains the constant styles of the component.
    30  const styles = {
    31  	wrapper: {
    32  		display:       'flex',
    33  		flexDirection: 'column',
    34  		width:         '100%',
    35  	},
    36  	content: {
    37  		flex:     1,
    38  		overflow: 'auto',
    39  	},
    40  };
    41  
    42  // themeStyles returns the styles generated from the theme for the component.
    43  const themeStyles = theme => ({
    44  	content: {
    45  		backgroundColor: theme.palette.background.default,
    46  		padding:         theme.spacing.unit * 3,
    47  	},
    48  });
    49  
    50  export type Props = {
    51  	classes:      Object,
    52  	active:       string,
    53  	content:      Content,
    54  	shouldUpdate: Object,
    55  	send:         string => void,
    56  };
    57  
    58  type State = {};
    59  
    60  // Main renders the chosen content.
    61  class Main extends Component<Props, State> {
    62  	constructor(props) {
    63  		super(props);
    64  		this.container = React.createRef();
    65  		this.content = React.createRef();
    66  	}
    67  
    68  	componentDidUpdate(prevProps, prevState, snapshot) {
    69  		if (this.content && typeof this.content.didUpdate === 'function') {
    70  			this.content.didUpdate(prevProps, prevState, snapshot);
    71  		}
    72  	}
    73  
    74  	onScroll = () => {
    75  		if (this.content && typeof this.content.onScroll === 'function') {
    76  			this.content.onScroll();
    77  		}
    78  	};
    79  
    80  	getSnapshotBeforeUpdate(prevProps: Readonly<P>, prevState: Readonly<S>) {
    81  		if (this.content && typeof this.content.beforeUpdate === 'function') {
    82  			return this.content.beforeUpdate();
    83  		}
    84  		return null;
    85  	}
    86  
    87  	render() {
    88  		const {
    89  			classes, active, content, shouldUpdate,
    90  		} = this.props;
    91  
    92  		let children = null;
    93  		switch (active) {
    94  		case MENU.get('home').id:
    95  			children = <div>Work in progress.</div>;
    96  			break;
    97  		case MENU.get('chain').id:
    98  			children = <div>Work in progress.</div>;
    99  			break;
   100  		case MENU.get('txpool').id:
   101  			children = <div>Work in progress.</div>;
   102  			break;
   103  		case MENU.get('network').id:
   104  			children = <Network
   105  				content={this.props.content.network}
   106  				container={this.container}
   107  			/>;
   108  			break;
   109  		case MENU.get('system').id:
   110  			children = <div>Work in progress.</div>;
   111  			break;
   112  		case MENU.get('logs').id:
   113  			children = (
   114  				<Logs
   115  					ref={(ref) => { this.content = ref; }}
   116  					container={this.container}
   117  					send={this.props.send}
   118  					content={this.props.content}
   119  					shouldUpdate={shouldUpdate}
   120  				/>
   121  			);
   122  		}
   123  
   124  		return (
   125  			<div style={styles.wrapper}>
   126  				<div
   127  					className={classes.content}
   128  					style={styles.content}
   129  					ref={(ref) => { this.container = ref; }}
   130  					onScroll={this.onScroll}
   131  				>
   132  					{children}
   133  				</div>
   134  				<Footer
   135  					general={content.general}
   136  					system={content.system}
   137  					shouldUpdate={shouldUpdate}
   138  				/>
   139  			</div>
   140  		);
   141  	}
   142  }
   143  
   144  export default withStyles(themeStyles)(Main);