From 062b0f5b99cd5c3ab638fe2d52c2e19cc9e51ea7 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Tue, 24 Mar 2020 18:14:24 -0300
Subject: [PATCH] fix children check and custom propType checker

---
 .../ui/src/components/TableHead/TableHead.jsx | 29 ++++++++++++++++---
 .../ui/src/components/TableRow/TableRow.jsx   | 29 ++++++++++++++++---
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/platform/ui/src/components/TableHead/TableHead.jsx b/platform/ui/src/components/TableHead/TableHead.jsx
index 68f55ae02..038c7796d 100644
--- a/platform/ui/src/components/TableHead/TableHead.jsx
+++ b/platform/ui/src/components/TableHead/TableHead.jsx
@@ -11,9 +11,11 @@ const TableHead = ({ children, className, style }) => {
       )}
       style={style}
     >
-      {React.cloneElement(children, {
-        isTableHead: true,
-      })}
+      {React.isValidElement(children)
+        ? React.cloneElement(children, {
+            isTableHead: true,
+          })
+        : children}
     </div>
   );
 };
@@ -24,7 +26,26 @@ TableHead.defaultProps = {
 };
 
 TableHead.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: function(props, propName, componentName) {
+    const elements = React.Children.toArray(props.children);
+    const isString = elements.some(child => typeof child === 'string');
+
+    if (isString) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid element instead of a string.`
+      );
+    }
+
+    const isInvalidElement = elements.some(
+      child => !React.isValidElement(child)
+    );
+
+    if (isInvalidElement) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid node element.`
+      );
+    }
+  },
   className: PropTypes.string,
   style: PropTypes.object,
 };
diff --git a/platform/ui/src/components/TableRow/TableRow.jsx b/platform/ui/src/components/TableRow/TableRow.jsx
index 7a9052e2b..502ee983f 100644
--- a/platform/ui/src/components/TableRow/TableRow.jsx
+++ b/platform/ui/src/components/TableRow/TableRow.jsx
@@ -5,9 +5,11 @@ import classnames from 'classnames';
 const TableRow = ({ children, className, isTableHead, style }) => {
   return (
     <div className={classnames('w-full flex', className)} style={style}>
-      {React.Children.map(children, child =>
-        React.cloneElement(child, { isTableHead })
-      )}
+      {React.isValidElement(children)
+        ? React.Children.map(children, child =>
+            React.cloneElement(child, { isTableHead })
+          )
+        : children}
     </div>
   );
 };
@@ -20,7 +22,26 @@ TableRow.defaultProps = {
 
 TableRow.propTypes = {
   isTableHead: PropTypes.bool,
-  children: PropTypes.node.isRequired,
+  children: function(props, propName, componentName) {
+    const elements = React.Children.toArray(props.children);
+    const isString = elements.some(child => typeof child === 'string');
+
+    if (isString) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid element instead of a string.`
+      );
+    }
+
+    const isInvalidElement = elements.some(
+      child => !React.isValidElement(child)
+    );
+
+    if (isInvalidElement) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid node element.`
+      );
+    }
+  },
   className: PropTypes.string,
   style: PropTypes.object,
 };