fix: fix shouldExpandNodeInitially display bug. #76

Author: jaywcjlove

core/README.md

@@ -911,10 +911,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
   collapsed?: boolean | number;
   /** Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). */
-  shouldExpandNodeInitially?: (
-    isExpanded: boolean,
-    props: { value?: T; keys: (number | string)[]; level: number },
-  ) => boolean;
+  shouldExpandNodeInitially?: ShouldExpandNodeInitially<T>;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
@@ -926,6 +923,13 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   /** Fires event when you copy */
   onCopied?: (text: string, value?: T) => void;
 }
+export type ShouldExpandNodeInitially<T extends object> = (isExpanded: boolean, props: {
+  keyName?: string | number;
+  value?: T;
+  parentValue?: T;
+  keys: (number | string)[];
+  level: number;
+}) => boolean;
 ```
 
 ```ts

core/src/Container.tsx

@@ -54,7 +54,14 @@ export const Container = forwardRef(<T extends object>(props: ContainerProps<T>,
         parentValue={parentValue}
         keyName={keyName}
       />
-      <NestedClose expandKey={subkeyid} value={value} level={level} keys={keys} />
+      <NestedClose
+        expandKey={subkeyid}
+        value={value}
+        level={level}
+        keys={keys}
+        parentValue={parentValue}
+        keyName={keyName}
+      />
     </div>
   );
 });

core/src/comps/KeyValues.tsx

@@ -18,23 +18,21 @@ interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
 }
 
 export const KeyValues = <T extends object>(props: KeyValuesProps<T>) => {
-  const { value, expandKey = '', level, keys = [] } = props;
+  const { keyName, value, expandKey = '', level, keys = [], parentValue } = props;
   const expands = useExpandsStore();
   const { objectSortKeys, indentWidth, collapsed, shouldExpandNodeInitially } = useStore();
-  const isMyArray = Array.isArray(value);
   const defaultExpanded =
     typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   const isExpanded = expands[expandKey] ?? defaultExpanded;
-  if (
-    expands[expandKey] === undefined &&
-    shouldExpandNodeInitially &&
-    shouldExpandNodeInitially(isExpanded, { value, keys, level })
-  ) {
+  const shouldExpand =
+    shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, { value, keys, level, keyName, parentValue });
+  if (expands[expandKey] === undefined && !!shouldExpand) {
     return null;
   }
   if (isExpanded) {
     return null;
   }
+  const isMyArray = Array.isArray(value);
   // object
   let entries: [key: string | number, value: T][] = isMyArray
     ? Object.entries(value).map((m) => [Number(m[0]), m[1]])

core/src/comps/NestedClose.tsx

@@ -1,37 +1,38 @@
 import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
 import { BracketsClose } from '../symbol/';
+import { type SectionElementResult } from '../store/Section';
 
-interface NestedCloseProps<T extends object> {
-  value?: T;
+interface NestedCloseProps<T extends object> extends SectionElementResult<T> {
   expandKey: string;
   level: number;
-  keys?: (string | number)[];
 }
 
 export const NestedClose = <T extends object>(props: NestedCloseProps<T>) => {
-  const { value, expandKey, level, keys = [] } = props;
+  const { keyName, value, expandKey, parentValue, level, keys = [] } = props;
   const expands = useExpandsStore();
-  const isArray = Array.isArray(value);
   const { collapsed, shouldExpandNodeInitially } = useStore();
-  const isMySet = value instanceof Set;
   const defaultExpanded =
     typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   const isExpanded = expands[expandKey] ?? defaultExpanded;
-  const len = Object.keys(value!).length;
-  const shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, { value, keys, level });
-  if (expands[expandKey] === undefined && shouldExpandNodeInitially && !shouldExpand) {
+  const shouldExpand =
+    shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, { value, keys, level, keyName, parentValue });
+  if (expands[expandKey] === undefined && !!shouldExpand) {
     return null;
   }
+  const len = Object.keys(value!).length;
   if (isExpanded || len === 0) {
     return null;
   }
   const style: React.CSSProperties = {
     paddingLeft: 4,
   };
+  const compProps = { keyName, value, keys, parentValue };
+  const isArray = Array.isArray(value);
+  const isMySet = value instanceof Set;
   return (
     <div style={style}>
-      <BracketsClose isBrackets={isArray || isMySet} isVisiable={true} />
+      <BracketsClose isBrackets={isArray || isMySet} {...compProps} isVisiable={true} />
     </div>
   );
 };

core/src/comps/NestedOpen.tsx

@@ -20,15 +20,13 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
   const expands = useExpandsStore();
   const dispatchExpands = useExpandsDispatch();
   const { onExpand, collapsed, shouldExpandNodeInitially } = useStore();
-  const isArray = Array.isArray(value);
-  const isMySet = value instanceof Set;
   const defaultExpanded =
     typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
-  const isObject = typeof value === 'object';
   let isExpanded = expands[expandKey] ?? defaultExpanded;
-  const shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, { value, keys, level });
-  if (expands[expandKey] === undefined && shouldExpandNodeInitially && !shouldExpand) {
-    isExpanded = !shouldExpand;
+  const shouldExpand =
+    shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, { value, keys, level, keyName, parentValue });
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially) {
+    isExpanded = !!shouldExpand;
   }
   const click = () => {
     const opt = { expand: !isExpanded, value, keyid: expandKey, keyName };
@@ -39,6 +37,9 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
   const style: React.CSSProperties = { display: 'inline-flex', alignItems: 'center' };
   const arrowStyle = { transform: `rotate(${!isExpanded ? '0' : '-90'}deg)`, transition: 'all 0.3s' };
   const len = Object.keys(value!).length;
+  const isObject = typeof value === 'object';
+  const isArray = Array.isArray(value);
+  const isMySet = value instanceof Set;
   const showArrow = len !== 0 && (isArray || isMySet || isObject);
   const reset: React.HTMLAttributes<HTMLDivElement> = { style };
   if (showArrow) {

core/src/index.tsx

@@ -39,6 +39,11 @@ export * from './store/Symbols';
 export * from './store/Types';
 export * from './symbol/';
 
+export type ShouldExpandNodeInitially<T extends object> = (
+  isExpanded: boolean,
+  props: { keyName?: string | number; value?: T; parentValue?: T; keys: (number | string)[]; level: number },
+) => boolean;
+
 export interface JsonViewProps<T extends object>
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   /** This property contains your input JSON */
@@ -58,10 +63,7 @@ export interface JsonViewProps<T extends object>
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
   collapsed?: boolean | number;
   /** Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). */
-  shouldExpandNodeInitially?: (
-    isExpanded: boolean,
-    props: { value?: T; keys: (number | string)[]; level: number },
-  ) => boolean;
+  shouldExpandNodeInitially?: ShouldExpandNodeInitially<T>;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */

core/src/store.tsx

@@ -1,5 +1,5 @@
-import React, { PropsWithChildren, createContext, useContext, useEffect, useReducer } from 'react';
-import { JsonViewProps } from './';
+import React, { type PropsWithChildren, createContext, useContext, useEffect, useReducer } from 'react';
+import { type JsonViewProps } from './';
 import { useShowTools, ShowTools } from './store/ShowTools';
 import { useExpands, Expands } from './store/Expands';
 import { useTypes, Types, type InitialTypesState, type TagType } from './store/Types';

core/src/symbol/index.tsx

@@ -91,12 +91,12 @@ export const BracketsOpen = <K extends object>(props: { isBrackets?: boolean } &
 
 BracketsOpen.displayName = 'JVR.BracketsOpen';
 
-type BracketsCloseProps = {
+type BracketsProps = {
   isBrackets?: boolean;
   isVisiable?: boolean;
 };
 
-export const BracketsClose = <K extends object>(props: BracketsCloseProps & SymbolsElementResult<K>) => {
+export const BracketsClose = <K extends object>(props: BracketsProps & SymbolsElementResult<K>) => {
   const { isBrackets, isVisiable, value, parentValue, keyName, keys } = props;
   const result = { value, parentValue, keyName, keys: keys || (keyName ? [keyName] : []) };
   if (!isVisiable) return null;

example/src/demo.tsx

@@ -1,23 +1,49 @@
-import JsonView from '@uiw/react-json-view';
+import JsonView, { ShouldExpandNodeInitially } from '@uiw/react-json-view';
 
+const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
+const tpl = {
+  avatar,
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  string_number: '1234',
+};
+const longArray = new Array(10).fill(tpl);
 const example = {
-  nestedArray: [],
-  object: {},
-  data: {
-    value: 1,
+  longArray,
+  array2: new Array(2).fill(tpl),
+  // nestedArray: [],
+  // object: {},
+  // data: {
+  //   value: 1,
+  // },
+  level1: {
+    level2: {
+      level3: {
+        level4: {
+          level5: {
+            message: 'This is deeply nested and will be collapsed',
+            value: 42,
+          },
+        },
+      },
+    },
   },
 };
 
+const shouldExpandNodeInitially: ShouldExpandNodeInitially<object> = (isExpanded, props) => {
+  const { value, level, keyName, parentValue, keys } = props;
+  console.log('~~~~:', keyName, level, parentValue, keys);
+  const isArray = Array.isArray(value);
+  const isObject = typeof value === 'object' && !isArray;
+  if (isArray) {
+    return isExpanded || value.length > 5;
+  }
+  if (isObject && level > 3) {
+    return isExpanded || true; // Expand if it's an object and level is greater than 3
+  }
+  return isExpanded;
+};
+
 export default function App() {
-  return (
-    <JsonView value={example}>
-      <JsonView.KeyName
-        as="span"
-        render={({ style, onClick, ...props }, { keyName, keys }) => {
-          console.log('~~:', keyName, keys); // keys undefined
-          return <span {...props} style={{ ...style, backgroundColor: 'red' }} />;
-        }}
-      />
-    </JsonView>
-  );
+  return <JsonView value={example} displayObjectSize={false} shouldExpandNodeInitially={shouldExpandNodeInitially} />;
 }