Revert "fix: support function component with hooks (#80)" (#109)

* Revert "fix: support function component with hooks (#80)"

This reverts commit 342bcf6.

* changelog

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## NEXT VERSION
 
+- reverted #80, now custom renderer doesn't support top level hooks, see #109
+
 ## v1.9.0 (2019-09-24)
 
 - feat: add `onColumnResizeEnd` prop to `BaseTable`
@@ -21,7 +23,7 @@
 
 ## v1.7.2 (2019-08-26)
 
-- fix: custom renderers should support function component with hooks
+- ~~fix: custom renderers should support function component with hooks~~
 
 ## v1.7.1 (2019-08-22)
 

src/BaseTable.js

@@ -993,25 +993,25 @@ BaseTable.propTypes = {
   /**
    * Custom renderer on top of the table component
    */
-  overlayRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
+  overlayRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   /**
    * Custom renderer when the length of data is 0
    */
-  emptyRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
+  emptyRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   /**
    * Custom footer renderer, available only if `footerHeight` is larger then 0
    */
-  footerRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
+  footerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   /**
    * Custom header renderer
    * The renderer receives props `{ cells, columns, headerIndex }`
    */
-  headerRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
+  headerRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   /**
    * Custom row renderer
    * The renderer receives props `{ isScrolling, cells, columns, rowData, rowIndex, depth }`
    */
-  rowRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
+  rowRenderer: PropTypes.oneOfType([PropTypes.func, 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.elementType, PropTypes.element]),
+  cellRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   /**
    * Custom column header renderer
    * The renderer receives props `{ columns, column, columnIndex, headerIndex, container }`
    */
-  headerRenderer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element]),
+  headerRenderer: PropTypes.oneOfType([PropTypes.func, 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.elementType, PropTypes.element]),
+  headerRenderer: PropTypes.oneOfType([PropTypes.func, 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.elementType, PropTypes.element]),
+  rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   cellRenderer: PropTypes.func,
   expandIconRenderer: PropTypes.func,
   onRowHover: PropTypes.func,

src/utils.js

@@ -1,12 +1,17 @@
 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 React.createElement(renderer, props);
+    return null;
   }
 }