Fix react error on switching modes. Add more keys

This commit is contained in:
jos 2018-09-19 09:44:12 +02:00
parent 3865a1d365
commit 37e22908c7
3 changed files with 33 additions and 25 deletions

View File

@ -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,

View File

@ -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))
}) })

View File

@ -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)