Add root rendering option to JsonTree

reaviz · Jun 6, 2024 · 616aeac · 616aeac
1 parent 633b1c9
commit 616aeac
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 13 deletions.
diff --git a/src/layout/Tree/JsonTree/JsonTree.story.tsx b/src/layout/Tree/JsonTree/JsonTree.story.tsx
@@ -168,3 +168,19 @@ export const Empties = props => (
     expandDepth={Infinity}
   />
 );
+
+export const NoRoot = props => (
+  <JsonTree
+    {...props}
+    data={{
+      name: 'John Doe',
+      age: 30,
+      over21: true,
+      children: [
+        { name: 'Jane Doe', age: 25 },
+        { name: 'Jim Doe', age: 33 }
+      ]
+    }}
+    root={false}
+  />
+);
diff --git a/src/layout/Tree/JsonTree/JsonTree.tsx b/src/layout/Tree/JsonTree/JsonTree.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Tree } from '@/layout/Tree/Tree';
 import { JsonTreeNode } from './JsonTreeNode';
 import { parseJsonTree } from './utils';
@@ -44,6 +44,11 @@ export interface JsonTreeProps {
    */
   expandDepth?: number;
 
+  /**
+   * If true, the JSON tree will be rendered with a root node.
+   */
+  root?: boolean;
+
   /**
    * The CSS class name to be applied to the JSON tree.
    */
@@ -60,25 +65,43 @@ export const JsonTree: FC<JsonTreeProps> = ({
   showAllLimit = 10,
   ellipsisText = true,
   ellipsisTextLength = 150,
+  root = true,
   ...rest
 }) => {
   const tree = parseJsonTree({ data, showEmpty });
 
   return (
     <div tabIndex={-1}>
       <Tree className={className} {...rest}>
-        <JsonTreeNode
-          key={`node-${tree.id}`}
-          depth={1}
-          data={tree}
-          showEmpty={showEmpty}
-          showCount={showCount}
-          expandDepth={expandDepth}
-          ellipsisText={ellipsisText}
-          ellipsisTextLength={ellipsisTextLength}
-          showAll={showAll}
-          showAllLimit={showAllLimit}
-        />
+        {root && (
+          <JsonTreeNode
+            key={`node-${tree.id}`}
+            depth={1}
+            data={tree}
+            showEmpty={showEmpty}
+            showCount={showCount}
+            expandDepth={expandDepth}
+            ellipsisText={ellipsisText}
+            ellipsisTextLength={ellipsisTextLength}
+            showAll={showAll}
+            showAllLimit={showAllLimit}
+          />
+        )}
+        {!root &&
+          tree?.data?.map(item => (
+            <JsonTreeNode
+              key={`node-${item.id}`}
+              depth={1}
+              data={item}
+              showEmpty={showEmpty}
+              showCount={showCount}
+              expandDepth={expandDepth}
+              ellipsisText={ellipsisText}
+              ellipsisTextLength={ellipsisTextLength}
+              showAll={showAll}
+              showAllLimit={showAllLimit}
+            />
+          ))}
       </Tree>
     </div>
   );