fix: support function component with hooks (#80)

* fix: support function component with hooks

* update type

Author: nihgwu

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## NEXT VERSION
 
+- fix: custom renderers should support function component with hooks
+
 ## v1.7.1 (2019-08-22)
 
 - fix: `scrollToRow` doesn't work regression introduced in #73

src/BaseTable.js

@@ -985,25 +985,25 @@ BaseTable.propTypes = {
   /**
    * Custom renderer on top of the table component
    */
-  overlayRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  overlayRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   /**
    * Custom renderer when the length of data is 0
    */
-  emptyRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  emptyRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   /**
    * Custom footer renderer, available only if `footerHeight` is larger then 0
    */
-  footerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  footerRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   /**
    * Custom header renderer
    * The renderer receives props `{ cells, columns, headerIndex }`
    */
-  headerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  headerRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   /**
    * Custom row renderer
    * The renderer receives props `{ isScrolling, cells, columns, rowData, rowIndex, depth }`
    */
-  rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  rowRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   /**
    * Class name for the table header, could be a callback to return the class name
    * The callback is of the shape of `({ columns, headerIndex }) => string`

src/Column.js

@@ -91,12 +91,12 @@ Column.propTypes = {
    * Custom column cell renderer
    * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }`
    */
-  cellRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  cellRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   /**
    * Custom column header renderer
    * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }`
    */
-  headerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  headerRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
 };
 
 Column.Alignment = Alignment;

src/TableHeaderRow.js

@@ -50,7 +50,7 @@ TableHeaderRow.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   headerIndex: PropTypes.number,
   cellRenderer: PropTypes.func,
-  headerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  headerRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   expandColumnKey: PropTypes.string,
   expandIcon: PropTypes.func,
   tagName: PropTypes.elementType,

src/TableRow.js

@@ -125,7 +125,7 @@ TableRow.propTypes = {
   expandColumnKey: PropTypes.string,
   depth: PropTypes.number,
   rowEventHandlers: PropTypes.object,
-  rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  rowRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
   cellRenderer: PropTypes.func,
   expandIconRenderer: PropTypes.func,
   onRowHover: PropTypes.func,

src/utils.js

@@ -1,17 +1,12 @@
 import React from 'react';
 
 export function renderElement(renderer, props) {
+  if (!renderer) return null;
+
   if (React.isValidElement(renderer)) {
     return React.cloneElement(renderer, props);
-  } else if (typeof renderer === 'function') {
-    if (renderer.prototype && renderer.prototype.isReactComponent) {
-      return React.createElement(renderer, props);
-    } else if (renderer.defaultProps) {
-      return renderer({ ...renderer.defaultProps, ...props });
-    }
-    return renderer(props);
   } else {
-    return null;
+    return React.createElement(renderer, props);
   }
 }