fix(Coinify): use NumberBox; fix TextBox gDSFP; do not show spinner o…

…n input with type number
blockchain · Jun 11, 2018 · 7f714fe · 7f714fe
1 parent ee072de
commit 7f714fe
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/packages/blockchain-info-components/src/Form/NumberInput.js b/packages/blockchain-info-components/src/Form/NumberInput.js
@@ -26,6 +26,11 @@ const BaseNumberInput = styled.input.attrs({
     color: ${props => props.theme['gray-3']};
     opacity: 0.4;
   }
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 `
 
 const selectBorderColor = (state) => {

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/TextBoxDebounced/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/TextBoxDebounced/index.js
@@ -35,8 +35,11 @@ class TextBoxDebounced extends React.Component {
   }
 
   static getDerivedStateFromProps (nextProps, prevState) {
-    if (!equals(nextProps.input.value, prevState)) {
-      return { value: nextProps.input.value }
+    if (!equals(prevState.updatedValue, prevState.value)) {
+      return { updatedValue: prevState.updatedValue, value: prevState.updatedValue }
+    }
+    if (!equals(nextProps.input.value, prevState.value)) {
+      return { updatedValue: nextProps.input.value, value: nextProps.input.value }
     }
     return null
   }
@@ -48,11 +51,12 @@ class TextBoxDebounced extends React.Component {
   handleChange (e) {
     e.preventDefault()
     const value = e.target.value
-    this.setState({ value })
-    if (this.timeout) clearTimeout(this.timeout)
+    this.setState({ updatedValue: value })
+
+    clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
       this.props.input.onChange(value)
-    }, 10)
+    }, 500)
   }
 
   handleBlur () {

diff --git a/...chain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInputTemplate.js b/...chain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInputTemplate.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { Icon, Text } from 'blockchain-info-components'
-import { SelectBoxCoinifyCurrency, TextBoxDebounced } from 'components/Form'
+import { SelectBoxCoinifyCurrency, NumberBoxDebounced } from 'components/Form'
 import { Field, reduxForm } from 'redux-form'
 import { head } from 'ramda'
 import { getReasonExplanation } from 'services/CoinifyService'
@@ -145,12 +145,12 @@ const FiatConvertor = (props) => {
     <Wrapper>
       <FiatConvertorInput>
         <Container>
-          <Field name='leftVal' component={TextBoxDebounced} disabled={disabled || !canTrade} borderRightNone={1} />
+          <Field name='leftVal' component={NumberBoxDebounced} disabled={disabled || !canTrade} borderRightNone={1} />
           <Field name='currency' component={SelectBoxCoinifyCurrency} defaultDisplay={defaultCurrency} isSell={isSell} />
         </Container>
         <ArrowRight weight={600} size='22px' name='right-arrow' />
         <Container>
-          <Field name='rightVal' component={TextBoxDebounced} disabled={disabled || !canTrade} />
+          <Field name='rightVal' component={NumberBoxDebounced} disabled={disabled || !canTrade} />
           <Unit>{currency}</Unit>
         </Container>
       </FiatConvertorInput>