Fix react error on switching modes. Add more keys
This commit is contained in:
parent
3865a1d365
commit
37e22908c7
|
@ -117,6 +117,8 @@ export default class TextMode extends Component {
|
||||||
/** @protected */
|
/** @protected */
|
||||||
renderMenu () {
|
renderMenu () {
|
||||||
return h(TextModeMenu, {
|
return h(TextModeMenu, {
|
||||||
|
key: 'menu',
|
||||||
|
|
||||||
mode: this.props.mode,
|
mode: this.props.mode,
|
||||||
modes: this.props.modes,
|
modes: this.props.modes,
|
||||||
onChangeMode: this.props.onChangeMode,
|
onChangeMode: this.props.onChangeMode,
|
||||||
|
|
|
@ -18,13 +18,17 @@ export default class ModeSelector extends Component {
|
||||||
className: 'jsoneditor-menu-button jsoneditor-type-modes' +
|
className: 'jsoneditor-menu-button jsoneditor-type-modes' +
|
||||||
((mode === this.props.mode) ? ' jsoneditor-selected' : ''),
|
((mode === this.props.mode) ? ' jsoneditor-selected' : ''),
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
try {
|
this.props.onRequestClose()
|
||||||
this.props.onRequestClose()
|
|
||||||
this.props.onChangeMode(mode)
|
// send the onChangeMode on the next tick, after onRequestClose is executed and applied
|
||||||
}
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
this.props.onChangeMode(mode)
|
||||||
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
this.props.onError(err)
|
this.props.onError(err)
|
||||||
}
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}, toCapital(mode))
|
}, toCapital(mode))
|
||||||
})
|
})
|
||||||
|
|
|
@ -29,7 +29,7 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
// mode
|
// mode
|
||||||
if (this.props.modes ) {
|
if (this.props.modes ) {
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('div', {className: 'jsoneditor-menu-group'}, [
|
h('div', {className: 'jsoneditor-menu-group', key: 'mode'}, [
|
||||||
h(ModeButton, {
|
h(ModeButton, {
|
||||||
key: 'mode',
|
key: 'mode',
|
||||||
modes: this.props.modes,
|
modes: this.props.modes,
|
||||||
|
@ -43,24 +43,26 @@ export default class TreeModeMenu extends PureComponent {
|
||||||
|
|
||||||
// format / compact / repair
|
// format / compact / repair
|
||||||
items = items.concat([
|
items = items.concat([
|
||||||
h('button', {
|
h('div', {className: 'jsoneditor-menu-group', key: 'format-compact-repair'}, [
|
||||||
key: 'format',
|
h('button', {
|
||||||
className: 'jsoneditor-format',
|
key: 'format',
|
||||||
title: 'Format the JSON document',
|
className: 'jsoneditor-format',
|
||||||
onClick: this.props.onFormat
|
title: 'Format the JSON document',
|
||||||
}, h('i', {className: 'fa fa-align-left'})),
|
onClick: this.props.onFormat
|
||||||
h('button', {
|
}, h('i', {className: 'fa fa-align-left'})),
|
||||||
key: 'compact',
|
h('button', {
|
||||||
className: 'jsoneditor-compact',
|
key: 'compact',
|
||||||
title: 'Compact the JSON document',
|
className: 'jsoneditor-compact',
|
||||||
onClick: this.props.onCompact
|
title: 'Compact the JSON document',
|
||||||
}, h('i', {className: 'fa fa-align-justify'})),
|
onClick: this.props.onCompact
|
||||||
h('button', {
|
}, h('i', {className: 'fa fa-align-justify'})),
|
||||||
key: 'repair',
|
h('button', {
|
||||||
className: 'jsoneditor-repair',
|
key: 'repair',
|
||||||
title: 'Repair the JSON document',
|
className: 'jsoneditor-repair',
|
||||||
onClick: this.props.onRepair
|
title: 'Repair the JSON document',
|
||||||
}, h('i', {className: 'fa fa-screwdriver'})),
|
onClick: this.props.onRepair
|
||||||
|
}, h('i', {className: 'fa fa-screwdriver'})),
|
||||||
|
])
|
||||||
])
|
])
|
||||||
|
|
||||||
return h('div', {key: 'menu', className: 'jsoneditor-menu'}, items)
|
return h('div', {key: 'menu', className: 'jsoneditor-menu'}, items)
|
||||||
|
|
Loading…
Reference in New Issue