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