src/features/shared/components/GasField/GasField.jsx

   1 import React from 'react'
   2 import pick from 'lodash/pick'
   3 import { normalizeBTMAmountUnit } from 'utility/buildInOutDisplay'
   4 import { btmID } from 'utility/environment'
   5 import styles from './GasField.scss'
   6
   7 const TEXT_FIELD_PROPS = [
   8   'value',
   9   'onBlur',
  10   'onChange',
  11   'onFocus',
  12   'name'
  13 ]
  14
  15 class GasField extends React.Component {
  16   constructor(props) {
  17     super(props)
  18   }
  19
  20   render() {
  21     const fieldProps = pick(this.props.fieldProps, TEXT_FIELD_PROPS)
  22     const {touched, error} = this.props.fieldProps
  23
  24     return(
  25       <div className={`form-group ${styles.slider}`}>
  26         {this.props.gas && <span>{normalizeBTMAmountUnit(btmID, fieldProps.value* this.props.gas, this.props.btmAmountUnit)}</span>}
  27         <input className={fieldProps.value>0&&styles[`gradient-${fieldProps.value}`]}
  28                type='range'
  29                min={0}
  30                max={3}
  31                step='1'
  32                {...fieldProps} />
  33
  34         {touched && error && <span className='text-danger'><strong>{error}</strong></span>}
  35         {this.props.hint && <span className='help-block'>{this.props.hint}</span>}
  36       </div>
  37     )
  38   }
  39 }
  40
  41 export default GasField