Support displaying limited number of array groups

Author: slinjhu

README.md

@@ -73,6 +73,7 @@ import ReactJsonView from '@microlink/react-json-view'
 | `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.                                                                   |
 | `shouldCollapse`             | `(field)=>{}`                                    | `false`                  | Callback function to provide control over what objects and arrays should be collapsed by default. An object is passed to the callback containing `name`, `src`, `type` ("array" or "object") and `namespace`.                                                             |
 | `groupArraysAfterLength`     | `integer`                                        | 100                      | When an integer value is assigned, arrays will be displayed in groups by count of the value. Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets.                                                                    |
+| `numberOfArrayGroupsToDisplay` | `integer` or `null`                              | `null`                   | When an integer value is assigned, only the specified number of array groups will be displayed. If there are more groups, an ellipsis will be shown. This works in conjunction with groupArraysAfterLength. When null (default), all groups are displayed (no change in behavior). |
 | `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.                                                                                                                                                                                                                       |

dev-server/src/index.js

@@ -232,6 +232,16 @@ ReactDom.render(
       src={getExampleJson4()}
     />
 
+    {/* Demo of numberOfArrayGroupsToDisplay */}
+    <JsonViewer
+      theme='monokai'
+      collapsed={false}
+      name='array_with_limited_groups'
+      groupArraysAfterLength={5}
+      numberOfArrayGroupsToDisplay={3}
+      src={getLargeArrayForDemo()}
+    />
+
     {/* Name as colored react component */}
     <JsonViewer
       collapsed
@@ -368,3 +378,7 @@ function getExampleArray () {
 function getExampleWithStringEscapeSequences () {
   return { '\\\n\t\r\f\\n': '\\\n\t\r\f\\n' }
 }
+
+function getLargeArrayForDemo () {
+  return new Array(25).fill().map((_, i) => `Item ${i + 1}`)
+}

docs/src/js/entry.js

@@ -5,7 +5,7 @@ require('./../style/scss/global.scss')
 
 const app = document.getElementById('mac-react-container')
 
-//app entrypoint
+// app entrypoint
 ReactDom.render(
   <div className='app-entry'>
     <Index />

index.d.ts

@@ -68,6 +68,14 @@ export interface ReactJsonViewProps {
    * Default: 100
    */
   groupArraysAfterLength?: number
+  /**
+   * When an integer value is assigned, only the specified number of array groups will be displayed.
+   * If there are more groups, an ellipsis will be shown. This works in conjunction with groupArraysAfterLength.
+   * When null (default), all groups are displayed (no change in behavior).
+   *
+   * Default: null
+   */
+  numberOfArrayGroupsToDisplay?: number | null
   /**
    * When prop is not false, the user can copy objects and arrays to clipboard by clicking on the clipboard icon.
    * Copy callbacks are supported.

src/js/components/ArrayGroup.js

@@ -44,6 +44,7 @@ export default class extends React.PureComponent {
     const {
       src,
       groupArraysAfterLength,
+      numberOfArrayGroupsToDisplay,
       depth,
       name,
       theme,
@@ -53,36 +54,38 @@ export default class extends React.PureComponent {
       ...rest
     } = this.props
 
-    let object_padding_left = 0
+    let objectPaddingLeft = 0
 
-    const array_group_padding_left = this.props.indentWidth * SINGLE_INDENT
+    const arrayGroupPaddingLeft = this.props.indentWidth * SINGLE_INDENT
 
     if (!jsvRoot) {
-      object_padding_left = this.props.indentWidth * SINGLE_INDENT
+      objectPaddingLeft = this.props.indentWidth * SINGLE_INDENT
     }
 
     const size = groupArraysAfterLength
     const groups = Math.ceil(src.length / size)
+    const displayGroups = numberOfArrayGroupsToDisplay !== null && numberOfArrayGroupsToDisplay !== undefined ? Math.min(groups, numberOfArrayGroupsToDisplay) : groups
+    const hasMoreGroups = groups > displayGroups
 
     return (
       <div
         className='object-key-val'
         {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {
-          paddingLeft: object_padding_left
+          paddingLeft: objectPaddingLeft
         })}
       >
         <ObjectName {...this.props} />
 
         <span>
           <VariableMeta size={src.length} {...this.props} />
         </span>
-        {[...Array(groups)].map((_, i) => (
+        {[...Array(displayGroups)].map((_, i) => (
           <div
             key={i}
             className='object-key-val array-group'
             {...Theme(theme, 'objectKeyVal', {
               marginLeft: 6,
-              paddingLeft: array_group_padding_left
+              paddingLeft: arrayGroupPaddingLeft
             })}
           >
             <span {...Theme(theme, 'brace-row')}>
@@ -110,7 +113,7 @@ export default class extends React.PureComponent {
                     parent_type='array_group'
                     theme={theme}
                     showComma={this.props.showComma}
-                    isLast={i === groups - 1}
+                    isLast={i === displayGroups - 1 && !hasMoreGroups}
                     {...rest}
                   />
                   )
@@ -141,6 +144,21 @@ export default class extends React.PureComponent {
             </span>
           </div>
         ))}
+        {hasMoreGroups && (
+          <div
+            className='object-key-val array-group-ellipsis'
+            {...Theme(theme, 'objectKeyVal', {
+              marginLeft: 6,
+              paddingLeft: arrayGroupPaddingLeft
+            })}
+          >
+            <span {...Theme(theme, 'brace-row')}>
+              <span {...Theme(theme, 'brace')} className='array-group-ellipsis'>
+                ...
+              </span>
+            </span>
+          </div>
+        )}
       </div>
     )
   }

src/js/components/DataTypes/Object.js

@@ -240,7 +240,7 @@ class RjvObject extends React.PureComponent {
       index_offset,
       groupArraysAfterLength,
       namespace,
-      showComma,
+      showComma
     } = this.props
     const { object_type } = this.state
     const elements = []

src/js/components/VariableEditor.js

@@ -338,7 +338,7 @@ class VariableEditor extends React.PureComponent {
       if (BigNumber && parsedInput.type === 'bigNumber') {
         new_value = new BigNumber(new_value)
       }
-    } 
+    }
     this.setState({
       editMode: false
     })

src/js/helpers/dispatcher.js

@@ -1,11 +1,11 @@
 class Dispatcher {
   handler = () => {}
 
-  register(handler) {
+  register (handler) {
     this.handler = handler
   }
 
-  dispatch(data) {
+  dispatch (data) {
     this.handler?.(data)
   }
 }

src/js/helpers/util.js

@@ -1,6 +1,5 @@
 // returns a string "type" of input object
 export function toType (obj, bigNumber) {
-
   /* Check if the object is an instance of the custom BigNumber class passed in as a prop
    * If it matches, return 'bigNumber' type so it can be displayed appropriately
    */

src/js/index.js

@@ -44,6 +44,7 @@ class ReactJsonView extends React.PureComponent {
     sortKeys: false,
     quotesOnKeys: true,
     groupArraysAfterLength: 100,
+    numberOfArrayGroupsToDisplay: null,
     indentWidth: 4,
     enableClipboard: true,
     escapeStrings: true,