Some refactoring. Pass options `name` and `expand` via `.set`
This commit is contained in:
parent
274a99ddef
commit
4baa98c961
76
src/Main.js
76
src/Main.js
|
@ -11,14 +11,12 @@ export default class Main extends Component {
|
|||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
// TODO: create a function bindMethods(this)
|
||||
bindMethods(this)
|
||||
|
||||
this.state = {
|
||||
options: Object.assign({
|
||||
name: null,
|
||||
expand: Main.expand // TODO: remove expand as option, should be passed as optional callback to editor.set
|
||||
}, props.options || {}),
|
||||
options: {
|
||||
name: null
|
||||
},
|
||||
|
||||
data: {
|
||||
type: 'object',
|
||||
|
@ -88,27 +86,7 @@ export default class Main extends Component {
|
|||
|
||||
const dataPath = toDataPath(this.state.data, path)
|
||||
const oldEntry = getIn(this.state.data, dataPath)
|
||||
const newEntry = createDataEntry(type)
|
||||
|
||||
// convert contents from old value to new value where possible
|
||||
// TODO: move into a function convertDataEntry
|
||||
if (type === 'value' && oldEntry.type === 'string') {
|
||||
newEntry.value = stringConvert(oldEntry.value)
|
||||
}
|
||||
if (type === 'string' && oldEntry.type === 'value') {
|
||||
newEntry.value = oldEntry.value + ''
|
||||
}
|
||||
if (type === 'object' && oldEntry.type === 'array') {
|
||||
newEntry.props = oldEntry.items.map((item, index) => {
|
||||
return {
|
||||
name: index + '',
|
||||
value: item
|
||||
}
|
||||
})
|
||||
}
|
||||
if (type === 'array' && oldEntry.type === 'object') {
|
||||
newEntry.items = oldEntry.props.map(prop => prop.value)
|
||||
}
|
||||
const newEntry = convertDataEntry(oldEntry, type)
|
||||
|
||||
this.setState({
|
||||
data: setIn(this.state.data, dataPath, newEntry)
|
||||
|
@ -120,8 +98,6 @@ export default class Main extends Component {
|
|||
|
||||
this.handleHideContextMenu() // TODO: should be handled by the contextmenu itself
|
||||
|
||||
// TODO: this method is quite complicated. Can we simplify it?
|
||||
|
||||
const afterProp = last(path)
|
||||
const parentPath = path.slice(0, path.length - 1)
|
||||
const dataPath = toDataPath(this.state.data, parentPath)
|
||||
|
@ -161,8 +137,6 @@ export default class Main extends Component {
|
|||
|
||||
this.handleHideContextMenu() // TODO: should be handled by the contextmenu itself
|
||||
|
||||
// TODO: this method is quite complicated. Can we simplify it?
|
||||
|
||||
const prop = last(path)
|
||||
const parentPath = path.slice(0, path.length - 1)
|
||||
const dataPath = toDataPath(this.state.data, parentPath)
|
||||
|
@ -326,10 +300,13 @@ export default class Main extends Component {
|
|||
/**
|
||||
* Set JSON object in editor
|
||||
* @param {Object | Array | string | number | boolean | null} json JSON data
|
||||
* @param {SetOptions} [options]
|
||||
*/
|
||||
set (json) {
|
||||
set (json, options = {}) {
|
||||
this.setState({
|
||||
data: jsonToData([], json, this.state.options.expand)
|
||||
options: setIn(this.state.options, ['name'], options && options.name || null),
|
||||
|
||||
data: jsonToData([], json, options.expand || Main.expand)
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -446,7 +423,7 @@ function dataToJson (data) {
|
|||
|
||||
/**
|
||||
* Create a new data entry
|
||||
* @param {'object' | 'array' | 'value' | 'string'} [type]
|
||||
* @param {'object' | 'array' | 'value' | 'string'} [type='value']
|
||||
* @return {*}
|
||||
*/
|
||||
function createDataEntry (type) {
|
||||
|
@ -471,3 +448,36 @@ function createDataEntry (type) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert an entry into a different type. When possible, data is retained
|
||||
* @param {Data} entry
|
||||
* @param {'object' | 'array' | 'value' | 'string'} type
|
||||
*/
|
||||
function convertDataEntry (entry, type) {
|
||||
const convertedEntry = createDataEntry(type)
|
||||
|
||||
// convert contents from old value to new value where possible
|
||||
if (type === 'value' && entry.type === 'string') {
|
||||
convertedEntry.value = stringConvert(entry.value)
|
||||
}
|
||||
|
||||
if (type === 'string' && entry.type === 'value') {
|
||||
convertedEntry.value = entry.value + ''
|
||||
}
|
||||
|
||||
if (type === 'object' && entry.type === 'array') {
|
||||
convertedEntry.props = entry.items.map((item, index) => {
|
||||
return {
|
||||
name: index + '',
|
||||
value: item
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (type === 'array' && entry.type === 'object') {
|
||||
convertedEntry.items = entry.props.map(prop => prop.value)
|
||||
}
|
||||
|
||||
return convertedEntry
|
||||
}
|
|
@ -16,12 +16,7 @@
|
|||
<script>
|
||||
// create the editor
|
||||
const container = document.getElementById('container');
|
||||
const options = {
|
||||
name: 'myObject',
|
||||
expand: function (path) {
|
||||
return true
|
||||
}
|
||||
};
|
||||
const options = {};
|
||||
const editor = jsoneditor(container, options);
|
||||
const json = {
|
||||
'array': [1, 2, 3],
|
||||
|
@ -31,7 +26,12 @@
|
|||
'object': {'a': 'b', 'c': 'd', 'e': [{"first": true}, {"second": true}]},
|
||||
'string': 'Hello World'
|
||||
};
|
||||
editor.set(json);
|
||||
editor.set(json, {
|
||||
name: 'myObject',
|
||||
expand: function (path) {
|
||||
return true
|
||||
}
|
||||
});
|
||||
|
||||
// set json
|
||||
document.getElementById('setJSON').onclick = function () {
|
||||
|
|
|
@ -24,7 +24,11 @@
|
|||
* @typedef {ObjectData | ArrayData | ValueData} Data
|
||||
*
|
||||
* @typedef {{
|
||||
* name: string?
|
||||
* expand: function?
|
||||
*
|
||||
* }} Options
|
||||
*
|
||||
* @typedef {{
|
||||
* name: string?,
|
||||
* expand: function (path: Array.<string | number>)?
|
||||
* }} SetOptions
|
||||
*/
|
Loading…
Reference in New Issue