From c8b99a21cc5aaaa3ebd06ae6f1645cfe0e1ea563 Mon Sep 17 00:00:00 2001 From: Markus Grigull 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 ( - + {this.props.title} @@ -43,8 +52,8 @@ class Dialog extends React.Component { - - + + ); 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 { this.closeEditModal(data)} visualization={this.state.modalData} /> - + this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}> Delete Visualization 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 (
@@ -135,7 +143,7 @@ class Projects extends React.Component { this.closeNewModal(data)} simulations={this.state.simulations} /> this.closeEditModal(data)} project={this.state.modalData} simulations={this.state.simulations} /> - + this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}> Delete Project 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 (
@@ -156,7 +164,7 @@ class Simulation extends React.Component { this.closeEditModal(data)} data={this.state.modalData} nodes={this.state.nodes} /> - + this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}> Delete Simulation Model 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 (
@@ -132,7 +140,7 @@ class Simulations extends Component { this.closeEditModal(data)} simulation={this.state.modalSimulation} /> - + this.setState({ deleteModal: false })} onKeyPress={this.onModalKeyPress}> Delete Simulation 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 (
@@ -218,7 +234,7 @@ class Simulators extends Component { this.closeEditSimulatorModal(data)} node={this.state.modalData} /> } - + this.setState({ deleteNodeModal: false })} onKeyPress={this.onNodeModalKeyPress}> Delete Node @@ -235,7 +251,7 @@ class Simulators extends Component { - + this.setState({ deleteSimulatorModal: false })} onKeyPress={this.onSimulatorModalKeyPress}> Delete Simulator 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 { this.closeEditModal(data)} user={this.state.modalData} /> - + this.setState({ deleteModal: falseĀ })} onKeyPress={this.onModalKeyPress}> Delete user