src/features/app/components/Navigation/Navigation.jsx

   1 import React from 'react'
   2 import {connect} from 'react-redux'
   3 import {Link} from 'react-router'
   4 import styles from './Navigation.scss'
   5 import {navIcon} from '../../utils'
   6 import Sync from '../Sync/Sync'
   7 import appAction from '../../../app/actions'
   8 import {docsRoot} from '../../../../utility/environment'
   9
  10 class Navigation extends React.Component {
  11   constructor(props) {
  12     super(props)
  13
  14     this.openTutorial = this.openTutorial.bind(this)
  15   }
  16
  17   componentDidMount() {
  18     if(window.ipcRenderer){
  19       window.ipcRenderer.on('toggleNavState', (event, arg) => {
  20         arg === 'advance'? this.props.showNavAdvanced() : this.props.hideNavAdvanced()
  21       })
  22     }
  23   }
  24
  25   openTutorial(event) {
  26     event.preventDefault()
  27     this.props.openTutorial()
  28   }
  29
  30   render() {
  31     const lang = this.props.lang
  32     return (
  33       <div className={styles.main}>
  34         <ul className={styles.navigation}>
  35           <li className={styles.navigationTitle}>{lang === 'zh' ? '核心数据' : 'core data'}</li>
  36           <li>
  37             <Link to='/transactions' activeClassName={styles.active}>
  38               {navIcon('transaction', styles)}
  39               {}
  40               {lang === 'zh' ? '交易' : 'Transactions'}
  41             </Link>
  42           </li>
  43           <li>
  44             <Link to='/accounts' activeClassName={styles.active}>
  45               {navIcon('account', styles)}
  46               {lang === 'zh' ? '账户' : 'Accounts'}
  47             </Link>
  48           </li>
  49           <li>
  50             <Link to='/assets' activeClassName={styles.active}>
  51               {navIcon('asset', styles)}
  52               {lang === 'zh' ? '资产' : 'Assets'}
  53             </Link>
  54           </li>
  55           <li>
  56             <Link to='/balances' activeClassName={styles.active}>
  57               {navIcon('balance', styles)}
  58               {lang === 'zh' ? '余额' : 'Balances'}
  59             </Link>
  60           </li>
  61         </ul>
  62
  63         <ul className={styles.navigation}>
  64           <li className={styles.navigationTitle}>{lang === 'zh' ? '服务' : 'services' }</li>
  65           {this.props.mockhsm &&
  66           <li>
  67             <Link to='/keys' activeClassName={styles.active}>
  68               {navIcon('mockhsm', styles)}
  69               {lang === 'zh' ? '密钥' : 'Keys'}
  70             </Link>
  71           </li>
  72           }
  73         </ul>
  74
  75         { this.props.showNavAdvance && <ul className={styles.navigation}>
  76           <li className={styles.navigationTitle}>{lang === 'zh' ? '高级' : 'advanced' }</li>
  77           <li>
  78             <a href='/equity' target='_blank'>
  79               {navIcon('transaction', styles)}
  80               {lang === 'zh' ? 'Equity 合约' : 'Equity Contract'}
  81             </a>
  82           </li>
  83           <li>
  84             <Link to='/unspents' activeClassName={styles.active}>
  85               {navIcon('unspent', styles)}
  86               {lang === 'zh' ? '未花费输出' : 'Unspent outputs' }
  87             </Link>
  88           </li>
  89         </ul>}
  90
  91         <ul className={styles.navigation}>
  92           <li className={styles.navigationTitle}>{lang === 'zh' ? '帮助' : 'help' }</li>
  93           <li>
  94             <a href={docsRoot} target='_blank'>
  95               {navIcon('docs', styles)}
  96               {lang === 'zh' ? '文档' : 'Documentation'}
  97             </a>
  98           </li>
  99         </ul>
 100
 101         <Sync
 102           lang={lang}
 103         />
 104
 105       </div>
 106     )
 107   }
 108 }
 109
 110 export default connect(
 111   state => {
 112     let docVersion = ''
 113
 114     const versionComponents = state.core.version.match('^([0-9]\\.[0-9])\\.')
 115     if (versionComponents != null) {
 116       docVersion = versionComponents[1]
 117     }
 118
 119     return {
 120       coreData: state.core.coreData,
 121       routing: state.routing, // required for <Link>s to update active state on navigation
 122       showSync: state.core.configured && !state.core.generator,
 123       lang: state.core.lang,
 124       mockhsm: true,
 125       docVersion,
 126       showNavAdvance: state.app.navAdvancedState === 'advance'
 127     }
 128   },
 129   (dispatch) => ({
 130     showNavAdvanced: () => dispatch(appAction.showNavAdvanced),
 131     hideNavAdvanced: () => dispatch(appAction.hideNavAdvanced),
 132     setLang: (event) => {
 133       dispatch({
 134         type: 'UPDATE_CORE_LANGUAGE',
 135         lang: event
 136       })
 137     }
 138   })
 139 )(Navigation)