Removed helper functions in Main
This commit is contained in:
parent
525a41a7d5
commit
274a99ddef
|
@ -119,8 +119,6 @@ export default class JSONNode extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderProperty (path, data, options) {
|
renderProperty (path, data, options) {
|
||||||
console.log('renderProperty', path, data)
|
|
||||||
|
|
||||||
if (path.length > 0) {
|
if (path.length > 0) {
|
||||||
const prop = last(path)
|
const prop = last(path)
|
||||||
const isIndex = typeof prop === 'number'
|
const isIndex = typeof prop === 'number'
|
||||||
|
|
198
src/Main.js
198
src/Main.js
|
@ -64,33 +64,41 @@ export default class Main extends Component {
|
||||||
handleChangeValue (path, value) {
|
handleChangeValue (path, value) {
|
||||||
console.log('handleChangeValue', path, value)
|
console.log('handleChangeValue', path, value)
|
||||||
|
|
||||||
this._setIn(path, ['value'], value)
|
const dataPath = toDataPath(this.state.data, path)
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
data: setIn(this.state.data, dataPath.concat(['value']), value)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChangeProperty (path, oldProp, newProp) {
|
handleChangeProperty (path, oldProp, newProp) {
|
||||||
console.log('handleChangeProperty', path, oldProp, newProp)
|
console.log('handleChangeProperty', path, oldProp, newProp)
|
||||||
|
|
||||||
const index = this._findIndex(path, oldProp)
|
const dataPath = toDataPath(this.state.data, path)
|
||||||
|
const object = getIn(this.state.data, dataPath)
|
||||||
|
const index = object.props.findIndex(p => p.name === oldProp)
|
||||||
|
|
||||||
this._setIn(path, ['props', index, 'name'], newProp)
|
this.setState({
|
||||||
|
data: setIn(this.state.data, dataPath.concat(['props', index, 'name']), newProp)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChangeType (path, type) {
|
handleChangeType (path, type) {
|
||||||
console.log('handleChangeType', path, type)
|
console.log('handleChangeType', path, type)
|
||||||
|
|
||||||
const oldEntry = this._getIn(path)
|
const dataPath = toDataPath(this.state.data, path)
|
||||||
const oldType = oldEntry.type
|
const oldEntry = getIn(this.state.data, dataPath)
|
||||||
|
|
||||||
const newEntry = createDataEntry(type)
|
const newEntry = createDataEntry(type)
|
||||||
|
|
||||||
// convert contents from old value to new value where possible
|
// convert contents from old value to new value where possible
|
||||||
if (type === 'value' && oldType === 'string') {
|
// TODO: move into a function convertDataEntry
|
||||||
|
if (type === 'value' && oldEntry.type === 'string') {
|
||||||
newEntry.value = stringConvert(oldEntry.value)
|
newEntry.value = stringConvert(oldEntry.value)
|
||||||
}
|
}
|
||||||
if (type === 'string' && oldType === 'value') {
|
if (type === 'string' && oldEntry.type === 'value') {
|
||||||
newEntry.value = oldEntry.value + ''
|
newEntry.value = oldEntry.value + ''
|
||||||
}
|
}
|
||||||
if (type === 'object' && oldType === 'array') {
|
if (type === 'object' && oldEntry.type === 'array') {
|
||||||
newEntry.props = oldEntry.items.map((item, index) => {
|
newEntry.props = oldEntry.items.map((item, index) => {
|
||||||
return {
|
return {
|
||||||
name: index + '',
|
name: index + '',
|
||||||
|
@ -98,11 +106,13 @@ export default class Main extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (type === 'array' && oldType === 'object') {
|
if (type === 'array' && oldEntry.type === 'object') {
|
||||||
newEntry.items = oldEntry.props.map(prop => prop.value)
|
newEntry.items = oldEntry.props.map(prop => prop.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
this._setIn(path, [], newEntry)
|
this.setState({
|
||||||
|
data: setIn(this.state.data, dataPath, newEntry)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInsert (path, type) {
|
handleInsert (path, type) {
|
||||||
|
@ -114,29 +124,34 @@ export default class Main extends Component {
|
||||||
|
|
||||||
const afterProp = last(path)
|
const afterProp = last(path)
|
||||||
const parentPath = path.slice(0, path.length - 1)
|
const parentPath = path.slice(0, path.length - 1)
|
||||||
const parent = this._getIn(parentPath)
|
const dataPath = toDataPath(this.state.data, parentPath)
|
||||||
|
const parent = getIn(this.state.data, dataPath)
|
||||||
|
|
||||||
if (parent.type === 'array') {
|
if (parent.type === 'array') {
|
||||||
this._updateIn(parentPath, ['items'], (items) => {
|
this.setState({
|
||||||
const index = parseInt(afterProp)
|
data: updateIn(this.state.data, dataPath.concat(['items']), (items) => {
|
||||||
const updated = items.slice(0)
|
const index = parseInt(afterProp)
|
||||||
|
const updatedItems = items.slice(0)
|
||||||
|
|
||||||
updated.splice(index + 1, 0, createDataEntry(type))
|
updatedItems.splice(index + 1, 0, createDataEntry(type))
|
||||||
|
|
||||||
return updated
|
return updatedItems
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
else { // parent.type === 'object'
|
else { // parent.type === 'object'
|
||||||
this._updateIn(parentPath, ['props'], (props) => {
|
this.setState({
|
||||||
const index = this._findIndex(parentPath, afterProp)
|
data: updateIn(this.state.data, dataPath.concat(['props']), (props) => {
|
||||||
const updated = props.slice(0)
|
const index = props.findIndex(p => p.name === afterProp)
|
||||||
|
const updatedProps = props.slice(0)
|
||||||
|
|
||||||
updated.splice(index + 1, 0, {
|
updatedProps.splice(index + 1, 0, {
|
||||||
name: '',
|
name: '',
|
||||||
value: createDataEntry(type)
|
value: createDataEntry(type)
|
||||||
|
})
|
||||||
|
|
||||||
|
return updatedProps
|
||||||
})
|
})
|
||||||
|
|
||||||
return updated
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -150,30 +165,35 @@ export default class Main extends Component {
|
||||||
|
|
||||||
const prop = last(path)
|
const prop = last(path)
|
||||||
const parentPath = path.slice(0, path.length - 1)
|
const parentPath = path.slice(0, path.length - 1)
|
||||||
const parent = this._getIn(parentPath)
|
const dataPath = toDataPath(this.state.data, parentPath)
|
||||||
|
const parent = getIn(this.state.data, dataPath)
|
||||||
|
|
||||||
if (parent.type === 'array') {
|
if (parent.type === 'array') {
|
||||||
this._updateIn(parentPath, ['items'], (items) => {
|
this.setState({
|
||||||
const index = parseInt(prop)
|
data: updateIn(this.state.data, dataPath.concat(['items']), (items) => {
|
||||||
const updated = items.slice(0)
|
const index = parseInt(prop)
|
||||||
const original = items[index]
|
const updatedItems = items.slice(0)
|
||||||
const duplicate = cloneDeep(original)
|
const original = items[index]
|
||||||
|
const duplicate = cloneDeep(original)
|
||||||
|
|
||||||
updated.splice(index + 1, 0, duplicate)
|
updatedItems.splice(index + 1, 0, duplicate)
|
||||||
|
|
||||||
return updated
|
return updatedItems
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
else { // parent.type === 'object'
|
else { // parent.type === 'object'
|
||||||
this._updateIn(parentPath, ['props'], (props) => {
|
this.setState({
|
||||||
const index = this._findIndex(parentPath, prop)
|
data: updateIn(this.state.data, dataPath.concat(['props']), (props) => {
|
||||||
const updated = props.slice(0)
|
const index = props.findIndex(p => p.name === prop)
|
||||||
const original = props[index]
|
const updated = props.slice(0)
|
||||||
const duplicate = cloneDeep(original)
|
const original = props[index]
|
||||||
|
const duplicate = cloneDeep(original)
|
||||||
|
|
||||||
updated.splice(index + 1, 0, duplicate)
|
updated.splice(index + 1, 0, duplicate)
|
||||||
|
|
||||||
return updated
|
return updated
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -184,7 +204,7 @@ export default class Main extends Component {
|
||||||
this.handleHideContextMenu() // TODO: should be handled by the contextmenu itself
|
this.handleHideContextMenu() // TODO: should be handled by the contextmenu itself
|
||||||
|
|
||||||
const parentPath = path.slice(0, path.length - 1)
|
const parentPath = path.slice(0, path.length - 1)
|
||||||
const parent = this._getIn(parentPath)
|
const parent = getIn(this.state.data, toDataPath(this.state.data, parentPath))
|
||||||
|
|
||||||
if (parent.type === 'array') {
|
if (parent.type === 'array') {
|
||||||
const dataPath = toDataPath(this.state.data, path)
|
const dataPath = toDataPath(this.state.data, path)
|
||||||
|
@ -214,7 +234,8 @@ export default class Main extends Component {
|
||||||
|
|
||||||
this.handleHideContextMenu() // TODO: should be handled by the contextmenu itself
|
this.handleHideContextMenu() // TODO: should be handled by the contextmenu itself
|
||||||
|
|
||||||
const object = this._getIn(path)
|
const dataPath = toDataPath(this.state.data, path)
|
||||||
|
const object = getIn(this.state.data, dataPath)
|
||||||
|
|
||||||
let _order
|
let _order
|
||||||
if (order === 'asc' || order === 'desc') {
|
if (order === 'asc' || order === 'desc') {
|
||||||
|
@ -223,27 +244,34 @@ export default class Main extends Component {
|
||||||
else {
|
else {
|
||||||
// toggle previous order
|
// toggle previous order
|
||||||
_order = object.order !== 'asc' ? 'asc' : 'desc'
|
_order = object.order !== 'asc' ? 'asc' : 'desc'
|
||||||
this._setIn(path, ['order'], _order)
|
|
||||||
|
this.setState({
|
||||||
|
data: setIn(this.state.data, dataPath.concat(['order']), _order)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (object.type === 'array') {
|
if (object.type === 'array') {
|
||||||
this._updateIn(path, ['items'], function (items) {
|
this.setState({
|
||||||
const ordered = items.slice(0)
|
data: updateIn(this.state.data, dataPath.concat(['items']), (items) =>{
|
||||||
const compare = _order === 'desc' ? compareDesc : compareAsc
|
const ordered = items.slice(0)
|
||||||
|
const compare = _order === 'desc' ? compareDesc : compareAsc
|
||||||
|
|
||||||
ordered.sort((a, b) => compare(a.value, b.value))
|
ordered.sort((a, b) => compare(a.value, b.value))
|
||||||
|
|
||||||
return ordered
|
return ordered
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
else { // object.type === 'object'
|
else { // object.type === 'object'
|
||||||
this._updateIn(path, ['props'], function (props) {
|
this.setState({
|
||||||
const ordered = props.slice(0)
|
data: updateIn(this.state.data, dataPath.concat(['props']), (props) => {
|
||||||
const compare = _order === 'desc' ? compareDesc : compareAsc
|
const orderedProps = props.slice(0)
|
||||||
|
const compare = _order === 'desc' ? compareDesc : compareAsc
|
||||||
|
|
||||||
ordered.sort((a, b) => compare(a.name, b.name))
|
orderedProps.sort((a, b) => compare(a.name, b.name))
|
||||||
|
|
||||||
return ordered
|
return orderedProps
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -251,7 +279,11 @@ export default class Main extends Component {
|
||||||
handleExpand(path, expand) {
|
handleExpand(path, expand) {
|
||||||
console.log('handleExpand', path, expand)
|
console.log('handleExpand', path, expand)
|
||||||
|
|
||||||
this._setIn(path, ['expanded'], expand)
|
const dataPath = toDataPath(this.state.data, path)
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
data: setIn(this.state.data, dataPath.concat(['expanded']), expand)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -267,12 +299,18 @@ export default class Main extends Component {
|
||||||
// TODO: remove this cached this.state.contextMenuPath and do a brute-force sweep over the data instead?
|
// TODO: remove this cached this.state.contextMenuPath and do a brute-force sweep over the data instead?
|
||||||
// hide previous context menu (if any)
|
// hide previous context menu (if any)
|
||||||
if (this.state.contextMenuPath !== null) {
|
if (this.state.contextMenuPath !== null) {
|
||||||
this._setIn(this.state.contextMenuPath, ['contextMenu'], null)
|
const dataPath = toDataPath(this.state.data, this.state.contextMenuPath)
|
||||||
|
this.setState({
|
||||||
|
data: setIn(this.state.data, dataPath.concat(['contextMenu']), null)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// show new menu
|
// show new menu
|
||||||
if (Array.isArray(path)) {
|
if (Array.isArray(path)) {
|
||||||
this._setIn(path, ['contextMenu'], {anchor, root})
|
const dataPath = toDataPath(this.state.data, path)
|
||||||
|
this.setState({
|
||||||
|
data: setIn(this.state.data, dataPath.concat(['contextMenu']), {anchor, root})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -285,46 +323,26 @@ export default class Main extends Component {
|
||||||
this.handleShowContextMenu({})
|
this.handleShowContextMenu({})
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: remove _getIn, _setIn, etc
|
/**
|
||||||
_getIn (path, dataProps = []) {
|
* Set JSON object in editor
|
||||||
const dataPath = toDataPath(this.state.data, path)
|
* @param {Object | Array | string | number | boolean | null} json JSON data
|
||||||
|
*/
|
||||||
return getIn(this.state.data, dataPath.concat(dataProps))
|
|
||||||
}
|
|
||||||
|
|
||||||
_setIn (path, dataProps = [], value) {
|
|
||||||
const dataPath = toDataPath(this.state.data, path)
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
data: setIn(this.state.data, dataPath.concat(dataProps), value)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_updateIn (path, dataProps = [], callback) {
|
|
||||||
const dataPath = toDataPath(this.state.data, path)
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
data: updateIn(this.state.data, dataPath.concat(dataProps), callback)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
_findIndex(path, prop) {
|
|
||||||
const object = this._getIn(path)
|
|
||||||
return object.props.findIndex(p => p.name === prop)
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: comment
|
|
||||||
get () {
|
|
||||||
return dataToJson(this.state.data)
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: comment
|
|
||||||
set (json) {
|
set (json) {
|
||||||
this.setState({
|
this.setState({
|
||||||
data: jsonToData([], json, this.state.options.expand)
|
data: jsonToData([], json, this.state.options.expand)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get JSON from the editor
|
||||||
|
* @returns {Object | Array | string | number | boolean | null} json
|
||||||
|
*/
|
||||||
|
get () {
|
||||||
|
return dataToJson(this.state.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: create getText and setText
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Default function to determine whether or not to expand a node initially
|
* Default function to determine whether or not to expand a node initially
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue