shouldExpandNode => shouldExpandNodeInitially

packages/react-json-tree/src/JSONIterableNode.tsx

@@ -35,6 +35,7 @@ const JSONIterableNode: React.FunctionComponent<Props> = ({ ...props }) => {
       nodeType="Iterable"
       nodeTypeIndicator="()"
       createItemString={createItemString}
+      expandable
     />
   );
 };

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import JSONArrow from './JSONArrow';
 import getCollectionEntries from './getCollectionEntries';
 import JSONNode from './JSONNode';
@@ -91,128 +91,86 @@ interface Props extends CommonInternalProps {
   nodeTypeIndicator: string;
   createItemString: (data: any, collectionLimit: number) => string;
   expandable: boolean;
-  circularCache: CircularCache;
-  level: number;
 }
 
-interface State {
+export default function JSONNestedNode(props: Props) {
-  expanded: boolean;
+  const {
-}
+    circularCache = [],
+    collectionLimit,
+    createItemString,
+    data,
+    expandable,
+    getItemString,
+    hideRoot,
+    isCircular,
+    keyPath,
+    labelRenderer,
+    level = 0,
+    nodeType,
+    nodeTypeIndicator,
+    shouldExpandNodeInitially,
+    styling,
+  } = props;
 
-function getStateFromProps(props: Props) {
+  const [expanded, setExpanded] = useState<boolean>(
-  // calculate individual node expansion if necessary
+    // calculate individual node expansion if necessary
-  const expanded = !props.isCircular
+    isCircular ? false : shouldExpandNodeInitially(keyPath, data, level)
-    ? props.shouldExpandNode(props.keyPath, props.data, props.level)
+  );
-    : false;
-  return {
-    expanded,
-  };
-}
 
-export default class JSONNestedNode extends React.Component<Props, State> {
+  const handleClick = useCallback(() => {
-  static defaultProps = {
+    if (expandable) setExpanded(!expanded);
-    data: [],
+  }, [expandable, expanded]);
-    circularCache: [],
-    level: 0,
-    expandable: true,
-  };
 
-  constructor(props: Props) {
+  const renderedChildren =
-    super(props);
+    expanded || (hideRoot && level === 0)
-    this.state = getStateFromProps(props);
+      ? renderChildNodes({ ...props, circularCache, level: level + 1 })
-  }
+      : null;
 
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+  const itemType = (
-    const nextState = getStateFromProps(nextProps);
+    <span {...styling('nestedNodeItemType', expanded)}>
-    if (getStateFromProps(this.props).expanded !== nextState.expanded) {
+      {nodeTypeIndicator}
-      this.setState(nextState);
+    </span>
-    }
+  );
-  }
+  const renderedItemString = getItemString(
+    nodeType,
+    data,
+    itemType,
+    createItemString(data, collectionLimit),
+    keyPath
+  );
+  const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
 
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
+  return hideRoot ? (
-    return (
+    <li {...styling('rootNode', ...stylingArgs)}>
-      !!Object.keys(nextProps).find(
+      <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-        (key) =>
+        {renderedChildren}
-          key !== 'circularCache' &&
+      </ul>
-          (key === 'keyPath'
+    </li>
-            ? nextProps[key].join('/') !== this.props[key].join('/')
+  ) : (
-            : nextProps[key as keyof Props] !== this.props[key as keyof Props])
+    <li {...styling('nestedNode', ...stylingArgs)}>
-      ) || nextState.expanded !== this.state.expanded
+      {expandable && (
-    );
+        <JSONArrow
-  }
+          styling={styling}
-
+          nodeType={nodeType}
-  render() {
+          expanded={expanded}
-    const {
+          onClick={handleClick}
-      getItemString,
+        />
-      nodeTypeIndicator,
+      )}
-      nodeType,
+      <label
-      data,
+        {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
-      hideRoot,
+        onClick={handleClick}
-      createItemString,
+      >
-      styling,
+        {labelRenderer(...stylingArgs)}
-      collectionLimit,
+      </label>
-      keyPath,
+      <span
-      labelRenderer,
+        {...styling('nestedNodeItemString', ...stylingArgs)}
-      expandable,
+        onClick={handleClick}
-    } = this.props;
+      >
-    const { expanded } = this.state;
+        {renderedItemString}
-    const renderedChildren =
-      expanded || (hideRoot && this.props.level === 0)
-        ? renderChildNodes({ ...this.props, level: this.props.level + 1 })
-        : null;
-
-    const itemType = (
-      <span {...styling('nestedNodeItemType', expanded)}>
-        {nodeTypeIndicator}
       </span>
-    );
+      <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
-    const renderedItemString = getItemString(
+        {renderedChildren}
-      nodeType,
+      </ul>
-      data,
+    </li>
-      itemType,
+  );
-      createItemString(data, collectionLimit),
-      keyPath
-    );
-    const stylingArgs = [keyPath, nodeType, expanded, expandable] as const;
-
-    return hideRoot ? (
-      <li {...styling('rootNode', ...stylingArgs)}>
-        <ul {...styling('rootNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    ) : (
-      <li {...styling('nestedNode', ...stylingArgs)}>
-        {expandable && (
-          <JSONArrow
-            styling={styling}
-            nodeType={nodeType}
-            expanded={expanded}
-            onClick={this.handleClick}
-          />
-        )}
-        <label
-          {...styling(['label', 'nestedNodeLabel'], ...stylingArgs)}
-          onClick={this.handleClick}
-        >
-          {labelRenderer(...stylingArgs)}
-        </label>
-        <span
-          {...styling('nestedNodeItemString', ...stylingArgs)}
-          onClick={this.handleClick}
-        >
-          {renderedItemString}
-        </span>
-        <ul {...styling('nestedNodeChildren', ...stylingArgs)}>
-          {renderedChildren}
-        </ul>
-      </li>
-    );
-  }
-
-  handleClick = () => {
-    if (this.props.expandable) {
-      this.setState({ expanded: !this.state.expanded });
-    }
-  };
 }

packages/react-json-tree/src/index.tsx

@@ -13,7 +13,7 @@ import type {
   GetItemString,
   IsCustomNode,
   LabelRenderer,
-  ShouldExpandNode,
+  ShouldExpandNodeInitially,
 } from './types';
 
 interface Props extends Partial<CommonExternalProps> {
@@ -23,7 +23,8 @@ interface Props extends Partial<CommonExternalProps> {
 }
 
 const identity = (value: any) => value;
-const expandRootNode: ShouldExpandNode = (keyPath, data, level) => level === 0;
+const expandRootNode: ShouldExpandNodeInitially = (keyPath, data, level) =>
+  level === 0;
 const defaultItemString: GetItemString = (type, data, itemType, itemString) => (
   <span>
     {itemType} {itemString}
@@ -39,7 +40,7 @@ export function JSONTree({
   keyPath = ['root'],
   labelRenderer = defaultLabelRenderer,
   valueRenderer = identity,
-  shouldExpandNode = expandRootNode,
+  shouldExpandNodeInitially = expandRootNode,
   hideRoot = false,
   getItemString = defaultItemString,
   postprocessValue = identity,
@@ -62,7 +63,7 @@ export function JSONTree({
         styling={styling}
         labelRenderer={labelRenderer}
         valueRenderer={valueRenderer}
-        shouldExpandNode={shouldExpandNode}
+        shouldExpandNodeInitially={shouldExpandNodeInitially}
         hideRoot={hideRoot}
         getItemString={getItemString}
         postprocessValue={postprocessValue}

packages/react-json-tree/src/types.ts

@@ -26,7 +26,7 @@ export type ValueRenderer = (
   ...keyPath: KeyPath
 ) => React.ReactNode;
 
-export type ShouldExpandNode = (
+export type ShouldExpandNodeInitially = (
   keyPath: KeyPath,
   data: any,
   level: number
@@ -46,7 +46,7 @@ export interface CommonExternalProps {
   keyPath: KeyPath;
   labelRenderer: LabelRenderer;
   valueRenderer: ValueRenderer;
-  shouldExpandNode: ShouldExpandNode;
+  shouldExpandNodeInitially: ShouldExpandNodeInitially;
   hideRoot: boolean;
   getItemString: GetItemString;
   postprocessValue: PostprocessValue;