@uiw/react-json-view 2.0.0-alpha.5 → 2.0.0-alpha.6

package/README.md

@@ -696,8 +696,12 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   displayDataTypes?: boolean;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
   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;
   /** 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;

package/cjs/index.d.ts

@@ -50,7 +50,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     collapsed?: boolean | number;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
-    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    /** 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: {

package/cjs/index.js

@@ -122,7 +122,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$displayObjectS = props.displayObjectSize,
     displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
     _props$shortenTextAft = props.shortenTextAfterLength,
-    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 30 : _props$shortenTextAft,
     _props$highlightUpdat = props.highlightUpdates,
     highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
     _props$enableClipboar = props.enableClipboard,

package/cjs/types/index.js

@@ -86,7 +86,7 @@ var TypeString = function TypeString(_ref3) {
     displayDataTypes = _useTypesStore3.displayDataTypes;
   var _useStore = (0, _store.useStore)(),
     _useStore$shortenText = _useStore.shortenTextAfterLength,
-    length = _useStore$shortenText === void 0 ? 20 : _useStore$shortenText;
+    length = _useStore$shortenText === void 0 ? 30 : _useStore$shortenText;
   var as = Str.as,
     render = Str.render,
     reset = (0, _objectWithoutProperties2["default"])(Str, _excluded3);
@@ -95,6 +95,9 @@ var TypeString = function TypeString(_ref3) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     shorten = _useState2[0],
     setShorten = _useState2[1];
+  (0, _react.useEffect)(function () {
+    return setShorten(length && childrenStr.length >= length);
+  }, [length]);
   var Comp = as || 'span';
   var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defalutStyle), Str.style || {});
   if (length > 0) {

package/esm/index.d.ts

@@ -50,7 +50,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     collapsed?: boolean | number;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
-    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    /** 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: {

package/esm/index.js

@@ -47,7 +47,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       collapsed,
       indentWidth = 15,
       displayObjectSize = true,
-      shortenTextAfterLength = 20,
+      shortenTextAfterLength = 30,
       highlightUpdates = true,
       enableClipboard = true,
       displayDataTypes = true,

package/esm/types/index.js

@@ -13,7 +13,7 @@ var _excluded = ["as", "render"],
   _excluded11 = ["as", "render"],
   _excluded12 = ["as", "render"],
   _excluded13 = ["as", "render"];
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { useTypesStore } from '../store/Types';
 import { useStore } from '../store';
 import { ValueQuote } from '../symbol';
@@ -85,7 +85,7 @@ export var TypeString = _ref3 => {
     displayDataTypes
   } = useTypesStore();
   var {
-    shortenTextAfterLength: length = 20
+    shortenTextAfterLength: length = 30
   } = useStore();
   var {
       as,
@@ -94,6 +94,7 @@ export var TypeString = _ref3 => {
     reset = _objectWithoutPropertiesLoose(Str, _excluded3);
   var childrenStr = children;
   var [shorten, setShorten] = useState(length && childrenStr.length >= length);
+  useEffect(() => setShorten(length && childrenStr.length >= length), [length]);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Str.style || {});
   if (length > 0) {

package/package.json

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