Merge pull request mac-s-g#136 from ajbdev/array-groups

i added a couple of comments, but nothing blocking this pr from being merged.  

this is really cool.  thanks again for contributing!

Author: mac-s-g

README.md

@@ -48,6 +48,7 @@ Name|Type|Default|Description
 `indentWidth`|`integer`|4|Set the indent-width for nested objects
 `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.
+`groupArraysAfterLength`|`integer`|`100`|When an integer value is assigned, arrays will be displayed in groups by count of the value. Groups are displayed with brakcet notation and can be expanded and collapsed by clickong on the brackets. 
 `enableClipboard`|`boolean` or `(copy)=>{}`|`true`|When prop is not `false`, the user can copy objects and arrays to clipboard by clicking on the clipboard icon.  Copy callbacks are supported.
 `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
@@ -63,6 +64,7 @@ Name|Type|Default|Description
 * Object and array nodes display length
 * Object and array nodes support a "Copy to Clipboard" feature
 * String values can be truncated after a specified length
+* Arrays can be subgrouped after a specified length
 * Base-16 Theme Support
 * When `onEdit` is enabled:
    * Double-Click Edit Mode

dev-server/src/index.js

@@ -10,6 +10,7 @@ import JsonViewer from './../../src/js/index';
 //render 2 different examples of the react-json-view component
 ReactDom.render(
     <div>
+        
         {/* just pass in your JSON to the src attribute */}
         <JsonViewer
         style={{padding:'30px', backgroundColor: 'white'}}
@@ -59,7 +60,7 @@ ReactDom.render(
         name={'feature_set'}
         displayDataTypes={false}
         indentWidth={5}
-        />
+        /> 
 
         <br />
 
@@ -106,9 +107,19 @@ ReactDom.render(
           base0E: 'rgba(70, 70, 230, 1)',
           base0F: 'rgba(70, 70, 230, 1)'
         }}
+    /> 
+
+
+    <JsonViewer
+        theme="hopscotch"
+        collapsed={false}
+        name="large_array"
+        groupArraysAfterLength={50}
+        src={getExampleJson4()}
         />
 
 
+
     </div>,
     document.getElementById('app-container')
 );
@@ -199,6 +210,17 @@ function getExampleJson3() {
 }
 
 
+function getExampleJson4() {
+    const large_array = new Array(225).fill('this is a large array full of items')
+
+    large_array.push(getExampleArray())
+
+    large_array.push(new Array(75).fill(Math.random()))
+
+    return large_array
+}
+
+
 function getExampleArray() {
     return [
         'you can also display arrays!',

package.json

@@ -7,7 +7,6 @@
     "dist/"
   ],
   "dependencies": {
-    "clipboard": "^1.7.1",
     "flux": "^3.1.3",
     "react-base16-styling": "^0.5.3",
     "react-textarea-autosize": "^5.1.0"

src/js/components/ArrayGroup.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import Theme from './../themes/getStyle';
+
+import VariableMeta from './VariableMeta';
+import ObjectName from './ObjectName'
+import ObjectComponent from './DataTypes/Object'
+
+//icons
+import { CollapsedIcon, ExpandedIcon } from './ToggleIcons';
+
+//single indent is 5px
+const SINGLE_INDENT = 5;
+
+export default class extends React.Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            expanded: {}
+        }
+    }
+
+    toggleCollapsed = (i) => {
+        this.state.expanded[i] = !this.state.expanded[i]
+
+        this.setState(this.state);
+    }
+
+    getExpandedIcon(i) {
+        const { theme, iconStyle } = this.props
+
+        if (!!this.state.expanded[i]) {
+            return <ExpandedIcon {...{theme, iconStyle}}/>
+        } 
+
+        return <CollapsedIcon {...{theme, iconStyle}} />
+    }
+
+    render() {
+        const { 
+            src, groupArraysAfterLength, depth, 
+            name, theme, jsvRoot, namespace, parent_type,
+            ...rest
+        } = this.props
+
+        let expanded_icon, object_padding_left = 0;
+
+        const array_group_padding_left = this.props.indentWidth * SINGLE_INDENT
+
+        if (!jsvRoot) {
+            object_padding_left = this.props.indentWidth * SINGLE_INDENT;
+        }
+
+        const size = groupArraysAfterLength
+        const groups = Math.ceil(src.length / size)
+
+        return (<div class='object-key-val'
+                    {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {paddingLeft: object_padding_left})}
+                >
+            <ObjectName {...this.props} />
+
+            <span>
+                <VariableMeta size={src.length} {...this.props}/>
+            </span>
+            {[...Array(groups)].map((_, i) => 
+                <div key={i} class='object-key-val array-group' {...Theme(theme, 'objectKeyVal', {
+                    marginLeft: 6,
+                    paddingLeft: array_group_padding_left
+                    })} >
+                <span {...Theme(theme, 'brace-row')}>
+
+                    <div class='icon-container' {...Theme(theme, 'icon-container')}
+                         onClick={(e) => {this.toggleCollapsed(i)}}>
+                        {this.getExpandedIcon(i)}
+                    </div>
+                    {!!this.state.expanded[i] ? 
+                        <ObjectComponent key={name + i}
+                            depth={0}
+                            name={false}
+                            collapsed={false}
+                            groupArraysAfterLength={size}
+                            index_offset={i * size}
+                            src={src.slice(i * size, i * size + size)}
+                            namespace={namespace}
+                            type="array"
+                            parent_type="array_group"
+                            theme={theme}
+                            {...rest}
+                        />
+                    :   <span {...Theme(theme, 'brace')}  onClick={(e) => {this.toggleCollapsed(i)}} class='array-group-brace'>
+                            [
+                            <div {...Theme(theme, 'array-group-meta-data')} class='array-group-meta-data'>
+                                <span class='object-size'
+                                {...Theme(theme, 'object-size')}>
+                                {i * size}
+                                {' - '}
+                                {i * size + size > src.length ? src.length : i * size + size}
+                                </span>
+                            </div>
+                            ]
+                        </span>
+                    }
+                    
+                </span>
+                </div>
+            )}
+            </div>
+        );
+    }
+
+}