feat: add shouldExpandNodeInitially props. #59

Author: jaywcjlove

core/README.md

@@ -710,6 +710,45 @@ export default function Demo() {
 }
 ```
 
+## Default Collapse/Expand
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+}
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      collapsed={2}
+      shouldExpandNodeInitially={(isExpanded, { value, keys, level }) => {
+        if (keys.length > 0 && keys[0] == "object") {
+          return true
+        }
+        return isExpanded
+      }}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+    >
+    </JsonView>
+  )
+}
+```
+
 ## Modify Icon Style
 
 Use built-in default icons.

core/src/Container.tsx

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

core/src/comps/KeyValues.tsx

@@ -20,11 +20,18 @@ interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
 export const KeyValues = <T extends object>(props: KeyValuesProps<T>) => {
   const { value, expandKey = '', level, keys = [] } = props;
   const expands = useExpandsStore();
-  const { objectSortKeys, indentWidth, collapsed } = useStore();
+  const { objectSortKeys, indentWidth, collapsed, shouldExpandNodeInitially } = useStore();
   const isMyArray = Array.isArray(value);
-  const isExpanded =
-    expands[expandKey] ??
-    (typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false);
+  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 })
+  ) {
+    return null;
+  }
   if (isExpanded) {
     return null;
   }

core/src/comps/NestedClose.tsx

@@ -6,18 +6,26 @@ interface NestedCloseProps<T extends object> {
   value?: T;
   expandKey: string;
   level: number;
+  keys?: (string | number)[];
 }
 
 export const NestedClose = <T extends object>(props: NestedCloseProps<T>) => {
-  const { value, expandKey, level } = props;
+  const { value, expandKey, level, keys = [] } = props;
   const expands = useExpandsStore();
   const isArray = Array.isArray(value);
-  const { collapsed } = useStore();
+  const { collapsed, shouldExpandNodeInitially } = useStore();
   const isMySet = value instanceof Set;
-  const isExpanded =
-    expands[expandKey] ??
-    (typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false);
+  const defaultExpanded =
+    typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  const isExpanded = expands[expandKey] ?? defaultExpanded;
   const len = Object.keys(value!).length;
+  if (
+    expands[expandKey] === undefined &&
+    shouldExpandNodeInitially &&
+    shouldExpandNodeInitially(isExpanded, { value, keys, level })
+  ) {
+    return null;
+  }
   if (isExpanded || len === 0) {
     return null;
   }

core/src/comps/NestedOpen.tsx

@@ -16,16 +16,20 @@ export interface NestedOpenProps<T extends object> extends SectionElementResult<
 }
 
 export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
-  const { keyName, expandKey, keys, initialValue, value, parentValue, level } = props;
+  const { keyName, expandKey, keys = [], initialValue, value, parentValue, level } = props;
   const expands = useExpandsStore();
   const dispatchExpands = useExpandsDispatch();
-  const { onExpand, collapsed } = useStore();
+  const { onExpand, collapsed, shouldExpandNodeInitially } = useStore();
   const isArray = Array.isArray(value);
   const isMySet = value instanceof Set;
-  const isExpanded =
-    expands[expandKey] ??
-    (typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false);
+  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 && shouldExpand !== undefined) {
+    isExpanded = shouldExpand;
+  }
   const click = () => {
     const opt = { expand: !isExpanded, value, keyid: expandKey, keyName };
     onExpand && onExpand(opt);

core/src/index.tsx

@@ -57,6 +57,11 @@ export interface JsonViewProps<T extends object>
   enableClipboard?: boolean;
   /** 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;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
@@ -107,6 +112,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
     value,
     children,
     collapsed,
+    shouldExpandNodeInitially,
     indentWidth = 15,
     displayObjectSize = true,
     shortenTextAfterLength = 30,
@@ -133,6 +139,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
         value,
         objectSortKeys,
         indentWidth,
+        shouldExpandNodeInitially,
         displayObjectSize,
         collapsed,
         enableClipboard,

core/src/store.tsx

@@ -18,6 +18,7 @@ export interface InitialState<T extends object> {
   enableClipboard?: JsonViewProps<T>['enableClipboard'];
   highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
   collapsed?: JsonViewProps<T>['collapsed'];
+  shouldExpandNodeInitially?: JsonViewProps<T>['shouldExpandNodeInitially'];
   indentWidth?: number;
 }
 

www/src/App.tsx

@@ -38,7 +38,7 @@ export default function App() {
           Editor
         </Button> */}
       </TabItem>
-      {tabs === 'preview' && <Example />}
+      {/* {tabs === 'preview' && <Example />} */}
       {/* {tabs === 'editor' && <ExampleEditor />} */}
     </ExampleWrapper>
   );