added integer support to collapsed prop

Author: mac-s-g

README.md

@@ -45,14 +45,14 @@ Name|Type|Default|Description
 `name`|`string`|"root"|Contains the name of your root node
 `theme`|`string`|"rjv-default"|RJV supports base-16 themes.  Check out the [list of supported themes here](https://github.com/gaearon/base16-js/tree/master/src). A custom "rjv-default" theme applies by default.
 `indentWidth`|`integer`|4|Set the indent-width for nested objects
-`collapsed`|`boolean`|`false`|When set to `true`, all nodes will be collapsed by default
+`collapsed`|`boolean` or `integer`|`false`|When set to `true`, all nodes will be collapsed by default.  Use an integer value to collapse at a particular depth.
 `collapseStringsAfterLength`|`integer`|`false`|When an integer value is assigned, strings will be cut off at that length. Collapsed strings are followed by an ellipsis. String content can be expanded and collapsed by clicking on the string value.
 `enableClipboard`|`boolean`|`true`|When set to `true`, the user can copy objects and arrays to clipboard
 `displayObjectSize`|`boolean`|`true`|When set to `true`, objects and arrays are labeled with size
 `displayDataTypes`|`boolean`|`true`|When set to `true`, data type labels prefix values
+`onEdit`|`(edit) => {}`|`false`|When a callback function is passed in, `edit` functionality is enabled.  The callback is invoked before edits are completed. Returning `false` from `onEdit` will prevent the change from being made. [see: onEdit docs](#onedit-interaction)
 `onAdd`|`(add) => {}`|`false`|When a callback function is passed in, `add` functionality is enabled.  The callback is invoked before additions are completed. Returning `false` from `onAdd` will prevent the change from being made.
 `onDelete`|`(delete) => {}`|`false`|When a callback function is passed in, `delete` functionality is enabled.  The callback is invoked before deletions are completed. Returning `false` from `onDelete` will prevent the change from being made.
-`onEdit`|`(edit) => {}`|`false`|When a callback function is passed in, `edit` functionality is enabled.  The callback is invoked before edits are completed. Returning `false` from `onEdit` will prevent the change from being made. [see: onEdit docs](#onedit-interaction)
 
 ### Features
 * Object and array nodes can be collapsed and expanded
@@ -148,4 +148,3 @@ I'm also inspired by users who come up with interesting feature requests.  Reach
 ### To-Do's
 1. Improve documentation for `onAdd` and `onDelete` props
 2. Improve style organization
-3. Support integer input to `collapsed` prop to collapse at a particular depth.

example/example.js

@@ -44,6 +44,17 @@ ReactDom.render(
 
         <br />
 
+        {/* initialize this one with a name and default collapsed */}
+        <JsonViewer
+        src={getExampleJson2()}
+        collapsed={1}
+        name={'feature_set'}
+        displayDataTypes={false}
+        indentWidth={5}
+        />
+
+        <br />
+
         {/* initialize an example with a long string */}
         <JsonViewer
         src={getExampleJson3()}

src/js/components/DataTypes/Object.js

@@ -36,18 +36,23 @@ class rjvObject extends React.Component {
     state = {}
 
     init = (props) => {
+        const expanded = (
+            props.collapsed === false
+            || (props.collapsed !== true
+            && props.collapsed > props.depth)
+        );
         const state = {
             rjvId: props.rjvId,
             state_key: props.namespace.join('.'),
             namespace: props.namespace,
             indentWidth: props.indentWidth,
             expanded: props.jsvRoot
-                ? !props.collapsed
+                ? expanded
                 : AttributeStore.get(
                     props.rjvId,
                     props.namespace,
                     'expanded',
-                    !props.collapsed
+                    expanded
                 ),
             object_type: (props.type == 'array' ? 'array' : 'object'),
             parent_type: (props.type == 'array' ? 'array' : 'object'),

test/tests/js/components/DataTypes/Object-test.js

@@ -55,6 +55,7 @@ describe('<JsonObject />', function () {
             theme='rjv-default'
             indentWidth={1}
             depth={1}
+            collapsed={false}
             displayDataTypes={true}
             type='object'/>
         );