diff --git a/README.md b/README.md index b25a057..7ef19cc 100644 --- a/README.md +++ b/README.md @@ -84,3 +84,15 @@ on initial render. Receives two arguments: `keypath` and `value`. Defaults to Optional parameters for filterer (search). Must be an object. - `ignoreCase`, Set to `true` to enable case insensitivity in search. Defaults to `false`. + +#### props.rootExpanded + +Optional boolean to expand the root object. Defaults to true. + +#### props.showRootLabel + +Optional boolean to show the root label. Defaults to true. + +#### props.rootLabel + +Optional string for the root label. Defaults to root. \ No newline at end of file diff --git a/example/app.js b/example/app.js index b0b166a..c538fef 100644 --- a/example/app.js +++ b/example/app.js @@ -13,7 +13,10 @@ document.addEventListener('DOMContentLoaded', function() { inspector({ data: data, onClick: console.log.bind(console), - interactiveLabel: interactiveSelection + interactiveLabel: interactiveSelection, + rootExpanded: false, + showRootLabel: true, + rootLabel: 'root label' }), document.getElementById('inspector') ); diff --git a/json-inspector.js b/json-inspector.js index 45d18df..0023f54 100644 --- a/json-inspector.js +++ b/json-inspector.js @@ -25,7 +25,10 @@ module.exports = React.createClass({ onClick: React.PropTypes.func, validateQuery: React.PropTypes.func, isExpanded: React.PropTypes.func, - filterOptions: React.PropTypes.object + filterOptions: React.PropTypes.object, + rootExpanded: React.PropTypes.bool, + showRootLabel: React.PropTypes.bool, + rootLabel: React.PropTypes.string }, getDefaultProps: function() { @@ -48,7 +51,10 @@ module.exports = React.createClass({ */ isExpanded: function(keypath, value) { return false; - } + }, + rootExpanded: true, + showRootLabel: true, + rootLabel: 'root' }; }, getInitialState: function() { @@ -68,8 +74,10 @@ module.exports = React.createClass({ id: p.id, getOriginal: this.getOriginal, query: s.query, - label: 'root', + label: p.rootLabel, root: true, + rootExpanded: p.rootExpanded, + showRootLabel: p.showRootLabel, isExpanded: p.isExpanded, interactiveLabel: p.interactiveLabel }); diff --git a/lib/leaf.js b/lib/leaf.js index 1c96cb4..d9c3dd1 100644 --- a/lib/leaf.js +++ b/lib/leaf.js @@ -20,10 +20,12 @@ var Leaf = React.createClass({ getDefaultProps: function() { return { root: false, + //rootExpanded: true, prefix: '' }; }, render: function() { + console.log(this.props); var id = 'id_' + uid(); var p = this.props; @@ -34,20 +36,28 @@ var Leaf = React.createClass({ }; var onLabelClick = this._onClick.bind(this, d); - + return D.div({ className: this.getClassName(), id: 'leaf-' + this._rootPath() }, D.input({ className: 'json-inspector__radio', type: 'radio', name: p.id, id: id, tabIndex: -1 }), D.label({ className: 'json-inspector__line', htmlFor: id, onClick: onLabelClick }, D.div({ className: 'json-inspector__flatpath' }, d.path), - D.span({ className: 'json-inspector__key' }, - this.format(d.key), - ':', - this.renderInteractiveLabel(d.key, true)), + this.renderLabel(d.key), this.renderTitle(), this.renderShowOriginalButton()), this.renderChildren()); }, + renderLabel: function(key){ + var leafLabel = D.span({ className: 'json-inspector__key' }, + this.format(key), + ':', + this.renderInteractiveLabel(key, true)); + if(this.props.root && !this.props.showRootLabel){ + leafLabel = D.span({ className: 'json-inspector__key' }, + this.renderInteractiveLabel(key, true)); + } + return leafLabel; + }, renderTitle: function() { var data = this.data(); var t = type(data); @@ -184,9 +194,8 @@ var Leaf = React.createClass({ }, _isInitiallyExpanded: function(p) { var keypath = this.keypath(); - if (p.root) { - return true; + return p.rootExpanded; } if (p.query === '') {