@uiw/react-json-view 1.10.0 → 1.11.1

package/README.md

@@ -11,10 +11,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-json-view/" target="_blank">
-  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/b8b8300b-2a43-4173-878b-73e50cfac19c" />
-</a>
-<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
-  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-code-preview-layout/assets/1680273/da8e8499-6de3-4d4f-8316-8b2a3b616170" />
+  <img width="650" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/1c19bd72-f2ad-4d21-8708-cb30f3059cfd" />
 </a>
 
 <!--rehype:ignore:end-->
@@ -91,6 +88,7 @@ import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
 import { vscodeTheme } from '@uiw/react-json-view/vscode';
 import { gruvboxTheme } from '@uiw/react-json-view/gruvbox';
 import { monokaiTheme } from '@uiw/react-json-view/monokai';
+import { basicTheme } from '@uiw/react-json-view/basic';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
@@ -115,6 +113,7 @@ export default function Demo() {
       <JsonView value={object} style={gruvboxTheme} />
       <JsonView value={object} style={vscodeTheme} />
       <JsonView value={object} style={monokaiTheme} />
+      <JsonView value={object} style={basicTheme} />
     </div>
   );
 }
@@ -151,6 +150,7 @@ const customTheme = {
   '--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',
@@ -190,6 +190,7 @@ const object = {
   null: null,
   undefined,
   timer: 0,
+  nan: NaN,
   url: new URL('https://example.com'),
   date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
   array: [19, 100.86, 'test', NaN, Infinity],

package/cjs/editor/value.js

@@ -121,6 +121,9 @@ function ReValue(props) {
             } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
               text = null;
               _typeStr = 'null';
+            } else if (typeof text === 'string' && /^(NaN)$/gi.test(text)) {
+              text = NaN;
+              _typeStr = 'NaN';
             } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
               text = undefined;
               _typeStr = 'undefined';
@@ -183,7 +186,7 @@ function ReValue(props) {
   var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
     type: typeStr
   });
-  if (typeStr === 'null' || typeStr === 'undefined') {
+  if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   var deleteHandle = function deleteHandle(_x) {

package/cjs/index.js

@@ -57,7 +57,8 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     lineHeight: 1.4,
     fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
     color: 'var(--w-rjv-color, #002b36)',
-    backgroundColor: 'var(--w-rjv-background-color, #00000000)'
+    backgroundColor: 'var(--w-rjv-background-color, #00000000)',
+    fontSize: 13
   }, style);
   var cls = "w-json-view-container w-rjv ".concat(className || '');
   var keyid = (0, _react.useId)();

package/cjs/theme/basic.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const basicTheme: import("react").CSSProperties;

package/cjs/theme/basic.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.basicTheme = void 0;
+var basicTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#b5bd68',
+  '--w-rjv-background-color': '#2E3235',
+  '--w-rjv-line-color': '#292d30',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#d8d8d84d',
+  '--w-rjv-update-color': '#b5bd68',
+  '--w-rjv-copied-color': '#b5bd68',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#cc99cc',
+  '--w-rjv-colon-color': '#bababa',
+  '--w-rjv-brackets-color': '#808080',
+  '--w-rjv-type-string-color': '#b5bd68',
+  '--w-rjv-type-int-color': '#fda331',
+  '--w-rjv-type-float-color': '#fda331',
+  '--w-rjv-type-bigint-color': '#fda331',
+  '--w-rjv-type-boolean-color': '#fda331',
+  '--w-rjv-type-date-color': '#8abeb7',
+  '--w-rjv-type-url-color': '#5a89c0',
+  '--w-rjv-type-null-color': '#8abeb7',
+  '--w-rjv-type-nan-color': '#8abeb7',
+  '--w-rjv-type-undefined-color': '#8abeb7'
+};
+exports.basicTheme = basicTheme;

package/cjs/value.js

@@ -218,13 +218,10 @@ function ValueView(props) {
       fontWeight: 'bold'
     };
   }
-  if (value === undefined || type === 'NaN') {
+  if (value === undefined || type.toLocaleLowerCase() === 'nan' || !displayDataTypes) {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   var isURL = value instanceof URL;
-  if (!displayDataTypes) {
-    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
-  }
   color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),

package/esm/editor/value.js

@@ -93,6 +93,9 @@ export function ReValue(props) {
         } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
           text = null;
           _typeStr = 'null';
+        } else if (typeof text === 'string' && /^(NaN)$/gi.test(text)) {
+          text = NaN;
+          _typeStr = 'NaN';
         } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
           text = undefined;
           _typeStr = 'undefined';
@@ -149,7 +152,7 @@ export function ReValue(props) {
   var typeView = /*#__PURE__*/_jsx(Type, {
     type: typeStr
   });
-  if (typeStr === 'null' || typeStr === 'undefined') {
+  if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   var deleteHandle = function deleteHandle(_x) {

package/esm/index.js

@@ -19,7 +19,8 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
     lineHeight: 1.4,
     fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
     color: 'var(--w-rjv-color, #002b36)',
-    backgroundColor: 'var(--w-rjv-background-color, #00000000)'
+    backgroundColor: 'var(--w-rjv-background-color, #00000000)',
+    fontSize: 13
   }, style);
   var cls = "w-json-view-container w-rjv " + (className || '');
   var keyid = useId();

package/esm/theme/basic.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const basicTheme: import("react").CSSProperties;

package/esm/theme/basic.js

@@ -0,0 +1,25 @@
+export var basicTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#b5bd68',
+  '--w-rjv-background-color': '#2E3235',
+  '--w-rjv-line-color': '#292d30',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#d8d8d84d',
+  '--w-rjv-update-color': '#b5bd68',
+  '--w-rjv-copied-color': '#b5bd68',
+  '--w-rjv-copied-success-color': '#28a745',
+  '--w-rjv-curlybraces-color': '#cc99cc',
+  '--w-rjv-colon-color': '#bababa',
+  '--w-rjv-brackets-color': '#808080',
+  '--w-rjv-type-string-color': '#b5bd68',
+  '--w-rjv-type-int-color': '#fda331',
+  '--w-rjv-type-float-color': '#fda331',
+  '--w-rjv-type-bigint-color': '#fda331',
+  '--w-rjv-type-boolean-color': '#fda331',
+  '--w-rjv-type-date-color': '#8abeb7',
+  '--w-rjv-type-url-color': '#5a89c0',
+  '--w-rjv-type-null-color': '#8abeb7',
+  '--w-rjv-type-nan-color': '#8abeb7',
+  '--w-rjv-type-undefined-color': '#8abeb7'
+};

package/esm/value.js

@@ -201,13 +201,10 @@ export function ValueView(props) {
       fontWeight: 'bold'
     };
   }
-  if (value === undefined || type === 'NaN') {
+  if (value === undefined || type.toLocaleLowerCase() === 'nan' || !displayDataTypes) {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   var isURL = value instanceof URL;
-  if (!displayDataTypes) {
-    typeView = /*#__PURE__*/_jsx(Fragment, {});
-  }
   color = ((_typeMap$type = typeMap[type]) == null ? void 0 : _typeMap$type.color) || '';
   var [showTools, setShowTools] = useState(false);
   var tools = useMemo(() => enableClipboard && showTools && /*#__PURE__*/_jsx(Copied, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,6 +37,11 @@
       "types": "./cjs/theme/vscode.d.ts",
       "require": "./cjs/theme/vscode.js"
     },
+    "./basic": {
+      "import": "./esm/theme/basic.js",
+      "types": "./cjs/theme/basic.d.ts",
+      "require": "./cjs/theme/basic.js"
+    },
     "./monokai": {
       "import": "./esm/theme/monokai.js",
       "types": "./cjs/theme/monokai.d.ts",