github.com/arieschain/arieschain@v0.0.0-20191023063405-37c074544356/dashboard/assets/components/Main.jsx (about) 1 // @flow 2 3 4 import React, {Component} from 'react'; 5 6 import withStyles from 'material-ui/styles/withStyles'; 7 8 import {MENU} from '../common'; 9 import Footer from './Footer'; 10 import type {Content} from '../types/content'; 11 12 // styles contains the constant styles of the component. 13 const styles = { 14 wrapper: { 15 display: 'flex', 16 flexDirection: 'column', 17 width: '100%', 18 }, 19 content: { 20 flex: 1, 21 overflow: 'auto', 22 }, 23 }; 24 25 // themeStyles returns the styles generated from the theme for the component. 26 const themeStyles = theme => ({ 27 content: { 28 backgroundColor: theme.palette.background.default, 29 padding: theme.spacing.unit * 3, 30 }, 31 }); 32 33 export type Props = { 34 classes: Object, 35 active: string, 36 content: Content, 37 shouldUpdate: Object, 38 }; 39 40 // Main renders the chosen content. 41 class Main extends Component<Props> { 42 render() { 43 const { 44 classes, active, content, shouldUpdate, 45 } = this.props; 46 47 let children = null; 48 switch (active) { 49 case MENU.get('home').id: 50 case MENU.get('chain').id: 51 case MENU.get('txpool').id: 52 case MENU.get('network').id: 53 case MENU.get('system').id: 54 children = <div>Work in progress.</div>; 55 break; 56 case MENU.get('logs').id: 57 children = <div>{content.logs.log.map((log, index) => <div key={index}>{log}</div>)}</div>; 58 } 59 60 return ( 61 <div style={styles.wrapper}> 62 <div className={classes.content} style={styles.content}>{children}</div> 63 <Footer 64 general={content.general} 65 system={content.system} 66 shouldUpdate={shouldUpdate} 67 /> 68 </div> 69 ); 70 } 71 } 72 73 export default withStyles(themeStyles)(Main);