fix: default shouldExpandNodeInitially to false for collapsed nodes. #59 #76

Author: jaywcjlove

core/src/comps/KeyValues.tsx

@@ -23,9 +23,11 @@ export const KeyValues = <T extends object>(props: KeyValuesProps<T>) => {
   const { objectSortKeys, indentWidth, collapsed, shouldExpandNodeInitially } = useStore();
   const defaultExpanded =
     typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
-  const isExpanded = expands[expandKey] ?? defaultExpanded;
+  const isExpanded = expands[expandKey] ?? (shouldExpandNodeInitially ? false : defaultExpanded);
   const shouldExpand =
     shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, { value, keys, level, keyName, parentValue });
+
+  console.log('KeyValues', expands[expandKey], defaultExpanded, !shouldExpand, shouldExpand, isExpanded);
   if (expands[expandKey] === undefined && !shouldExpand) {
     return null;
   }

core/src/comps/NestedClose.tsx

@@ -15,9 +15,10 @@ export const NestedClose = <T extends object>(props: NestedCloseProps<T>) => {
   const { collapsed, shouldExpandNodeInitially } = useStore();
   const defaultExpanded =
     typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
-  const isExpanded = expands[expandKey] ?? defaultExpanded;
+  const isExpanded = expands[expandKey] ?? (shouldExpandNodeInitially ? false : defaultExpanded);
   const shouldExpand =
     shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, { value, keys, level, keyName, parentValue });
+  console.log('NestedClose', expands[expandKey], defaultExpanded, shouldExpand);
   if (expands[expandKey] === undefined && !shouldExpand) {
     return null;
   }

core/src/comps/NestedOpen.tsx

@@ -23,9 +23,10 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
   const { onExpand, collapsed, shouldExpandNodeInitially } = useStore();
   const defaultExpanded =
     typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
-  let isExpanded = expands[expandKey] ?? defaultExpanded;
+  let isExpanded = expands[expandKey] ?? (shouldExpandNodeInitially ? false : defaultExpanded);
   const shouldExpand =
     shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, { value, keys, level, keyName, parentValue });
+  console.log('NestedOpen', expands[expandKey], defaultExpanded, shouldExpand, !shouldExpand);
   if (expands[expandKey] === undefined && shouldExpandNodeInitially) {
     isExpanded = !shouldExpand;
   }

core/src/index.tsx

@@ -125,8 +125,8 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
     style,
     value,
     children,
-    collapsed,
-    shouldExpandNodeInitially,
+    collapsed = false,
+    shouldExpandNodeInitially = () => true,
     indentWidth = 15,
     displayObjectSize = true,
     shortenTextAfterLength = 30,
@@ -155,7 +155,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
         value,
         objectSortKeys,
         indentWidth,
-        shouldExpandNodeInitially,
+        shouldExpandNodeInitially: collapsed === false ? shouldExpandNodeInitially : () => false,
         displayObjectSize,
         collapsed,
         enableClipboard,

example/src/demo.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import JsonView, { ShouldExpandNodeInitially } from '@uiw/react-json-view';
 
 const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
@@ -44,7 +45,35 @@ const shouldExpandNodeInitially: ShouldExpandNodeInitially<object> = (isExpanded
 };
 
 export default function App() {
-  return <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={shouldExpandNodeInitially} />;
-  // return <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={() => true} collapsed={true} />;
-  // return <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={() => false} />;
+  const [collapsed, setCollapsed] = useState(true);
+  // return <JsonView value={example} />;
+  return (
+    <div>
+      <JsonView
+        value={example}
+        displayObjectSize={false}
+        shouldExpandNodeInitially={shouldExpandNodeInitially}
+        collapsed={collapsed}
+      />
+      <button style={{ marginTop: 12 }} onClick={() => setCollapsed(!collapsed)}>
+        {collapsed ? 'Expand All' : 'Collapse All'}
+      </button>
+    </div>
+  );
+  return (
+    <JsonView
+      value={example}
+      displayObjectSize={false}
+      shouldExpandNodeInitially={shouldExpandNodeInitially}
+      collapsed={true}
+    />
+  );
+  return <JsonView value={example} displayObjectSize={false} collapsed={true} />;
+  return <JsonView value={example} displayObjectSize={false} collapsed={false} />;
+  return (
+    <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={() => true} collapsed={false} />
+  );
+  return <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={() => true} collapsed={true} />;
+  return <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={() => true} />;
+  return <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={() => false} />;
 }