From bdb6e55354ad01fbf0741d0adb99cab8082f6da2 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 15 Oct 2018 20:56:24 -0230
Subject: [PATCH] Decrease click area for AmountMaxButton on send screen
---
.../amount-max-button.component.js | 34 +++++++++++--------
.../tests/amount-max-button-component.test.js | 9 +++--
2 files changed, 24 insertions(+), 19 deletions(-)
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index 4d0d36ab4..ceb620941 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -34,21 +34,27 @@ export default class AmountMaxButton extends Component {
})
}
- render () {
- const { setMaxModeTo, maxModeOn } = this.props
+ onMaxClick = (event) => {
+ const { setMaxModeTo } = this.props
- return (
- <div
- className="send-v2__amount-max"
- onClick={(event) => {
- event.preventDefault()
- setMaxModeTo(true)
- this.setMaxAmount()
- }}
- >
- {!maxModeOn ? this.context.t('max') : ''}
- </div>
- )
+ event.preventDefault()
+ setMaxModeTo(true)
+ this.setMaxAmount()
+ }
+
+ render () {
+ return this.props.maxModeOn
+ ? null
+ : (
+ <div>
+ <span
+ className="send-v2__amount-max"
+ onClick={this.onMaxClick}
+ >
+ {this.context.t('max')}
+ </span>
+ </div>
+ )
}
}
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
index 86a05ff21..b04d3897f 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
@@ -56,9 +56,8 @@ describe('AmountMaxButton Component', function () {
})
describe('render', () => {
- it('should render a div with a send-v2__amount-max class', () => {
- assert.equal(wrapper.find('.send-v2__amount-max').length, 1)
- assert(wrapper.find('.send-v2__amount-max').is('div'))
+ it('should render an element with a send-v2__amount-max class', () => {
+ assert(wrapper.exists('.send-v2__amount-max'))
})
it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => {
@@ -77,9 +76,9 @@ describe('AmountMaxButton Component', function () {
)
})
- it('should not render text when maxModeOn is true', () => {
+ it('should not render anything when maxModeOn is true', () => {
wrapper.setProps({ maxModeOn: true })
- assert.equal(wrapper.find('.send-v2__amount-max').text(), '')
+ assert.ok(!wrapper.exists('.send-v2__amount-max'))
})
it('should render the expected text when maxModeOn is false', () => {