src/features/shared/components/AmountUnitField/AmountUnitField.jsx

   1 import React from 'react'
   2 import styles from './AmountUnitField.scss'
   3 import { DropdownButton, MenuItem } from 'react-bootstrap'
   4 import { converIntToDec, addZeroToDecimalPosition, formatBTMAmount, parseBTMAmount } from 'utility/buildInOutDisplay'
   5 import { FieldLabel } from 'features/shared/components'
   6 import pick from 'lodash/pick'
   7
   8 const BTMAmountUnit = ['BTM', 'mBTM', 'NEU']
   9
  10 const TEXT_FIELD_PROPS = [
  11   'value',
  12   'onBlur',
  13   'onChange',
  14   'onFocus',
  15   'name'
  16 ]
  17
  18 class AmountUnitField extends React.Component {
  19   constructor(props) {
  20     super(props)
  21
  22     this.state = {
  23       showDropdown: false,
  24       selected: 'BTM',
  25       pos: 8,
  26       value: props.fieldProps.value,
  27     }
  28
  29     this.select = this.select.bind(this)
  30     this.toggleDropwdown = this.toggleDropwdown.bind(this)
  31     this.closeDropdown = this.closeDropdown.bind(this)
  32     this.handleChange = this.handleChange.bind(this)
  33     this.handleBlur = this.handleBlur.bind(this)
  34   }
  35
  36
  37   toggleDropwdown() {
  38     this.setState({ showDropdown: !this.state.showDropdown })
  39   }
  40
  41   closeDropdown() {
  42     this.setState({ showDropdown: false })
  43   }
  44
  45   select(value) {
  46     this.setState({ selected: value })
  47     const amount = this.props.fieldProps.value
  48     switch (value){
  49       case 'BTM':
  50         this.setState({pos: 8})
  51         this.setState({value: converIntToDec(amount, 8)})
  52         break
  53       case 'mBTM':
  54         this.setState({pos: 5})
  55         this.setState({value: converIntToDec(amount, 5)})
  56         break
  57       case 'NEU':
  58         this.setState({pos: 0})
  59         this.setState({value: amount})
  60
  61     }
  62     this.closeDropdown()
  63   }
  64
  65   handleBlur(event) {
  66     const value = event.target.value
  67     this.setState({ value: addZeroToDecimalPosition( value, this.state.pos ) })
  68     if (this.props.fieldProps.onBlur) {
  69       // Swallow the event to prevent Redux Form from
  70       // extracting the form value
  71       this.props.fieldProps.onBlur()
  72     }
  73   }
  74
  75   handleChange(event) {
  76     const value = event.target.value
  77     // Update the internal state to trigger a re-render
  78     // using the formatted value
  79     this.setState({ value: value })
  80     if (this.props.fieldProps.onChange) {
  81       // Notify the normalized value
  82       this.props.fieldProps.onChange(
  83         parseBTMAmount(value, this.state.pos )
  84       )
  85     }
  86   }
  87
  88   render() {
  89     const fieldProps = pick(this.props.fieldProps, TEXT_FIELD_PROPS)
  90     const {touched, error} = this.props.fieldProps
  91
  92     return(
  93       <div className='form-group'>
  94         {this.props.title && <FieldLabel>{this.props.title}</FieldLabel>}
  95         <div className='input-group'>
  96           {<input className='form-control'
  97             type={this.state.type}
  98             {...fieldProps}
  99             value={formatBTMAmount(this.state.value, this.state.pos)}
 100             placeholder={this.props.placeholder}
 101             autoFocus={!!this.props.autoFocus}
 102             onBlur={this.handleBlur}
 103             onChange={this.handleChange}
 104           />}
 105
 106
 107           <div className={`input-group-btn ${this.state.showDropdown && 'open'}`}>
 108             <DropdownButton
 109               className={styles.dropdownButton}
 110               id='input-dropdown-addon'
 111               title={this.state.selected}
 112               onSelect={this.select}
 113             >
 114               {BTMAmountUnit.map((option) =>
 115                 <MenuItem eventKey={option}>{option}</MenuItem>
 116               )}
 117             </DropdownButton>
 118           </div>
 119
 120         </div>
 121         {touched && error && <span className='text-danger'><strong>{error}</strong></span>}
 122         {this.props.hint && <span className='help-block'>{this.props.hint}</span>}
 123       </div>
 124     )
 125   }
 126 }
 127
 128 export default AmountUnitField