@refinitiv-ui/efx-grid 6.0.0 → 6.0.3

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

@@ -49,6 +49,10 @@ var _newArrayOfObject = function (num) {
 * @param {boolean=} bool
 */
 var _toggleInlineElement = function (elem, bool) {
+	if(!elem || elem.style.display === "none") {
+		return;
+	}
+
 	var s = elem.style;
 	if(bool == null) {
 		bool = s.display !== "inline-block";
@@ -68,7 +72,7 @@ var _toggleInlineElement = function (elem, bool) {
 var MultiTableManager = function (gridElem) {
 	this._onDelayedConfiguration = this._onDelayedConfiguration.bind(this);
 	this._onConfiguration = this._onConfiguration.bind(this);
-	this._onDataChanged = this._onDataChanged.bind(this);
+	this._onWrapCountChanged = this._onWrapCountChanged.bind(this);
 
 	this._tables = [];
 	if(gridElem) {
@@ -102,6 +106,10 @@ MultiTableManager.prototype._emeraldGrid = false;
 * @private
 */
 MultiTableManager.prototype._ready = false;
+/** @type {number}
+* @private
+*/
+MultiTableManager.prototype._wrapSize = 0;
 
 
 /** @public
@@ -196,6 +204,7 @@ MultiTableManager._onVScrollbarSynchronization = function(vScrollbarHost, hScrol
 	for(var i = 0; i < gridLen; ++i) {
 		var gridElem = gridElems[i];
 		var core = gridElem.api.getCoreGrid();
+
 		_toggleInlineElement(gridElem, true);
 		if(i > 0) {
 			mainCore.synchronizeVScrollbar(core);
@@ -234,6 +243,8 @@ MultiTableManager.prototype.setGridConfig = function (configObj) {
 * @param {Object} e
 */
 MultiTableManager.prototype._onDelayedConfiguration = function (e) {
+	this._ready = false;
+	// TODO: Handle the case where config is changed at runtime
 	setTimeout(this._onConfiguration, 10); // Add delay to ensure that scrollbars are synchronized first
 };
 /** @private
@@ -245,15 +256,16 @@ MultiTableManager.prototype._onConfiguration = function () {
 	}
 	this._ready = true;
 
-	this.setTableCount(this._tableCount);
+	if(this._wrapSize) {
+		this._wrapTable(this._wrapSize);
+	} else {
+		this._setTableCount(this._tableCount);
+	}
 };
 
 /** @public
 */
 MultiTableManager.prototype.dispose = function () {
-	// var main = this._tables[0];
-	// main.api.getDataSource().unlisten("dataChanged", this._onDataChanged);
-
 	var len = this._tables.length;
 	for(var i = 0; i < len; ++i) {
 		this._tables[i].dispose();
@@ -272,7 +284,8 @@ MultiTableManager.prototype._cloneConfig = function () {
 	if(this._configObj) {
 		obj = cloneObject(this._configObj);
 		if(Array.isArray(obj.columns)) {
-			obj.columns = this._configObj.columns.slice();
+			var runtimeConfig = this._tables[0].api ? this._tables[0].api.getConfigObject() : this._configObj;
+			obj.columns = runtimeConfig.columns.slice();
 		}
 	}
 	return obj || {};
@@ -282,13 +295,12 @@ MultiTableManager.prototype._cloneConfig = function () {
 * @return {number}
 */
 MultiTableManager.prototype.getTableCount = function() {
-	return this._tableCount;
+	return this._tables.length;
 };
-/**
-* @public
+/** @private
 * @param {number} num Number of tables. Number cannot be less than one.
 */
-MultiTableManager.prototype.setTableCount = function(num) {
+MultiTableManager.prototype._setTableCount = function(num) {
 	this._tableCount = num > 0 ? num : 1;
 
 	if(this._ready) {
@@ -301,30 +313,53 @@ MultiTableManager.prototype.setTableCount = function(num) {
 	}
 };
 /**
+* @public
+* @param {number} num Number of tables. Number cannot be less than one.
+*/
+MultiTableManager.prototype.setTableCount = function(num) {
+	if(this._wrapSize) {
+		this._wrapTable(0);
+	}
+	this._setTableCount(num);
+};
+/**
 * @private
+* @param {number} tableIndex
 * @return {Element}
 */
-MultiTableManager.prototype._addTable = function() {
+MultiTableManager.prototype._addTable = function(tableIndex) {
 	var main = this._tables[0];
 	var parentElem = main.parentNode;
+	var core = main.api.getCoreGrid();
 	var mainDataView = main.api.getDataView();
 	// var mainDataTable = main.api.getDataTable();
+	var stp = core.getPlugin("SortableTitlePlugin");
+	var dtp = core.getPlugin("DragAndDropTitlePlugin");
 
 	var configObj = this._cloneConfig();
 	configObj.extensions = this._generateExtensions();
+
 	delete configObj.staticDataRows;
 	delete configObj.rows;
 	delete configObj.dataModel;
 
-	var rowCount = mainDataView.getRowCount();
-
-	var ary = _newArrayOfObject(rowCount);
-	if(this._emeraldGrid) {
-		configObj.dataModel = {
-			data: ary
-		};
+	if(this._wrapSize) {
+		var wrappedViews = mainDataView.getWrappedViews();
+		configObj.dataView = wrappedViews[tableIndex - 1];
+		configObj.grid = main.api;
 	} else {
-		configObj.rows = ary;
+		configObj["SortableTitle"] = stp;
+		configObj["DragAndDropTitle"] = dtp;
+		var rowCount = mainDataView.getRowCount();
+
+		var ary = _newArrayOfObject(rowCount);
+		if(this._emeraldGrid) {
+			configObj.dataModel = {
+				data: ary
+			};
+		} else {
+			configObj.rows = ary;
+		}
 	}
 
 	var sub = document.createElement(main.tagName);
@@ -347,19 +382,22 @@ MultiTableManager.prototype._addTables = function(num) {
 
 	var main = this._tables[0];
 	_toggleInlineElement(main, true); // TODO: Check if we need to do this every time
+
 	// main.api.setFitContentWidth(true);
 
 	for(var i = 0; i < num; ++i) {
-		var grid = this._addTable();
+		var grid = this._addTable(this._tables.length);
 		this._tables.push(grid);
 	}
 
-	if(main._vScrollbarSynchronization) {
-		MultiTableManager.synchronizeVScrollbar(
-			main.api.getCoreGrid().getVScrollbar().getParent(),
-			main.parentNode,
-			this._tables
-		);
+	if(!this._wrapSize) {
+		if(main._vScrollbarSynchronization) {
+			MultiTableManager.synchronizeVScrollbar(
+				main.api.getCoreGrid().getVScrollbar().getParent(),
+				main.parentNode,
+				this._tables
+			);
+		}
 	}
 };
 /**
@@ -381,20 +419,62 @@ MultiTableManager.prototype._removeTables = function(num) {
 			sub.parentNode.removeChild(sub);
 		}
 	}
-	if(this._tables.length === 1) {
-		// TODO: Reset state
-		this._tables[0].style.display = "";
+	// if(this._tables.length === 1) {
+	// TODO: Reset state
+	// this._tables[0].style.display = ""; // Remove display inline
+	// }
+};
+
+
+/** @private
+* @param {number} rowCount Number of row per table. Set number to zero to turn off wrap mode.
+*/
+MultiTableManager.prototype._wrapTable = function(rowCount) {
+	this._wrapSize = rowCount > 0 ? rowCount : 0;
+
+	if(this._ready) {
+		var main = this._tables[0];
+		if(this._wrapSize) {
+			main.style.display =  "none";
+			main.api.getCoreGrid().getVScrollbar().disable();
+		} else {
+			main.style.display =  "";
+			_toggleInlineElement(main, true);
+			main.api.getCoreGrid().getVScrollbar().disable(false);
+		}
+
+		var dv = main.api.getDataView();
+		dv.listen("wrapCountChanged", this._onWrapCountChanged);
+		dv.wrapView(this._wrapSize);
 	}
 };
 /**
-* @private
+* @public
+* @param {number} rowCount Number of row per table. Set number to zero to turn off wrap mode.
+*/
+MultiTableManager.prototype.wrapTable = function(rowCount) {
+	if(rowCount && this._tableCount > 1) {
+		this._setTableCount(1);
+	}
+	if(!rowCount || rowCount < 0) {
+		rowCount = 0;
+	}
+	if(this._wrapSize !== rowCount) {
+		this._wrapTable(rowCount);
+	}
+};
+/** @private
 * @param {Object} e
 */
-MultiTableManager.prototype._onDataChanged = function(e) {
-
+MultiTableManager.prototype._onWrapCountChanged = function(e) {
+	if(e.prevCount < e.newCount) {
+		this._addTables(e.newCount - e.prevCount);
+	}
+	if(e.newCount < e.prevCount) {
+		this._removeTables(e.prevCount - e.newCount);
+	}
 };
 
-
 /** @public
 * @param {number=} at
 * @return {Element}
@@ -445,23 +525,6 @@ MultiTableManager.prototype._execAll = function(methodName, args) {
 	}
 };
 
-/** @private
-* @param {number} num
-*/
-MultiTableManager.prototype._setRtRowCount = function(num) {
-	var tableCount = this._tables.length;
-	// grid.api.getRowCount();
-	for(var i = 1; i < tableCount; ++i) {
-		var sub = this._tables[i];
-		sub.api.insertRows(_newArrayOfObject(num));
-	}
-};
-/** @private
-* @param {number} num
-*/
-MultiTableManager.prototype._addCsRows = function(num) {
-};
-
 /** @public
 * @param {Object=} rowOption
 * @param {number=} at
@@ -471,10 +534,14 @@ MultiTableManager.prototype.insertRow = function(rowOption, at) {
 		return; // TODO
 	}
 
-	var tableCount = this._tables.length;
-	for(var i = 0; i < tableCount; ++i) {
-		var tbl = this._tables[i];
-		tbl.api.insertRow(rowOption, at);
+	if(this._wrapSize) {
+		this.getTable().api.insertRow(rowOption, at);
+	} else {
+		var tableCount = this._tables.length;
+		for(var i = 0; i < tableCount; ++i) {
+			var tbl = this._tables[i];
+			tbl.api.insertRow(rowOption, at);
+		}
 	}
 };
 /** @public
@@ -488,18 +555,58 @@ MultiTableManager.prototype.removeRow = function(at) {
 		at = this.getRowCount() - 1;
 	}
 
+	if(this._wrapSize) {
+		this.getTable().api.removeRow(at);
+	} else {
+		var tableCount = this._tables.length;
+		for(var i = 0; i < tableCount; ++i) {
+			var tbl = this._tables[i];
+			tbl.api.removeRow(at);
+		}
+	}
+};
+
+/** @public
+* @return {number}
+*/
+MultiTableManager.prototype.getRowCount = function() {
+	return this.getTable().api.getRowCount();
+};
+
+/** @public
+* @param {*} columnOption String will be treated as field, while object is treated as the column options
+* @param {number=} idx
+*/
+MultiTableManager.prototype.insertColumn = function(columnOption, idx) {
+	if(this._emeraldGrid) {
+		return; // TODO
+	}
+
 	var tableCount = this._tables.length;
 	for(var i = 0; i < tableCount; ++i) {
 		var tbl = this._tables[i];
-		tbl.api.removeRow(at);
+		tbl.api.insertColumn(columnOption, idx);
+	}
+};
+/** @public
+* @param {*} colRef Column reference
+*/
+MultiTableManager.prototype.removeColumn = function(colRef) {
+	if(this._emeraldGrid) {
+		return; // TODO
+	}
+	var tableCount = this._tables.length;
+	for(var i = 0; i < tableCount; ++i) {
+		var tbl = this._tables[i];
+		tbl.api.removeColumn(colRef);
 	}
 };
 
 /** @public
 * @return {number}
 */
-MultiTableManager.prototype.getRowCount = function() {
-	return this.getTable().api.getRowCount();
+MultiTableManager.prototype.getColumnCount = function() {
+	return this.getTable().api.getColumnCount();
 };
 
 export default MultiTableManager;

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

@@ -23,7 +23,7 @@ declare class PercentBar {
 
     public static toAlignment(str: string|null): string;
 
-    public getElement(): Element;
+    public getElement(): Element|null;
 
     public getValue(): number;
 

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

@@ -12,13 +12,13 @@ declare namespace Perf {
 
     function clearResourceTimings(): void;
 
-    function getEntries(): (PerformanceEntry)[];
+    function getEntries(): (PerformanceEntry)[]|null;
 
-    function getEntriesByName(entryName: string, entryType?: string): (PerformanceEntry)[];
+    function getEntriesByName(entryName: string, entryType?: string): (PerformanceEntry)[]|null;
 
-    function getEntriesByType(entryType: string): (PerformanceEntry)[];
+    function getEntriesByType(entryType: string): (PerformanceEntry)[]|null;
 
-    function getEntry(entryName: string, entryType?: string): PerformanceEntry;
+    function getEntry(entryName: string, entryType?: string): PerformanceEntry|null;
 
     function mark(markName: string): void;
 

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

@@ -28,7 +28,7 @@ declare class Popup extends EventDispatcher {
 
     public dispose(): void;
 
-    public getElement(): Element;
+    public getElement(): Element|null;
 
     public appendChild(childElem: Element): void;
 
@@ -50,7 +50,7 @@ declare class Popup extends EventDispatcher {
 
     public setPopupGap(gap?: number): void;
 
-    public setParentElement(parentElement: Element): Element;
+    public setParentElement(parentElement: Element): Element|null;
 
     public show(opt_shown?: boolean, parentElement?: Element): void;
 

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

@@ -20,7 +20,7 @@ declare class RequestQueue {
 
     public getQueue(): any[];
 
-    public makeRequest(obj: any): Promise<Response>;
+    public makeRequest(obj: any): Promise<Response>|null;
 
     public isLimitReached(): boolean;
 

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

@@ -1,5 +1,6 @@
 import { injectCss, prettifyCss } from "./Util.js";
 import { ExpanderIcon } from "./ExpanderIcon.js";
+import { Icon } from "./Icon.js";
 
 declare class RowPainter {
 
@@ -9,6 +10,8 @@ declare class RowPainter {
 
     public static disableColorTag(grid: any, disabled?: boolean): void;
 
+    public static enableHeaderMenu(grid: any, enabled?: boolean): void;
+
     public removeHeaderStyle(section: any, columnIndex: number, rowIndex: number): void;
 
     public applyHeaderStyle(e: any): void;

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

@@ -1,5 +1,6 @@
 import { injectCss, prettifyCss } from "./Util.js";
 import { ExpanderIcon } from "./ExpanderIcon.js";
+import { Icon } from "./Icon.js";
 
 /**
 * @constructor
@@ -10,6 +11,9 @@ var RowPainter = function(options) {
 	this._headerSpanning = options.headerSpanning;
 	this._footerSpanning = options.footerSpanning;
 	this._onCellClicked = options.onCellClicked;
+	this._headerMenuClicked = options.headerMenuClicked;
+	this._menuIconClicked = this._menuIconClicked.bind(this);
+	this._segmentMode = options.segmentMode;
 };
 
 /** @type {string}
@@ -19,6 +23,9 @@ RowPainter._styles = prettifyCss([
 	".cell.folder", [
 		"text-align: left;"
 	],
+	".cell.folder:not(.closed), .cell.folder.main-group", [
+		"font-weight: 600;"
+	],
 	".color-tag::before", [
 		"content: '';",
 		"display: block;",
@@ -26,7 +33,7 @@ RowPainter._styles = prettifyCss([
 		"width: 2px;",
 		"height: 100%;",
 		"left: 0;",
-		"background-color: var(--expanded-tag-bg-color);"
+		"background-color: var(--grid-expanded-tag-bg-color);"
 	],
 	".color-tag.main-group::before", [
 		"top: 2px;",
@@ -37,17 +44,31 @@ RowPainter._styles = prettifyCss([
 		"top: 2px;",
 		"width: 4px;",
 		"height: calc(100% - 5px);",
-		"background-color: var(--tag-bg-color);"
+		"background-color: var(--grid-tag-bg-color);"
 	],
 	".color-tag-disabled .color-tag::before", [
 		"content: unset;"
 	],
 	".cell.highlighted-row.color-tag::before", [
-		"background-color: var(--expanded-tag-bg-color);"
+		"background-color: var(--grid-expanded-tag-bg-color);"
+	],
+	".tr-grid .cell .floating-panel .menu-icon", [
+		"display: none;"
+	],
+	".tr-grid.row-menu-enabled .cell:hover .menu-icon", [
+		"display: inline-block;"
+	],
+	".folder .menu-icon", [
+		"color: var(--grid-row-menu-icon-color);"
+	],
+	".folder .menu-icon:hover", [
+		"color: var(--grid-row-menu-icon-hover-color);"
 	],
 	":host", [
-		"--tag-bg-color: #333333;",
-		"--expanded-tag-bg-color: #4D4D4D;"
+		"--grid-tag-bg-color: #333333;",
+		"--grid-expanded-tag-bg-color: #4D4D4D;",
+		"--grid-row-menu-icon-color: #CCCCCC;",
+		"--grid-row-menu-icon-hover-color: #FFFFFF;"
 	]
 ]);
 
@@ -71,6 +92,16 @@ RowPainter.disableColorTag = function(grid, disabled) {
 	}
 };
 
+/** @public
+* @param {tr.Grid} grid
+* @param {boolean=} enabled
+*/
+RowPainter.enableHeaderMenu = function(grid, enabled) {
+	if (grid) {
+		grid.enableClass("row-menu-enabled", enabled ? true : false);
+	}
+};
+
 /** @private
 * @param {Object} section ILayoutGrid
 * @param {number} fromColumnIndex
@@ -78,10 +109,12 @@ RowPainter.disableColorTag = function(grid, disabled) {
 * @param {number} rowIndex
 * @param {number} checkboxColumnIndex
 */
-RowPainter._clearCellContent = function(section, fromColumnIndex, toColumnIndex, rowIndex, checkboxColumnIndex) {
-	for (var c = fromColumnIndex; c <= toColumnIndex; ++c) {
-		if (section.isColumnVisible(c) && c !== checkboxColumnIndex) {
-			section.getCell(c, rowIndex, false).setContent("");
+RowPainter.prototype._clearCellContent = function(section, fromColumnIndex, toColumnIndex, rowIndex, checkboxColumnIndex) {
+	if(!this._segmentMode) {
+		for (var c = fromColumnIndex; c <= toColumnIndex; ++c) {
+			if (section.isColumnVisible(c) && c !== checkboxColumnIndex) {
+				section.getCell(c, rowIndex, false).setContent("");
+			}
 		}
 	}
 };
@@ -92,13 +125,22 @@ RowPainter._clearCellContent = function(section, fromColumnIndex, toColumnIndex,
 * @param {number} rowIndex
 */
 RowPainter.prototype.removeHeaderStyle = function(section, columnIndex, rowIndex) {
-	var cell = section.getCell(columnIndex, rowIndex, false);
-	if (!cell) {
+	section.enableRowClass(rowIndex, "header", false); // TODO: Slow
+	section.enableRowClass(rowIndex, "folder", false); // TODO: Slow
+	var cell = section.unstretchCell(columnIndex, rowIndex);
+	this._removeHeaderStyle(cell);
+	cell = section.getCell(columnIndex, rowIndex, false);
+	this._removeHeaderStyle(cell);
+};
+
+/** @private
+* @param {Object} cell Cell container
+*/
+RowPainter.prototype._removeHeaderStyle = function(cell) {
+	if(!cell || !cell._groupHeaderStyle) {
 		return;
 	}
-
-	section.unstretchCell(columnIndex, rowIndex);
-	section.enableRowClass(rowIndex, "header", false); // TODO: Slow
+	cell._groupHeaderStyle = false;
 	cell.removeClass("folder");
 	cell.removeClass("closed");
 	cell.removeClass("content-header");
@@ -127,13 +169,14 @@ RowPainter.prototype.applyHeaderStyle = function(e) {
 	} else {
 		section.unstretchCell(mainCol, r);
 		section.enableRowClass(r, "header", true);
-
+		section.enableRowClass(r, "closed", e.collapsed ? true : false);
 		// Remove content from cell that appear on right side of mainCol
-		RowPainter._clearCellContent(section, mainCol + 1, colCount - 1, r, checkboxColumnIndex);
+		this._clearCellContent(section, mainCol + 1, colCount - 1, r, checkboxColumnIndex);
 	}
+	cell._groupHeaderStyle = true;
 
 	// Remove content from cell that appear on left side of mainCol
-	RowPainter._clearCellContent(section, 0, mainCol - 1, r, checkboxColumnIndex);
+	this._clearCellContent(section, 0, mainCol - 1, r, checkboxColumnIndex);
 
 	// Footer rows and some specific group levels contains no expander (arrow)
 	var newIcon = ExpanderIcon.renderOn(cell, e.hiddenArrow);
@@ -142,19 +185,30 @@ RowPainter.prototype.applyHeaderStyle = function(e) {
 	}
 
 	if (!footerRow) {
-		cell.addClass("folder"); // Required by the fallback arrow from the CSS rules. TODO: Change this
+		if (stretching) {
+			cell.addClass("folder"); // Stretched cell is in the cover-layer
+		} else {
+			section.enableRowClass(r, "folder", true); // Required by the fallback arrow from the CSS rules. TODO: Change this
+		}
 		if (this._clickableCell) {
 			cell.listen("click", this._onCellClicked);
 		}
 		if (e.groupId) {
 			cell.setContent(e.groupId);
 		}
+		cell.enableClass("main-group", e.groupLevel === 1);
+		if (this._headerMenuClicked && stretching) {
+			if (!cell._menuIcon) {
+				var icon = cell._menuIcon = Icon.create("more", "menu-icon");
+				icon.addEventListener("click", this._menuIconClicked);
+			}
+			cell.insertFloatingIcon(cell._menuIcon);
+		}
 	} else {
 		cell.setContent("");
 	}
-	cell.enableClass("closed", e.collapsed);
+	cell.enableClass("closed", e.collapsed ? true : false);
 	cell.enableClass("color-tag", true);
-	cell.enableClass("main-group", e.groupLevel === 1);
 	cell.setStyle("paddingLeft", (e.indentSize > 0) ? e.indentSize + "px" : "");
 };
 
@@ -184,5 +238,13 @@ RowPainter.prototype.applyRowStyle = function(e) {
 	cell.enableClass("color-tag", e.nonGroupRow ? false : true);
 };
 
+/** @private
+* @param {Object} e
+*/
+RowPainter.prototype._menuIconClicked = function(e) {
+	e.stopPropagation();
+	this._headerMenuClicked(e);
+};
+
 export default RowPainter;
 export {RowPainter};

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

@@ -6,7 +6,7 @@ declare class SubTable extends ElementWrapper {
 
     constructor(opt_elem?: (Element|string));
 
-    public insertRow(at?: number): Element;
+    public insertRow(at?: number): Element|null;
 
     public addRows(count?: number): (Element)[];
 
@@ -22,19 +22,19 @@ declare class SubTable extends ElementWrapper {
 
     public getRowCount(): number;
 
-    public getCell(c: number, r: number): Element;
+    public getCell(c: number, r: number): Element|null;
 
-    public getCellsInColumn(c: number): (Element)[];
+    public getCellsInColumn(c: number): (Element)[]|null;
 
-    public getCellsInRow(r: number): (Element)[];
+    public getCellsInRow(r: number): (Element)[]|null;
 
     public getAllCells(): (Element)[];
 
-    public getAllRows(): HTMLCollection;
+    public getAllRows(): HTMLCollection|null;
 
-    public getRows(): HTMLCollection;
+    public getRows(): HTMLCollection|null;
 
-    public getRow(r: number): Element;
+    public getRow(r: number): Element|null;
 
     public getTextContents(): (string)[][];
 
@@ -62,9 +62,9 @@ declare class SubTable extends ElementWrapper {
 
     public cloak(elem: Element, opt_elementType?: string): void;
 
-    public spanBlock(c1: number, c2: number, r1: number, r2: number): Element;
+    public spanBlock(c1: number, c2: number, r1: number, r2: number): Element|null;
 
-    public static parseTableContent(tbl: Element): (string)[][];
+    public static parseTableContent(tbl: Element): (string)[][]|null;
 
 }