Also truncate ArrayGroup in nested objects

Author: slinjhu

dev-server/src/index.js

@@ -242,6 +242,16 @@ ReactDom.render(
       src={getLargeArrayForDemo()}
     />
 
+    {/* Demo of numberOfArrayGroupsToDisplay with nested objects */}
+    <JsonViewer
+      theme='apathy:inverted'
+      collapsed={false}
+      name='nested_arrays_with_limited_groups'
+      groupArraysAfterLength={5}
+      numberOfArrayGroupsToDisplay={2}
+      src={getNestedArraysForDemo()}
+    />
+
     {/* Name as colored react component */}
     <JsonViewer
       collapsed
@@ -382,3 +392,23 @@ function getExampleWithStringEscapeSequences () {
 function getLargeArrayForDemo () {
   return new Array(25).fill().map((_, i) => `Item ${i + 1}`)
 }
+
+function getNestedArraysForDemo () {
+  return {
+    users: new Array(25).fill().map((_, i) => ({
+      id: i + 1,
+      name: `User ${i + 1}`,
+      email: `user${i + 1}@example.com`
+    })),
+    products: new Array(25).fill().map((_, i) => ({
+      id: i + 1,
+      name: `Product ${i + 1}`,
+      price: Math.random() * 100
+    })),
+    categories: new Array(25).fill().map((_, i) => ({
+      id: i + 1,
+      name: `Category ${i + 1}`,
+      description: `Description for category ${i + 1}`
+    }))
+  }
+}

src/js/components/DataTypes/Object.js

@@ -239,6 +239,7 @@ class RjvObject extends React.PureComponent {
       parent_type,
       index_offset,
       groupArraysAfterLength,
+      numberOfArrayGroupsToDisplay,
       namespace,
       showComma
     } = this.props
@@ -269,6 +270,7 @@ class RjvObject extends React.PureComponent {
             parent_type={object_type}
             isLast={isLast}
             showComma={showComma}
+            numberOfArrayGroupsToDisplay={numberOfArrayGroupsToDisplay}
             {...props}
           />
         )
@@ -293,6 +295,7 @@ class RjvObject extends React.PureComponent {
             parent_type={object_type}
             isLast={isLast}
             showComma={showComma}
+            numberOfArrayGroupsToDisplay={numberOfArrayGroupsToDisplay}
             {...props}
           />
         )

test/tests/js/components/ArrayGroup-test.js

@@ -179,4 +179,6 @@ describe('<ArrayGroup />', function () {
     // Should not show ellipsis
     expect(wrapper.find('.object-key-val.array-group-ellipsis').length).to.equal(0)
   })
+
+
 })

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

@@ -466,4 +466,32 @@ describe('<JsonObject />', function () {
     )
     expect(wrapper.find('span').someWhere(node => node.text() === ',')).to.be.false
   })
+
+  it('Object with nested arrays respects numberOfArrayGroupsToDisplay', function () {
+    let src = {
+      nestedArray: new Array(25).fill('test'),
+      otherProp: 'value'
+    }
+
+    const wrapper = render(
+      <JsonObject
+        src={src}
+        theme='rjv-default'
+        namespace={['root']}
+        rjvId={rjvId}
+        groupArraysAfterLength={5}
+        numberOfArrayGroupsToDisplay={2}
+        collapsed={false}
+        indentWidth={1}
+        depth={1}
+        type='object'
+      />
+    )
+
+    // Should only display 2 groups for the nested array
+    expect(wrapper.find('.array-group').length).to.equal(2)
+
+    // Should show ellipsis for the nested array
+    expect(wrapper.find('.object-key-val.array-group-ellipsis').length).to.equal(1)
+  })
 })