Allow new team modal to be closed using key events

This commit is contained in:
Jonas Schwabe
2017-01-22 15:33:48 +01:00
parent 9af3b9598d
commit 9d119274ee

View File

@@ -12,10 +12,6 @@ class NewTeamModal extends React.Component {
}; };
} }
shouldComponentUpdate() {
return true;
}
getTeamNameValidationState() { getTeamNameValidationState() {
return this.state.teamName.length > 0 ? '' : 'error'; return this.state.teamName.length > 0 ? '' : 'error';
} }
@@ -47,10 +43,35 @@ class NewTeamModal extends React.Component {
this.getTeamUrlValidationState() === ''; this.getTeamUrlValidationState() === '';
} }
save() {
if (this.validateForm()) {
this.props.onSave({
url: this.state.teamUrl,
name: this.state.teamName
});
}
}
render() { render() {
return ( return (
<Modal.Dialog <Modal
show={true}
id='newServerModal' id='newServerModal'
onHide={this.props.onClose}
onKeyDown={(e) => {
switch (e.key) {
case 'Enter':
this.save();
// The add button from behind this might still be focused
e.preventDefault();
e.stopPropagation();
break;
case 'Escape':
this.props.onClose();
break;
}
}}
> >
<Modal.Header> <Modal.Header>
<Modal.Title>{'Add Server'}</Modal.Title> <Modal.Title>{'Add Server'}</Modal.Title>
@@ -96,18 +117,13 @@ class NewTeamModal extends React.Component {
>{'Cancel'}</Button> >{'Cancel'}</Button>
<Button <Button
id='saveNewServerModal' id='saveNewServerModal'
onClick={() => { onClick={this.save.bind(this)}
this.props.onSave({
url: this.state.teamUrl,
name: this.state.teamName
});
}}
disabled={!this.validateForm()} disabled={!this.validateForm()}
bsStyle='primary' bsStyle='primary'
>{'Add'}</Button> >{'Add'}</Button>
</Modal.Footer> </Modal.Footer>
</Modal.Dialog> </Modal>
); );
} }
} }