fix: fix NaN display & font size style.

Author: jaywcjlove

core/README.md

@@ -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],

core/src/editor/value.tsx

@@ -102,6 +102,9 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
       } 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';
@@ -142,7 +145,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
     style: editable ? { ...style, ...defaultStyle, color } : { ...style, color },
   };
   let typeView = <Type type={typeStr} />;
-  if (typeStr === 'null' || typeStr === 'undefined') {
+  if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = <Fragment />;
   }
   const deleteHandle = async (evn: React.MouseEvent<SVGSVGElement, MouseEvent>) => {

core/src/index.tsx

@@ -78,6 +78,7 @@ const JsonView = forwardRef<HTMLDivElement, JsonViewProps<object>>((props, ref)
     fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
     color: 'var(--w-rjv-color, #002b36)',
     backgroundColor: 'var(--w-rjv-background-color, #00000000)',
+    fontSize: 13,
     ...style,
   } as React.CSSProperties;
   const cls = `w-json-view-container w-rjv ${className || ''}`;

core/src/value.tsx

@@ -211,14 +211,10 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
     typeView = <Fragment />;
     style = { fontWeight: 'bold' };
   }
-  if (value === undefined || type === 'NaN') {
+  if (value === undefined || type.toLocaleLowerCase() === 'nan' || !displayDataTypes) {
     typeView = <Fragment />;
   }
   const isURL = value instanceof URL;
-
-  if (!displayDataTypes) {
-    typeView = <Fragment />;
-  }
   color = typeMap[type]?.color || '';
 
   const [showTools, setShowTools] = useState(false);

www/src/example/default.tsx

@@ -12,10 +12,10 @@ import { monokaiTheme } from '@uiw/react-json-view/monokai';
 import { basicTheme } from '@uiw/react-json-view/basic';
 
 export const themesData = {
-  basic: basicTheme,
+  nord: nordTheme,
   light: lightTheme,
   dark: darkTheme,
-  nord: nordTheme,
+  basic: basicTheme,
   vscode: vscodeTheme,
   githubLight: githubLightTheme,
   githubDark: githubDarkTheme,
@@ -28,13 +28,14 @@ const avatar = 'https://i.imgur.com/1bX5QH6.jpg';
 function aPlusB(a: number, b: number) {
   return a + b;
 }
-const example = {
+export const example = {
   avatar,
   string: 'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet',
   integer: 42,
   float: 114.514,
   // @ts-ignore
   bigint: 10086n,
+  nan: NaN,
   null: null,
   undefined,
   boolean: true,

www/src/example/editor.tsx

@@ -1,40 +1,7 @@
 import { Fragment, useState, useEffect } from 'react';
 import { styled } from 'styled-components';
 import JsonViewEditor from '@uiw/react-json-view/editor';
-import { themesData } from './default';
-
-const avatar = 'https://i.imgur.com/1bX5QH6.jpg';
-// const longArray = new Array(1000).fill(1);
-function aPlusB(a: number, b: number) {
-  return a + b;
-}
-const example = {
-  avatar,
-  string: 'Lorem ipsum dolor sit amet',
-  integer: 42,
-  float: 114.514,
-  // @ts-ignore
-  bigint: 10086n,
-  null: null,
-  undefined,
-  boolean: true,
-  timer: 0,
-  date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
-  array: [19, 100.86, 'test', NaN, Infinity],
-  emptyArray: [],
-  nestedArray: [[1, 2], [3, 4], { a: 1 }],
-  object3: {},
-  object2: {
-    'first-child': true,
-    'second-child': false,
-    'last-child': null,
-    a: { b: 1 },
-  },
-  fn: aPlusB,
-  // longArray,
-  string_number: '1234',
-  string_empty: '',
-};
+import { themesData, example } from './default';
 
 const Label = styled.label`
   margin-top: 0.83rem;