diff --git a/src/JSONEditor.js b/src/JSONEditor.js new file mode 100644 index 0000000..997e02b --- /dev/null +++ b/src/JSONEditor.js @@ -0,0 +1,59 @@ +import { h, Component } from 'preact' + +import TreeMode from './TreeMode' +import bindMethods from './utils/bindMethods' + +// TODO: implement and use JSONEditor.js after we've integrated Redux. + +export default class JSONEditor extends Component { + constructor (props) { + super(props) + + bindMethods(this) + + this.state = { + options: props.options, + data: null + } + } + + render () { + return h(TreeMode, { + ref: 'tree-mode', + options: this.state.options, + data: this.state.data + }, []) + } + + /** + * Set JSON object in editor + * @param {Object | Array | string | number | boolean | null} json JSON data + * @param {SetOptions} [options] + */ + set (json, options = {}) { + if (this.refs['tree-mode']) { + this.refs['tree-mode'].set(json, options) + } + else { + // not yet rendered + this.setState({ + data: json, + options + }) + } + } + + /** + * Get JSON from the editor + * @returns {Object | Array | string | number | boolean | null} json + */ + get () { + if (this.refs['tree-mode']) { + return this.refs['tree-mode'].get() + } + else { + // not yet rendered + return this.state.data + } + } +} \ No newline at end of file diff --git a/src/JSONNode.js b/src/JSONNode.js index 02cdf42..48737dc 100644 --- a/src/JSONNode.js +++ b/src/JSONNode.js @@ -27,6 +27,8 @@ const TYPE_TITLES = { let activeContextMenu = null export default class JSONNode extends Component { + // TODO: define propTypes + constructor (props) { super(props) diff --git a/src/Main.js b/src/TreeMode.js similarity index 96% rename from src/Main.js rename to src/TreeMode.js index c819d07..bc2b3aa 100644 --- a/src/Main.js +++ b/src/TreeMode.js @@ -7,23 +7,24 @@ import { isObject } from './utils/typeUtils' import bindMethods from './utils/bindMethods' import JSONNode from './JSONNode' -export default class Main extends Component { +export default class TreeMode extends Component { + // TODO: define propTypes + constructor (props) { super(props) bindMethods(this) + const name = this.props.options && this.props.options.name || null + const expand = this.props.options && this.props.options.expand || TreeMode.expand + this.state = { options: { - name: null - }, - - data: { - type: 'object', - expanded: true, - props: [] + name }, + data: jsonToData([], this.props.data || {}, expand), + events: { onChangeProperty: this.handleChangeProperty, onChangeValue: this.handleChangeValue, @@ -285,7 +286,7 @@ export default class Main extends Component { this.setState({ options: setIn(this.state.options, ['name'], options && options.name || null), - data: jsonToData([], json, options.expand || Main.expand) + data: jsonToData([], json, options.expand || TreeMode.expand) }) } diff --git a/src/index.js b/src/index.js index b31a654..fba61fe 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import { h, render } from 'preact' -import Main from './Main' +import TreeMode from './TreeMode' /** * Factory function to create a new JSONEditor @@ -9,7 +9,8 @@ import Main from './Main' * @constructor */ export default function jsoneditor (container, options) { - const elem = render(h(Main, {options}), container) + // TODO: use JSONEditor instead of TreeMode + const elem = render(h(TreeMode, {options}), container) return elem._component }