fix: Fix for null/undefined column

fix for null/undefined column to render "-"

Change-Id: Ic6bd5b66ff2ba06f4ac3623eac76e0e754fd46e6

src/components/Tables/Base/index.jsx

@@ -41,6 +41,7 @@ import {
   getValueRenderFunc,
 } from 'utils/table';
 import { getNoValue } from 'utils/index';
+import { columnRender } from 'utils/render';
 import { getLocalStorageItem, setLocalStorageItem } from 'utils/local-storage';
 import { inject } from 'mobx-react';
 import CustomColumns from './CustomColumns';
@@ -481,7 +482,11 @@ export default class BaseTable extends React.Component {
       if (newRender) {
         newColumn.render = newRender;
       }
-      return newColumn;
+      return {
+        ...newColumn,
+        render: (value, record) =>
+          columnRender(newColumn.render, value, record),
+      };
     });
 
   getColumns = () => {

src/utils/render.js

@@ -0,0 +1,21 @@
+import { isBoolean, isNil, isObjectLike } from 'lodash';
+
+export function getStringValue(value) {
+  if (
+    isNil(value) ||
+    (isObjectLike(value) && Object.keys(value).length === 0)
+  ) {
+    return '-';
+  }
+  if (isBoolean(value)) {
+    return value.toString();
+  }
+  return value;
+}
+
+export function columnRender(render, value, record) {
+  if (render) {
+    return getStringValue(render(value, record));
+  }
+  return getStringValue(value);
+}

src/utils/render.test.js

@@ -0,0 +1,66 @@
+import { columnRender } from './render';
+
+describe('render test', () => {
+  it('column render', () => {
+    expect(columnRender(undefined, 'normal')).toBe('normal');
+    expect(columnRender(undefined, 0)).toBe(0);
+    expect(columnRender(undefined, false)).toBe('false');
+    expect(columnRender(undefined, true)).toBe('true');
+    expect(columnRender(undefined, [])).toBe('-');
+    expect(columnRender(undefined, {})).toBe('-');
+    expect(columnRender(undefined, undefined)).toBe('-');
+    expect(columnRender(undefined, null)).toBe('-');
+
+    expect(columnRender(() => 0, undefined)).toBe(0);
+    expect(columnRender(() => false, undefined)).toBe('false');
+    expect(columnRender(() => true, undefined)).toBe('true');
+    expect(columnRender(() => [], undefined)).toBe('-');
+    expect(columnRender(() => [1, 2, 3].join(','), undefined)).toBe('1,2,3');
+    expect(columnRender(() => {}, undefined)).toBe('-');
+    expect(columnRender(() => undefined, undefined)).toBe('-');
+    expect(columnRender(() => null, undefined)).toBe('-');
+
+    expect(columnRender(() => null, 0)).toBe('-');
+    expect(columnRender(() => 0, 0)).toBe(0);
+    expect(columnRender(() => false, 0)).toBe('false');
+    expect(columnRender(() => [], 0)).toBe('-');
+    expect(columnRender(() => {}, 0)).toBe('-');
+
+    expect(
+      columnRender(
+        (value) => {
+          return value + 1;
+        },
+        0,
+        { val: 1 }
+      )
+    ).toBe(1);
+    expect(
+      columnRender(
+        (_, record) => {
+          return record.val + 1;
+        },
+        0,
+        { val: 1 }
+      )
+    ).toBe(2);
+    expect(
+      columnRender(
+        (_, record) => {
+          return record.otherVal + 1;
+        },
+        0,
+        { val: 1 }
+      )
+    ).toBe(NaN);
+    expect(
+      columnRender(
+        (_, record) => {
+          return record.otherVal;
+        },
+        0,
+        { val: 1 }
+      )
+    ).toBe('-');
+  });
+});