1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Add submitDisabled prop to Modals. Disable submit button when creating a cancel transaction (#5910)

This commit is contained in:
Alexander Tseung 2018-12-11 15:04:57 -08:00 committed by GitHub
parent d6fa967b1f
commit 9c24019659
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 2 deletions

View File

@ -12,6 +12,7 @@ export default class Modal extends PureComponent {
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
submitType: PropTypes.string, submitType: PropTypes.string,
submitText: PropTypes.string, submitText: PropTypes.string,
submitDisabled: PropTypes.bool,
// Cancel button (left button) // Cancel button (left button)
onCancel: PropTypes.func, onCancel: PropTypes.func,
cancelType: PropTypes.string, cancelType: PropTypes.string,
@ -31,6 +32,7 @@ export default class Modal extends PureComponent {
onSubmit, onSubmit,
submitType, submitType,
submitText, submitText,
submitDisabled,
onCancel, onCancel,
cancelType, cancelType,
cancelText, cancelText,
@ -69,6 +71,7 @@ export default class Modal extends PureComponent {
<Button <Button
type={submitType} type={submitType}
onClick={onSubmit} onClick={onSubmit}
disabled={submitDisabled}
className="modal-container__footer-button" className="modal-container__footer-button"
> >
{ submitText } { submitText }

View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import assert from 'assert' import assert from 'assert'
import { shallow } from 'enzyme' import { mount, shallow } from 'enzyme'
import sinon from 'sinon' import sinon from 'sinon'
import Modal from '../modal.component' import Modal from '../modal.component'
import Button from '../../button' import Button from '../../button'
@ -100,4 +100,34 @@ describe('Modal Component', () => {
assert.equal(handleCancel.callCount, 1) assert.equal(handleCancel.callCount, 1)
assert.equal(handleSubmit.callCount, 0) assert.equal(handleSubmit.callCount, 0)
}) })
it('should disable the submit button if submitDisabled is true', () => {
const handleCancel = sinon.spy()
const handleSubmit = sinon.spy()
const wrapper = mount(
<Modal
onCancel={handleCancel}
cancelText="Cancel"
onSubmit={handleSubmit}
submitText="Submit"
submitDisabled={true}
headerText="My Header"
onClose={handleCancel}
/>
)
const buttons = wrapper.find(Button)
assert.equal(buttons.length, 2)
const cancelButton = buttons.at(0)
const submitButton = buttons.at(1)
assert.equal(handleCancel.callCount, 0)
cancelButton.simulate('click')
assert.equal(handleCancel.callCount, 1)
assert.equal(submitButton.props().disabled, true)
assert.equal(handleSubmit.callCount, 0)
submitButton.simulate('click')
assert.equal(handleSubmit.callCount, 0)
})
}) })

View File

@ -17,6 +17,10 @@ export default class CancelTransaction extends PureComponent {
newGasFee: PropTypes.string, newGasFee: PropTypes.string,
} }
state = {
busy: false,
}
componentDidUpdate () { componentDidUpdate () {
const { transactionStatus, showTransactionConfirmedModal } = this.props const { transactionStatus, showTransactionConfirmedModal } = this.props
@ -29,8 +33,10 @@ export default class CancelTransaction extends PureComponent {
handleSubmit = async () => { handleSubmit = async () => {
const { createCancelTransaction, hideModal } = this.props const { createCancelTransaction, hideModal } = this.props
this.setState({ busy: true })
await createCancelTransaction() await createCancelTransaction()
hideModal() this.setState({ busy: false }, () => hideModal())
} }
handleCancel = () => { handleCancel = () => {
@ -40,6 +46,7 @@ export default class CancelTransaction extends PureComponent {
render () { render () {
const { t } = this.context const { t } = this.context
const { newGasFee } = this.props const { newGasFee } = this.props
const { busy } = this.state
return ( return (
<Modal <Modal
@ -50,6 +57,7 @@ export default class CancelTransaction extends PureComponent {
submitText={t('yesLetsTry')} submitText={t('yesLetsTry')}
cancelText={t('nevermind')} cancelText={t('nevermind')}
submitType="secondary" submitType="secondary"
submitDisabled={busy}
> >
<div> <div>
<div className="cancel-transaction__title"> <div className="cancel-transaction__title">

View File

@ -34,6 +34,7 @@ describe('CancelTransaction Component', () => {
defaultNewGasPrice="0x3b9aca00" defaultNewGasPrice="0x3b9aca00"
createCancelTransaction={createCancelTransactionSpy} createCancelTransaction={createCancelTransactionSpy}
hideModal={hideModalSpy} hideModal={hideModalSpy}
showTransactionConfirmedModal={() => {}}
/>, />,
{ context: { t }} { context: { t }}
) )