fix: null, undefined, NaN not rendering when displayDataTypes=false. fixed #91

Author: jaywcjlove

core/src/index.test.tsx

@@ -87,3 +87,14 @@ it('renders <JsonView objectSortKeys={() => {}} /> test case', () => {
   const keyname = screen.getAllByTestId('keyname')[0];
   expect(keyname.innerHTML).toEqual('a');
 });
+
+it('renders null, undefined and NaN values when displayDataTypes={false}', () => {
+  render(<JsonView value={{ null: null, undefined, nan: NaN }} displayDataTypes={false} />);
+
+  const values = Array.from(document.querySelectorAll('.w-rjv-value')).map((elm) => elm.textContent);
+  expect(values).toEqual(['null', 'undefined', 'NaN']);
+  expect(screen.queryByText('float')).toBeNull();
+  expect(screen.queryByText('undefined', { selector: '.w-rjv-type' })).toBeNull();
+  expect(screen.queryByText('null', { selector: '.w-rjv-type' })).toBeNull();
+  expect(screen.queryByText('NaN', { selector: '.w-rjv-type' })).toBeNull();
+});

core/src/types/index.tsx

@@ -335,7 +335,11 @@ export const TypeUndefined: FC<TypeProps> = ({ children, keyName, keys }) => {
   return (
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
-      {child}
+      {child || (
+        <Comp {...reset} className="w-rjv-value">
+          undefined
+        </Comp>
+      )}
     </Fragment>
   );
 };
@@ -360,7 +364,11 @@ export const TypeNull: FC<TypeProps> = ({ children, keyName, keys }) => {
   return (
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
-      {child}
+      {child || (
+        <Comp {...reset} className="w-rjv-value">
+          null
+        </Comp>
+      )}
     </Fragment>
   );
 };
@@ -388,7 +396,11 @@ export const TypeNan: FC<TypeProps> = ({ children, keyName, keys }) => {
   return (
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
-      {child}
+      {child || (
+        <Comp {...reset} className="w-rjv-value">
+          NaN
+        </Comp>
+      )}
     </Fragment>
   );
 };