feat: add hideRootExpand (#17)

* feat: add hideRootExpand prop - force root node into expanded state

Author: gtk-grafana

examples/src/App.tsx

@@ -94,6 +94,13 @@ const App = () => (
       <JSONTree hideRoot={true} data={data} />
     </div>
     <br />
+
+    <h3>Force root node open</h3>
+    <div style={{ background: "#222" }}>
+      <JSONTree hideRootExpand={true} data={data} />
+    </div>
+    <br />
+
     <h3>Theming Example</h3>
     <p>
       Styles are managed with css variables, override the default values to

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtk-grafana/react-json-tree",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React JSON Viewer Component, Extracted from redux-devtools",
   "keywords": [
     "react",

src/JSONNestedNode.tsx

@@ -105,6 +105,7 @@ export default function JSONNestedNode(props: Props) {
     expandable,
     getItemString,
     hideRoot,
+    hideRootExpand,
     isCircular,
     keyPath,
     labelRenderer,
@@ -114,14 +115,20 @@ export default function JSONNestedNode(props: Props) {
     shouldExpandNodeInitially,
   } = props;
 
+  const isRoot = keyPath[0] === "root";
+  const showExpand = hideRootExpand
+    ? expandable && !isRoot && hideRootExpand
+    : expandable;
+  const isNodeExpandable = expandable && showExpand;
+
   const [expanded, setExpanded] = useState<boolean>(
     // calculate individual node expansion if necessary
     isCircular ? false : shouldExpandNodeInitially(keyPath, data, level),
   );
 
   const handleClick = useCallback(() => {
-    if (expandable) setExpanded(!expanded);
-  }, [expandable, expanded]);
+    if (isNodeExpandable) setExpanded(!expanded);
+  }, [isNodeExpandable, expanded]);
 
   const renderedChildren =
     expanded || (hideRoot && level === 0)
@@ -142,11 +149,11 @@ export default function JSONNestedNode(props: Props) {
     createItemString(data, collectionLimit),
     keyPath,
   );
-  const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
+  const stylingArgs = [keyPath, nodeType, expanded, isNodeExpandable] as const;
 
   return hideRoot ? (
     <NodeListItem
-      expandable={expandable}
+      expandable={isNodeExpandable}
       expanded={expanded}
       nodeType={nodeType}
       keyPath={keyPath}
@@ -156,14 +163,14 @@ export default function JSONNestedNode(props: Props) {
     </NodeListItem>
   ) : (
     <NodeListItem
-      expandable={expandable}
+      expandable={isNodeExpandable}
       expanded={expanded}
       nodeType={nodeType}
       keyPath={keyPath}
-      className={`${styles.nestedNode}  ${expanded ? styles.nestedNodeExpanded : ""} ${expandable ? styles.nestedNodeExpandable : ""}`}
+      className={`${styles.nestedNode}  ${expanded ? styles.nestedNodeExpanded : ""} ${isNodeExpandable ? styles.nestedNodeExpandable : ""}`}
     >
       <span className={styles.nestedNodeLabelWrap}>
-        {expandable && (
+        {showExpand && (
           <JSONArrow
             nodeType={nodeType}
             expanded={expanded}
@@ -173,7 +180,7 @@ export default function JSONNestedNode(props: Props) {
         <span
           data-nodetype={nodeType}
           data-keypath={keyPath[0]}
-          className={`${styles.nestedNodeLabel} ${expanded ? styles.nestedNodeLabelExpanded : ""} ${expandable ? styles.nestedNodeLabelExpandable : ""}`}
+          className={`${styles.nestedNodeLabel} ${expanded ? styles.nestedNodeLabelExpanded : ""} ${isNodeExpandable ? styles.nestedNodeLabelExpandable : ""}`}
           onClick={handleClick}
         >
           {labelRenderer(...stylingArgs)}

src/index.tsx

@@ -40,6 +40,7 @@ export function JSONTree({
   valueRenderer = identity,
   shouldExpandNodeInitially = expandRootNode,
   hideRoot = false,
+  hideRootExpand = false,
   getItemString = defaultItemString,
   postprocessValue = identity,
   isCustomNode = noCustomNode,
@@ -54,6 +55,7 @@ export function JSONTree({
       className={styles.tree}
     >
       <JSONNode
+        hideRootExpand={hideRootExpand}
         keyPath={hideRoot ? [] : keyPath}
         value={postprocessValue(value)}
         isCustomNode={isCustomNode}

src/types.ts

@@ -50,6 +50,7 @@ export interface CommonExternalProps {
   valueRenderer: ValueRenderer;
   shouldExpandNodeInitially: ShouldExpandNodeInitially;
   hideRoot: boolean;
+  hideRootExpand: boolean;
   getItemString: GetItemString;
   postprocessValue: PostprocessValue;
   isCustomNode: IsCustomNode;