@uiw/react-json-view 1.8.5 → 1.10.0

package/esm/theme/vscode.js

@@ -0,0 +1,25 @@
+export var vscodeTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-background-color': '#1e1e1e',
+  '--w-rjv-line-color': '#36334280',
+  '--w-rjv-arrow-color': '#838383',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#9c9c9c7a',
+  '--w-rjv-update-color': '#9cdcfe',
+  '--w-rjv-copied-color': '#9cdcfe',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-colon-color': '#d4d4d4',
+  '--w-rjv-brackets-color': '#d4d4d4',
+  '--w-rjv-type-string-color': '#ce9178',
+  '--w-rjv-type-int-color': '#b5cea8',
+  '--w-rjv-type-float-color': '#b5cea8',
+  '--w-rjv-type-bigint-color': '#b5cea8',
+  '--w-rjv-type-boolean-color': '#569cd6',
+  '--w-rjv-type-date-color': '#b5cea8',
+  '--w-rjv-type-url-color': '#3b89cf',
+  '--w-rjv-type-null-color': '#569cd6',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#569cd6'
+};

package/esm/value.d.ts

@@ -55,6 +55,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     enableClipboard: boolean;
     indentWidth: number;
     level?: number;
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
     namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
     components?: JsonViewProps<T>['components'];

package/esm/value.js

@@ -1,8 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes"],
-  _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
+  _excluded2 = ["children", "length", "style"],
+  _excluded3 = ["color", "style", "isURL", "href", "children"],
+  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 import { Fragment, forwardRef, useMemo, useState } from 'react';
 import { Meta } from './comps/meta';
 import { Copied } from './copied';
@@ -63,7 +65,9 @@ export var Colon = _ref => {
     className: "w-rjv-colon",
     style: _extends({
       paddingRight: 3
-    }, style)
+    }, style, {
+      color: 'var(--w-rjv-colon-color, var(--w-rjv-color))'
+    })
   }, props, {
     children: children
   }));
@@ -75,6 +79,10 @@ export function getValueString(value) {
   if (typeof value === 'number') {
     type = isFloat(value) ? 'float' : 'number';
     content = value.toString();
+    if (isNaN(value)) {
+      type = 'NaN';
+      content = 'NaN';
+    }
   }
   if (typeof value === 'boolean') {
     type = 'boolean';
@@ -109,6 +117,56 @@ export function getValueString(value) {
     content
   };
 }
+var RenderShortenTextValue = _ref2 => {
+  var {
+      children,
+      length,
+      style
+    } = _ref2,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var childrenStr = children;
+  var [shorten, setShorten] = useState(length && childrenStr.length >= length);
+  var click = () => {
+    console.log(shorten);
+    if (length && childrenStr.length <= length) return setShorten(false);
+    setShorten(!shorten);
+  };
+  var text = shorten ? childrenStr.slice(0, length) + "..." : childrenStr;
+  return /*#__PURE__*/_jsx(RenderStringValue, _extends({}, rest, {
+    style: _extends({}, style, {
+      cursor: 'pointer'
+    }),
+    onClick: click,
+    children: text
+  }));
+};
+RenderShortenTextValue.displayName = 'JVR.RenderShortenTextValue';
+var RenderStringValue = _ref3 => {
+  var {
+      color,
+      style,
+      isURL,
+      href,
+      children
+    } = _ref3,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return /*#__PURE__*/_jsxs(Label, _extends({
+    color: color,
+    style: style
+  }, rest, {
+    className: "w-rjv-value",
+    children: [isURL && /*#__PURE__*/_jsx("a", {
+      href: href,
+      style: {
+        color
+      },
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: children
+    }), !isURL && children]
+  }));
+};
+RenderStringValue.displayName = 'JVR.RenderStringValue';
 export function ValueView(props) {
   var _typeMap$type;
   var {
@@ -124,9 +182,10 @@ export function ValueView(props) {
       components = {},
       quotes,
       enableClipboard,
-      displayDataTypes
+      displayDataTypes,
+      shortenTextAfterLength
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded2);
+    reset = _objectWithoutPropertiesLoose(props, _excluded4);
   var color = '';
   var style = {};
   var {
@@ -142,7 +201,7 @@ export function ValueView(props) {
       fontWeight: 'bold'
     };
   }
-  if (value === undefined) {
+  if (value === undefined || type === 'NaN') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   var isURL = value instanceof URL;
@@ -184,24 +243,24 @@ export function ValueView(props) {
       content,
       children: content
     });
-    var valueView = reView ? reView : /*#__PURE__*/_jsx(Label, {
+    var valueView = shortenTextAfterLength && type === 'string' ? /*#__PURE__*/_jsx(RenderShortenTextValue, {
       color: color,
+      href: isURL ? value.href : '',
       style: style,
-      className: "w-rjv-value",
-      children: isURL ? /*#__PURE__*/_jsx("a", {
-        href: value.href,
-        style: {
-          color
-        },
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: content
-      }) : content
+      isURL: isURL,
+      length: shortenTextAfterLength,
+      children: content
+    }) : /*#__PURE__*/_jsx(RenderStringValue, {
+      color: color,
+      href: isURL ? value.href : '',
+      style: style,
+      isURL: isURL,
+      children: content
     });
     return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
       children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
         ref: null,
-        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
+        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, reView ? reView : valueView, tools]
       }))
     }));
   }
@@ -223,7 +282,7 @@ export function ValueView(props) {
   }));
 }
 ValueView.displayName = 'JVR.ValueView';
-export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
+export var Label = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
       children,
       color,
@@ -231,8 +290,8 @@ export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
       opacity,
       paddingRight,
       style
-    } = _ref2,
-    reset = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+    } = _ref4,
+    reset = _objectWithoutPropertiesLoose(_ref4, _excluded5);
   return /*#__PURE__*/_jsx("span", _extends({
     style: _extends({
       color,

package/light.d.ts

@@ -1,19 +1,3 @@
 declare module '@uiw/react-json-view/light' {
-  export const lightTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-type-string-color': string;
-    '--w-rjv-type-int-color': string;
-    '--w-rjv-type-float-color': string;
-    '--w-rjv-type-bigint-color': string;
-    '--w-rjv-type-boolean-color': string;
-    '--w-rjv-type-date-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-  };
+  export const lightTheme: import('react').CSSProperties;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.8.5",
+  "version": "1.10.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -27,6 +27,36 @@
       "types": "./cjs/theme/dark.d.ts",
       "require": "./cjs/theme/dark.js"
     },
+    "./nord": {
+      "import": "./esm/theme/nord.js",
+      "types": "./cjs/theme/nord.d.ts",
+      "require": "./cjs/theme/nord.js"
+    },
+    "./vscode": {
+      "import": "./esm/theme/vscode.js",
+      "types": "./cjs/theme/vscode.d.ts",
+      "require": "./cjs/theme/vscode.js"
+    },
+    "./monokai": {
+      "import": "./esm/theme/monokai.js",
+      "types": "./cjs/theme/monokai.d.ts",
+      "require": "./cjs/theme/monokai.js"
+    },
+    "./gruvbox": {
+      "import": "./esm/theme/gruvbox.js",
+      "types": "./cjs/theme/gruvbox.d.ts",
+      "require": "./cjs/theme/gruvbox.js"
+    },
+    "./githubLight": {
+      "import": "./esm/theme/github.light.js",
+      "types": "./cjs/theme/github.light.d.ts",
+      "require": "./cjs/theme/github.light.js"
+    },
+    "./githubDark": {
+      "import": "./esm/theme/github.dark.js",
+      "types": "./cjs/theme/github.dark.d.ts",
+      "require": "./cjs/theme/github.dark.js"
+    },
     "./triangle-arrow": {
       "import": "./esm/arrow/TriangleArrow.js",
       "types": "./cjs/arrow/TriangleArrow.d.ts",