Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Delete onBlur handlers from currency and token input components #7824

Merged
merged 1 commit into from
Jan 15, 2020
Merged

Delete onBlur handlers from currency and token input components #7824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions ui/app/components/ui/currency-input/currency-input.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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={(
Expand Down
23 changes: 2 additions & 21 deletions ui/app/components/ui/currency-input/tests/currency-input.component.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -175,7 +175,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="ETH"
nativeCurrency="ETH"
currentCurrency="usd"
Expand All @@ -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',
Expand All @@ -221,7 +215,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="USD"
nativeCurrency="ETH"
currentCurrency="usd"
Expand All @@ -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', () => {
Expand All @@ -268,7 +256,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="USD"
nativeCurrency="ETH"
currentCurrency="usd"
Expand Down Expand Up @@ -304,7 +291,6 @@ describe('CurrencyInput Component', () => {
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
nativeSuffix="ETH"
fiatSuffix="USD"
nativeCurrency="ETH"
Expand Down Expand Up @@ -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')
Expand Down
17 changes: 2 additions & 15 deletions ui/app/components/ui/token-input/tests/token-input.component.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -224,7 +224,6 @@ describe('TokenInput Component', () => {
<Provider store={store}>
<TokenInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
selectedToken={{
address: '0x1',
decimals: '4',
Expand Down Expand Up @@ -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',
Expand All @@ -272,7 +266,6 @@ describe('TokenInput Component', () => {
<Provider store={store}>
<TokenInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
selectedToken={{
address: '0x1',
decimals: '4',
Expand Down Expand Up @@ -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', () => {
Expand All @@ -321,7 +309,6 @@ describe('TokenInput Component', () => {
<Provider store={store}>
<TokenInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
selectedToken={{
address: '0x1',
decimals: '4',
Expand Down
6 changes: 0 additions & 6 deletions ui/app/components/ui/token-input/token-input.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -135,7 +130,6 @@ export default class TokenInput extends PureComponent {
{...restProps}
suffix={suffix}
onChange={this.handleChange}
onBlur={this.handleBlur}
value={decimalValue}
>
{ this.renderConversionComponent() }
Expand Down
21 changes: 0 additions & 21 deletions ui/app/components/ui/unit-input/tests/unit-input.component.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 0 additions & 7 deletions ui/app/components/ui/unit-input/unit-input.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down