Creat a maskInput Widget for the amount field

diff --git a/src/features/shared/components/AmountUnitField/AmountUnitField.jsx b/src/features/shared/components/AmountUnitField/AmountUnitField.jsx
new file mode 100644 (file)
index 0000000..43400f5
--- /dev/null
+++ b/src/features/shared/components/AmountUnitField/AmountUnitField.jsx
@@ -0,0 +1,130 @@
+import React from 'react'
+import styles from './AmountUnitField.scss'
+import { DropdownButton, MenuItem } from 'react-bootstrap'
+import { FieldLabel } from 'features/shared/components'
+import pick from 'lodash/pick'
+
+const BTMAmountUnit = ['BTM', 'mBTM', 'NEU']
+
+const TEXT_FIELD_PROPS = [
+  'value',
+  'onBlur',
+  'onChange',
+  'onFocus',
+  'name'
+]
+
+class AmountUnitField extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showDropdown: false,
+      selected: 'BTM',
+      value: props.value,
+    }
+
+    this.select = this.select.bind(this)
+    this.toggleDropwdown = this.toggleDropwdown.bind(this)
+    this.closeDropdown = this.closeDropdown.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleBlur = this.handleBlur.bind(this)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      value: nextProps.value,
+    })
+  }
+
+  toggleDropwdown() {
+    this.setState({ showDropdown: !this.state.showDropdown })
+  }
+
+  closeDropdown() {
+    this.setState({ showDropdown: false })
+  }
+
+  select(value) {
+    this.setState({ selected: value })
+    const amount = this.props.fieldProps.value
+    switch (value){
+      case 'BTM':
+        this.props.fieldProps.value = amount/100000000
+        break
+      case 'mBTM':
+        this.props.fieldProps.value = amount/100000
+        break
+      case 'NEU':
+        this.props.fieldProps.value = amount
+    }
+    this.closeDropdown()
+  }
+
+  handleBlur() {
+    if (this.props.onBlur) {
+      // Swallow the event to prevent Redux Form from
+      // extracting the form value
+      this.props.onBlur()
+    }
+  }
+
+  handleChange(event) {
+    const value = event.target.value
+
+    // Update the internal state to trigger a re-render
+    // using the formatted value
+    this.setState({value: value})
+
+    if (this.props.onChange) {
+      // Notify the normalized value
+      debugger
+      this.props.onChange(
+        this.props.normalize(value)
+      )
+    }
+  }
+
+  render() {
+    const fieldProps = pick(this.props.fieldProps, TEXT_FIELD_PROPS)
+    const {touched, error} = this.props.fieldProps
+
+    return(
+      <div className='form-group'>
+        {this.props.title && <FieldLabel>{this.props.title}</FieldLabel>}
+        <div className='input-group'>
+
+
+          {<input className='form-control'
+            type={this.state.type}
+            placeholder={this.props.placeholder}
+            autoFocus={!!this.props.autoFocus}
+            {...fieldProps}
+            value={this.props.format(this.state.value)}
+            onChange={this.handleChange}
+            onBlur={this.handleBlur}
+          />}
+
+
+          <div className={`input-group-btn ${this.state.showDropdown && 'open'}`}>
+            <DropdownButton
+              className={styles.dropdownButton}
+              id='input-dropdown-addon'
+              title={this.state.selected}
+              onSelect={this.select}
+            >
+              {BTMAmountUnit.map((option) =>
+                <MenuItem eventKey={option}>{option}</MenuItem>
+              )}
+            </DropdownButton>
+          </div>
+
+        </div>
+        {touched && error && <span className='text-danger'><strong>{error}</strong></span>}
+        {this.props.hint && <span className='help-block'>{this.props.hint}</span>}
+      </div>
+    )
+  }
+}
+
+export default AmountUnitField
\ No newline at end of file

diff --git a/src/features/shared/components/AmountUnitField/AmountUnitField.scss b/src/features/shared/components/AmountUnitField/AmountUnitField.scss
new file mode 100644 (file)
index 0000000..37af649
--- /dev/null
+++ b/src/features/shared/components/AmountUnitField/AmountUnitField.scss
@@ -0,0 +1,3 @@
+.base {
+  background: red;
+}

diff --git a/src/features/shared/components/index.js b/src/features/shared/components/index.js
index 1ec53bb..52745ab 100644 (file)
--- a/src/features/shared/components/index.js
+++ b/src/features/shared/components/index.js
@@ -1,3 +1,4 @@
+import AmountUnitField from './AmountUnitField/AmountUnitField'
 import CheckboxField from './CheckboxField/CheckboxField'
 import Autocomplete from './Autocomplete'
 import BaseUpdate from './BaseUpdate'
@@ -32,6 +33,7 @@ import TextField from './TextField'
 import XpubField from './XpubField/XpubField'
 
 export {
+  AmountUnitField,
   CheckboxField,
   Autocomplete,
   BaseUpdate,