fix: backwards compatibility support for react node for the cell (#123)

* fix: backwards compatibility support for react node for the cell

* chore: adds warning for unsupported type in ET data, adds test

Author: Gabriel Mičko

packages/react-expandable-table/src/index.js

@@ -29,6 +29,8 @@ import {
   getSortedData,
   onKeyboardSelect,
   filterDataForPagination,
+  isCell,
+  checkUnsupportedCellType,
 } from './utils';
 
 type Column = {
@@ -125,7 +127,7 @@ export const ItemWrapper = styled(
             bold={column.bold}
           >
             <Ellipsis>
-              {typeof data[column.key] === 'object'
+              {isCell(data[column.key]) && data[column.key].content != null
                 ? data[column.key].content
                 : data[column.key]}
             </Ellipsis>
@@ -168,6 +170,11 @@ const ExpandableTable = ({
   renderRow,
   ...props
 }: Props) => {
+  if (checkUnsupportedCellType(data)) {
+    console.warn(
+      '[react-expandable-table]: Unsupported cell type in data provided. Please use cell.raw & cell.content instead (example: https://ui.quid.com/#!/ExpandableTable).'
+    );
+  }
   const [sorting, setSorting] = React.useState({
     key: null,
     sort: null,

packages/react-expandable-table/src/index.test.js

@@ -523,7 +523,7 @@ it('checks for tooltip presence', () => {
   expect(open).toHaveBeenCalled();
 });
 
-it('content should be rendered when provided', () => {
+it('content with object or node should be rendered when provided', () => {
   const wrapper = mount(
     <ExpandableTable
       maxBodyHeight={300}
@@ -537,7 +537,7 @@ it('content should be rendered when provided', () => {
             raw: 'Hulk',
             content: <span data-context="hulk">Hulk</span>,
           },
-          rank: '2',
+          rank: <span data-context="rank">2</span>,
           mentions: '38',
           kol_score: '99.70%',
           reach: '99.45%',
@@ -547,4 +547,6 @@ it('content should be rendered when provided', () => {
   );
 
   expect(wrapper.find('[data-context="hulk"]').exists()).toBe(true);
+  //NOTE(gabrielmicko): to be deprecated soon
+  expect(wrapper.find('[data-context="rank"]').exists()).toBe(true);
 });

packages/react-expandable-table/src/types.js

@@ -7,17 +7,18 @@
 // @flow
 import * as React from 'react';
 export type ID = string | number;
-export type Label = string | number;
 export const ASC: 'asc' = 'asc';
 export const DESC: 'desc' = 'desc';
 export type SortOrder = Array<typeof ASC | typeof DESC | null>;
 
-export type Cell = {
-  raw: Label,
+export type CellObject = {|
+  raw: string | number,
   content: React.Node,
-};
+|};
+
+export type Cell = CellObject | React.Node;
 
 export type Data = {
   id: ID,
-  [string]: Label | Cell,
+  [string]: Cell,
 };

packages/react-expandable-table/src/utils.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 // @flow
-import { ASC, DESC, type Data } from './types';
+import { ASC, DESC, type Data, type Cell } from './types';
 
 export const getSortedData = (
   data: Array<Data>,
@@ -15,10 +15,10 @@ export const getSortedData = (
   if (data.length && sortOrder && sortBy) {
     return [...data].sort((a, b) => {
       const valueA = String(
-        typeof a[sortBy] === 'object' ? a[sortBy].raw : a[sortBy]
+        isCell(a[sortBy]) && a[sortBy].raw != null ? a[sortBy].raw : a[sortBy]
       );
       const valueB = String(
-        typeof b[sortBy] === 'object' ? b[sortBy].raw : b[sortBy]
+        isCell(b[sortBy]) && b[sortBy].raw != null ? b[sortBy].raw : b[sortBy]
       );
       const parsedA = parseFloat(valueA);
       const parsedB = parseFloat(valueB);
@@ -57,3 +57,26 @@ export const filterDataForPagination = (
   }
   return data;
 };
+
+export const isCell = (value: Cell): boolean %checks => {
+  return (
+    value != null &&
+    typeof value === 'object' &&
+    value.hasOwnProperty('raw') &&
+    value.hasOwnProperty('content')
+  );
+};
+
+//NOTE(gabrielmicko): Supporting React.Node for the cell directly is deprecated.
+//We have a check that ensures it stays working, but will be removed in the future.
+//In case React.Node is needed we encourage using CellObject instead.
+export const checkUnsupportedCellType = (data: Array<Data>): boolean =>
+  data.some(row =>
+    Object.values(row).some(
+      value =>
+        value != null &&
+        typeof value === 'object' &&
+        (value.hasOwnProperty('raw') === false ||
+          value.hasOwnProperty('content') === false)
+    )
+  );