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

Author: jaywcjlove

core/src/comps/KeyValues.tsx

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

core/src/comps/NestedClose.tsx

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

core/src/comps/NestedOpen.tsx

@@ -25,9 +25,9 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
     typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   let isExpanded = expands[expandKey] ?? defaultExpanded;
   const shouldExpand =
-    shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, { value, keys, level, keyName, parentValue });
+    shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, { value, keys, level, keyName, parentValue });
   if (expands[expandKey] === undefined && shouldExpandNodeInitially) {
-    isExpanded = !!shouldExpand;
+    isExpanded = !shouldExpand;
   }
   const click = () => {
     const opt = { expand: !isExpanded, value, keyid: expandKey, keyName };

example/src/demo.tsx

@@ -31,18 +31,20 @@ const example = {
 };
 
 const shouldExpandNodeInitially: ShouldExpandNodeInitially<object> = (isExpanded, props) => {
-  const { value, level, keyName, parentValue, keys } = props;
+  const { value, level } = props;
   const isArray = Array.isArray(value);
   const isObject = typeof value === 'object' && !isArray;
   if (isArray) {
-    return isExpanded || value.length > 5;
+    return value.length < 5;
   }
   if (isObject && level > 3) {
-    return isExpanded || true; // Expand if it's an object and level is greater than 3
+    return false;
   }
   return 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} />;
 }