StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some refactoring

This commit is contained in:
jos 2017-12-27 17:16:40 +01:00
parent 1d4a5af82e
commit 46661177db
1 changed files with 35 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/jsoneditor/components/JSONNode.js
View File

@ -29,7 +29,7 @@ export default class JSONNode extends PureComponent {
static propTypes = { static propTypes = {
prop: PropTypes.string, // in case of an object property prop: PropTypes.string, // in case of an object property
index: PropTypes.number, // in case of an array item index: PropTypes.number, // in case of an array item
eson: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]).isRequired, eson: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]).isRequired, // TODO: rename "eson" to "value"?
emit: PropTypes.func.isRequired, emit: PropTypes.func.isRequired,
findKeyBinding: PropTypes.func.isRequired, findKeyBinding: PropTypes.func.isRequired,
@ -58,43 +58,39 @@ export default class JSONNode extends PureComponent {
render () { render () {
// console.log('JSONNode.render ' + JSON.stringify(this.props.eson[META].path)) // console.log('JSONNode.render ' + JSON.stringify(this.props.eson[META].path))
if (this.props.eson[META].type === 'Object') { if (this.props.eson[META].type === 'Object') {
return this.renderJSONObject(this.props) return this.renderJSONObject()
} }
else if (this.props.eson[META].type === 'Array') { else if (this.props.eson[META].type === 'Array') {
return this.renderJSONArray(this.props) return this.renderJSONArray()
} }
else { // no Object or Array else { // no Object or Array
return this.renderJSONValue(this.props) return this.renderJSONValue()
} }
} }
renderJSONObject ({prop, index, eson, options, emit, findKeyBinding}) { renderJSONObject () {
const props = eson[META].props const props = this.props.eson[META].props
const node = h('div', { const node = h('div', {
key: 'node', key: 'node',
onKeyDown: this.handleKeyDown, onKeyDown: this.handleKeyDown,
className: 'jsoneditor-node jsoneditor-object' className: 'jsoneditor-node jsoneditor-object'
}, [ }, [
this.renderExpandButton(), this.renderExpandButton(),
// this.renderActionMenu('update', this.state.menu, this.handleCloseActionMenu), this.renderProperty(this.props.prop, this.props.index, this.props.eson, this.props.options),
// this.renderActionMenuButton(),
this.renderProperty(prop, index, eson, options),
this.renderReadonly(`{${props.length}}`, `Object containing ${props.length} items`), this.renderReadonly(`{${props.length}}`, `Object containing ${props.length} items`),
// this.renderFloatingMenuButton(), this.renderError(this.props.eson[META].error)
this.renderError(eson[META].error)
]) ])
let childs let childs
if (eson[META].expanded) { if (this.props.eson[META].expanded) {
if (props.length > 0) { if (props.length > 0) {
const propsChilds = props.map(prop => h(this.constructor, { const propsChilds = props.map(prop => h(this.constructor, {
key: eson[prop][META].id, key: this.props.eson[prop][META].id,
// parent: this,
prop, prop,
eson: eson[prop], eson: this.props.eson[prop],
emit, emit: this.props.emit,
findKeyBinding, findKeyBinding: this.props.findKeyBinding,
options options: this.props.options
})) }))
childs = h('div', {key: 'childs', className: 'jsoneditor-list'}, propsChilds) childs = h('div', {key: 'childs', className: 'jsoneditor-list'}, propsChilds)
@ -106,7 +102,7 @@ export default class JSONNode extends PureComponent {
} }
} }
const floatingMenu = (eson[META].selected === SELECTED_END) const floatingMenu = (this.props.eson[META].selected === SELECTED_END)
? this.renderFloatingMenu([ ? this.renderFloatingMenu([
{type: 'sort'}, {type: 'sort'},
{type: 'duplicate'}, {type: 'duplicate'},
@ -121,38 +117,34 @@ export default class JSONNode extends PureComponent {
return h('div', { return h('div', {
'data-path': compileJSONPointer(this.props.eson[META].path), 'data-path': compileJSONPointer(this.props.eson[META].path),
className: this.getContainerClassName(eson[META].selected, this.state.hover), className: this.getContainerClassName(this.props.eson[META].selected, this.state.hover),
onMouseOver: this.handleMouseOver, onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave onMouseLeave: this.handleMouseLeave
}, [node, floatingMenu, insertArea, childs]) }, [node, floatingMenu, insertArea, childs])
} }
renderJSONArray ({prop, index, eson, options, emit, findKeyBinding}) { renderJSONArray () {
const node = h('div', { const node = h('div', {
key: 'node', key: 'node',
onKeyDown: this.handleKeyDown, onKeyDown: this.handleKeyDown,
className: 'jsoneditor-node jsoneditor-array' className: 'jsoneditor-node jsoneditor-array'
}, [ }, [
this.renderExpandButton(), this.renderExpandButton(),
// this.renderActionMenu('update', this.state.menu, this.handleCloseActionMenu), this.renderProperty(this.props.prop, this.props.index, this.props.eson, this.props.options),
// this.renderActionMenuButton(), this.renderReadonly(`[${this.props.eson.length}]`, `Array containing ${this.props.eson.length} items`),
this.renderProperty(prop, index, eson, options), this.renderError(this.props.eson[META].error)
this.renderReadonly(`[${eson.length}]`, `Array containing ${eson.length} items`),
// this.renderFloatingMenuButton(),
this.renderError(eson[META].error)
]) ])
let childs let childs
if (eson[META].expanded) { if (this.props.eson[META].expanded) {
if (eson.length > 0) { if (this.props.eson.length > 0) {
const items = eson.map((item, index) => h(this.constructor, { const items = this.props.eson.map((item, index) => h(this.constructor, {
key : item[META].id, key : item[META].id,
// parent: this,
index, index,
eson: item, eson: item,
options, options: this.props.options,
emit, emit: this.props.emit,
findKeyBinding findKeyBinding: this.props.findKeyBinding
})) }))
childs = h('div', {key: 'childs', className: 'jsoneditor-list'}, items) childs = h('div', {key: 'childs', className: 'jsoneditor-list'}, items)
@ -164,7 +156,7 @@ export default class JSONNode extends PureComponent {
} }
} }
const floatingMenu = (eson[META].selected === SELECTED_END) const floatingMenu = (this.props.eson[META].selected === SELECTED_END)
? this.renderFloatingMenu([ ? this.renderFloatingMenu([
{type: 'sort'}, {type: 'sort'},
{type: 'duplicate'}, {type: 'duplicate'},
@ -179,13 +171,13 @@ export default class JSONNode extends PureComponent {
return h('div', { return h('div', {
'data-path': compileJSONPointer(this.props.eson[META].path), 'data-path': compileJSONPointer(this.props.eson[META].path),
className: this.getContainerClassName(eson[META].selected, this.state.hover), className: this.getContainerClassName(this.props.eson[META].selected, this.state.hover),
onMouseOver: this.handleMouseOver, onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave onMouseLeave: this.handleMouseLeave
}, [node, floatingMenu, insertArea, childs]) }, [node, floatingMenu, insertArea, childs])
} }
renderJSONValue ({prop, index, eson, options}) { renderJSONValue () {
const node = h('div', { const node = h('div', {
key: 'node', key: 'node',
onKeyDown: this.handleKeyDown, onKeyDown: this.handleKeyDown,
@ -194,14 +186,14 @@ export default class JSONNode extends PureComponent {
this.renderPlaceholder(), this.renderPlaceholder(),
// this.renderActionMenu('update', this.state.menu, this.handleCloseActionMenu), // this.renderActionMenu('update', this.state.menu, this.handleCloseActionMenu),
// this.renderActionMenuButton(), // this.renderActionMenuButton(),
this.renderProperty(prop, index, eson, options), this.renderProperty(this.props.prop, this.props.index, this.props.eson, this.props.options),
this.renderSeparator(), this.renderSeparator(),
this.renderValue(eson[META].value, eson[META].searchValue, options), this.renderValue(this.props.eson[META].value, this.props.eson[META].searchValue, this.props.options),
// this.renderFloatingMenuButton(), // this.renderFloatingMenuButton(),
this.renderError(eson[META].error) this.renderError(this.props.eson[META].error)
]) ])
const floatingMenu = (eson[META].selected === SELECTED_END) const floatingMenu = (this.props.eson[META].selected === SELECTED_END)
? this.renderFloatingMenu([ ? this.renderFloatingMenu([
// {text: 'String', onClick: this.props.emit('changeType', {type: 'checkbox', checked: false}}), // {text: 'String', onClick: this.props.emit('changeType', {type: 'checkbox', checked: false}}),
{type: 'duplicate'}, {type: 'duplicate'},
@ -216,7 +208,7 @@ export default class JSONNode extends PureComponent {
return h('div', { return h('div', {
'data-path': compileJSONPointer(this.props.eson[META].path), 'data-path': compileJSONPointer(this.props.eson[META].path),
className: this.getContainerClassName(eson[META].selected, this.state.hover), className: this.getContainerClassName(this.props.eson[META].selected, this.state.hover),
onMouseOver: this.handleMouseOver, onMouseOver: this.handleMouseOver,
onMouseLeave: this.handleMouseLeave onMouseLeave: this.handleMouseLeave
}, [node, floatingMenu, insertArea]) }, [node, floatingMenu, insertArea])
@ -271,7 +263,7 @@ export default class JSONNode extends PureComponent {
/** /**
* Render a property field of a JSONNode * Render a property field of a JSONNode
* @param {string} [prop] * @param {string} [prop]
* @param {string} [index] * @param {number} [index]
* @param {ESON} eson * @param {ESON} eson
* @param {{escapeUnicode: boolean, isPropertyEditable: function(Path) : boolean}} options * @param {{escapeUnicode: boolean, isPropertyEditable: function(Path) : boolean}} options
*/ */