53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
const Component = require('react').Component
|
|
const h = require('react-hyperscript')
|
|
const inherits = require('util').inherits
|
|
const findDOMNode = require('react-dom').findDOMNode
|
|
|
|
module.exports = EditableLabel
|
|
|
|
|
|
inherits(EditableLabel, Component)
|
|
function EditableLabel() {
|
|
Component.call(this)
|
|
}
|
|
|
|
EditableLabel.prototype.render = function() {
|
|
const props = this.props
|
|
let state = this.state
|
|
|
|
if (state && state.isEditingLabel) {
|
|
|
|
return h('div.editable-label', [
|
|
h('input', {
|
|
defaultValue: props.textValue,
|
|
onKeyPress:(event) => {
|
|
this.saveIfEnter(event)
|
|
},
|
|
}),
|
|
h('button', {
|
|
onClick:() => this.saveText(),
|
|
}, 'Save')
|
|
])
|
|
|
|
} else {
|
|
return h('div', {
|
|
onClick:(event) => {
|
|
this.setState({ isEditingLabel: true })
|
|
},
|
|
}, this.props.children)
|
|
}
|
|
}
|
|
|
|
EditableLabel.prototype.saveIfEnter = function(event) {
|
|
if (event.key === 'Enter') {
|
|
this.saveText()
|
|
}
|
|
}
|
|
|
|
EditableLabel.prototype.saveText = function() {
|
|
var container = findDOMNode(this)
|
|
var text = container.querySelector('.editable-label input').value
|
|
this.props.saveText(text)
|
|
this.setState({ isEditingLabel: false, textLabel: text })
|
|
}
|