@refinitiv-ui/efx-grid 6.0.2 → 6.0.5

package/lib/row-segmenting/es6/RowSegmenting.js

@@ -3,11 +3,14 @@ import { GridPlugin, rowDefRowGetter } from "../../tr-grid-util/es6/GridPlugin.j
 import { ExpanderIcon } from "../../tr-grid-util/es6/ExpanderIcon.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /** @typedef {Object} RowSegmentingPlugin~Options
 * @description The options can be specified by `rowSegmenting` property of the main grid's options
 * @property {boolean=} spanning=true If disabled, segment separator rows will not be spanned/stretched across multiple cells
 * @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
+* @property {string=} cssField="TAG_CSS_CLASS" Apply CSS class based on the given field
+* @property {Object=} predefinedColors Predefined color object map for color tag
 * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
 * @property {Function=} headerMenuClicked=null Event handler when user clicks on menu icon. The menu icon will be displayed if spanning option is true.
 * @property {Function=} segmentSeparatorBinding=null Logic that will be executed on each segment separator row
@@ -67,6 +70,23 @@ RowSegmentingPlugin.prototype._rowPainter = null;
 * @private
 */
 RowSegmentingPlugin.prototype._colorTag = null;
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin.prototype._cssField = "TAG_CSS_CLASS";
+/** @type {Object}
+* @private
+*/
+RowSegmentingPlugin.prototype._styleTag = null;
+/** @type {Object}
+* @private
+*/
+RowSegmentingPlugin.prototype._predefinedColors = null;
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin._controlClass = "predefined-color-tag";
+
 
 /** @public
 * @return {string}
@@ -105,7 +125,14 @@ RowSegmentingPlugin.prototype.initialize = function (host, options) {
 
 	var enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
 	RowPainter.disableColorTag(host, enabled === false);
+
+	if (this._predefinedColors != null) {
+		this._injectStyles(this._predefinedColors);
+		host.enableClass(RowSegmentingPlugin._controlClass);
+	}
+
 	RowPainter.applyGroupingStyles(host);
+	host.addClass("folder-disabled"); // Mouse cursor will be pointer when hovering at header rows
 
 	enabled = this._headerMenuClicked;
 	RowPainter.enableHeaderMenu(host, enabled ? true : false);
@@ -143,24 +170,31 @@ RowSegmentingPlugin.prototype.config = function (options) {
 	if (typeof option.headerMenuClicked === "function") {
 		this._headerMenuClicked = option.headerMenuClicked;
 	}
-	if(option.spanning != null) {
+	if (option.spanning != null) {
 		this._spanning = option.spanning ? true : false;
 	}
-
-	this.addListener(option, "clicked");
-	this.addListener(option, "segmentSeparatorBinding");
-	this.addListener(option, "nonSegmentSeparatorBinding");
+	if (option.colorTag != null) {
+		this._colorTag = option.colorTag;
+	}
+	if (option.cssField != null) {
+		this._cssField = option.cssField;
+	}
+	if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
+		this._predefinedColors = option.predefinedColors;
+	}
 
 	this._rowPainter = new RowPainter({
 		clickableCell: false,
 		headerSpanning: this._spanning,
 		footerSpanning: false,
 		onCellClicked: this._onArrowClick,
-		headerMenuClicked: this._headerMenuClicked
+		headerMenuClicked: this._headerMenuClicked,
+		segmentMode: true
 	});
-	if (option.colorTag != null) {
-		this._colorTag = option.colorTag;
-	}
+
+	this.addListener(option, "clicked");
+	this.addListener(option, "segmentSeparatorBinding");
+	this.addListener(option, "nonSegmentSeparatorBinding");
 };
 
 /** @public
@@ -183,9 +217,41 @@ RowSegmentingPlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._colorTag != null) {
 		extOptions.colorTag = this._colorTag;
 	}
+	if(this._cssField !== "TAG_CSS_CLASS") {
+		extOptions.cssField = this._cssField;
+	}
+	if(this._predefinedColors != null) {
+		extOptions.predefinedColors = this._predefinedColors;
+	}
 	return obj;
 };
 
+/** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowSegmentingPlugin.prototype._injectStyles = function(predefinedColors) {
+	var prefix = ".tr-grid." + RowSegmentingPlugin._controlClass + " .tr-lg .cell";
+	var css = [];
+	var value;
+	for (var className in predefinedColors) {
+		css.push(prefix + "." + className + "::before");
+		value = predefinedColors[className]["backgroundColor"];
+		if (value) {
+			css.push(["background-color: " + value + ";"]);
+		}
+	}
+
+	var host = this._hosts[0];
+
+	if (this._styleTag) {
+		if (this._styleTag.parentNode) {
+			this._styleTag.parentNode.removeChild(this._styleTag);
+		}
+		this._styleTag = null;
+	}
+	this._styleTag = injectCss(prettifyCss(css), host.getElement());
+};
+
 /** @private
 */
 RowSegmentingPlugin.prototype._applyInitialSegments = function () {
@@ -289,8 +355,9 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 			break;
 		}
 	}
-
+	var cssField = this._cssField;
 	var rowPainter = this._rowPainter;
+	var parentRows = {};
 	for (var r = fi; r <= li; r++) {
 		var cell = section.getCell(headerColumn, r, false); // Work only one row
 		if (!cell) { // There may be no header to be updated
@@ -306,6 +373,9 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 		arg.collapsedSegment = arg.collapsed = segmentSeparator ? dv.isSegmentCollapsed(rowId) : false;
 		var indentLevel = 0;
 		if (segmentSeparator) {
+			if (this._predefinedColors) {
+				arg.colorTagClass = arg.rowData[cssField];
+			}
 			arg.indentSize = this._getIndentSize(indentLevel, true);
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch("segmentSeparatorBinding", arg);
@@ -314,7 +384,14 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 			if(parentId) {
 				indentLevel = 1; // TODO: Provide a way for segmenting multiple levels. Currently, just one level is supported.
 				arg.nonGroupRow = false;
+				var parentRowData = parentRows[parentId];
+				if (!parentRowData) {
+					var parentRowIndex = dv.getRowIndex(parentId);
+					parentRowData = parentRows[parentId] = this._getRow(dv, parentRowIndex);
+				}
+				arg.colorTagClass = parentRowData[cssField];
 			} else {
+				arg.colorTagClass = null;
 				arg.nonGroupRow = true;
 			}
 			arg.indentSize = this._getIndentSize(indentLevel, false);
@@ -498,7 +575,7 @@ RowSegmentingPlugin.prototype.setSegmentCollapsingLogic = function(func) {
 RowSegmentingPlugin.prototype.fillSegment = function(segmentRef) {
 	var dv = this._getDataView();
 	if(dv) {
-		dv.fillSegment(this._toRowId(segmentRef));
+		dv.fillSegment(segmentRef);
 	}
 };
 /** Remove all existing segment children in each segment and fill the segments with all contnet rows before the next segment separator
@@ -615,6 +692,16 @@ RowSegmentingPlugin.prototype._rtSortingLogic = function (rowDataA, rowDataB) {
 	);
 };
 
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowSegmentingPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._injectStyles(predefinedColors);
+	}
+};
+
 
 
 export default RowSegmentingPlugin;