Keep state of value in JSONNode whilst typing (for live updating of colors)
This commit is contained in:
parent
d0abc3124a
commit
fd631cd34c
|
@ -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)
|
||||||
|
|
Loading…
Reference in New Issue