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             <Link to='/unspents' activeClassName={styles.active}>
  79               {navIcon('unspent', styles)}
  80               {lang === 'zh' ? '未花费输出' : 'Unspent outputs' }
  81             </Link>
  82           </li>
  83         </ul>}
  84
  85         <ul className={styles.navigation}>
  86           <li className={styles.navigationTitle}>{lang === 'zh' ? '帮助' : 'help' }</li>
  87           <li>
  88             <a href={docsRoot} target='_blank'>
  89               {navIcon('docs', styles)}
  90               {lang === 'zh' ? '文档' : 'Documentation'}
  91             </a>
  92           </li>
  93         </ul>
  94
  95         <Sync
  96           lang={lang}
  97         />
  98
  99       </div>
 100     )
 101   }
 102 }
 103
 104 export default connect(
 105   state => {
 106     let docVersion = ''
 107
 108     const versionComponents = state.core.version.match('^([0-9]\\.[0-9])\\.')
 109     if (versionComponents != null) {
 110       docVersion = versionComponents[1]
 111     }
 112
 113     return {
 114       coreData: state.core.coreData,
 115       routing: state.routing, // required for <Link>s to update active state on navigation
 116       showSync: state.core.configured && !state.core.generator,
 117       lang: state.core.lang,
 118       mockhsm: true,
 119       docVersion,
 120       showNavAdvance: state.app.navAdvancedState === 'advance'
 121     }
 122   },
 123   (dispatch) => ({
 124     showNavAdvanced: () => dispatch(appAction.showNavAdvanced),
 125     hideNavAdvanced: () => dispatch(appAction.hideNavAdvanced),
 126     openTutorial: () => dispatch({type: 'OPEN_TUTORIAL'}),
 127     setLang: (event) => {
 128       dispatch({
 129         type: 'UPDATE_CORE_LANGUAGE',
 130         lang: event
 131       })
 132     }
 133   })
 134 )(Navigation)