Keep state of value in JSONNode whilst typing (for live updating of colors)

This commit is contained in:
jos 2016-07-14 15:35:37 +02:00
parent d0abc3124a
commit fd631cd34c
1 changed files with 21 additions and 7 deletions

View File

@ -8,10 +8,12 @@ export default class JSONNode extends Component {
super(props) super(props)
this.state = { this.state = {
expanded: false expanded: false,
value: props.value
} }
this.handleChangeField = this.handleChangeField.bind(this) this.handleChangeField = this.handleChangeField.bind(this)
this.handleBlurValue = this.handleBlurValue.bind(this)
this.handleChangeValue = this.handleChangeValue.bind(this) this.handleChangeValue = this.handleChangeValue.bind(this)
this.handleClickValue = this.handleClickValue.bind(this) this.handleClickValue = this.handleClickValue.bind(this)
this.handleKeyDownValue = this.handleKeyDownValue.bind(this) this.handleKeyDownValue = this.handleKeyDownValue.bind(this)
@ -92,7 +94,7 @@ export default class JSONNode extends Component {
h('div', {class: 'jsoneditor-button-placeholder'}), h('div', {class: 'jsoneditor-button-placeholder'}),
this.renderField(parent, index, field, value), this.renderField(parent, index, field, value),
this.renderSeparator(), this.renderSeparator(),
this.renderValue(value) this.renderValue(this.state.value)
]) ])
]) ])
} }
@ -130,7 +132,8 @@ export default class JSONNode extends Component {
class: valueClass, class: valueClass,
contentEditable: true, contentEditable: true,
spellCheck: 'false', spellCheck: 'false',
onBlur: this.handleChangeValue, onInput: this.handleChangeValue,
onBlur: this.handleBlurValue,
onClick: this.handleClickValue, onClick: this.handleClickValue,
onKeyDown: this.handleKeyDownValue, onKeyDown: this.handleKeyDownValue,
title: _isUrl ? 'Ctrl+Click or ctrl+Enter to open url' : null title: _isUrl ? 'Ctrl+Click or ctrl+Enter to open url' : null
@ -149,6 +152,12 @@ export default class JSONNode extends Component {
(this.state && Object.keys(nextState).some(prop => this.state[prop] !== nextState[prop])) (this.state && Object.keys(nextState).some(prop => this.state[prop] !== nextState[prop]))
} }
componentWillReceiveProps(nextProps) {
this.setState({
value: nextProps.value
})
}
handleChangeField (event) { handleChangeField (event) {
const path = this.props.parent.getPath() const path = this.props.parent.getPath()
const newField = unescapeHTML(getInnerText(event.target)) const newField = unescapeHTML(getInnerText(event.target))
@ -158,14 +167,19 @@ export default class JSONNode extends Component {
} }
} }
handleChangeValue (event) { handleBlurValue (event) {
const path = this.getPath() const path = this.getPath()
const value = this._getValueFromEvent(event) if (this.state.value !== this.props.value) {
if (value !== this.props.value) { this.props.onChangeValue(path, this.state.value)
this.props.onChangeValue(path, value)
} }
} }
handleChangeValue (event) {
this.setState({
value: this._getValueFromEvent(event)
})
}
handleClickValue (event) { handleClickValue (event) {
if (event.ctrlKey && event.button === 0) { // Ctrl+Left click if (event.ctrlKey && event.button === 0) { // Ctrl+Left click
this._openLinkIfUrl(event) this._openLinkIfUrl(event)