Added Root Options

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.

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')
     );

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
         });

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 === '') {