Merge pull request #549 from gre/allow-sub-magnitude-fiats

Allow sub magnitude in fiat field if below one cent

src/components/RequestAmount/index.js

@@ -79,6 +79,9 @@ const mapStateToProps = (state: State, props: OwnProps) => {
   const counterValueCurrency = counterValueCurrencySelector(state)
   const fromExchange = currencySettingsSelector(state, { currency }).exchange
   const toExchange = counterValueExchangeSelector(state)
+
+  // FIXME this make the component not working with "Pure". is there a way we can calculate here whatever needs to be?
+  // especially the value comes from props!
   const getCounterValue = value =>
     CounterValues.calculateWithIntermediarySelector(state, {
       from: currency,
@@ -87,8 +90,8 @@ const mapStateToProps = (state: State, props: OwnProps) => {
       toExchange,
       to: counterValueCurrency,
       value,
+      disableRounding: true,
     })
-
   const getReverseCounterValue = value =>
     CounterValues.reverseWithIntermediarySelector(state, {
       from: currency,
@@ -130,10 +133,15 @@ export class RequestAmount extends PureComponent<Props> {
     }
   }
 
+  onLeftChange = this.handleChangeAmount('left')
+  onRightChange = this.handleChangeAmount('right')
+
   renderInputs(containerProps: Object) {
+    // TODO move this inlined into render() for less spaghetti
     const { value, account, rightCurrency, getCounterValue, canBeSpent } = this.props
     const right = getCounterValue(value) || 0
     const rightUnit = rightCurrency.units[0]
+    // FIXME: no way InputCurrency pure can work here. inlined InputRight (should be static func?), inline containerProps object..
     return (
       <Box horizontal grow shrink>
         <InputCurrency
@@ -141,7 +149,7 @@ export class RequestAmount extends PureComponent<Props> {
           containerProps={containerProps}
           defaultUnit={account.unit}
           value={value}
-          onChange={this.handleChangeAmount('left')}
+          onChange={this.onLeftChange}
           renderRight={<InputRight>{account.unit.code}</InputRight>}
         />
         <InputCenter>=</InputCenter>
@@ -149,9 +157,10 @@ export class RequestAmount extends PureComponent<Props> {
           containerProps={containerProps}
           defaultUnit={rightUnit}
           value={right}
-          onChange={this.handleChangeAmount('right')}
+          onChange={this.onRightChange}
           renderRight={<InputRight>{rightUnit.code}</InputRight>}
           showAllDigits
+          subMagnitude={3}
         />
       </Box>
     )

src/components/base/InputCurrency/index.js

@@ -18,12 +18,13 @@ function parseValue(value) {
   return value.toString().replace(/,/g, '.')
 }
 
-function format(unit: Unit, value: number, { isFocused, showAllDigits }) {
+function format(unit: Unit, value: number, { isFocused, showAllDigits, subMagnitude }) {
   // FIXME do we need locale for the input too ?
   return formatCurrencyUnit(unit, value, {
     useGrouping: !isFocused,
     disableRounding: true,
     showAllDigits: !!showAllDigits && !isFocused,
+    subMagnitude: value < 1 ? subMagnitude : 0,
   })
 }
 
@@ -53,6 +54,7 @@ type Props = {
   units: Unit[],
   value: number,
   showAllDigits?: boolean,
+  subMagnitude: number,
 }
 
 type State = {
@@ -68,6 +70,7 @@ class InputCurrency extends PureComponent<Props, State> {
     units: [],
     value: 0,
     showAllDigits: false,
+    subMagnitude: 0,
   }
 
   state = {
@@ -94,6 +97,7 @@ class InputCurrency extends PureComponent<Props, State> {
             : format(nextProps.unit, nextProps.value, {
                 isFocused,
                 showAllDigits: nextProps.showAllDigits,
+                subMagnitude: nextProps.subMagnitude,
               }),
       })
     }
@@ -135,11 +139,13 @@ class InputCurrency extends PureComponent<Props, State> {
   }
 
   syncInput = ({ isFocused }: { isFocused: boolean }) => {
-    const { value, showAllDigits, unit } = this.props
+    const { value, showAllDigits, subMagnitude, unit } = this.props
     this.setState({
       isFocused,
       displayValue:
-        value === '' || value === 0 ? '' : format(unit, value, { isFocused, showAllDigits }),
+        value === '' || value === 0
+          ? ''
+          : format(unit, value, { isFocused, showAllDigits, subMagnitude }),
     })
   }
 
@@ -183,7 +189,7 @@ class InputCurrency extends PureComponent<Props, State> {
   }
 
   render() {
-    const { renderRight, showAllDigits, unit } = this.props
+    const { renderRight, showAllDigits, unit, subMagnitude } = this.props
     const { displayValue } = this.state
 
     return (
@@ -195,7 +201,7 @@ class InputCurrency extends PureComponent<Props, State> {
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         renderRight={renderRight || this.renderListUnits()}
-        placeholder={format(unit, 0, { isFocused: false, showAllDigits })}
+        placeholder={format(unit, 0, { isFocused: false, showAllDigits, subMagnitude })}
       />
     )
   }