EnterでSubmitができる - Hotkey, folder edit, folder create(preference/create new folder modal両方)

Author: Rokt33r

lib/components/modal/CreateNewFolder.js

@@ -50,6 +50,12 @@ export default class CreateNewFolder extends React.Component {
     }
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.handleConfirmButton()
+    }
+  }
+
   render () {
     let alert = this.state.alert
     let alertElement = alert != null ? (
@@ -78,7 +84,7 @@ export default class CreateNewFolder extends React.Component {
 
         <div className='title'>Create new folder</div>
 
-        <input className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
+        <input onKeyDown={e => this.handleKeyDown(e)} className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
         <div className='colorSelect'>
           {colorElements}
         </div>

lib/components/modal/Preference/AppSettingTab.js

@@ -36,12 +36,20 @@ export default class AppSettingTab extends React.Component {
     ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
   }
 
-  handleSaveButtonClick (e) {
+  submitHotKey () {
     ipc.send('hotkeyUpdated', {
       toggleFinder: this.state.toggleFinder
     })
   }
 
+  handleSaveButtonClick (e) {
+    this.submitHotKey()
+  }
+
+  handleKeyDown (e) {
+    this.submitHotKey()
+  }
+
   render () {
     let alert = this.state.alert
     let alertElement = alert != null ? (
@@ -56,7 +64,7 @@ export default class AppSettingTab extends React.Component {
           <div className='sectionTitle'>Hotkey</div>
           <div className='sectionInput'>
             <label>Toggle Finder(popup)</label>
-            <input valueLink={this.linkState('toggleFinder')} type='text'/>
+            <input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('toggleFinder')} type='text'/>
           </div>
           <div className='sectionConfirm'>
             <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>

lib/components/modal/Preference/FolderRow.js

@@ -50,6 +50,12 @@ export default class FolderRow extends React.Component {
     this.setState({mode: DELETE})
   }
 
+  handleNameInputKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.handleSaveButtonClick()
+    }
+  }
+
   handleColorSelectClick (e) {
     this.setState({
       isColorEditing: true
@@ -133,7 +139,7 @@ export default class FolderRow extends React.Component {
               }
             </div>
             <div className='folderName'>
-              <input valueLink={this.linkState('name')} type='text'/>
+              <input onKeyDown={e => this.handleNameInputKeyDown(e)} valueLink={this.linkState('name')} type='text'/>
             </div>
             <div className='folderControl'>
               <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>

lib/components/modal/Preference/FolderSettingTab.js

@@ -12,6 +12,12 @@ export default class FolderSettingTab extends React.Component {
     }
   }
 
+  handleNewFolderNameKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.handleSaveButtonClick()
+    }
+  }
+
   handleSaveButtonClick (e) {
     this.setState({alert: null}, () => {
       if (this.state.name.trim().length === 0) return false
@@ -71,7 +77,7 @@ export default class FolderSettingTab extends React.Component {
             {folderElements}
             <div className='newFolder'>
               <div className='folderName'>
-                <input valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
+                <input onKeyDown={e => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
               </div>
               <div className='folderControl'>
                 <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>