src/features/app/components/Main/Main.jsx

   1 import React from 'react'
   2 import styles from './Main.scss'
   3 import { MenuItem, Dropdown } from 'react-bootstrap'
   4 import { Link } from 'react-router'
   5 import { connect } from 'react-redux'
   6 import actions from 'actions'
   7 import Tutorial from 'features/tutorial/components/Tutorial'
   8 import TutorialHeader from 'features/tutorial/components/TutorialHeader/TutorialHeader'
   9 import { Navigation, SecondaryNavigation } from '../'
  10 import { withNamespaces } from 'react-i18next'
  11
  12 class Main extends React.Component {
  13
  14   constructor(props) {
  15     super(props)
  16
  17     this.state = {
  18       tutorialHeight: 0
  19     }
  20     this.toggleDropdown = this.toggleDropdown.bind(this)
  21     this.setTutorialHeight = this.setTutorialHeight.bind(this)
  22   }
  23
  24   setTutorialHeight(height) {
  25     this.setState({tutorialHeight: height })
  26   }
  27
  28   toggleDropdown(event) {
  29     event.stopPropagation()
  30     this.props.toggleDropdown()
  31   }
  32
  33   render() {
  34     let logo = require('images/logo-bytom-white.svg')
  35
  36     const { t, i18n , version } = this.props
  37
  38     const changeLanguage = (lng) => {
  39       i18n.changeLanguage(lng)
  40     }
  41
  42     return (
  43       <div className={styles.main}
  44            onClick={this.props.closeDropdown} >
  45         <div className={styles.sidebar}>
  46           <div className={styles.sidebarContent}>
  47             <div className={styles.logo}>
  48               <Link to={'/'}>
  49                 <img src={logo} className={styles.brand_image} />
  50               </Link>
  51
  52               <Dropdown
  53                 id='dropdown-custom-1'
  54                 bsSize='xsmall'
  55                 className={styles.languagesContainer}
  56                 pullRight
  57                 onSelect={changeLanguage}
  58               >
  59                 <Dropdown.Toggle
  60                   className={styles.languages}
  61                   noCaret
  62                 >
  63                   {t('language')}
  64                 </Dropdown.Toggle>
  65                 <Dropdown.Menu
  66                   className={styles.languagesMenu}
  67                 >
  68                   <MenuItem eventKey='zh'>中文</MenuItem>
  69                   <MenuItem eventKey='en'>ENGLISH</MenuItem>
  70                 </Dropdown.Menu>
  71               </Dropdown>
  72
  73               <span>
  74                 <span className={styles.settings} onClick={this.toggleDropdown}>
  75                   <img src={require('images/navigation/settings.png')}/>
  76                 </span>
  77                 {this.props.showDropwdown && <SecondaryNavigation/>}
  78               </span>
  79             </div>
  80
  81             <Navigation />
  82
  83             <div className={styles.version}>
  84               <span>
  85                 {t('commonWords.version')}: {version}
  86               </span>
  87             </div>
  88
  89           </div>
  90         </div>
  91
  92         <div className={`${styles.content} flex-container`} style={{marginTop: this.state.tutorialHeight}}>
  93           {!this.props.connected && <div className={styles.connectionIssue}>
  94             There was an issue connecting to Chain Core. Please check your connection while dashboard attempts to reconnect.
  95           </div>}
  96           <TutorialHeader handleTutorialHeight={this.setTutorialHeight}>
  97             <Tutorial types={['TutorialInfo']}/>
  98           </TutorialHeader>
  99           {this.props.children}
 100         </div>
 101       </div>
 102     )
 103   }
 104 }
 105
 106 export default withNamespaces('translations') (connect(
 107   (state) => ({
 108     canLogOut: state.core.requireClientToken,
 109     version:state.core.version,
 110     connected: true,
 111     showDropwdown: state.app.dropdownState == 'open',
 112   }),
 113   (dispatch) => ({
 114     toggleDropdown: () => dispatch(actions.app.toggleDropdown),
 115     closeDropdown: () => dispatch(actions.app.closeDropdown),
 116   })
 117 )(Main))