@refinitiv-ui/efx-grid 6.0.15 → 6.0.16

package/lib/tr-grid-rowcoloring/es6/RowColoring.js

@@ -1,6 +1,7 @@
 import { Ext } from '../../tr-grid-util/es6/Ext.js';
 import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
 /** @typedef {Object} RowColoringPlugin~Options
 * @description The options can be specified by `rowColoring` property of the main grid's options:
 * @property {boolean=} bgColoring=true If disabled, background color will not be applied to the row
@@ -8,6 +9,8 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @property {string=} bgColorField="BG_COLOR" Apply background color based on the given field
 * @property {string=} textColorField="TEXT_COLOR" Apply text color based on the given field
 * @property {string=} cssField="CSS_CLASS" Apply CSS class based on the given field
+* @property {string=} cssRangeField="" Apply CSS class only on the given range field, which range will be array 2 element, the first element is start column used colour and the second one is the length of column applied
+* @property {string=} altCssField="" Apply alternative CSS class based on the given field which not in range field
 * @property {Object=} predefinedColors Predefined color object map
 * @property {boolean=} predefinedColoring=false If enabled, predefined colors will be used instead of inline styling. The bgColoring and textColoring will be turned off.
 */
@@ -16,79 +19,74 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @extends {GridPlugin}
 * @param {RowColoringPlugin~Options=} options
 */
-
 var RowColoringPlugin = function RowColoringPlugin(options) {
   this._onSectionBinding = this._onSectionBinding.bind(this);
   this._updateRowColor = this._updateRowColor.bind(this);
   this._hosts = [];
-
   if (options) {
     this.config({
       "rowColoring": options
     });
   }
 };
-
 Ext.inherits(RowColoringPlugin, GridPlugin);
+
 /** @type {string}
 * @private
 */
-
 RowColoringPlugin._controlClass = "predefined-color";
 /** @type {boolean}
 * @private
 */
-
 RowColoringPlugin.prototype._disabled = false;
 /** @type {string}
 * @private
 */
-
 RowColoringPlugin.prototype._bgField = "BG_COLOR";
 /** @type {string}
 * @private
 */
-
 RowColoringPlugin.prototype._txtColorField = "TEXT_COLOR";
 /** @type {string}
 * @private
 */
-
 RowColoringPlugin.prototype._cssField = "CSS_CLASS";
+/** @type {string}
+* @private
+*/
+RowColoringPlugin.prototype._cssRangeField = "";
+/** @type {string}
+* @private
+*/
+RowColoringPlugin.prototype._altCssField = "";
 /** @type {boolean}
 * @private
 */
-
 RowColoringPlugin.prototype._txtEnabled = true;
 /** @type {boolean}
 * @private
 */
-
 RowColoringPlugin.prototype._bgEnabled = true;
 /** @type {boolean}
 * @private
 */
-
 RowColoringPlugin.prototype._predefinedColoring = false;
 /** @type {Object}
 * @private
 */
-
 RowColoringPlugin.prototype._predefinedColors = null;
 /** @type {Object}
 * @private
 */
-
 RowColoringPlugin.prototype._styleTag = null;
 /** @type {number}
 * @private
 */
-
 RowColoringPlugin.prototype._updateTimer = 0;
+
 /** @public
 * @return {string}
 */
-
 RowColoringPlugin.prototype.getName = function () {
   return "RowColoringPlugin"; // Read Only
 };
@@ -96,15 +94,11 @@ RowColoringPlugin.prototype.getName = function () {
 * @param {Object} host core grid instance
 * @param {Object=} options
 */
-
-
 RowColoringPlugin.prototype.initialize = function (host, options) {
   if (this._hosts.indexOf(host) >= 0) {
     return;
   }
-
   this._hosts.push(host);
-
   host.listen("preSectionDataBinding", this._onSectionBinding);
   this.config(options);
   this._updateTimer = setTimeout(this._updateRowColor, 100); // For lazy loading
@@ -112,83 +106,67 @@ RowColoringPlugin.prototype.initialize = function (host, options) {
 /** @public
 * @param {Object} host core grid instance
 */
-
-
 RowColoringPlugin.prototype.unload = function (host) {
   var at = this._hosts.indexOf(host);
-
   if (at < 0) {
     return;
   }
-
   host.unlisten("preSectionDataBinding", this._onSectionBinding);
-
   this._hosts.splice(at, 1);
-
   if (!this._hosts.length) {
     if (this._updateTimer) {
       clearTimeout(this._updateTimer);
       this._updateTimer = 0;
     }
   }
-
   this._dispose();
 };
 /** @public
 * @param {Object=} options
 */
-
-
 RowColoringPlugin.prototype.config = function (options) {
   if (!options) {
     return;
   }
-
   var pluginOption = options["rowColoring"];
-
   if (pluginOption) {
     var bool = pluginOption["bgColoring"];
-
     if (bool != null) {
       this._bgEnabled = bool ? true : false;
     }
-
     bool = pluginOption["textColoring"];
-
     if (bool != null) {
       this._txtEnabled = bool ? true : false;
     }
-
     bool = pluginOption["predefinedColoring"];
-
     if (bool != null) {
       this._predefinedColoring = bool ? true : false;
-
       if (bool) {
         this._hosts[0].enableClass("predefined-color");
       }
     }
-
     if (pluginOption["bgColorField"] || pluginOption["textColorField"] || pluginOption["cssField"]) {
       var field = pluginOption["bgColorField"];
-
       if (field) {
         this._bgField = field;
       }
-
       field = pluginOption["textColorField"];
-
       if (field) {
         this._txtColorField = field;
       }
-
       field = pluginOption["cssField"];
-
       if (field) {
         this._cssField = field;
       }
+      field = pluginOption["cssRangeField"];
+      if (field) {
+        this._cssRangeField = field;
+      }
+      field = pluginOption["altCssField"];
+      if (field) {
+        this._altCssField = field;
+      }
     }
-
     if (pluginOption["predefinedColors"]) {
       this._injectStyles(pluginOption["predefinedColors"]);
     }
@@ -198,95 +176,78 @@ RowColoringPlugin.prototype.config = function (options) {
 * @param {Object=} gridOptions
 * @return {!Object}
 */
-
-
 RowColoringPlugin.prototype.getConfigObject = function (gridOptions) {
   var obj = gridOptions || {};
   var extOptions = obj.rowColoring;
-
   if (!extOptions) {
     extOptions = obj.rowColoring = {};
   }
-
   extOptions.bgColoring = this._bgEnabled;
   extOptions.textColoring = this._txtEnabled;
   extOptions.predefinedColoring = this._predefinedColoring;
-
   if (this._bgField !== "BG_COLOR") {
     extOptions.bgColorField = this._bgField;
   }
-
   if (this._txtColorField !== "TEXT_COLOR") {
     extOptions.textColorField = this._txtColorField;
   }
-
   if (this._cssField !== "CSS_CLASS") {
     extOptions.cssField = this._cssField;
   }
-
+  if (this._cssRangeField) {
+    extOptions.cssRangeField = this._cssRangeField;
+  }
+  if (this._altCssField) {
+    extOptions.altCssField = this._altCssField;
+  }
   if (this._predefinedColors) {
     extOptions.predefinedColors = this._predefinedColors;
   }
-
   return obj;
 };
+
 /** @public
 * @param {string|number} rowRef Row id in the data table or row index
 * @param {(string|null)=} bgColor
 * @param {(string|null)=} txtColor
 */
-
-
 RowColoringPlugin.prototype.setRowColor = function (rowRef, bgColor, txtColor) {
   var dv = this._getDataView();
-
   if (!dv) {
     return;
   }
-
   if (typeof rowRef === "string") {
     rowRef = dv.getRowIndex(rowRef);
   }
-
   if (rowRef == null || rowRef < 0) {
     return;
   }
-
-  var values = {}; // TODO: Allow customization of the default colors
-
+  var values = {};
+  // TODO: Allow customization of the default colors
   values[this._bgField] = bgColor || "";
   values[this._txtColorField] = txtColor || "";
-
   this._setRowData(dv, rowRef, values);
 };
 /** @public
 * @param {string|number} rowRef Row id in the data table or row index
 * @return {string} bgColor
 */
-
-
 RowColoringPlugin.prototype.getRowColor = function (rowRef) {
   var dv = this._getDataView();
-
   if (!dv) {
     return "";
   }
-
   if (typeof rowRef === "string") {
     rowRef = dv.getRowIndex(rowRef);
   }
-
   if (rowRef == null || rowRef < 0) {
     return "";
   }
-
   return this._getData(dv, rowRef, this._bgField) || "";
 };
 /** @public
 * @param {string|number} rowRef Row id in the data table or row index
 */
-
-
 RowColoringPlugin.prototype.removeRowColor = function (rowRef) {
   this.setRowColor(rowRef, "", "");
 };
@@ -297,57 +258,59 @@ RowColoringPlugin.prototype.removeRowColor = function (rowRef) {
 * @param {boolean=} state Specify this flag to force the color state
 * @return {boolean} Return current color state (after execution)
 */
-
-
 RowColoringPlugin.prototype.toggleRowColor = function (rowRef, bgColor, txtColor, state) {
   if (state == null) {
     state = this.getRowColor(rowRef) ? true : false;
   }
-
   if (state) {
     this.removeRowColor(rowRef);
   } else {
     this.setRowColor(rowRef, bgColor, txtColor);
   }
-
   return !state;
 };
 /** @public
+* @description Set predefined color into row reference
 * @param {string|number} rowRef Row id in the data table or row index
 * @param {(string|null)=} color Predefined color being applied to row
-*/
-
-
-RowColoringPlugin.prototype.setRowPredefinedColor = function (rowRef, color) {
+* @param {Array<number>=} range Range of column applied colour which array 2 element, the first element is start column used colour and the second one is the length of column applied, it doesn't provide a range, the columns will apply the colour all columns in row reference
+* @param {(string|null)=} altColor Alternative predefined color being applied to row if the column doesn't in the rage
+* @example
+* rowColoringExt.setRowPredefinedColor(2, "c-red") // set predefined color into row index 2 all row.
+* rowColoringExt.setRowPredefinedColor(2, "c-red", [2, 5]) // set predefined color into row index 2 and applied since column 2 and next 5 columns
+* rowColoringExt.setRowPredefinedColor(2, "c-red", [2]) // if pass only 1 element into rage parameter, the row will be applied since 2 to last column
+* rowColoringExt.setRowPredefinedColor(2, "c-red", [2, 5], "c-yellow") // set predefined color into row index 2 and applied since column 2 and next 5 columns and another column will be set color c-yellow
+*/
+RowColoringPlugin.prototype.setRowPredefinedColor = function (rowRef, color, range, altColor) {
   var dv = this._getDataView();
-
   if (!dv) {
     return;
   }
-
   if (typeof rowRef === "string") {
     rowRef = dv.getRowIndex(rowRef);
   }
-
   if (rowRef == null || rowRef < 0) {
     return;
   }
-
   this._setStaticData(dv, rowRef, this._cssField, color || "");
+  // eslint-disable-next-line no-undefined
+  if (this._cssRangeField && range !== undefined) {
+    this._setStaticData(dv, rowRef, this._cssRangeField, range);
+  }
+  // eslint-disable-next-line no-undefined
+  if (this._altCssField && altColor !== undefined) {
+    this._setStaticData(dv, rowRef, this._altCssField, altColor);
+  }
 };
 /** @public
 * @return {Object} Return predefined color object map
 */
-
-
 RowColoringPlugin.prototype.getPredefinedColors = function () {
   return this._predefinedColors;
 };
 /** @public
 * @param {Object} predefinedColors Predefined color object map
 */
-
-
 RowColoringPlugin.prototype.setPredefinedColors = function (predefinedColors) {
   if (predefinedColors != null) {
     this._injectStyles(predefinedColors);
@@ -356,40 +319,29 @@ RowColoringPlugin.prototype.setPredefinedColors = function (predefinedColors) {
 /** @private
 * @param {Object} predefinedColors Predefined color object map
 */
-
-
 RowColoringPlugin.prototype._injectStyles = function (predefinedColors) {
   var prefix = ".tr-grid." + RowColoringPlugin._controlClass + " .tr-lg .cell";
   var css = [];
   var ss, styles, value;
-
   for (var className in predefinedColors) {
     css.push(prefix + "." + className);
     ss = [];
     styles = predefinedColors[className];
     value = styles["backgroundColor"];
-
     if (value) {
       ss.push("background-color: " + value + ";");
     }
-
     value = styles["color"];
-
     if (value) {
       ss.push("color: " + value + ";");
     }
-
     css.push(ss);
   }
-
   var host = this._hosts[0];
-
   if (this._styleTag) {
     this._styleTag.parentNode.removeChild(this._styleTag);
-
     this._styleTag = null;
   }
-
   this._styleTag = injectCss(prettifyCss(css), host.getElement());
   this._predefinedColors = predefinedColors;
 };
@@ -398,73 +350,59 @@ RowColoringPlugin.prototype._injectStyles = function (predefinedColors) {
 * @param {Object} dv DataView
 * @return {string}
 */
-
-
 RowColoringPlugin.prototype._getRowId = function (rowRef, dv) {
   if (typeof rowRef === "number") {
     return dv ? dv.getRowId(rowRef) : "";
   } else if (typeof rowRef === "string") {
     return rowRef;
   }
-
   return "";
 };
 /** @private
 * @return {Object} DataView
 */
-
-
 RowColoringPlugin.prototype._getDataView = function () {
   var host = this._hosts[0];
   return host ? host.getDataSource() : null;
 };
+
 /** @public
 * @param {boolean=} opt_bool
 */
-
-
 RowColoringPlugin.prototype.disableTextColoring = function (opt_bool) {
   this._txtEnabled = opt_bool !== false;
 };
 /** @public
 * @param {boolean=} opt_bool
 */
-
-
 RowColoringPlugin.prototype.disableBgColoring = function (opt_bool) {
   this._bgEnabled = opt_bool !== false;
 };
 /** @public
 * @param {boolean=} disabled
 */
-
-
 RowColoringPlugin.prototype.disableRowColoring = function (disabled) {
   this._disabled = disabled !== false;
 };
+
 /** @public
 * @function
 * @param {string} hexColor
 * @return {string} color in CSS hex format (e.g. #FF00FF)
 */
-
-
 RowColoringPlugin.getContrastColor = function (hexColor) {
   if (!hexColor) {
     return '';
   }
-
   var hexInt = parseInt(hexColor.replace(/[^0-9A-F]/gi, ''), 16);
   var r = hexInt >> 16 & 255;
   var g = hexInt >> 8 & 255;
   var b = hexInt & 255;
   var brightness = Math.sqrt(r * r * 0.241 + g * g * 0.691 + b * b * 0.068);
-
   if (brightness >= 135) {
     // Brighter color has more impact to human eye than the darker color
     return '#000000';
   }
-
   return '#FFFFFF';
 };
 /** @public
@@ -472,89 +410,89 @@ RowColoringPlugin.getContrastColor = function (hexColor) {
 * @param {string} hexColor
 * @return {string} color in CSS hex format (e.g. #FF00FF)
 */
-
-
 RowColoringPlugin.prototype.getContrastColor = RowColoringPlugin.getContrastColor;
+
 /** @private
 * @param {Object} e
 */
-
 RowColoringPlugin.prototype._onSectionBinding = function (e) {
   if (e["sectionType"] === "content") {
     this._updateRowColor(e["fromRowIndex"], e["toRowIndex"]);
   }
 };
+
 /** @private
 * @param {number=} fromR from row index
 * @param {number=} toR to row index
 */
-
-
 RowColoringPlugin.prototype._updateRowColor = function (fromR, toR) {
   this._updateTimer = 0;
-
   if (this._disabled) {
     return;
   }
-
   var dv = this._getDataView();
-
   if (!dv) {
     return;
   }
-
   var host = this._hosts ? this._hosts[0] : null;
   var section = host ? host.getSection("content") : null;
-
   if (!section) {
     return;
   }
-
   if (!fromR) {
     fromR = section.getFirstIndexInView();
   }
-
   if (toR == null) {
     toR = section.getLastIndexInView() + 1;
-  } // TODO: consolidate the 2 separated flows
-
-
+  }
+  // TODO: consolidate the 2 separated flows
   var colCount = section.getColumnCount();
   var r, c, rowData, cell;
-
   if (this._predefinedColoring) {
     var cssField = this._cssField;
-    var className, el;
-
+    var altCssField = this._altCssField;
+    var rangeField = this._cssRangeField;
+    var className, el, start, end, altCssClass, range, colorSelected;
     for (r = fromR; r < toR; ++r) {
-      className = "";
+      className = altCssClass = "";
+      start = end = range = null;
       rowData = this._getRow(dv, r);
-
       if (rowData) {
         className = rowData[cssField] || "";
+        altCssClass = rowData[altCssField] || "";
+        range = rowData[rangeField];
+        if (Array.isArray(range)) {
+          start = range[0];
+          end = range[1] ? range[0] + range[1] : colCount; // handled case user provide only the start field (not provide the length of columns)
+        }
       }
 
       for (c = 0; c < colCount; ++c) {
         cell = section.getCell(c, r, false);
-
-        if (cell) {
-          el = cell.getElement();
-
-          if (el) {
-            if (el._coloringClass === className) {
-              continue;
-            }
-
-            if (el._coloringClass) {
-              el.classList.remove(el._coloringClass);
-              el._coloringClass = null;
-            }
-
-            if (className) {
-              el.classList.add(className);
-              el._coloringClass = className;
-            }
-          }
+        if (!cell) {
+          continue;
+        }
+        el = cell.getElement();
+        if (!el) {
+          continue;
+        }
+        if (className && range && (c < start || c > end)) {
+          // use alternative color
+          colorSelected = altCssClass;
+        } else {
+          // use normal color
+          colorSelected = className;
+        }
+        if (el._coloringClass === colorSelected) {
+          continue;
+        }
+        if (el._coloringClass) {
+          el.classList.remove(el._coloringClass);
+          el._coloringClass = "";
+        }
+        if (colorSelected) {
+          el.classList.add(colorSelected);
+          el._coloringClass = colorSelected;
         }
       }
     }
@@ -562,27 +500,21 @@ RowColoringPlugin.prototype._updateRowColor = function (fromR, toR) {
     var textColor, bgColor;
     var txtEnabled = this._txtEnabled;
     var bgEnabled = this._bgEnabled;
-
     for (r = fromR; r < toR; ++r) {
       textColor = bgColor = "";
       rowData = this._getRow(dv, r);
-
       if (rowData) {
         if (txtEnabled) {
           textColor = rowData[this._txtColorField] || "";
         }
-
         if (bgEnabled) {
           bgColor = rowData[this._bgField] || "";
         }
       }
-
       for (c = 0; c < colCount; ++c) {
         cell = section.getCell(c, r, false);
-
         if (cell) {
           el = cell.getElement();
-
           if (el) {
             if (textColor || el._textColor) {
               if (el._textColor !== textColor) {
@@ -590,7 +522,6 @@ RowColoringPlugin.prototype._updateRowColor = function (fromR, toR) {
                 el._textColor = textColor;
               }
             }
-
             if (bgColor || el._bgColor) {
               if (el._bgColor !== bgColor) {
                 cell.setStyle("backgroundColor", bgColor);
@@ -603,6 +534,5 @@ RowColoringPlugin.prototype._updateRowColor = function (fromR, toR) {
     }
   }
 };
-
 export default RowColoringPlugin;
 export { RowColoringPlugin, RowColoringPlugin as RowColoring, RowColoringPlugin as RowColoringExtension };

package/lib/versions.json

@@ -9,7 +9,7 @@
 	"tr-grid-checkbox": "1.0.59",
 	"tr-grid-column-fitter": "1.0.39",
 	"tr-grid-column-formatting": "0.9.34",
-	"tr-grid-column-grouping": "1.0.28",
+	"tr-grid-column-grouping": "1.0.29",
 	"tr-grid-column-resizing": "1.0.26",
 	"tr-grid-column-selection": "1.0.25",
 	"tr-grid-column-stack": "1.0.43",
@@ -24,14 +24,14 @@
 	"tr-grid-printer": "1.0.16",
 	"tr-grid-range-bar": "1.0.9",
 	"tr-grid-row-dragging": "1.0.23",
-	"tr-grid-row-filtering": "1.0.54",
+	"tr-grid-row-filtering": "1.0.55",
 	"tr-grid-row-grouping": "1.0.78",
 	"tr-grid-row-selection": "1.0.21",
-	"tr-grid-rowcoloring": "1.0.20",
+	"tr-grid-rowcoloring": "1.0.21",
 	"tr-grid-textformatting": "1.0.44",
 	"tr-grid-titlewrap": "1.0.19",
 	"@grid/formatters": "1.0.49",
 	"@grid/column-selection-dialog": "4.0.45",
-	"@grid/filter-dialog": "4.0.53",
+	"@grid/filter-dialog": "4.0.54",
 	"@grid/column-format-dialog": "4.0.43"
 }