@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

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

@@ -3,12 +3,16 @@ 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
 * @property {Function=} nonSegmentSeparatorBinding=null Logic that will be executed for all non segment separator row
 * @property {Function=} sortingLogic=null Logic to be used by sortSegments method
@@ -34,7 +38,6 @@ var RowSegmentingPlugin = function (options) {
 	t._rtSortingLogic = t._rtSortingLogic.bind(t);
 
 	t._hosts = [];
-	t._indentSize = [0, 22, 37, 52, 67];
 	this.config({ rowSegmenting: options });
 };
 Ext.inherits(RowSegmentingPlugin, GridPlugin);
@@ -51,10 +54,14 @@ RowSegmentingPlugin.prototype._userSortingLogic = null;
 * @private
 */
 RowSegmentingPlugin.prototype._spanning = true;
-/** @type {!Array.<number>}
+/** @type {Array.<number>}
 * @private
 */
-RowSegmentingPlugin.prototype._indentSize = null;
+RowSegmentingPlugin.prototype._indentSizes = null;
+/** @type {number}
+* @private
+*/
+RowSegmentingPlugin.prototype._arrowSize = 9;
 /** @type {Object}
 * @private
 */
@@ -63,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}
@@ -77,12 +101,8 @@ RowSegmentingPlugin.prototype.getName = function () {
 * @param {Object} config
 */
 RowSegmentingPlugin.prototype.beforeInit = function(elem, config) {
-	// Set default indentSize here
 	if (ElfUtil.isHaloTheme()) {
-		// only for halo theme
-		this._indentSize = [0, 30, 50, 70, 90];
-	} else {
-		this._indentSize = [0, 22, 37, 52, 67];
+		this._arrowSize = 18;
 	}
 };
 
@@ -105,7 +125,18 @@ 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);
+
 	this._applyInitialSegments();
 };
 /** @public
@@ -136,23 +167,34 @@ RowSegmentingPlugin.prototype.config = function (options) {
 	if (typeof option.sortingLogic === "function") {
 		this._userSortingLogic = option.sortingLogic;
 	}
-	if(option.spanning != null) {
+	if (typeof option.headerMenuClicked === "function") {
+		this._headerMenuClicked = option.headerMenuClicked;
+	}
+	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
+		onCellClicked: this._onArrowClick,
+		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
@@ -175,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 () {
@@ -281,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
@@ -298,7 +373,10 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 		arg.collapsedSegment = arg.collapsed = segmentSeparator ? dv.isSegmentCollapsed(rowId) : false;
 		var indentLevel = 0;
 		if (segmentSeparator) {
-			arg.indentSize = this._indentSize[indentLevel];
+			if (this._predefinedColors) {
+				arg.colorTagClass = arg.rowData[cssField];
+			}
+			arg.indentSize = this._getIndentSize(indentLevel, true);
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch("segmentSeparatorBinding", arg);
 		} else {
@@ -306,10 +384,17 @@ 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._indentSize[indentLevel];
+			arg.indentSize = this._getIndentSize(indentLevel, false);
 			rowPainter.removeHeaderStyle(arg.section, arg.colIndex, r);
 			rowPainter.applyRowStyle(arg);
 			this._dispatch("nonSegmentSeparatorBinding", arg);
@@ -317,6 +402,27 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 	}
 };
 
+/** @private
+* @param {number} indentLevel
+* @param {boolean} groupRow
+* @return {number}
+*/
+RowSegmentingPlugin.prototype._getIndentSize = function (indentLevel, groupRow) {
+	var indentSize = 0;
+	if(this._indentSizes) {
+		indentSize = this._indentSizes[0];
+		if(indentLevel > 0) {
+			var indentLimit = this._indentSizes.length;
+			indentSize = indentLevel < indentLimit ? this._indentSizes[indentLevel] : this._indentSizes[indentLimit - 1];
+		}
+	} else if(indentLevel > 0) {
+		indentSize = 8 + indentLevel * 4; // 8 is default cell padding
+		if(!groupRow) {
+			indentSize += this._arrowSize;
+		}
+	}
+	return indentSize;
+};
 /** @private
 * @param {MouseEvent} e
 */
@@ -469,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
@@ -586,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;