adds ability to render fields with type "function"

does not render body of the function but just static string indicating the function type

Author: AnyRoad

src/DataRenderer.test.tsx

@@ -148,6 +148,12 @@ describe('DataRender', () => {
     expect(screen.getByText('42n')).toBeInTheDocument();
   });
 
+  it('should render functions', () => {
+    render(<WrappedDataRenderer value={{ func: () => {} }} />);
+    expect(screen.getByText(/func:/)).toBeInTheDocument();
+    expect(screen.getByText('function() { }')).toBeInTheDocument();
+  });
+
   it('should render dates', () => {
     render(<WrappedDataRenderer value={{ test: new Date(0) }} />);
     expect(screen.getByText(/test:/)).toBeInTheDocument();

src/DataRenderer.tsx

@@ -286,7 +286,7 @@ function JsonPrimitiveValue({
   value,
   style,
   lastElement
-}: JsonRenderProps<string | number | boolean | Date | null | undefined>) {
+}: JsonRenderProps<string | number | boolean | Date | Function | null | undefined>) {
   let stringValue;
   let valueStyle = style.otherValue;
 
@@ -310,6 +310,8 @@ function JsonPrimitiveValue({
     valueStyle = style.numberValue;
   } else if (DataTypeDetection.isDate(value)) {
     stringValue = value.toISOString();
+  } else if (DataTypeDetection.isFunction(value)) {
+    stringValue = 'function() { }';
   } else {
     stringValue = (value as any).toString();
   }
@@ -331,7 +333,11 @@ export default function DataRender(props: JsonRenderProps<any>) {
     return <JsonArray {...props} />;
   }
 
-  if (DataTypeDetection.isObject(value) && !DataTypeDetection.isDate(value)) {
+  if (
+    DataTypeDetection.isObject(value) &&
+    !DataTypeDetection.isDate(value) &&
+    !DataTypeDetection.isFunction(value)
+  ) {
     return <JsonObject {...props} />;
   }
 

src/DataTypeDetection.test.ts

@@ -14,6 +14,9 @@ const errorValue = new Error();
 const regExValue = /test/;
 const symbolValue = Symbol('s');
 const bigintValue = BigInt(42);
+const func = function (param: number): number {
+  return param * 2;
+};
 
 describe('isBoolean', () => {
   it('should return `true` for boolean values', () => {
@@ -35,6 +38,7 @@ describe('isBoolean', () => {
     expect(DataTypeDetection.isBoolean(regExValue)).toBe(false);
     expect(DataTypeDetection.isBoolean(symbolValue)).toBe(false);
     expect(DataTypeDetection.isBoolean(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isBoolean(func)).toBe(false);
   });
 });
 
@@ -59,6 +63,7 @@ describe('isNumber', () => {
     expect(DataTypeDetection.isNumber(regExValue)).toBe(false);
     expect(DataTypeDetection.isNumber(symbolValue)).toBe(false);
     expect(DataTypeDetection.isNumber(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isNumber(func)).toBe(false);
   });
 });
 
@@ -82,6 +87,7 @@ describe('isString', () => {
     expect(DataTypeDetection.isString(regExValue)).toBe(false);
     expect(DataTypeDetection.isString(symbolValue)).toBe(false);
     expect(DataTypeDetection.isString(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isString(func)).toBe(false);
   });
 });
 
@@ -103,6 +109,7 @@ describe('isNull', () => {
     expect(DataTypeDetection.isNull(regExValue)).toBe(false);
     expect(DataTypeDetection.isNull(symbolValue)).toBe(false);
     expect(DataTypeDetection.isNull(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isNull(func)).toBe(false);
   });
 });
 
@@ -124,6 +131,7 @@ describe('isUndefined', () => {
     expect(DataTypeDetection.isUndefined(regExValue)).toBe(false);
     expect(DataTypeDetection.isUndefined(symbolValue)).toBe(false);
     expect(DataTypeDetection.isUndefined(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isUndefined(func)).toBe(false);
   });
 });
 
@@ -145,6 +153,7 @@ describe('isArray', () => {
     expect(DataTypeDetection.isArray(regExValue)).toBe(false);
     expect(DataTypeDetection.isArray(symbolValue)).toBe(false);
     expect(DataTypeDetection.isArray(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isArray(func)).toBe(false);
   });
 });
 
@@ -187,6 +196,7 @@ describe('isBigInt', () => {
     expect(DataTypeDetection.isBigInt(nullValue)).toBe(false);
     expect(DataTypeDetection.isBigInt(undefinedValue)).toBe(false);
     expect(DataTypeDetection.isBigInt(symbolValue)).toBe(false);
+    expect(DataTypeDetection.isBigInt(func)).toBe(false);
   });
 });
 
@@ -209,5 +219,29 @@ describe('isDate', () => {
     expect(DataTypeDetection.isDate(regExValue)).toBe(false);
     expect(DataTypeDetection.isDate(symbolValue)).toBe(false);
     expect(DataTypeDetection.isDate(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isDate(func)).toBe(false);
+  });
+});
+
+describe('isFunc', () => {
+  it('should return `true` for function values', () => {
+    expect(DataTypeDetection.isFunction(func)).toBe(true);
+  });
+
+  it('should return `false` for non-function values', () => {
+    expect(DataTypeDetection.isFunction(stringValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(numberValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(floatNumberValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(trueValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(falseValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(objectValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(arrayValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(nullValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(undefinedValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(errorValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(regExValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(symbolValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(bigintValue)).toBe(false);
+    expect(DataTypeDetection.isFunction(dateValue)).toBe(false);
   });
 });

src/DataTypeDetection.ts

@@ -33,3 +33,7 @@ export const isNull = (data: any): data is null => {
 export const isUndefined = (data: any): data is undefined => {
   return data === undefined;
 };
+
+export const isFunction = (data: unknown): data is Function => {
+  return !!data && data instanceof Object && typeof data === 'function';
+};

src/stories/JsonView.stories.tsx

@@ -67,7 +67,8 @@ const jsonData = {
       longText:
         ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra at dolor eu egestas. Mauris bibendum a sem vel euismod. Proin vitae imperdiet diam. In sed gravida nisi, in convallis felis. Fusce convallis dapibus molestie. In tristique dapibus velit et rutrum. Nam vestibulum sodales tortor. Integer gravida aliquet sollicitudin. Duis at nulla varius, congue risus sit amet, gravida ipsum. Cras placerat pellentesque ipsum, a consequat magna pretium et. Duis placerat dui nisi, eget varius dui egestas eget. Etiam leo mauris, mattis et aliquam hendrerit, dapibus eu massa. Phasellus vitae vestibulum elit. Nulla congue eleifend massa at efficitur. '
     }
-  }
+  },
+  func: () => {}
 };
 
 export const Basic = Template.bind({});