- handle widgetType Color in table cells #1603

metasfresh · Apr 25, 2018 · 56fbc2a · 56fbc2a
1 parent 5ede33e
commit 56fbc2a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/components/table/TableCell.js b/src/components/table/TableCell.js
@@ -8,6 +8,7 @@ import MasterWidget from '../widget/MasterWidget';
 import {
   AMOUNT_FIELD_TYPES,
   AMOUNT_FIELD_FORMATS_BY_PRECISION,
+  SPECIAL_FIELD_TYPES,
   DATE_FIELD_TYPES,
   DATE_FIELD_FORMATS,
 } from '../../constants/Constants';
@@ -40,6 +41,19 @@ class TableCell extends PureComponent {
     }
   };
 
+  static createSpecialField = (fieldType, fieldValue) => {
+    switch (fieldType) {
+      case 'Color': {
+        const style = {
+          backgroundColor: fieldValue,
+        };
+        return <span className="widget-color-display" style={style} />;
+      }
+      default:
+        return fieldValue;
+    }
+  };
+
   static fieldValueToString = (
     fieldValue,
     fieldType = 'Text',
@@ -73,6 +87,8 @@ class TableCell extends PureComponent {
           return TableCell.createDate(fieldValue, fieldType);
         } else if (AMOUNT_FIELD_TYPES.includes(fieldType)) {
           return TableCell.createAmount(fieldValue, precision);
+        } else if (SPECIAL_FIELD_TYPES.includes(fieldType)) {
+          return TableCell.createSpecialField(fieldType, fieldValue);
         }
         return fieldValue;
       }
@@ -208,9 +224,13 @@ class TableCell extends PureComponent {
           />
         ) : (
           <div
-            className="cell-text-wrapper"
+            className={classnames('cell-text-wrapper', {
+              [`${item.widgetType}-cell`]: item.widgetType,
+            })}
             title={
-              item.widgetType === 'YesNo' || item.widgetType === 'Switch'
+              item.widgetType === 'YesNo' ||
+              item.widgetType === 'Switch' ||
+              item.widgetType === 'Color'
                 ? ''
                 : tdValue
             }

diff --git a/src/constants/Constants.js b/src/constants/Constants.js
@@ -14,6 +14,7 @@ export const AMOUNT_FIELD_FORMATS_BY_PRECISION = [
   '0,0.0000[0]',
   '0,0.00000',
 ];
+export const SPECIAL_FIELD_TYPES = ['Color'];
 export const DATE_FIELD_TYPES = ['Date', 'DateTime', 'Time'];
 export const DATE_FIELD_FORMATS = {
   Date: 'l',