Delete onBlur handlers from currency and token input components (#7824)

As of #7753, the `onBlur` prop is no longer used for the `token-input`
and `currency-input` components, and the associated wrapper components
and the shared underlying component. It as been removed from all of
them.
feature/default_network_editable
Mark Stacey 5 years ago committed by GitHub
parent 73197b43e1
commit 74557bd68a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      ui/app/components/ui/currency-input/currency-input.component.js
  2. 23
      ui/app/components/ui/currency-input/tests/currency-input.component.test.js
  3. 17
      ui/app/components/ui/token-input/tests/token-input.component.test.js
  4. 6
      ui/app/components/ui/token-input/token-input.component.js
  5. 21
      ui/app/components/ui/unit-input/tests/unit-input.component.test.js
  6. 7
      ui/app/components/ui/unit-input/unit-input.component.js

@ -21,7 +21,6 @@ export default class CurrencyInput extends PureComponent {
maxModeOn: PropTypes.bool,
nativeCurrency: PropTypes.string,
onChange: PropTypes.func,
onBlur: PropTypes.func,
useFiat: PropTypes.bool,
hideFiat: PropTypes.bool,
value: PropTypes.string,
@ -99,10 +98,6 @@ export default class CurrencyInput extends PureComponent {
onChange(hexValue)
}
handleBlur = () => {
this.props.onBlur(this.state.hexValue)
}
renderConversionComponent () {
const { currentCurrency, nativeCurrency, hideFiat } = this.props
const { hexValue } = this.state
@ -145,7 +140,6 @@ export default class CurrencyInput extends PureComponent {
{...restProps}
suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix}
onChange={this.handleChange}
onBlur={this.handleBlur}
value={decimalValue}
maxModeOn={maxModeOn}
actionComponent={(

@ -162,7 +162,7 @@ describe('CurrencyInput Component', () => {
handleBlurSpy.resetHistory()
})
it('should call onChange and onBlur on input changes with the hex value for ETH', () => {
it('should call onChange on input changes with the hex value for ETH', () => {
const mockStore = {
metamask: {
nativeCurrency: 'ETH',
@ -175,7 +175,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="ETH"
nativeCurrency="ETH"
currentCurrency="usd"
@ -201,14 +200,9 @@ describe('CurrencyInput Component', () => {
assert.equal(wrapper.find('.currency-display-component').text(), '$231.06USD')
assert.equal(currencyInputInstance.state.decimalValue, 1)
assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
assert.equal(handleBlurSpy.callCount, 0)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith('de0b6b3a7640000'))
})
it('should call onChange and onBlur on input changes with the hex value for fiat', () => {
it('should call onChange on input changes with the hex value for fiat', () => {
const mockStore = {
metamask: {
nativeCurrency: 'ETH',
@ -221,7 +215,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="USD"
nativeCurrency="ETH"
currentCurrency="usd"
@ -248,11 +241,6 @@ describe('CurrencyInput Component', () => {
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
assert.equal(currencyInputInstance.state.decimalValue, 1)
assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
assert.equal(handleBlurSpy.callCount, 0)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith('f602f2234d0ea'))
})
it('should change the state and pass in a new decimalValue when props.value changes', () => {
@ -268,7 +256,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="USD"
nativeCurrency="ETH"
currentCurrency="usd"
@ -304,7 +291,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
nativeSuffix="ETH"
fiatSuffix="USD"
nativeCurrency="ETH"
@ -332,11 +318,6 @@ describe('CurrencyInput Component', () => {
assert.equal(currencyInputInstance.state.decimalValue, 1)
assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
assert.equal(handleBlurSpy.callCount, 0)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith('de0b6b3a7640000'))
const swap = wrapper.find('.currency-input__swap-component')
swap.simulate('click')
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')

@ -212,7 +212,7 @@ describe('TokenInput Component', () => {
handleBlurSpy.resetHistory()
})
it('should call onChange and onBlur on input changes with the hex value for ETH', () => {
it('should call onChange on input changes with the hex value for ETH', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
@ -224,7 +224,6 @@ describe('TokenInput Component', () => {
<Provider store={store}>
<TokenInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
selectedToken={{
address: '0x1',
decimals: '4',
@ -253,14 +252,9 @@ describe('TokenInput Component', () => {
assert.equal(wrapper.find('.currency-display-component').text(), '2ETH')
assert.equal(tokenInputInstance.state.decimalValue, 1)
assert.equal(tokenInputInstance.state.hexValue, '2710')
assert.equal(handleBlurSpy.callCount, 0)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith('2710'))
})
it('should call onChange and onBlur on input changes with the hex value for fiat', () => {
it('should call onChange on input changes with the hex value for fiat', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
@ -272,7 +266,6 @@ describe('TokenInput Component', () => {
<Provider store={store}>
<TokenInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
selectedToken={{
address: '0x1',
decimals: '4',
@ -302,11 +295,6 @@ describe('TokenInput Component', () => {
assert.equal(wrapper.find('.currency-display-component').text(), '$462.12USD')
assert.equal(tokenInputInstance.state.decimalValue, 1)
assert.equal(tokenInputInstance.state.hexValue, '2710')
assert.equal(handleBlurSpy.callCount, 0)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith('2710'))
})
it('should change the state and pass in a new decimalValue when props.value changes', () => {
@ -321,7 +309,6 @@ describe('TokenInput Component', () => {
<Provider store={store}>
<TokenInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
selectedToken={{
address: '0x1',
decimals: '4',

@ -20,7 +20,6 @@ export default class TokenInput extends PureComponent {
static propTypes = {
currentCurrency: PropTypes.string,
onChange: PropTypes.func,
onBlur: PropTypes.func,
value: PropTypes.string,
suffix: PropTypes.string,
showFiat: PropTypes.bool,
@ -77,10 +76,6 @@ export default class TokenInput extends PureComponent {
onChange(hexValue)
}
handleBlur = () => {
this.props.onBlur && this.props.onBlur(this.state.hexValue)
}
renderConversionComponent () {
const { selectedTokenExchangeRate, showFiat, currentCurrency, hideConversion } = this.props
const { decimalValue } = this.state
@ -135,7 +130,6 @@ export default class TokenInput extends PureComponent {
{...restProps}
suffix={suffix}
onChange={this.handleChange}
onBlur={this.handleBlur}
value={decimalValue}
>
{ this.renderConversionComponent() }

@ -92,27 +92,6 @@ describe('UnitInput Component', () => {
assert.equal(wrapper.state('value'), 123)
})
it('should call onBlur on blur with the value', () => {
const wrapper = mount(
<UnitInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
/>
)
assert.ok(wrapper)
assert.equal(handleChangeSpy.callCount, 0)
assert.equal(handleBlurSpy.callCount, 0)
const input = wrapper.find('input')
input.simulate('change', { target: { value: 123 } })
assert.equal(handleChangeSpy.callCount, 1)
assert.ok(handleChangeSpy.calledWith(123))
assert.equal(wrapper.state('value'), 123)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith(123))
})
it('should set the component state value with props.value', () => {
const wrapper = mount(
<UnitInput

@ -14,7 +14,6 @@ export default class UnitInput extends PureComponent {
actionComponent: PropTypes.node,
error: PropTypes.bool,
maxModeOn: PropTypes.bool,
onBlur: PropTypes.func,
onChange: PropTypes.func,
placeholder: PropTypes.string,
suffix: PropTypes.string,
@ -56,11 +55,6 @@ export default class UnitInput extends PureComponent {
this.props.onChange(value)
}
handleBlur = () => {
const { onBlur } = this.props
typeof onBlur === 'function' && onBlur(this.state.value)
}
getInputWidth (value) {
const valueString = String(value)
const valueLength = valueString.length || 1
@ -86,7 +80,6 @@ export default class UnitInput extends PureComponent {
value={value}
placeholder={placeholder}
onChange={this.handleChange}
onBlur={this.handleBlur}
style={{ width: this.getInputWidth(value) }}
ref={ref => {
this.unitInput = ref

Loading…
Cancel
Save