fix: number-string like '1234' remind origin type

examples/assets/data.ts

@@ -2,7 +2,7 @@ import json from './big-size.json';
 
 export const data = [
   {
-    type: 'Primitive source',
+    type: 'Primitive string',
     getData: () => {
       const originSource = 'Hello, @huolala-tech/react-json-view';
       return {
@@ -11,6 +11,26 @@ export const data = [
       };
     }
   },
+  {
+    type: 'Number string',
+    getData: () => {
+      const originSource = '1234567890';
+      return {
+        originSource,
+        renderSource: originSource
+      };
+    }
+  },
+  {
+    type: 'Number value',
+    getData: () => {
+      const originSource = 1234567890;
+      return {
+        originSource,
+        renderSource: originSource
+      };
+    }
+  },
   {
     type: 'Normal object source',
     getData: () => {
@@ -57,6 +77,16 @@ export const data = [
       };
     }
   },
+  {
+    type: 'Undefined',
+    getData: () => {
+      const originSource = undefined;
+      return {
+        originSource: 'undefined',
+        renderSource: originSource
+      };
+    }
+  },
   {
     type: 'Ellipse string',
     getData: () => {

src/ReactJsonView/components/JsonNode.tsx

@@ -5,6 +5,7 @@ import {
   isBoolean,
   isListOrMap,
   isNumber,
+  isString,
   shortTitle
 } from '../../utils';
 import { ArrowRight } from './SvgIcon';
@@ -25,8 +26,27 @@ const PrimitiveContent = ({ content }: { content: React.ReactNode }) => {
   return React.createElement(Fragment, null, computedContent);
 };
 
+const computePrimitiveDataClassname = (data: unknown) => {
+  if (data === null) return 'null';
+
+  const type = typeof data;
+  const primitiveType = ['number', 'boolean'];
+  if (primitiveType.indexOf(type) > -1) {
+    return type;
+  }
+  if (isString(data)) {
+    try {
+      const dataMaybeObject = JSON.parse(data);
+      return isListOrMap(dataMaybeObject) ? '' : 'string';
+    } catch (e) {
+      return 'string';
+    }
+  }
+  return '';
+};
+
 const JsonNode = ({
-  source = null,
+  source,
   depth = 1,
   label = ''
 }: {
@@ -49,6 +69,7 @@ const JsonNode = ({
 
   let data: unknown;
   try {
+    // Exclude the invalid data
     data = JSON.parse(JSON.stringify(source));
   } catch (e) {
     label = 'Error';
@@ -62,15 +83,9 @@ const JsonNode = ({
     return null;
   }, [label]);
 
-  let className = '';
-  const type = typeof data;
-  const primitiveType = ['string', 'number', 'boolean'];
-  if (primitiveType.indexOf(type) > -1) {
-    className = type;
-  } else if (data === null) {
-    className = 'null';
-  }
-  if (className) {
+  const primitiveClassname = computePrimitiveDataClassname(data);
+
+  if (primitiveClassname) {
     return (
       <code className="rjv-primitive">
         {labelContent && (
@@ -81,14 +96,18 @@ const JsonNode = ({
             {labelContent}
           </>
         )}
-        <span className={clsx('rjv-primitive-type', className)}>
+        <span className={clsx('rjv-primitive-type', primitiveClassname)}>
           <PrimitiveContent content={`${data}`} />
         </span>
         {copyable && <Copyable data={JSON.stringify(data, null, 2)} />}
       </code>
     );
   }
 
+  if (isString(data)) {
+    data = JSON.parse(data);
+  }
+
   if (isListOrMap(data)) {
     const title = shortTitle(data, maxTitleSize);
 

src/ReactJsonView/index.tsx

@@ -3,21 +3,12 @@ import './index.less';
 import { Options } from '../../types';
 import { ConfigProvider, useConfigInfo } from './components/ConfigContext';
 import JsonNode from './components/JsonNode';
-import { isString } from '../utils';
 
 const InitJsonNode = () => {
   const { source, darkMode, rootLabel } = useConfigInfo();
-  let data: Options['source'] = source;
-  if (isString(source)) {
-    try {
-      data = JSON.parse(source);
-    } catch (e) {
-      //
-    }
-  }
   return (
     <div data-dark-mode={darkMode}>
-      <JsonNode label={rootLabel} source={data} />
+      <JsonNode label={rootLabel} source={source} />
     </div>
   );
 };