diff --git a/src/JSONNode.js b/src/JSONNode.js index c6a5249..65bf19a 100644 --- a/src/JSONNode.js +++ b/src/JSONNode.js @@ -30,7 +30,7 @@ export default class JSONNode extends Component { } } - renderJSONObject ({data, index, options, events}) { + renderJSONObject ({data, index, options, events, menu}) { const childCount = data.childs.length const contents = [ h('div', {class: 'jsoneditor-node jsoneditor-object'}, [ @@ -47,7 +47,8 @@ export default class JSONNode extends Component { return h(JSONNode, { data: child, options, - events + events, + menu }) }) @@ -57,7 +58,7 @@ export default class JSONNode extends Component { return h('li', {}, contents) } - renderJSONArray ({data, index, options, events}) { + renderJSONArray ({data, index, options, events, menu}) { const childCount = data.childs.length const contents = [ h('div', {class: 'jsoneditor-node jsoneditor-array'}, [ @@ -75,7 +76,8 @@ export default class JSONNode extends Component { data: child, index, options, - events + events, + menu }) }) @@ -145,11 +147,12 @@ export default class JSONNode extends Component { } renderContextMenuButton () { - const childs = this.props.data.menu ? [ - h(ContextMenu) - ] : null + const visible = this.contextMenuVisible() + const childs = visible + ? [ h(ContextMenu) ] + : null - const className = `jsoneditor-button jsoneditor-contextmenu` + const className = `jsoneditor-button jsoneditor-contextmenu` + (visible ? ' jsoneditor-visible' : '') return h('div', {class: 'jsoneditor-button-container'}, h('button', {class: className, onClick: this.handleContextMenu}, childs) ) @@ -159,6 +162,10 @@ export default class JSONNode extends Component { return Object.keys(nextProps).some(prop => this.props[prop] !== nextProps[prop]) } + contextMenuVisible () { + return this.props.menu === this.props.data.path + } + static _rootName (data, options) { return typeof options.name === 'string' ? options.name @@ -198,7 +205,12 @@ export default class JSONNode extends Component { } handleContextMenu (event) { - this.props.events.onContextMenu(this.props.data.path, !this.props.data.menu) + // toggle visibility of the context menu + const path = this.contextMenuVisible() + ? null + : this.props.data.path + + this.props.events.onContextMenu(path) } _openLinkIfUrl (event) { diff --git a/src/Main.js b/src/Main.js index 0799ba4..4b37e54 100644 --- a/src/Main.js +++ b/src/Main.js @@ -29,7 +29,7 @@ export default class Main extends Component { onContextMenu: this._onContextMenu.bind(this) }, - menu: null, + menu: null, // json pointer to the node having menu visible search: null } @@ -80,11 +80,14 @@ export default class Main extends Component { }) } - _onContextMenu(path, visible) { - const modelPath = Main._pathToModelPath(this.state.data, Main._parsePath(path)).concat('menu') - + /** + * Set ContextMenu to a json pointer, or hide the context menu by passing null + * @param {string | null} path + * @private + */ + _onContextMenu(path) { this.setState({ - data: setIn(this.state.data, modelPath, visible) + menu: path || null }) } diff --git a/src/jsoneditor.css b/src/jsoneditor.css index e8a0f9e..20cbb3d 100644 --- a/src/jsoneditor.css +++ b/src/jsoneditor.css @@ -163,7 +163,7 @@ button.jsoneditor-button.jsoneditor-contextmenu { button.jsoneditor-button.jsoneditor-contextmenu:hover, button.jsoneditor-button.jsoneditor-contextmenu:focus, -button.jsoneditor-button.jsoneditor-contextmenu.jsoneditor-selected { +button.jsoneditor-button.jsoneditor-contextmenu.jsoneditor-visible { background-position: -50px -50px; } diff --git a/src/typedef.js b/src/typedef.js index f81b474..15dc9bd 100644 --- a/src/typedef.js +++ b/src/typedef.js @@ -3,7 +3,6 @@ * @typedef {{ * type: string, * expanded: boolean?, - * menu: boolean?, * path: string, * prop: string?, * value: *?,