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

@@ -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>
     );

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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();
     }

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>

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>

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>

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>

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>

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>