@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

package/lib/tr-grid-row-grouping/es6/RowGrouping.d.ts

@@ -3,6 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 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";
 
 declare namespace RowGroupingPlugin {
 
@@ -26,6 +27,8 @@ declare namespace RowGroupingPlugin {
         autoGroupSorting?: boolean,
         indentSize?: (boolean|number|(number)[]),
         colorTag?: boolean,
+        predefinedColors?: any,
+        groupColors?: any,
         clicked?: ((...params: any[]) => any),
         groupAdded?: ((...params: any[]) => any),
         beforeGroupAdded?: ((...params: any[]) => any),
@@ -75,10 +78,12 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public setGroupSortingLogic(sortFunction: RowGroupingPlugin.GroupSortLogic): void;
 
-    public getGroupSortingLogic(): ((...params: any[]) => any);
+    public getGroupSortingLogic(): ((...params: any[]) => any)|null;
 
     public setPredefinedGroups(predefinedGroups: any[]|(any[])[]): void;
 
+    public setPredefinedColors(predefinedColors: any): void;
+
     public sortGroups(): void;
 
     public updateHeaders(): void;
@@ -93,7 +98,7 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public disableClicking(opt_disabled?: boolean): void;
 
-    public getGroupingStates(): (RowGroupingPlugin.GroupingState)[];
+    public getGroupingStates(): (RowGroupingPlugin.GroupingState)[]|null;
 
     public setGroupingStates(states: (RowGroupingPlugin.GroupingState)[]|string): void;
 

package/lib/tr-grid-row-grouping/es6/RowGrouping.js

@@ -3,6 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 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} RowGroupingPlugin~Options
 * @description The options can be specified by `rowGrouping` property of the main grid's options
@@ -23,6 +24,8 @@ import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
 * @property {boolean=} autoGroupSorting=false If enabled, group sorting will be performed after each `groupAdded` event
 * @property {(boolean|number|Array.<number>)=} indentSize Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.
 * @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
+* @property {Object=} predefinedColors Predefined color object map for color tag
+* @property {Object=} groupColors The object map of group ID and predefined color.
 * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
 * @property {Function=} groupAdded=null Event handler
 * @property {Function=} beforeGroupAdded=null Event handler
@@ -143,7 +146,6 @@ var RowGroupingPlugin = function (options) {
 	t._criteria = [];
 	t._criteriaFuncs = [];
 	t._hosts = [];
-	t._indentSize = [0, 22, 37, 52, 67];
 	t.config({ "rowGrouping": options });
 };
 Ext.inherits(RowGroupingPlugin, GridPlugin);
@@ -193,10 +195,14 @@ RowGroupingPlugin.prototype._headerColumn = -1; // Actual display column
 * @private
 */
 RowGroupingPlugin.prototype._headerColumnField = ''; // Actual display column field
-/** @type {!Array.<number>}
+/** @type {Array.<number>}
 * @private
 */
-RowGroupingPlugin.prototype._indentSize = null;
+RowGroupingPlugin.prototype._indentSizes = null;
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._arrowSize = 9; // Solar theme's arrow size
 /** @type {boolean}
 * @private
 */
@@ -261,6 +267,22 @@ RowGroupingPlugin.prototype._rowPainter = null;
 * @private
 */
 RowGroupingPlugin.prototype._colorTag = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._predefinedColors = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._groupColors = null;
+/** @type {string}
+* @private
+*/
+RowGroupingPlugin._controlClass = "predefined-color-tag";
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._styleTag = null;
 
 /** @type {Function}
 * @private
@@ -359,12 +381,8 @@ RowGroupingPlugin.prototype.getName = function () {
 * @param {Object} config
 */
 RowGroupingPlugin.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;
 	}
 };
 
@@ -392,6 +410,12 @@ RowGroupingPlugin.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(RowGroupingPlugin._controlClass);
+	}
+
 	RowPainter.applyGroupingStyles(host);
 
 	this._applyGrouping(); // TODO: Support run-time theme loading
@@ -495,22 +519,24 @@ RowGroupingPlugin.prototype.config = function (options) {
 		var indentSize = option.indentSize;
 		if (indentSize != null) {
 			if (typeof indentSize === "boolean") {
-				if (!indentSize) {
-					this._indentSize = [0];
+				if (indentSize) {
+					this._indentSizes = null; // Set to default
+				} else {
+					this._indentSizes = [0];
 				} // TODO: Handle default case
 			} else if (typeof indentSize === "number") {
-				this._indentSize = new Array(5);
+				this._indentSizes = new Array(5);
 				for (var j = 0; j < 5; j++) {
-					this._indentSize[j] = indentSize * j;
+					this._indentSizes[j] = indentSize * j;
 				}
 			} else if (Array.isArray(indentSize)) {
-				this._indentSize = indentSize;
+				this._indentSizes = indentSize;
 			}
 		}
 		if (option.noCollapsible != null) {
 			this._noCollapsible = !!option.noCollapsible;
 			if (this._noCollapsible) {
-				this._indentSize = [0]; // Content will not be indented
+				this._indentSizes = [0]; // Content will not be indented
 			}
 		}
 		if (this._contentAsHeader || this._noCollapsible) { // contentAsHeader has higher priority than hiddenArrow
@@ -527,17 +553,27 @@ RowGroupingPlugin.prototype.config = function (options) {
 		if (this.hasListener("groupFooterBinding")) {
 			this._footerRows = 1;
 		}
-		this._rowPainter = new RowPainter({
-			clickableCell: this._clickableCell,
-			headerSpanning: this._headerSpanning,
-			footerSpanning: this._footerSpanning,
-			onCellClicked: this._onCellClicked
-		});
+
 		if (option.colorTag != null) {
 			this._colorTag = option.colorTag;
 		}
+
+		if (option.groupColors != null && typeof option.groupColors === "object") {
+			this._groupColors = option.groupColors;
+		}
+
+		if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
+			this._predefinedColors = option.predefinedColors;
+		}
 	}
 
+	this._rowPainter = new RowPainter({
+		clickableCell: this._clickableCell,
+		headerSpanning: this._headerSpanning,
+		footerSpanning: this._footerSpanning,
+		onCellClicked: this._onCellClicked
+	});
+
 	if (this._fixedDisplayColumn < 0) {
 		var checkboxColumnIndex = this._findCheckboxColumnIndexFromConfig(options.columns);
 		if (checkboxColumnIndex >= 0) { // has checkbox column
@@ -616,11 +652,18 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._autoGroupSorting) {
 		extOptions.autoGroupSorting = this._autoGroupSorting;
 	}
-	extOptions.indentSize = this._indentSize;
-
+	if(this._indentSizes) {
+		extOptions.indentSize = this._indentSizes;
+	}
 	if(this._colorTag != null) {
 		extOptions.colorTag = this._colorTag;
 	}
+	if(this._groupColors != null) {
+		extOptions.groupColors = this._groupColors;
+	}
+	if(this._predefinedColors != null) {
+		extOptions.predefinedColors = this._predefinedColors;
+	}
 
 	return obj;
 };
@@ -696,6 +739,32 @@ RowGroupingPlugin.prototype.getColumnMenu = function (colIndex, config) {
 	return config;
 };
 
+/** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype._injectStyles = function(predefinedColors) {
+	var prefix = ".tr-grid." + RowGroupingPlugin._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
 * @param {Object} e
 */
@@ -915,6 +984,16 @@ RowGroupingPlugin.prototype.setPredefinedGroups = function (predefinedGroups) {
 	}
 };
 
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._injectStyles(predefinedColors);
+	}
+};
+
 /** Trigger group sorting logic -- re-sort the existing groups. This will not continuously apply to each data update.
 * @public
 */
@@ -1197,7 +1276,7 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 		arg.rowData = this._rowGetter(dataSource.getRowData(rowId));
 		arg.noIndent = false;
 
-		rowPainter.removeHeaderStyle(section, headerColumn, r);
+		var contentHeaderGroup = rowsForContentHeader[rowId];
 		var groupView = dataSource.getGroupByRowId(rowId);
 		if (groupView) { // Header Render
 			currentGroup = groupView;
@@ -1214,24 +1293,24 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			if(needCal) {
 				currentGroup = dataSource.getGroup(rowId); // Slow
 				curGroupLevel = currentGroup.getGroupLevel();
+			} else if(!currentGroup) {
+				currentGroup = dataSource.getGroup(rowId); // Slow
 			}
 
-			var grp = rowsForContentHeader[rowId];
-			if (grp || nonGroupListener) {
+			if (contentHeaderGroup || nonGroupListener) {
 				arg.dataSource = dataSource;
 				arg.footerIndex = null;
 				arg.groupId = null;
 
-				if (grp) {
-					arg.collapsed = grp.isCollapsed();
-					rowPainter.applyContentAsHeaderStyle(arg);
+				if (contentHeaderGroup) {
+					arg.collapsed = contentHeaderGroup.isCollapsed();
 				}
 
 				if (nonGroupListener) {
 					arg.rowData = this._rowGetter(dataSource.getRowData(rowId));
 				}
 			}
-			if (grp) { // In contentHeader mode indent in contentHeader will same the parent header when group level 2
+			if (contentHeaderGroup) { // In contentHeader mode indent in contentHeader will same the parent header when group level 2
 				indentOffset = -2;
 			} else {
 				// In contentHeader mode with 1 level the content indent more than contentHeader 1
@@ -1243,7 +1322,7 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 
 		arg.groupLevel = curGroupLevel;
 
-		var rowLevel;
+		var rowLevel = 0;
 		var nonGroupRow = this._autoGroupHiding && currentGroup.getGroupValue() == null && curGroupLevel === 1 && !this._contentAsHeader;
 		arg.nonGroupRow = nonGroupRow;
 
@@ -1253,15 +1332,20 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			rowLevel = curGroupLevel - 1;
 		} else { // content
 			rowLevel = curGroupLevel + indentOffset; // content have indent more than header 1
-			if(rowLevel < 0) {
-				rowLevel = 0;
-			}
 		}
 
-		var indentSize = this._indentSize[rowLevel];
-		if (indentSize == null) {
-			var len = this._indentSize.length;
-			indentSize = this._indentSize[len - 1];
+		var indentSize = 0;
+		if(this._indentSizes) {
+			indentSize = this._indentSizes[0];
+			if(rowLevel > 0) {
+				var indentLimit = this._indentSizes.length;
+				indentSize = rowLevel < indentLimit ? this._indentSizes[rowLevel] : this._indentSizes[indentLimit - 1];
+			}
+		} else if(rowLevel > 0) {
+			indentSize = 8 + rowLevel * 4; // 8 is default cell padding
+			if(!groupView) {
+				indentSize += this._arrowSize;
+			}
 		}
 		if (maxColWidth > -1 && maxColWidth < indentSize) {
 			indentSize = maxColWidth;
@@ -1269,10 +1353,26 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 
 		arg.indentSize = indentSize;
 
+		if (this._groupColors) {
+			// TODO: Need better method to find the first level parent's group id
+			var rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
+			if (curGroupLevel > 1) {
+				for (var i = curGroupLevel; i > 1; i--) {
+					rootGroup = rootGroup.getDataSource();
+				}
+			}
+			var groupId = rootGroup.getGroupId();
+			arg.colorTagClass = this._groupColors[groupId];
+		}
+
 		if (groupView) {
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);
 		} else {
+			rowPainter.removeHeaderStyle(section, headerColumn, r);
+			if (contentHeaderGroup) {
+				rowPainter.applyContentAsHeaderStyle(arg);
+			}
 			rowPainter.applyRowStyle(arg);
 			this._dispatch("nonGroupBinding", arg);
 		}
@@ -1294,7 +1394,7 @@ RowGroupingPlugin.prototype._getRowsForContentAsHeader = function () {
 	for (var grpId in allGroups) {
 		var grp = allGroups[grpId];
 		if (!grp.hasGroup()) { // Deepest level group
-			var firstRowId = grp.getAllRowIds()[0]; // Prepare first row in group for contentAsHeader mode to use.
+			var firstRowId = grp.getAllRowIds(true)[0]; // Prepare first row in group for contentAsHeader mode to use.
 			if (firstRowId) {
 				result[firstRowId] = grp;
 			}

package/lib/tr-grid-row-selection/es6/RowSelection.d.ts

@@ -1,8 +1,10 @@
-import { Ext } from '../../tr-grid-util/es6/Ext.js';
-import { EventDispatcher } from '../../tr-grid-util/es6/EventDispatcher.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { isMac as isMacFn } from '../../tr-grid-util/es6/Util.js';
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
 import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowSelectionPlugin {
 
@@ -11,7 +13,9 @@ declare namespace RowSelectionPlugin {
         selectionChanged?: ((...params: any[]) => any),
         beforeSelection?: ((...params: any[]) => any),
         basedOnContent?: boolean,
-        selectionField?: string
+        selectionField?: string,
+        menuClicked?: ((...params: any[]) => any),
+        menuPosition?: string
     };
 
 }
@@ -42,13 +46,13 @@ declare class RowSelectionPlugin extends GridPlugin {
 
     public getRowAnchor(sectRef?: any): number;
 
-    public getFirstSelectedIndex(sectRef?: any): number|null;
+    public getFirstSelectedIndex(sectRef?: any): number|null|null;
 
-    public getLastSelectedIndex(sectRef?: any): number|null;
+    public getLastSelectedIndex(sectRef?: any): number|null|null;
 
-    public getSelectedRows(sectRef?: any): (number)[];
+    public getSelectedRows(sectRef?: any): (number)[]|null;
 
-    public getSelectedRowIds(sectRef?: any): (string)[];
+    public getSelectedRowIds(sectRef?: any): (string)[]|null;
 
     public getSelectedRowCount(sectRef?: any): number;