@uiw/react-json-view 1.12.0 → 1.12.1

package/README.md

@@ -5,9 +5,9 @@ react-json-view
 [![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
 [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-json-view.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-json-view)
 [![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
-[![Coverage Status](https://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
+[![Coverage Status](https://raw.githack.com/uiwjs/react-json-view/v1-docs/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
 
-A React component for displaying and editing javascript arrays and JSON objects.
+A React component for displaying and editing javascript arrays and JSON objects. Preview of v1 documentation is available [here](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html).
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-json-view/" target="_blank">
@@ -26,6 +26,8 @@ A React component for displaying and editing javascript arrays and JSON objects.
 ✏️ Support editing and adding features  
 ♻️ Whether to highlight updates.
 
+The new version **[v2](https://github.com/uiwjs/react-json-view/tree/v2)** has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely.
+
 ## Quick Start
 
 ```bash
@@ -688,7 +690,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   displayDataTypes?: boolean;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: 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;
   /** Define the root node name. @default undefined */
   keyName?: string | number;

package/cjs/editor/countInfoExtra.js

@@ -15,7 +15,6 @@ var _add = require("./icon/add");
 var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
 function CountInfoExtra(props) {
-  var _ref, _ref2;
   var visible = props.visible,
     showTools = props.showTools,
     editable = props.editable,
@@ -28,8 +27,8 @@ function CountInfoExtra(props) {
     onAdd = props.onAdd,
     onDelete = props.onDelete;
   if (!visible || !showTools) return null;
-  var click = function click(_x) {
-    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
+  var click = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
       var keyOrValue, isArray, isAdd, result, maybeAdd;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -55,10 +54,13 @@ function CountInfoExtra(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
-  var deleteHandle = function deleteHandle(_x2) {
-    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
+    }));
+    return function click(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -88,8 +90,11 @@ function CountInfoExtra(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [editable && onAdd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, {
       onClick: click

package/cjs/editor/objectKey.js

@@ -16,7 +16,6 @@ var _value = require("../value");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "namespace", "editableValue", "onEdit", "highlightUpdates", "render"];
 var ObjectKey = function ObjectKey(props) {
-  var _ref;
   var className = props.className,
     value = props.value,
     keyName = props.keyName,
@@ -59,8 +58,8 @@ var ObjectKey = function ObjectKey(props) {
       (_$edit$current = $edit.current) === null || _$edit$current === void 0 || _$edit$current.focus();
     }
   };
-  var blur = function blur() {
-    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  var blur = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var _$edit$current2, result;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -99,8 +98,11 @@ var ObjectKey = function ObjectKey(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function blur() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var focus = function focus() {
     if ($edit.current) {
       var _$edit$current3;

package/cjs/editor/value.js

@@ -27,7 +27,7 @@ var Quotes = function Quotes(_ref) {
   });
 };
 function ReValue(props) {
-  var _ref2, _typeMap$typeStr, _ref3;
+  var _typeMap$typeStr;
   var type = props.type,
     value = props.value,
     setValue = props.setValue,
@@ -81,8 +81,8 @@ function ReValue(props) {
       }
     }
   };
-  var blur = function blur() {
-    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  var blur = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var text, _typeStr, dt, result, _getValueString, oldChildStr;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -161,8 +161,11 @@ function ReValue(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function blur() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -189,8 +192,8 @@ function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
-  var deleteHandle = function deleteHandle(_x) {
-    return (_ref3 = _ref3 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -215,8 +218,11 @@ function ReValue(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
       style: style,

package/cjs/index.d.ts

@@ -33,7 +33,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: 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;
     /** Define the root node name. @default undefined */
     keyName?: string | number;

package/cjs/node.js

@@ -62,7 +62,7 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
     _props$shortenTextAft = props.shortenTextAfterLength,
-    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 30 : _props$shortenTextAft,
     collapsed = props.collapsed,
     _props$level = props.level,
     level = _props$level === void 0 ? 1 : _props$level,

package/cjs/value.js

@@ -153,9 +153,11 @@ var RenderShortenTextValue = function RenderShortenTextValue(_ref2) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     shorten = _useState2[0],
     setShorten = _useState2[1];
+  (0, _react.useEffect)(function () {
+    return setShorten(length && childrenStr.length >= length);
+  }, [length]);
   var click = function click() {
-    if (length && childrenStr.length <= length) return setShorten(false);
-    setShorten(!shorten);
+    return setShorten(!shorten);
   };
   var text = shorten ? "".concat(childrenStr.slice(0, length), "...") : childrenStr;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rest), {}, {

package/esm/editor/countInfoExtra.js

@@ -6,7 +6,6 @@ import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function CountInfoExtra(props) {
-  var _ref, _ref2;
   var {
     visible,
     showTools,
@@ -21,8 +20,8 @@ export function CountInfoExtra(props) {
     onDelete
   } = props;
   if (!visible || !showTools) return null;
-  var click = function click(_x) {
-    return (_ref = _ref || _asyncToGenerator(function* (event) {
+  var click = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* (event) {
       event.stopPropagation();
       var keyOrValue = 'AddKeyOrValue';
       var isArray = Array.isArray(value);
@@ -36,10 +35,13 @@ export function CountInfoExtra(props) {
           setValue(result);
         }
       }
-    })).apply(this, arguments);
-  };
-  var deleteHandle = function deleteHandle(_x2) {
-    return (_ref2 = _ref2 || _asyncToGenerator(function* (event) {
+    });
+    return function click(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* (event) {
       event.stopPropagation();
       if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -55,8 +57,11 @@ export function CountInfoExtra(props) {
           }
         }
       }
-    })).apply(this, arguments);
-  };
+    });
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {
       onClick: click

package/esm/editor/objectKey.js

@@ -7,7 +7,6 @@ import { useHighlight } from '../semicolon';
 import { Label } from '../value';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ObjectKey = props => {
-  var _ref;
   var {
       className,
       value,
@@ -43,8 +42,8 @@ export var ObjectKey = props => {
       (_$edit$current = $edit.current) == null || _$edit$current.focus();
     }
   };
-  var blur = function blur() {
-    return (_ref = _ref || _asyncToGenerator(function* () {
+  var blur = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* () {
       if ($edit.current) {
         var _$edit$current2;
         if (onEdit) {
@@ -66,8 +65,11 @@ export var ObjectKey = props => {
         (_$edit$current2 = $edit.current) == null || _$edit$current2.focus();
       }
       setEditable(false);
-    })).apply(this, arguments);
-  };
+    });
+    return function blur() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var focus = () => {
     if ($edit.current) {
       var _$edit$current3;

package/esm/editor/value.js

@@ -21,7 +21,7 @@ var Quotes = _ref => {
   });
 };
 export function ReValue(props) {
-  var _ref2, _typeMap$typeStr, _ref3;
+  var _typeMap$typeStr;
   var {
       type,
       value,
@@ -65,8 +65,8 @@ export function ReValue(props) {
       }
     }
   };
-  var blur = function blur() {
-    return (_ref2 = _ref2 || _asyncToGenerator(function* () {
+  var blur = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* () {
       if (!editableValue) return;
       setEditable(false);
       if ($edit.current) {
@@ -126,8 +126,11 @@ export function ReValue(props) {
           }
         }
       }
-    })).apply(this, arguments);
-  };
+    });
+    return function blur() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -155,8 +158,8 @@ export function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
-  var deleteHandle = function deleteHandle(_x) {
-    return (_ref3 = _ref3 || _asyncToGenerator(function* (evn) {
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(function* (evn) {
       evn.stopPropagation();
       if (data && keyName && keyName in data && setValue && onDelete) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -167,8 +170,11 @@ export function ReValue(props) {
           setValue(_extends({}, data));
         }
       }
-    })).apply(this, arguments);
-  };
+    });
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
       style: style,

package/esm/index.d.ts

@@ -33,7 +33,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: 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;
     /** Define the root node name. @default undefined */
     keyName?: string | number;

package/esm/node.js

@@ -46,7 +46,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
-      shortenTextAfterLength = 20,
+      shortenTextAfterLength = 30,
       collapsed,
       level = 1,
       keyid = 'root',

package/esm/value.js

@@ -5,7 +5,7 @@ var _excluded = ["children", "style"],
   _excluded3 = ["color", "style", "isURL", "href", "children"],
   _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "isSet", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
   _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-import { Fragment, forwardRef, useMemo, useState } from 'react';
+import { Fragment, forwardRef, useMemo, useEffect, useState } from 'react';
 import { Meta } from './comps/meta';
 import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -134,10 +134,8 @@ var RenderShortenTextValue = _ref2 => {
     rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   var childrenStr = children;
   var [shorten, setShorten] = useState(length && childrenStr.length >= length);
-  var click = () => {
-    if (length && childrenStr.length <= length) return setShorten(false);
-    setShorten(!shorten);
-  };
+  useEffect(() => setShorten(length && childrenStr.length >= length), [length]);
+  var click = () => setShorten(!shorten);
   var text = shorten ? childrenStr.slice(0, length) + "..." : childrenStr;
   return /*#__PURE__*/_jsx(RenderStringValue, _extends({}, rest, {
     style: _extends({}, style, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -93,6 +93,10 @@
     "cjs",
     "esm"
   ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "keywords": [
     "array-viewer",
     "component",