@uiw/react-json-view 2.0.0-alpha.28 → 2.0.0-alpha.29

package/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.
@@ -840,17 +879,17 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   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 */
   shortenTextAfterLength?: number;
   /** Callback function for when a treeNode is expanded or collapsed */
-  onExpand?: (props: {
-    expand: boolean;
-    value?: T;
-    keyid: string;
-    keyName?: string | number;
-  }) => void;
+  onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
   /** Fires event when you copy */
   onCopied?: (text: string, value?: T) => void;
 }

package/cjs/Container.js

@@ -63,7 +63,8 @@ var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NestedClose.NestedClose, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys
     })]
   }));
 });

package/cjs/comps/KeyValues.js

@@ -35,9 +35,18 @@ var KeyValues = exports.KeyValues = function KeyValues(props) {
   var _useStore = (0, _store.useStore)(),
     objectSortKeys = _useStore.objectSortKeys,
     indentWidth = _useStore.indentWidth,
-    collapsed = _useStore.collapsed;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   var isMyArray = Array.isArray(value);
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  })) {
+    return null;
+  }
   if (isExpanded) {
     return null;
   }

package/cjs/comps/NestedClose.d.ts

@@ -2,6 +2,7 @@ interface NestedCloseProps<T extends object> {
     value?: T;
     expandKey: string;
     level: number;
+    keys?: (string | number)[];
 }
 export declare const NestedClose: {
     <T extends object>(props: NestedCloseProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/cjs/comps/NestedClose.js

@@ -12,14 +12,25 @@ var NestedClose = exports.NestedClose = function NestedClose(props) {
   var _expands$expandKey;
   var value = props.value,
     expandKey = props.expandKey,
-    level = props.level;
+    level = props.level,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys;
   var expands = (0, _Expands.useExpandsStore)();
   var isArray = Array.isArray(value);
   var _useStore = (0, _store.useStore)(),
-    collapsed = _useStore.collapsed;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
   var len = Object.keys(value).length;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  })) {
+    return null;
+  }
   if (isExpanded || len === 0) {
     return null;
   }

package/cjs/comps/NestedOpen.js

@@ -22,7 +22,8 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   var _expands$expandKey;
   var keyName = props.keyName,
     expandKey = props.expandKey,
-    keys = props.keys,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys,
     initialValue = props.initialValue,
     value = props.value,
     parentValue = props.parentValue,
@@ -31,11 +32,21 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   var dispatchExpands = (0, _Expands.useExpandsDispatch)();
   var _useStore = (0, _store.useStore)(),
     onExpand = _useStore.onExpand,
-    collapsed = _useStore.collapsed;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   var isArray = Array.isArray(value);
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   var isObject = (0, _typeof2["default"])(value) === 'object';
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  });
+  if (expands[expandKey] === undefined && shouldExpand !== undefined) {
+    isExpanded = shouldExpand;
+  }
   var click = function click() {
     var opt = {
       expand: !isExpanded,

package/cjs/index.d.ts

@@ -48,6 +48,12 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     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 */

package/cjs/index.js

@@ -110,7 +110,7 @@ Object.keys(_symbol).forEach(function (key) {
     }
   });
 });
-var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
@@ -118,6 +118,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     value = props.value,
     children = props.children,
     collapsed = props.collapsed,
+    shouldExpandNodeInitially = props.shouldExpandNodeInitially,
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
     _props$displayObjectS = props.displayObjectSize,
@@ -148,6 +149,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       value: value,
       objectSortKeys: objectSortKeys,
       indentWidth: indentWidth,
+      shouldExpandNodeInitially: shouldExpandNodeInitially,
       displayObjectSize: displayObjectSize,
       collapsed: collapsed,
       enableClipboard: enableClipboard,

package/cjs/store.d.ts

@@ -12,6 +12,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;
 }
 export declare const initialState: InitialState<object>;

package/esm/Container.js

@@ -52,7 +52,8 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
     }), /*#__PURE__*/_jsx(NestedClose, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys
     })]
   }));
 });

package/esm/comps/KeyValues.js

@@ -24,10 +24,19 @@ export var KeyValues = props => {
   var {
     objectSortKeys,
     indentWidth,
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
   var isMyArray = Array.isArray(value);
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : defaultExpanded;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value,
+    keys,
+    level
+  })) {
+    return null;
+  }
   if (isExpanded) {
     return null;
   }

package/esm/comps/NestedClose.d.ts

@@ -2,6 +2,7 @@ interface NestedCloseProps<T extends object> {
     value?: T;
     expandKey: string;
     level: number;
+    keys?: (string | number)[];
 }
 export declare const NestedClose: {
     <T extends object>(props: NestedCloseProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/esm/comps/NestedClose.js

@@ -7,16 +7,26 @@ export var NestedClose = props => {
   var {
     value,
     expandKey,
-    level
+    level,
+    keys = []
   } = props;
   var expands = useExpandsStore();
   var isArray = Array.isArray(value);
   var {
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : defaultExpanded;
   var len = Object.keys(value).length;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value,
+    keys,
+    level
+  })) {
+    return null;
+  }
   if (isExpanded || len === 0) {
     return null;
   }

package/esm/comps/NestedOpen.js

@@ -14,7 +14,7 @@ export var NestedOpen = props => {
   var {
     keyName,
     expandKey,
-    keys,
+    keys = [],
     initialValue,
     value,
     parentValue,
@@ -24,12 +24,22 @@ export var NestedOpen = props => {
   var dispatchExpands = useExpandsDispatch();
   var {
     onExpand,
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
   var isArray = Array.isArray(value);
   var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   var isObject = typeof value === 'object';
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value,
+    keys,
+    level
+  });
+  if (expands[expandKey] === undefined && shouldExpand !== undefined) {
+    isExpanded = shouldExpand;
+  }
   var click = () => {
     var opt = {
       expand: !isExpanded,

package/esm/index.d.ts

@@ -48,6 +48,12 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     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 */

package/esm/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 import { forwardRef } from 'react';
 import { Provider } from './store';
 import { Container } from './Container';
@@ -45,6 +45,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       children,
       collapsed,
+      shouldExpandNodeInitially,
       indentWidth = 15,
       displayObjectSize = true,
       shortenTextAfterLength = 30,
@@ -69,6 +70,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       objectSortKeys,
       indentWidth,
+      shouldExpandNodeInitially,
       displayObjectSize,
       collapsed,
       enableClipboard,

package/esm/store.d.ts

@@ -12,6 +12,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;
 }
 export declare const initialState: InitialState<object>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.28",
+  "version": "2.0.0-alpha.29",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",