Escape key not closing add funds dialog

brave · Jan 11, 2017 · d9725f3 · d9725f3
1 parent b466a44
commit d9725f3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -474,12 +474,23 @@ class BitcoinDashboard extends ImmutableComponent {
     return <div className='bitcoinDashboard'>
       {
       this.props.bitcoinOverlayVisible
-        ? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} customTitleClasses={'coinbaseOverlay'} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
+        ? <ModalOverlay
+          title={'bitcoinBuy'}
+          content={this.bitcoinOverlayContent}
+          customTitleClasses={'coinbaseOverlay'}
+          emptyDialog={emptyDialog}
+          onEscape={this.props.hideOverlay.bind(this)}
+          onHide={this.props.hideOverlay.bind(this)} />
         : null
       }
       {
         this.props.qrcodeOverlayVisible
-        ? <ModalOverlay content={this.qrcodeOverlayContent} customTitleClasses={'qrcodeOverlay'} footer={this.qrcodeOverlayFooter} onHide={this.props.hideQRcode.bind(this)} />
+        ? <ModalOverlay
+          content={this.qrcodeOverlayContent}
+          customTitleClasses={'qrcodeOverlay'}
+          footer={this.qrcodeOverlayFooter}
+          onEscape={this.props.hideQRcode.bind(this)}
+          onHide={this.props.hideQRcode.bind(this)} />
         : null
       }
       <div className='board addFundsBoard'>
@@ -1297,27 +1308,47 @@ class PaymentsTab extends ImmutableComponent {
     return <div className='paymentsContainer'>
       {
       this.enabled && this.props.addFundsOverlayVisible
-        ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
+        ? <ModalOverlay title={this.overlayTitle}
+          content={this.overlayContent}
+          onEscape={this.props.hideOverlay.bind(this, 'addFunds')}
+          onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
         : null
       }
       {
         this.enabled && this.props.paymentHistoryOverlayVisible
-        ? <ModalOverlay title={'paymentHistoryTitle'} customTitleClasses={'paymentHistory'} content={this.paymentHistoryContent} footer={this.paymentHistoryFooter} onHide={this.props.hideOverlay.bind(this, 'paymentHistory')} />
+        ? <ModalOverlay title={'paymentHistoryTitle'}
+          customTitleClasses={'paymentHistory'}
+          content={this.paymentHistoryContent}
+          footer={this.paymentHistoryFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'paymentHistory')}
+          onHide={this.props.hideOverlay.bind(this, 'paymentHistory')} />
         : null
       }
       {
         this.enabled && this.props.advancedSettingsOverlayVisible
-        ? <ModalOverlay title={'advancedSettingsTitle'} content={this.advancedSettingsContent} footer={this.advancedSettingsFooter} onHide={this.props.hideOverlay.bind(this, 'advancedSettings')} />
+        ? <ModalOverlay title={'advancedSettingsTitle'}
+          content={this.advancedSettingsContent}
+          footer={this.advancedSettingsFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'advancedSettings')}
+          onHide={this.props.hideOverlay.bind(this, 'advancedSettings')} />
         : null
       }
       {
         this.enabled && this.props.ledgerBackupOverlayVisible
-        ? <ModalOverlay title={'ledgerBackupTitle'} content={this.ledgerBackupContent} footer={this.ledgerBackupFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+        ? <ModalOverlay title={'ledgerBackupTitle'}
+          content={this.ledgerBackupContent}
+          footer={this.ledgerBackupFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'ledgerBackup')}
+          onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
         : null
       }
       {
         this.enabled && this.props.ledgerRecoveryOverlayVisible
-        ? <ModalOverlay title={'ledgerRecoveryTitle'} content={this.ledgerRecoveryContent} footer={this.ledgerRecoveryFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
+        ? <ModalOverlay title={'ledgerRecoveryTitle'}
+          content={this.ledgerRecoveryContent}
+          footer={this.ledgerRecoveryFooter}
+          onEscape={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
+          onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
         : null
       }
       <div className='titleBar'>

diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
@@ -4,6 +4,7 @@
 
 const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
+const KeyCodes = require('../../app/common/constants/keyCodes')
 
 /**
  * Represents a modal overlay
@@ -13,6 +14,10 @@ var globalInstanceCounter = 0
 var mountedInstances = []
 
 class ModalOverlay extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onKeyDown = this.onKeyDown.bind(this)
+  }
 
   componentWillMount () {
     this.instanceId = globalInstanceCounter++
@@ -42,6 +47,14 @@ class ModalOverlay extends ImmutableComponent {
     }
   }
 
+  onKeyDown (e) {
+    switch (e.keyCode) {
+      case KeyCodes.ESC:
+        this.props.onEscape()
+        break
+    }
+  }
+
   get dialogContent () {
     var close = null
     var button = null
@@ -67,7 +80,7 @@ class ModalOverlay extends ImmutableComponent {
   }
 
   render () {
-    return <div className={'modal fade' + (this.state.last ? ' last' : '') + (this.props.transparentBackground ? ' transparentBackground' : '')} role='alert'>
+    return <div onKeyDown={this.onKeyDown} className={'modal fade' + (this.state.last ? ' last' : '') + (this.props.transparentBackground ? ' transparentBackground' : '')} role='alert'>
       {this.dialogContent}
     </div>
   }