From 74557bd68ab2591a867177e93ef43db0953f000f Mon Sep 17 00:00:00 2001 From: Mark Stacey Date: Wed, 15 Jan 2020 11:18:59 -0400 Subject: [PATCH] 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. --- .../currency-input.component.js | 6 ----- .../tests/currency-input.component.test.js | 23 ++----------------- .../tests/token-input.component.test.js | 17 ++------------ .../ui/token-input/token-input.component.js | 6 ----- .../tests/unit-input.component.test.js | 21 ----------------- .../ui/unit-input/unit-input.component.js | 7 ------ 6 files changed, 4 insertions(+), 76 deletions(-) diff --git a/ui/app/components/ui/currency-input/currency-input.component.js b/ui/app/components/ui/currency-input/currency-input.component.js index 18289d4e4..398b49884 100644 --- a/ui/app/components/ui/currency-input/currency-input.component.js +++ b/ui/app/components/ui/currency-input/currency-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={( diff --git a/ui/app/components/ui/currency-input/tests/currency-input.component.test.js b/ui/app/components/ui/currency-input/tests/currency-input.component.test.js index 43fa65d3a..5c132c08c 100644 --- a/ui/app/components/ui/currency-input/tests/currency-input.component.test.js +++ b/ui/app/components/ui/currency-input/tests/currency-input.component.test.js @@ -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', () => { { 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', () => { { 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', () => { { { 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') diff --git a/ui/app/components/ui/token-input/tests/token-input.component.test.js b/ui/app/components/ui/token-input/tests/token-input.component.test.js index 881101880..37fcf3e68 100644 --- a/ui/app/components/ui/token-input/tests/token-input.component.test.js +++ b/ui/app/components/ui/token-input/tests/token-input.component.test.js @@ -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', () => { { 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', () => { { 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', () => { { - 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() } diff --git a/ui/app/components/ui/unit-input/tests/unit-input.component.test.js b/ui/app/components/ui/unit-input/tests/unit-input.component.test.js index 97d987bc7..6b8dec7c8 100644 --- a/ui/app/components/ui/unit-input/tests/unit-input.component.test.js +++ b/ui/app/components/ui/unit-input/tests/unit-input.component.test.js @@ -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( - - ) - - 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( { - 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