From 289164d213fc5cfc6b866816b118aaac2075652c Mon Sep 17 00:00:00 2001
From: "damian.przygodzki" <damian.przygodzki@jazzy.pro>
Date: Wed, 24 May 2017 09:31:30 +0200
Subject: [PATCH] #772 Size column property

---
 src/assets/css/table.css            | 25 ++++++++------------
 src/components/table/Table.js       | 36 ++++++++++++++++++++++++-----
 src/components/table/TableCell.js   | 13 ++---------
 src/components/table/TableHeader.js | 19 +++------------
 src/components/table/TableItem.js   | 14 +++--------
 5 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/src/assets/css/table.css b/src/assets/css/table.css
index 73a431e34..6ef3ca309 100644
--- a/src/assets/css/table.css
+++ b/src/assets/css/table.css
@@ -251,38 +251,31 @@ th {
     position: relative;
 }
 
-.th-lg {
-    width: 200px;
+/* Table cols sizing */
+
+.td-lg {
+    width: 225px;
+    max-width: 225px;
 }
 
-.th-md {
-    width: 100px;
+.td-md {
+    width: 144px;
+    max-width: 144px;
 }
 
-.th-sm {
+.td-sm {
     min-width: 60px;
     max-width: 100px;
 }
 
-.table .td-lg {
-    width: 225px;
-    max-width: 225px;
-}
-
 .td-lg .input-dropdown-list {
     width: 225px;
 }
 
-.table .td-md {
-    width: 144px;
-    max-width: 144px;
-}
-
 .td-lg .input-dropdown-list {
     width: auto;
 }
 
-
 .pagination {
     margin-top: 0;
     margin-bottom: 0;
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index b43e28a8a..5c910c45d 100644
--- a/src/components/table/Table.js
+++ b/src/components/table/Table.js
@@ -611,6 +611,31 @@ class Table extends Component {
         }
     }
 
+    getSizeClass = (col) => {
+        const {widgetType, size} = col;
+        const lg = ['List', 'Lookup', 'LongText', 'Date', 'DateTime', 'Time'];
+        const md = ['Text', 'Address', 'ProductAttributes'];
+
+        if(size){
+            switch(size){
+                case 'S':
+                    return 'td-sm';
+                case 'M':
+                    return 'td-md';
+                case 'L':
+                    return 'td-lg';
+            }
+        }else{
+            if(lg.indexOf(widgetType) > -1){
+                return 'td-lg';
+            }else if(md.indexOf(widgetType) > -1){
+                return 'td-md';
+            }else {
+                return 'td-sm';
+            }
+        }
+    }
+
     renderTableBody = () => {
         const {
             tabid, cols, type, docId, readonly, keyProperty, onDoubleClick,
@@ -670,6 +695,7 @@ class Table extends Component {
                                 item[key].saveStatus &&
                                 !item[key].saveStatus.saved
                             }
+                            getSizeClass={this.getSizeClass}
                         />
                     </tbody>
                 );
@@ -792,13 +818,11 @@ class Table extends Component {
                         >
                             <thead>
                                 <TableHeader
-                                    cols={cols}
-                                    mainTable={mainTable}
-                                    sort={sort}
-                                    orderBy={orderBy}
+                                    {...{cols, mainTable, sort,
+                                        orderBy, page, indentSupported
+                                    }}
+                                    getSizeClass={this.getSizeClass}
                                     deselect={this.deselectAllProducts}
-                                    page={page}
-                                    indentSupported={indentSupported}
                                 />
                             </thead>
                             {this.renderTableBody()}
diff --git a/src/components/table/TableCell.js b/src/components/table/TableCell.js
index 53a4eb5a0..0cf12cae4 100644
--- a/src/components/table/TableCell.js
+++ b/src/components/table/TableCell.js
@@ -101,7 +101,7 @@ class TableCell extends Component {
         const {
             isEdited, widgetData, item, docId, type, rowId, tabId,
             onDoubleClick, onKeyDown, readonly, updatedRow, tabIndex, entity,
-            listenOnKeys, listenOnKeysFalse, closeTableField
+            listenOnKeys, listenOnKeysFalse, closeTableField, getSizeClass
         } = this.props;
 
         return (
@@ -114,16 +114,7 @@ class TableCell extends Component {
                     (item.gridAlign ? 'text-xs-' + item.gridAlign + ' ' : '') +
                     (widgetData[0].readonly ? 'cell-disabled ' : '') +
                     (widgetData[0].mandatory ? 'cell-mandatory ' : '') +
-                    (item.widgetType==='Lookup' ||
-                        item.widgetType==='LongText' ||
-                        item.widgetType==='List' ||
-                        item.widgetType==='Date' ||
-                        item.widgetType==='DateTime' ||
-                        item.widgetType==='Time' ?
-                            'td-lg ' : '') +
-                    (item.widgetType==='ProductAttributes' ? 'td-md ' : '') +
-                    (item.widgetType==='Address' ? 'td-md ' : '') +
-                    (item.widgetType==='Text' ? 'td-md ' : '') +
+                    (getSizeClass(item) + ' ') +
                     (item.widgetType) +
                     ((updatedRow) ? ' pulse-on' : ' pulse-off')
                 }
diff --git a/src/components/table/TableHeader.js b/src/components/table/TableHeader.js
index d8960dce3..d75e57a08 100644
--- a/src/components/table/TableHeader.js
+++ b/src/components/table/TableHeader.js
@@ -5,19 +5,6 @@ class TableHeader extends Component {
         super(props);
     }
 
-    getSizeClass = (widgetType) => {
-        const lg = ['List', 'Lookup', 'LongText'];
-        const md = ['DateTime', 'Date', 'Time', 'Text'];
-
-        if(lg.indexOf(widgetType) > -1){
-            return 'th-lg';
-        }else if(md.indexOf(widgetType) > -1){
-            return 'th-md';
-        }else {
-            return 'th-sm';
-        }
-    }
-
     renderSorting = (field, caption) => {
         const {sort, orderBy, deselect, page} = this.props;
         let sorting = {};
@@ -54,12 +41,12 @@ class TableHeader extends Component {
     }
 
     renderCols = (cols, mainTable) => {
+        const {getSizeClass} = this.props;
+
         return cols && cols.map((item, index) =>
             <th
                 key={index}
-                className={
-                    this.getSizeClass(item.widgetType)
-                }
+                className={getSizeClass(item)}
             >
                 {!mainTable ? item.caption: ''}
                 {mainTable ?
diff --git a/src/components/table/TableItem.js b/src/components/table/TableItem.js
index 5419da978..6370cfb1a 100644
--- a/src/components/table/TableItem.js
+++ b/src/components/table/TableItem.js
@@ -102,7 +102,7 @@ class TableItem extends Component {
     renderCells = (cols, cells) => {
         const {
             type, docId, rowId, tabId, readonly, mainTable, newRow,
-            changeListenOnTrue, tabIndex, entity
+            changeListenOnTrue, tabIndex, entity, getSizeClass
         } = this.props;
 
         const {
@@ -118,15 +118,9 @@ class TableItem extends Component {
 
             return (
                 <TableCell
-                    entity={entity}
-                    type={type}
-                    docId={docId}
-                    rowId={rowId}
-                    tabId={tabId}
-                    item={item}
-                    readonly={readonly}
+                    {...{getSizeClass, entity, type, docId, rowId, tabId, item,
+                        readonly, widgetData, tabIndex, listenOnKeys }}
                     key={index}
-                    widgetData={widgetData}
                     isEdited={edited === property}
                     onDoubleClick={(e) =>
                         this.handleEditProperty(e, property, true)
@@ -140,8 +134,6 @@ class TableItem extends Component {
                     }
                     updatedRow={updatedRow || newRow}
                     updateRow={this.updateRow}
-                    tabIndex={tabIndex}
-                    listenOnKeys={listenOnKeys}
                     listenOnKeysFalse={this.listenOnKeysFalse}
                     closeTableField={(e) => this.closeTableField(e)}
                 />