From c05aab4e172fe3dc9eadba4c7fad1e00a5bb3f5e Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Wed, 25 Mar 2020 20:03:29 -0300
Subject: [PATCH] add colSpan support

---
 .../ui/src/components/TableCell/TableCell.jsx | 25 +++++++++----------
 .../ui/src/components/TableRow/TableRow.jsx   |  2 +-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/platform/ui/src/components/TableCell/TableCell.jsx b/platform/ui/src/components/TableCell/TableCell.jsx
index 9be82a5e5..e3c1a89b6 100644
--- a/platform/ui/src/components/TableCell/TableCell.jsx
+++ b/platform/ui/src/components/TableCell/TableCell.jsx
@@ -5,8 +5,11 @@ import classnames from 'classnames';
 const TableCell = ({
   children,
   className,
+  colSpan,
+  // ignored because we don't wan't to expose this prop
+  // eslint-disable-next-line react/prop-types
+  cellsNum,
   isTableHead,
-  size,
   align,
   style,
 }) => {
@@ -17,10 +20,6 @@ const TableCell = ({
       right: 'text-right',
       justify: 'text-justify',
     },
-    size: {
-      small: 'flex-0.3',
-      normal: 'flex-1',
-    },
     isTableHead: {
       true: '',
       false: 'border-r border-custom-violetPale',
@@ -31,7 +30,7 @@ const TableCell = ({
     <div
       className={classnames(
         'px-2 last:border-r-0 break-all',
-        classes.size[size],
+        `w-${colSpan}/${cellsNum}`,
         classes.align[align],
         classes.isTableHead[isTableHead],
         className
@@ -44,20 +43,20 @@ const TableCell = ({
 };
 
 TableCell.defaultProps = {
-  className: '',
-  isTableHead: false,
-  size: 'normal',
-  style: {},
   align: 'left',
+  className: '',
+  colSpan: 1,
+  isTableHead: false,
+  style: {},
 };
 
 TableCell.propTypes = {
-  isTableHead: PropTypes.bool,
+  align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'normal']),
+  colSpan: PropTypes.number,
+  isTableHead: PropTypes.bool,
   style: PropTypes.object,
-  align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
 };
 
 export default TableCell;
diff --git a/platform/ui/src/components/TableRow/TableRow.jsx b/platform/ui/src/components/TableRow/TableRow.jsx
index 6040af852..e8c1d243d 100644
--- a/platform/ui/src/components/TableRow/TableRow.jsx
+++ b/platform/ui/src/components/TableRow/TableRow.jsx
@@ -7,7 +7,7 @@ const TableRow = ({ children, className, isTableHead, style }) => {
     const isValidReactElement = React.isValidElement(child);
 
     return isValidReactElement
-      ? React.cloneElement(child, { isTableHead })
+      ? React.cloneElement(child, { isTableHead, cellsNum: children.length })
       : children;
   });