@uiw/react-json-view 2.0.0-alpha.30 → 2.0.0-alpha.31

package/README.md

@@ -19,20 +19,19 @@ A React component for displaying and editing javascript arrays and JSON objects.
 
 ## Features
 
-📚 Use Typescript to write, better code hints.  
-🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
-🌒 Support dark/light mode  
-📦 Zero dependencies  
-📋 Copy to Clipboard  
-✏️ Support editing and adding features  
-♻️ Whether to highlight updates.
+🚀 **Improved with TypeScript** – Better code hints for a smoother development experience.  
+🎨 **Customizable Themes** – Supports theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme).  
+🌒 **Dark/Light Mode** – Seamless switching between themes.  
+📦 **Zero Dependencies** – Lightweight and efficient.  
+📋 **Clipboard Support** – Easily copy JSON data.  
+✏️ **Editable & Extendable** – Supports editing and adding new properties.  
+♻️ **Update Highlighting** – Option to highlight changes.  
 
-The new version [**v2**](https://uiwjs.github.io/react-json-view/) 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. Preview [v2 documentation](https://uiwjs.github.io/react-json-view/) and [examples](https://uiwjs.github.io/react-json-view/). 
-
-- [x] Complete all features of displaying JSON in v1.
-- [ ] Add editing functionality to v2.
-- [x] Add test cases to v2.
+The latest version [**v2**](https://uiwjs.github.io/react-json-view/) features a redesigned API for better maintainability, a more flexible component customization system, and fully customizable rendering, making it more aligned with React’s component model. 📖 Check out the [v2 documentation](https://uiwjs.github.io/react-json-view/) and [examples](https://uiwjs.github.io/react-json-view/).  
 
+- [x] Fully implemented all v1 JSON display features.  
+- [ ] Adding editing functionality to v2.  
+- [x] Added comprehensive test cases for v2.  
 
 ## Quick Start
 
@@ -888,6 +887,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
   shortenTextAfterLength?: number;
+  /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+  stringEllipsis?: number;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
   /** Fires event when you copy */

package/cjs/index.d.ts

@@ -58,6 +58,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     highlightUpdates?: boolean;
     /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
     shortenTextAfterLength?: number;
+    /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+    stringEllipsis?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
         expand: boolean;

package/cjs/index.js

@@ -110,7 +110,7 @@ Object.keys(_symbol).forEach(function (key) {
     }
   });
 });
-var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "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,
@@ -125,6 +125,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
     _props$shortenTextAft = props.shortenTextAfterLength,
     shortenTextAfterLength = _props$shortenTextAft === void 0 ? 30 : _props$shortenTextAft,
+    stringEllipsis = props.stringEllipsis,
     _props$highlightUpdat = props.highlightUpdates,
     highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
     _props$enableClipboar = props.enableClipboard,
@@ -154,6 +155,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       collapsed: collapsed,
       enableClipboard: enableClipboard,
       shortenTextAfterLength: shortenTextAfterLength,
+      stringEllipsis: stringEllipsis,
       highlightUpdates: highlightUpdates,
       onCopied: onCopied,
       onExpand: onExpand

package/cjs/store.d.ts

@@ -9,6 +9,7 @@ export interface InitialState<T extends object> {
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];

package/cjs/types/index.js

@@ -98,7 +98,9 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
     displayDataTypes = _useTypesStore3.displayDataTypes;
   var _useStore = (0, _store.useStore)(),
     _useStore$shortenText = _useStore.shortenTextAfterLength,
-    length = _useStore$shortenText === void 0 ? 30 : _useStore$shortenText;
+    length = _useStore$shortenText === void 0 ? 30 : _useStore$shortenText,
+    _useStore$stringEllip = _useStore.stringEllipsis,
+    stringEllipsis = _useStore$stringEllip === void 0 ? '...' : _useStore$stringEllip;
   var as = Str.as,
     render = Str.render,
     reset = (0, _objectWithoutProperties2["default"])(Str, _excluded3);
@@ -122,7 +124,7 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
       };
     }
   }
-  var text = shorten ? "".concat(childrenStr.slice(0, length), "...") : childrenStr;
+  var text = shorten ? "".concat(childrenStr.slice(0, length)).concat(stringEllipsis) : childrenStr;
   var isRender = render && typeof render === 'function';
   var type = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     style: style
@@ -131,9 +133,10 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
     value: children,
     keyName: keyName
   });
+  var cls = shorten ? 'w-rjv-value w-rjv-value-short' : 'w-rjv-value';
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: text,
-    className: 'w-rjv-value'
+    className: cls
   }), {
     type: 'value',
     value: children,
@@ -144,7 +147,7 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
       style: style
     }))), child || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-        className: "w-rjv-value",
+        className: cls,
         children: text
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {})]
     })]

package/esm/index.d.ts

@@ -58,6 +58,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     highlightUpdates?: boolean;
     /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
     shortenTextAfterLength?: number;
+    /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+    stringEllipsis?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
         expand: boolean;

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", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 import { forwardRef } from 'react';
 import { Provider } from './store';
 import { Container } from './Container';
@@ -49,6 +49,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       indentWidth = 15,
       displayObjectSize = true,
       shortenTextAfterLength = 30,
+      stringEllipsis,
       highlightUpdates = true,
       enableClipboard = true,
       displayDataTypes = true,
@@ -75,6 +76,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       collapsed,
       enableClipboard,
       shortenTextAfterLength,
+      stringEllipsis,
       highlightUpdates,
       onCopied,
       onExpand

package/esm/store.d.ts

@@ -9,6 +9,7 @@ export interface InitialState<T extends object> {
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];

package/esm/types/index.js

@@ -98,7 +98,8 @@ export var TypeString = _ref3 => {
     displayDataTypes
   } = useTypesStore();
   var {
-    shortenTextAfterLength: length = 30
+    shortenTextAfterLength: length = 30,
+    stringEllipsis = '...'
   } = useStore();
   var {
       as,
@@ -120,7 +121,7 @@ export var TypeString = _ref3 => {
       };
     }
   }
-  var text = shorten ? childrenStr.slice(0, length) + "..." : childrenStr;
+  var text = shorten ? "" + childrenStr.slice(0, length) + stringEllipsis : childrenStr;
   var isRender = render && typeof render === 'function';
   var type = isRender && render(_extends({}, reset, {
     style
@@ -129,9 +130,10 @@ export var TypeString = _ref3 => {
     value: children,
     keyName
   });
+  var cls = shorten ? 'w-rjv-value w-rjv-value-short' : 'w-rjv-value';
   var child = isRender && render(_extends({}, reset, {
     children: text,
-    className: 'w-rjv-value'
+    className: cls
   }), {
     type: 'value',
     value: children,
@@ -142,7 +144,7 @@ export var TypeString = _ref3 => {
       style: style
     }))), child || /*#__PURE__*/_jsxs(Fragment, {
       children: [/*#__PURE__*/_jsx(ValueQuote, {}), /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
-        className: "w-rjv-value",
+        className: cls,
         children: text
       })), /*#__PURE__*/_jsx(ValueQuote, {})]
     })]

package/package.json

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