From c8b99a21cc5aaaa3ebd06ae6f1645cfe0e1ea563 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Sun, 20 Aug 2017 10:57:37 +0200
Subject: [PATCH] Accept enter and escape in dialogs

Modal dialogs can be canceled with escape and accepted with enter if the dialog is valid.
---
 src/components/dialog/dialog.js               | 19 +++++++++++++-----
 src/components/dialog/edit-node.js            |  4 +++-
 src/components/dialog/edit-project.js         |  4 +++-
 .../dialog/edit-simulation-model.js           |  4 +++-
 src/components/dialog/edit-simulation.js      |  4 +++-
 src/components/dialog/edit-simulator.js       |  4 +++-
 src/components/dialog/edit-user.js            |  4 +++-
 src/components/dialog/edit-visualization.js   |  4 +++-
 src/components/dialog/edit-widget.js          |  4 +++-
 src/components/dialog/new-node.js             |  4 +++-
 src/components/dialog/new-project.js          |  4 +++-
 src/components/dialog/new-simulation-model.js |  4 +++-
 src/components/dialog/new-simulation.js       |  4 +++-
 src/components/dialog/new-simulator.js        |  4 +++-
 src/components/dialog/new-user.js             |  4 +++-
 src/components/dialog/new-visualization.js    |  4 +++-
 src/containers/project.js                     | 10 +++++++++-
 src/containers/projects.js                    | 10 +++++++++-
 src/containers/simulation.js                  | 10 +++++++++-
 src/containers/simulations.js                 | 10 +++++++++-
 src/containers/simulators.js                  | 20 +++++++++++++++++--
 src/containers/users.js                       | 10 +++++++++-
 22 files changed, 122 insertions(+), 27 deletions(-)

diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index 3f3058a..2643af9 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -23,17 +23,26 @@ import React from 'react';
 import { Modal, Button } from 'react-bootstrap';
 
 class Dialog extends React.Component {
-  closeModal() {
+  closeModal = (event) => {
     this.props.onClose(false);
   }
 
-  cancelModal() {
+  cancelModal = (event) => {
     this.props.onClose(true);
   }
 
+  onKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      // prevent input from submitting
+      event.preventDefault();
+
+      this.closeModal(false);
+    }
+  }
+
   render() {
     return (
-      <Modal show={this.props.show} onEnter={this.props.onReset}>
+      <Modal keyboard show={this.props.show} onEnter={this.props.onReset} onHide={this.cancelModal} onKeyPress={this.onKeyPress}>
         <Modal.Header>
           <Modal.Title>{this.props.title}</Modal.Title>
         </Modal.Header>
@@ -43,8 +52,8 @@ class Dialog extends React.Component {
         </Modal.Body>
 
         <Modal.Footer>
-          <Button onClick={() => this.cancelModal()}>Cancel</Button>
-          <Button bsStyle="primary" type="submit" onClick={() => this.closeModal()} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
+          <Button onClick={this.cancelModal}>Cancel</Button>
+          <Button onClick={this.closeModal} disabled={!this.props.valid}>{this.props.buttonTitle}</Button>
         </Modal.Footer>
       </Modal>
     );
diff --git a/src/components/dialog/edit-node.js b/src/components/dialog/edit-node.js
index b6475c3..c782354 100644
--- a/src/components/dialog/edit-node.js
+++ b/src/components/dialog/edit-node.js
@@ -41,7 +41,9 @@ class NewNodeDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/edit-project.js b/src/components/dialog/edit-project.js
index 62d8c41..2b960b6 100644
--- a/src/components/dialog/edit-project.js
+++ b/src/components/dialog/edit-project.js
@@ -39,7 +39,9 @@ class EditProjectDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/edit-simulation-model.js b/src/components/dialog/edit-simulation-model.js
index 9a99480..37cf0d7 100644
--- a/src/components/dialog/edit-simulation-model.js
+++ b/src/components/dialog/edit-simulation-model.js
@@ -42,7 +42,9 @@ class EditSimulationModelDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/edit-simulation.js b/src/components/dialog/edit-simulation.js
index 0da9b29..fba0d19 100644
--- a/src/components/dialog/edit-simulation.js
+++ b/src/components/dialog/edit-simulation.js
@@ -38,7 +38,9 @@ class EditSimulationDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/edit-simulator.js b/src/components/dialog/edit-simulator.js
index ec4aa18..c3db013 100644
--- a/src/components/dialog/edit-simulator.js
+++ b/src/components/dialog/edit-simulator.js
@@ -37,7 +37,9 @@ class EditSimulatorDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/edit-user.js b/src/components/dialog/edit-user.js
index cc9e5d0..e518b7d 100644
--- a/src/components/dialog/edit-user.js
+++ b/src/components/dialog/edit-user.js
@@ -40,7 +40,9 @@ class EditUserDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/edit-visualization.js b/src/components/dialog/edit-visualization.js
index 3cc2a09..ccd8578 100644
--- a/src/components/dialog/edit-visualization.js
+++ b/src/components/dialog/edit-visualization.js
@@ -38,7 +38,9 @@ class EditVisualizationDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js
index fb52bdd..e408753 100644
--- a/src/components/dialog/edit-widget.js
+++ b/src/components/dialog/edit-widget.js
@@ -43,7 +43,9 @@ class EditWidgetDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state.temporal);
+      if (this.valid) {
+        this.props.onClose(this.state.temporal);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/new-node.js b/src/components/dialog/new-node.js
index 44afa9d..54be1c9 100644
--- a/src/components/dialog/new-node.js
+++ b/src/components/dialog/new-node.js
@@ -40,7 +40,9 @@ class NewNodeDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/new-project.js b/src/components/dialog/new-project.js
index 43e0ab2..babcf77 100644
--- a/src/components/dialog/new-project.js
+++ b/src/components/dialog/new-project.js
@@ -38,7 +38,9 @@ class NewProjectDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/new-simulation-model.js b/src/components/dialog/new-simulation-model.js
index 205c41c..a4e3bbb 100644
--- a/src/components/dialog/new-simulation-model.js
+++ b/src/components/dialog/new-simulation-model.js
@@ -42,7 +42,9 @@ class NewSimulationModelDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/new-simulation.js b/src/components/dialog/new-simulation.js
index cfe0bc1..2d09c0d 100644
--- a/src/components/dialog/new-simulation.js
+++ b/src/components/dialog/new-simulation.js
@@ -37,7 +37,9 @@ class NewSimulationDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/new-simulator.js b/src/components/dialog/new-simulator.js
index a6160ae..de8eb90 100644
--- a/src/components/dialog/new-simulator.js
+++ b/src/components/dialog/new-simulator.js
@@ -37,7 +37,9 @@ class NewSimulatorDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/new-user.js b/src/components/dialog/new-user.js
index 9746f41..f3cf20d 100644
--- a/src/components/dialog/new-user.js
+++ b/src/components/dialog/new-user.js
@@ -40,7 +40,9 @@ class NewUserDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/components/dialog/new-visualization.js b/src/components/dialog/new-visualization.js
index 2f5f212..70b45ec 100644
--- a/src/components/dialog/new-visualization.js
+++ b/src/components/dialog/new-visualization.js
@@ -37,7 +37,9 @@ class NewVisualzationDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      this.props.onClose(this.state);
+      if (this.valid) {
+        this.props.onClose(this.state);
+      }
     } else {
       this.props.onClose();
     }
diff --git a/src/containers/project.js b/src/containers/project.js
index d781ad2..3e00079 100644
--- a/src/containers/project.js
+++ b/src/containers/project.js
@@ -153,6 +153,14 @@ class Visualizations extends Component {
     }
   }
 
+  onModalKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    
+      this.confirmDeleteModal();
+    }
+  }
+
   render() {
     // get visualizations for this project
     var visualizations = [];
@@ -179,7 +187,7 @@ class Visualizations extends Component {
 
         <EditVisualizationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} visualization={this.state.modalData} />
 
-        <Modal show={this.state.deleteModal}>
+        <Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
           <Modal.Header>
             <Modal.Title>Delete Visualization</Modal.Title>
           </Modal.Header>
diff --git a/src/containers/projects.js b/src/containers/projects.js
index 47fda11..1f02f80 100644
--- a/src/containers/projects.js
+++ b/src/containers/projects.js
@@ -115,6 +115,14 @@ class Projects extends React.Component {
     return simulations.length > 0;
   }
 
+  onModalKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    
+      this.confirmDeleteModal();
+    }
+  }
+
   render() {
     return (
       <div className='section'>
@@ -135,7 +143,7 @@ class Projects extends React.Component {
         <NewProjectDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} simulations={this.state.simulations} />
         <EditProjectDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} project={this.state.modalData} simulations={this.state.simulations} />
 
-        <Modal show={this.state.deleteModal}>
+        <Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
           <Modal.Header>
             <Modal.Title>Delete Project</Modal.Title>
           </Modal.Header>
diff --git a/src/containers/simulation.js b/src/containers/simulation.js
index 304c7d6..32faa96 100644
--- a/src/containers/simulation.js
+++ b/src/containers/simulation.js
@@ -138,6 +138,14 @@ class Simulation extends React.Component {
     return name;
   }
 
+  onModalKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    
+      this.confirmDeleteModal();
+    }
+  }
+
   render() {
     return (
       <div className='section'>
@@ -156,7 +164,7 @@ class Simulation extends React.Component {
 
         <EditSimulationModelDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} data={this.state.modalData} nodes={this.state.nodes} />
 
-        <Modal show={this.state.deleteModal}>
+        <Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
           <Modal.Header>
             <Modal.Title>Delete Simulation Model</Modal.Title>
           </Modal.Header>
diff --git a/src/containers/simulations.js b/src/containers/simulations.js
index 4b8488f..af161b7 100644
--- a/src/containers/simulations.js
+++ b/src/containers/simulations.js
@@ -116,6 +116,14 @@ class Simulations extends Component {
     }
   }
 
+  onModalKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    
+      this.confirmDeleteModal();
+    }
+  }
+
   render() {
     return (
       <div className='section'>
@@ -132,7 +140,7 @@ class Simulations extends Component {
 
         <EditSimulationDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} simulation={this.state.modalSimulation} />
 
-        <Modal show={this.state.deleteModal}>
+        <Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
           <Modal.Header>
             <Modal.Title>Delete Simulation</Modal.Title>
           </Modal.Header>
diff --git a/src/containers/simulators.js b/src/containers/simulators.js
index 583c3a6..7d77841 100644
--- a/src/containers/simulators.js
+++ b/src/containers/simulators.js
@@ -198,6 +198,22 @@ class Simulators extends Component {
     });
   }
 
+  onNodeModalKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    
+      this.confirmDeleteNodeModal();
+    }
+  }
+
+  onSimulatorModalKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    
+      this.confirmDeleteSimulatorModal();
+    }
+  }
+
   render() {
     return (
       <div className='section'>
@@ -218,7 +234,7 @@ class Simulators extends Component {
           <EditSimulatorDialog simulator={this.state.modalData.simulators[this.state.modalIndex]} show={this.state.editSimulatorModal} onClose={(data) => this.closeEditSimulatorModal(data)} node={this.state.modalData} />
         }
 
-        <Modal show={this.state.deleteNodeModal}>
+        <Modal keyboard show={this.state.deleteNodeModal} onHide={() => this.setState({ deleteNodeModal: false })} onKeyPress={this.onNodeModalKeyPress}>
           <Modal.Header>
             <Modal.Title>Delete Node</Modal.Title>
           </Modal.Header>
@@ -235,7 +251,7 @@ class Simulators extends Component {
           </Modal.Footer>
         </Modal>
 
-        <Modal show={this.state.deleteSimulatorModal}>
+        <Modal keyboard show={this.state.deleteSimulatorModal} onHide={() => this.setState({ deleteSimulatorModal: false })} onKeyPress={this.onSimulatorModalKeyPress}>
           <Modal.Header>
             <Modal.Title>Delete Simulator</Modal.Title>
           </Modal.Header>
diff --git a/src/containers/users.js b/src/containers/users.js
index 288c4f4..fd742b7 100644
--- a/src/containers/users.js
+++ b/src/containers/users.js
@@ -100,6 +100,14 @@ class Users extends Component {
     return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : '';
   }
 
+  onModalKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    
+      this.confirmDeleteModal();
+    }
+  }
+
   render() {
 
     return (
@@ -119,7 +127,7 @@ class Users extends Component {
 
         <EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
 
-        <Modal show={this.state.deleteModal}>
+        <Modal keyboard show={this.state.deleteModal} onHide={() => this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}>
           <Modal.Header>
             <Modal.Title>Delete user</Modal.Title>
           </Modal.Header>