From 1ff33378e1c919b272a1bed8cfdf2f2298178c4e Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 15:45:21 +0900
Subject: [PATCH] esc to close modal

---
 browser/main/modals/InitModal.js              | 16 ++++++++++++++--
 browser/main/modals/NewNoteModal.js           | 11 ++++++++++-
 browser/main/modals/PreferencesModal/index.js | 16 +++++++++++++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/browser/main/modals/InitModal.js b/browser/main/modals/InitModal.js
index 17e7d78e..906373d6 100644
--- a/browser/main/modals/InitModal.js
+++ b/browser/main/modals/InitModal.js
@@ -68,7 +68,9 @@ class InitModal extends React.Component {
       newState.legacyStorageExists = true
       newState.data = data
     }
-    this.setState(newState)
+    this.setState(newState, () => {
+      this.refs.createButton.focus()
+    })
   }
 
   handlePathBrowseButtonClick (e) {
@@ -166,6 +168,12 @@ class InitModal extends React.Component {
     })
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
@@ -174,7 +182,10 @@ class InitModal extends React.Component {
       </div>
     }
     return (
-      <div styleName='root'>
+      <div styleName='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
 
         <div styleName='header'>
           <div styleName='header-title'>Initialize Storage</div>
@@ -207,6 +218,7 @@ class InitModal extends React.Component {
 
           <div styleName='body-control'>
             <button styleName='body-control-createButton'
+              ref='createButton'
               onClick={(e) => this.handleSubmitButtonClick(e)}
               disabled={this.state.isSending}
             >
diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js
index 115e0a63..f8793fdc 100644
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -81,9 +81,18 @@ class NewNoteModal extends React.Component {
     }
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     return (
-      <div styleName='root'>
+      <div styleName='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
         <div styleName='header'>
           <div styleName='title'>New Note</div>
         </div>
diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js
index adbd1869..90c2718e 100644
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -15,6 +15,10 @@ class Preferences extends React.Component {
     }
   }
 
+  componentDidMount () {
+    this.refs.root.focus()
+  }
+
   switchTeam (teamId) {
     this.setState({currentTeamId: teamId})
   }
@@ -49,6 +53,12 @@ class Preferences extends React.Component {
     }
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     let content = this.renderContent()
 
@@ -79,7 +89,11 @@ class Preferences extends React.Component {
     })
 
     return (
-      <div styleName='root'>
+      <div styleName='root'
+        ref='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
         <div styleName='nav'>
           {navButtons}
         </div>