From fc5b68fe6d9b4965f18ee433ce04d0636c5246fa Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Fri, 19 May 2017 11:00:00 -0600
Subject: [PATCH] Handlers for Dashboard Header Edit events: form submit, and
escape keyup for canceling edit.
---
.../components/DashboardHeaderEdit.js | 22 +++++++++++++++++--
1 file changed, 20 insertions(+), 2 deletions(-)
diff --git a/ui/src/dashboards/components/DashboardHeaderEdit.js b/ui/src/dashboards/components/DashboardHeaderEdit.js
index d3be7073fd..fd8d445c62 100644
--- a/ui/src/dashboards/components/DashboardHeaderEdit.js
+++ b/ui/src/dashboards/components/DashboardHeaderEdit.js
@@ -8,12 +8,28 @@ class DashboardEditHeader extends Component {
const {dashboard: {name}} = props
this.state = {name}
this.handleChange = ::this.handleChange
+ this.handleFormSubmit = ::this.handleFormSubmit
+ this.handleKeyUp = ::this.handleKeyUp
}
handleChange(name) {
this.setState({name})
}
+ handleFormSubmit(e) {
+ e.preventDefault()
+ const name = e.target.name.value
+ this.props.onSave(name)
+ }
+
+ handleKeyUp(e) {
+ const {dashboard: {name}, onCancel} = this.props
+ if (e.key === 'Escape') {
+ this.setState({name})
+ onCancel()
+ }
+ }
+
render() {
const {onSave, onCancel} = this.props
const {name} = this.state
@@ -21,15 +37,17 @@ class DashboardEditHeader extends Component {
return (
<div className="page-header full-width">
<div className="page-header__container">
- <div className="page-header__left">
+ <form className="page-header__left" onSubmit={this.handleFormSubmit}>
<input
className="page-header--editing"
+ name="name"
autoFocus={true}
value={name}
placeholder="Name this Dashboard"
onChange={e => this.handleChange(e.target.value)}
+ onKeyUp={this.handleKeyUp}
/>
- </div>
+ </form>
<ConfirmButtons item={name} onConfirm={onSave} onCancel={onCancel} />
</div>
</div>