src/features/shared/components/XpubField/XpubField.jsx

   1 import React from 'react'
   2 import styles from './XpubField.scss'
   3 import { SelectField, FieldLabel, TextField } from '../'
   4 import { connect } from 'react-redux'
   5 import actions from 'features/mockhsm/actions'
   6 import {withNamespaces} from 'react-i18next'
   7
   8 const methodOptions = ['mockhsm', 'provide']
   9
  10 class XpubField extends React.Component {
  11   constructor(props) {
  12     super(props)
  13
  14     this.state = {
  15       generate: '',
  16       mockhsm: '',
  17       provide: '',
  18       autofocusInput: false
  19     }
  20   }
  21
  22   componentDidMount() {
  23     if (!this.props.autocompleteIsLoaded) {
  24       this.props.fetchAll().then(() => {
  25         this.props.didLoadAutocomplete()
  26       })
  27     }
  28
  29     this.props.typeProps.onChange(methodOptions[0])
  30   }
  31
  32   render() {
  33     const {
  34       typeProps,
  35       valueProps,
  36       mockhsmKeys,
  37       t
  38     } = this.props
  39
  40     const typeOnChange = event => {
  41       const value = typeProps.onChange(event).value
  42       valueProps.onChange(this.state[value] || '')
  43       this.setState({ autofocusInput: true })
  44     }
  45
  46     const valueOnChange = event => {
  47       const value = valueProps.onChange(event).value
  48       this.setState({ [typeProps.value]: value })
  49     }
  50
  51     const fields = {
  52       'mockhsm': <SelectField options={mockhsmKeys}
  53         autoFocus={this.state.autofocusInput}
  54         valueKey='xpub'
  55         labelKey='label'
  56         fieldProps={{...valueProps, onChange: valueOnChange}} />,
  57       'provide': <TextField
  58         autoFocus={this.state.autofocusInput}
  59         fieldProps={{...valueProps, onChange: valueOnChange}}
  60         placeholder={ t('xpub.providePlaceholder') } />,
  61       'generate': <TextField
  62         autoFocus={this.state.autofocusInput}
  63         fieldProps={{...valueProps, onChange: valueOnChange}}
  64         placeholder='Alias for generated key (leave blank for automatic value)' />,
  65     }
  66
  67     return (
  68       <div className={styles.main}>
  69         <FieldLabel>{t('form.key')}{this.props.index + 1}</FieldLabel>
  70
  71         <table className={styles.options}>
  72           <tbody>
  73             {methodOptions.map((key) =>
  74               <tr key={`key-${this.props.index}-option-${key}`}>
  75                 <td className={styles.label}>
  76                   <label>
  77                     <input type='radio'
  78                       className={styles.radio}
  79                       name={`keys-${this.props.index}`}
  80                       onChange={typeOnChange}
  81                       checked={key == typeProps.value}
  82                       value={key}
  83                     />
  84                     { t('xpub.methodOptions', { returnObjects: true })[key]}
  85                   </label>
  86                 </td>
  87
  88                 <td className={styles.field}>
  89                   {typeProps.value == key && fields[key]}
  90                 </td>
  91               </tr>
  92             )}
  93           </tbody>
  94         </table>
  95       </div>
  96     )
  97   }
  98 }
  99
 100 XpubField.propTypes = {
 101   index: React.PropTypes.number,
 102   typeProps: React.PropTypes.object,
 103   valueProps: React.PropTypes.object,
 104   mockhsmKeys: React.PropTypes.array,
 105   autocompleteIsLoaded: React.PropTypes.bool,
 106   fetchAll: React.PropTypes.func,
 107   didLoadAutocomplete: React.PropTypes.func,
 108 }
 109
 110 export default connect(
 111   (state) => {
 112     let keys = []
 113     for (var key in state.key.items) {
 114       const item = state.key.items[key]
 115       keys.push({
 116         ...item,
 117         label: item.alias ? item.alias : item.id.slice(0, 32) + '...'
 118       })
 119     }
 120
 121     return {
 122       autocompleteIsLoaded: state.key.autocompleteIsLoaded,
 123       mockhsmKeys: keys,
 124     }
 125   },
 126   (dispatch) => ({
 127     didLoadAutocomplete: () => dispatch(actions.didLoadAutocomplete),
 128     fetchAll: (cb) => dispatch(actions.fetchAll(cb)),
 129   })
 130 )(withNamespaces('translations')(XpubField))