@refinitiv-ui/efx-grid 6.0.59 → 6.0.60

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

@@ -99,7 +99,7 @@ RowColoringPlugin.prototype.initialize = function (host, options) {
     return;
   }
   this._hosts.push(host);
-  host.listen("postSectionDataBinding", this._onSectionBinding);
+  host.listen("preSectionDataBinding", this._onSectionBinding);
   this.config(options);
   this._updateTimer = setTimeout(this._updateRowColor, 100); // For lazy loading
 };
@@ -111,7 +111,7 @@ RowColoringPlugin.prototype.unload = function (host) {
   if (at < 0) {
     return;
   }
-  host.unlisten("postSectionDataBinding", this._onSectionBinding);
+  host.unlisten("preSectionDataBinding", this._onSectionBinding);
   this._hosts.splice(at, 1);
   if (!this._hosts.length) {
     if (this._updateTimer) {
@@ -422,6 +422,141 @@ RowColoringPlugin.prototype._onSectionBinding = function (e) {
   }
 };
 
+/** @private
+* @param {Object} section
+* @param {number} fromR from row index
+* @param {number} toR to row index
+* @param {boolean=} forceUpdate force update coloring
+*/
+RowColoringPlugin.prototype._applyColor = function (section, fromR, toR, forceUpdate) {
+  var colCount = section.getColumnCount();
+  var dv = this._getDataView();
+  var textColor, bgColor, el, cell, stretchedCell;
+  var txtEnabled = this._txtEnabled;
+  var bgEnabled = this._bgEnabled;
+  for (var r = fromR; r < toR; ++r) {
+    textColor = bgColor = "";
+    var rowData = this._getRow(dv, r);
+    if (rowData) {
+      if (txtEnabled) {
+        textColor = rowData[this._txtColorField] || "";
+      }
+      if (bgEnabled) {
+        bgColor = rowData[this._bgField] || "";
+      }
+    }
+    stretchedCell = section.getStretchedCell(null, r);
+    if (stretchedCell) {
+      el = stretchedCell.getElement();
+      if (textColor || el._textColor) {
+        if (el._textColor !== textColor || forceUpdate) {
+          stretchedCell.setStyle("color", textColor);
+          el._textColor = textColor;
+        }
+      }
+      if (bgColor || el._bgColor) {
+        if (el._bgColor !== bgColor || forceUpdate) {
+          stretchedCell.setStyle("backgroundColor", bgColor);
+          el._bgColor = bgColor;
+        }
+      }
+    }
+    for (var c = 0; c < colCount; ++c) {
+      cell = section.getCell(c, r, false);
+      if (!cell) {
+        continue;
+      }
+      el = cell.getElement();
+      if (!el) {
+        continue;
+      }
+      if (textColor || el._textColor) {
+        if (el._textColor !== textColor || forceUpdate) {
+          cell.setStyle("color", textColor);
+          el._textColor = textColor;
+        }
+      }
+      if (bgColor || el._bgColor) {
+        if (el._bgColor !== bgColor || forceUpdate) {
+          cell.setStyle("backgroundColor", bgColor);
+          el._bgColor = bgColor;
+        }
+      }
+    }
+  }
+};
+
+/** @private
+* @param {Object} section
+* @param {number} fromR from row index
+* @param {number} toR to row index
+*/
+RowColoringPlugin.prototype._applyPredefinedColor = function (section, fromR, toR) {
+  var colCount = section.getColumnCount();
+  var dv = this._getDataView();
+  var cssField = this._cssField;
+  var altCssField = this._altCssField;
+  var rangeField = this._cssRangeField;
+  var className, el, start, end, altCssClass, range, colorSelected, stretchedCell, cell;
+  for (var r = fromR; r < toR; ++r) {
+    className = altCssClass = "";
+    start = end = range = null;
+    var 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)
+      }
+    }
+
+    stretchedCell = section.getStretchedCell(null, r);
+    if (stretchedCell) {
+      el = stretchedCell.getElement();
+      if (el._coloringClass !== className) {
+        if (el._coloringClass) {
+          el.classList.remove(el._coloringClass);
+          el._coloringClass = "";
+        }
+        if (className) {
+          el.classList.add(className);
+          el._coloringClass = className;
+        }
+      }
+    }
+    for (var c = 0; c < colCount; ++c) {
+      cell = section.getCell(c, r, false);
+      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;
+      }
+    }
+  }
+};
+
 /** @private
 * @param {number=} fromR from row index
 * @param {number=} toR to row index
@@ -447,124 +582,33 @@ RowColoringPlugin.prototype._updateRowColor = function (fromR, toR) {
     toR = section.getLastIndexInView() + 1;
   }
   // TODO: consolidate the 2 separated flows
-  var colCount = section.getColumnCount();
-  var r, c, rowData, cell;
   if (this._predefinedColoring) {
-    var cssField = this._cssField;
-    var altCssField = this._altCssField;
-    var rangeField = this._cssRangeField;
-    var className, el, start, end, altCssClass, range, colorSelected, stretchedCell;
-    for (r = fromR; r < toR; ++r) {
-      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)
-        }
-      }
-
-      stretchedCell = section.getStretchedCell(null, r);
-      if (stretchedCell) {
-        el = stretchedCell.getElement();
-        if (el._coloringClass !== className) {
-          if (el._coloringClass) {
-            el.classList.remove(el._coloringClass);
-            el._coloringClass = "";
-          }
-          if (className) {
-            el.classList.add(className);
-            el._coloringClass = className;
-          }
-        }
-      }
-      for (c = 0; c < colCount; ++c) {
-        cell = section.getCell(c, r, false);
-        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;
-        }
-      }
-    }
+    this._applyPredefinedColor(section, fromR, toR);
   } else {
-    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] || "";
-        }
-      }
-      stretchedCell = section.getStretchedCell(null, r);
-      if (stretchedCell) {
-        el = stretchedCell.getElement();
-        if (textColor || el._textColor) {
-          if (el._textColor !== textColor) {
-            stretchedCell.setStyle("color", textColor);
-            el._textColor = textColor;
-          }
-        }
-        if (bgColor || el._bgColor) {
-          if (el._bgColor !== bgColor) {
-            stretchedCell.setStyle("backgroundColor", bgColor);
-            el._bgColor = bgColor;
-          }
-        }
-      }
-      for (c = 0; c < colCount; ++c) {
-        cell = section.getCell(c, r, false);
-        if (!cell) {
-          continue;
-        }
-        el = cell.getElement();
-        if (!el) {
-          continue;
-        }
-        if (textColor || el._textColor) {
-          if (el._textColor !== textColor) {
-            cell.setStyle("color", textColor);
-            el._textColor = textColor;
-          }
-        }
-        if (bgColor || el._bgColor) {
-          if (el._bgColor !== bgColor) {
-            cell.setStyle("backgroundColor", bgColor);
-            el._bgColor = bgColor;
-          }
-        }
-      }
-    }
+    this._applyColor(section, fromR, toR);
+  }
+};
+/** @public
+*/
+RowColoringPlugin.prototype.forceUpdateRowColor = function () {
+  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;
+  }
+  var fromR = section.getFirstIndexInView();
+  var toR = section.getLastIndexInView() + 1;
+  if (this._predefinedColoring) {
+    this._applyPredefinedColor(section, fromR, toR);
+  } else {
+    this._applyColor(section, fromR, toR, true);
   }
 };
 export default RowColoringPlugin;

package/lib/tr-grid-util/es6/CellPainter.d.ts

@@ -70,6 +70,10 @@ declare class CellPainter {
 
     public getColoringType(): CellPainter.ColoringTypes|null;
 
+    public setEffectiveStyles(mapping: any): void;
+
+    public getEffectiveStyles(): any;
+
     public setConditions(conditions: (CellPainter.Condition)[]|null): void;
 
     public setColumnStats(columnStats: any): void;

package/lib/tr-grid-util/es6/CellPainter.js

@@ -62,6 +62,10 @@ CellPainter.prototype._conditions = null;
 /** @type {Object}
 * @private
 */
+CellPainter.prototype._effectiveStyles = null;
+/** @type {Object}
+* @private
+*/
 CellPainter.prototype._blinkCondition = null;
 /** @type {!Array}
 * @private
@@ -185,6 +189,7 @@ CellPainter.prototype.reset = function() {
 CellPainter.prototype.resetColoring = function() {
 	// reset coloring type to allow other extensions to be able to set their new mode
 	this._setColoringType(0);
+	this._effectiveStyles = null;
 	this._conditions.length = 0;
 };
 
@@ -284,6 +289,18 @@ CellPainter.prototype._setColoringType = function(enumType) {
 	}
 };
 /** @public
+* @param {Object} mapping Effective styles mapping
+*/
+CellPainter.prototype.setEffectiveStyles = function(mapping) {
+	this._effectiveStyles = mapping;
+};
+/** @public
+* @return {Object}
+*/
+CellPainter.prototype.getEffectiveStyles = function() {
+	return this._effectiveStyles;
+};
+/** @public
 * @param {Array.<CellPainter~Condition>} conditions
 */
 CellPainter.prototype.setConditions = function(conditions) {
@@ -901,9 +918,17 @@ CellPainter.clearCellStyle = function(cell, styles) {
 		elem.classList.remove(elem._coloringCssClass);
 	}
 
-	styles = styles || CellPainter.supportedStyles;
-	for(var i = styles.length; --i >= 0;) {
-		elem.style[styles[i]] = "";  // WARNING: Very slow
+	if(!styles){
+		styles = CellPainter.supportedStyles;
+	}
+	if(Array.isArray(styles)){
+		for(var i = styles.length; --i >= 0;) {
+			elem.style[styles[i]] = "";  // WARNING: Very slow
+		}
+	} else {
+		for(var key in styles) {
+			elem.style[key] = "";  // WARNING: Very slow
+		}
 	}
 };
 /** @private
@@ -1025,26 +1050,29 @@ CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
 	}
 
 	var styles = this._getStyles(rowData, min, max);
+
+	var elStyle = elem.style;
+
 	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
+		elem.classList.remove(elem._coloringCssClass);
+		elem._coloringCssClass = null;
+	}
 	if (cssClass != null) { // Predefined colors mode
-		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
-			elem.classList.remove(elem._coloringCssClass);
-			elem._coloringCssClass = null;
-		}
 		if (cssClass) {
 			elem.classList.add(cssClass);
 			elem._coloringCssClass = cssClass;
 		}
 	} else {
-		if (elem._coloringCssClass) {
-			elem.classList.remove(elem._coloringCssClass);
-			elem._coloringCssClass = null;
+		if(styles["backgroundColor"]){
+			elStyle.backgroundColor = styles["backgroundColor"];
+		} else if(!this._effectiveStyles || this._effectiveStyles["backgroundColor"]){
+			elStyle.backgroundColor = "";
 		}
-		var ss = CellPainter.bgStyles;
-		var elStyle = elem.style;
-		for (var n = ss.length; --n >= 0;) {
-			var styleName = ss[n];
-			elStyle[styleName] = styles[styleName] || "";
+		if(styles["color"]){
+			elStyle.color = styles["color"];
+		} else if(!this._effectiveStyles || this._effectiveStyles["color"]){
+			elStyle.color = "";
 		}
 	}
 };

package/lib/tr-grid-util/es6/SubTable.js

@@ -2,6 +2,18 @@ import { Dom } from "./Dom.js";
 import { Ext } from "./Ext.js";
 import { ElementWrapper } from "./ElementWrapper.js";
 
+/** @private
+* @function
+* @param {Element} parentElem tr element
+* @param {number} count Number of elements to be added
+* @param {string} childTag Tag name of the cells
+*/
+var _addElements = function(parentElem, count, childTag) {
+	for(var i = count; --i >= 0;) {
+		parentElem.appendChild(document.createElement(childTag));
+	}
+};
+
 /** SubTable represents a single tbody, thead, or tfoot element within table element
 * @constructor
 * @extends {ElementWrapper}
@@ -39,6 +51,12 @@ SubTable.prototype._defaultRowHeight = null;
 SubTable.prototype._render;
 
 
+/** @private
+* @return {string} tagName
+*/
+SubTable.prototype._getCellTagName = function() {
+	return this._elem.tagName === "THEAD" ? "TH" : "TD";
+};
 /** @public
 * @ignore
 * @param {number=} opt_count
@@ -49,12 +67,10 @@ SubTable.prototype.addColumns = function(opt_count) {
 
 	this._colCount += opt_count;
 
+	var cellTag = this._getCellTagName();
 	var rows = this._elem.children; // TODO: Must include all suspended rows
 	for(var r = rows.length; --r >= 0;) {
-		var tr = rows[r];
-		for(var c = 0; c < opt_count; ++c) {
-			tr.insertCell(-1);
-		}
+		_addElements(rows[r], opt_count, cellTag);
 	}
 };
 /** @public
@@ -100,9 +116,7 @@ SubTable.prototype.setColumnCount = function(val) {
 */
 SubTable.prototype.insertRow = function(at) {
 	var row = this._elem.insertRow(at);
-	for(var i = this._colCount; --i >= 0;) {
-		row.insertCell();
-	}
+	_addElements(row, this._colCount, this._getCellTagName());
 	return row;
 };
 

package/lib/tr-grid-util/es6/Table.d.ts

@@ -58,6 +58,8 @@ declare class Table extends ElementWrapper {
 
     public getAllRows(): (Element)[];
 
+    public getRows(): (Element)[];
+
     public getRow(r: number): Element|null;
 
     public spanBlock(c1: number, c2: number, r1: number, r2: number): Element|null;

package/lib/tr-grid-util/es6/Table.js

@@ -331,6 +331,7 @@ Table.prototype.getAllCells = function() { return this._tbody.getAllCells(); };
 */
 Table.prototype.getAllRows = function() { return this._tbody.getAllRows(); };
 /** @public
+* @function
 * @return {!Array<Element>} Array of tr (HTMLTableRowElement) elements
 */
 Table.prototype.getRows = Table.prototype.getAllRows;

package/lib/types/es6/RowColoring.d.ts

@@ -56,6 +56,8 @@ declare class RowColoringPlugin extends GridPlugin {
 
     public getContrastColor(hexColor: string): string;
 
+    public forceUpdateRowColor(): void;
+
 }
 
 export default RowColoringPlugin;

package/lib/utils/index.d.ts

@@ -1,5 +1,6 @@
 import { GridPrinter } from "../tr-grid-printer/es6/GridPrinter.js";
+import { Table } from "../tr-grid-util/es6/Table.js";
 import { MultiTableManager } from "../tr-grid-util/es6/MultiTableManager.js";
 import { DataGenerator } from "../tr-grid-util/es6/jet/DataGenerator.js";
 import { MockRTK } from "../tr-grid-util/es6/jet/MockRTK.js";
-export { GridPrinter, MultiTableManager, DataGenerator, MockRTK };
+export { GridPrinter, Table, MultiTableManager, DataGenerator, MockRTK };

package/lib/utils/index.js

@@ -1,5 +1,6 @@
 import { GridPrinter } from "../tr-grid-printer/es6/GridPrinter.js";
+import { Table } from "../tr-grid-util/es6/Table.js";
 import { MultiTableManager } from "../tr-grid-util/es6/MultiTableManager.js";
 import { DataGenerator } from "../tr-grid-util/es6/jet/DataGenerator.js";
 import { MockRTK } from "../tr-grid-util/es6/jet/MockRTK.js";
-export { GridPrinter, MultiTableManager, DataGenerator, MockRTK };
+export { GridPrinter, Table, MultiTableManager, DataGenerator, MockRTK };

package/lib/versions.json

@@ -1,5 +1,5 @@
 {
-	"tr-grid-util": "1.3.120",
+	"tr-grid-util": "1.3.124",
 	"tr-grid-printer": "1.0.16",
 	"@grid/column-dragging": "1.0.14",
 	"@grid/row-segmenting": "1.0.24",
@@ -14,7 +14,7 @@
 	"tr-grid-column-resizing": "1.0.28",
 	"tr-grid-column-selection": "1.0.29",
 	"tr-grid-column-stack": "1.0.69",
-	"tr-grid-conditional-coloring": "1.0.61",
+	"tr-grid-conditional-coloring": "1.0.62",
 	"tr-grid-content-wrap": "1.0.20",
 	"tr-grid-contextmenu": "1.0.39",
 	"tr-grid-filter-input": "0.9.33",
@@ -27,7 +27,7 @@
 	"tr-grid-row-filtering": "1.0.57",
 	"tr-grid-row-grouping": "1.0.81",
 	"tr-grid-row-selection": "1.0.23",
-	"tr-grid-rowcoloring": "1.0.23",
+	"tr-grid-rowcoloring": "1.0.24",
 	"tr-grid-textformatting": "1.0.46",
 	"tr-grid-titlewrap": "1.0.19",
 	"@grid/formatters": "1.0.50",

package/package.json

@@ -60,11 +60,11 @@
 		"./utils": "./lib/utils/index.js"
 	},
 	"peerDependencies": {
-		"@refinitiv-ui/core": "^6.2.0",
-		"@refinitiv-ui/elements": "^6.5.0"
+		"@refinitiv-ui/core": "^6.2.0 || ^7.0.0",
+		"@refinitiv-ui/elements": "^6.5.0 || ^7.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.59"
+	"version": "6.0.60"
 }