@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

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/NumberFormatter.d.ts

@@ -27,6 +27,8 @@ declare class NumberFormatter {
 
     public static padDecimalPartWithZeroes(str: string, precision: number): string;
 
+    public static multiplyByHundred(num: number): number;
+
     public getOptions(options?: any): any;
 
     public format(origVal: number): string;

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

@@ -13,6 +13,22 @@
 * @property {boolean=} mutiplyBy100=false Alias of multiplyBy100
 */
 
+/** @private
+* @function
+* @param {number} num Absolute number
+* @return {number}
+*/
+var _multiplyByHundred = function(num) {
+	var intPart = num | 0;
+	if(intPart && num > intPart) {
+		var str = num + "";
+		var at = str.indexOf(".");
+		var fracStr = str.slice(at + 1) + "00";
+		return +(str.slice(0, at) + fracStr.slice(0, 2) + "." + fracStr.slice(2));
+	}
+	return num * 100;
+};
+
 /** NumberFormatter provides a way to format the given number quickly.
 * @constructor
 * @param {NumberFormatter~Options=} options
@@ -198,6 +214,24 @@ NumberFormatter.padDecimalPartWithZeroes = function (str, precision) {
 	}
 	return str;
 };
+/** @public
+* @function
+* @param {number} num
+* @return {number}
+* @example
+* NumberFormatter.multiplyByHundred(1); // 1
+* NumberFormatter.multiplyByHundred(1.1); // 110
+* NumberFormatter.multiplyByHundred(1.21); // 121
+* NumberFormatter.multiplyByHundred(1.321); // 132.1
+* NumberFormatter.multiplyByHundred(-1.4321); // -143.21
+*/
+NumberFormatter.multiplyByHundred = function (num) {
+	if(num < 0) {
+		return -(_multiplyByHundred(-num));
+	}
+	return _multiplyByHundred(num);
+};
+
 
 /** @public
 * @param {Object=} options
@@ -206,20 +240,28 @@ NumberFormatter.padDecimalPartWithZeroes = function (str, precision) {
 NumberFormatter.prototype.getOptions = function(options) { // serialize
 	if(!options) { options = {}; }
 
+	var formatType = options["formatType"];
+
 	options["precisionEnabled"] = this._precisionEnabled;
 	options["decimalPlaces"] = this._precision;
 	options["plusSign"] = this._plusSignEnabled;
 	options["separator"] = this._separatorEnabled;
-	options["percentSign"] = this._percentSignEnabled;
-	var su = "";
-	if(this._scaler == "b") {
-		su = "billion";
-	} else if(this._scaler == "m") {
-		su = "million";
+
+	if(formatType === "scaled" || formatType === "scaledvalue") {
+		var su = "";
+		if(this._scaler == "b") {
+			su = "billion";
+		} else if(this._scaler == "m") {
+			su = "million";
+		}
+		options["scalingUnit"] = su;
+	}
+
+	if(formatType === "percent") {
+		options["percentSign"] = this._percentSignEnabled;
+		options["mutiplyBy100"] = this._multiplyBy100Enabled;
+		options["multiplyBy100"] = this._multiplyBy100Enabled;
 	}
-	options["scalingUnit"] = su;
-	options["mutiplyBy100"] = this._multiplyBy100Enabled;
-	options["multiplyBy100"] = this._multiplyBy100Enabled;
 	return options;
 };
 
@@ -240,7 +282,7 @@ NumberFormatter.prototype.format = function(origVal) {
 		}
 	}
 
-	// Make value to be positive value for simpler logic
+	// Simplify logic by making positive value
 	var val, sign;
 	if(origVal >= 0) {
 		val = origVal;
@@ -249,14 +291,18 @@ NumberFormatter.prototype.format = function(origVal) {
 		val = -origVal;
 		sign = "-";
 	}
-	if(this._multiplyBy100Enabled) {
-		val = val * 100;
-	}
-	var absVal = val;
 	var scalingMode = this._percentFormatEnabled ? "" : this._scaler; // Percent formatting overwrite scaling mode
 
-	// Perform rounding
+	if(this._multiplyBy100Enabled) {
+		if(this._precisionEnabled || scalingMode) {
+			val = val * 100; // Since value will be rounded later, there is no need to avoid rounding issue
+		} else {
+			val = _multiplyByHundred(val);
+		}
+	}
 
+	var absVal = val;
+	// Perform scaling
 	if (scalingMode) {
 		if (scalingMode === "b" && val < 1e9) {
 			scalingMode = "m";
@@ -270,11 +316,8 @@ NumberFormatter.prototype.format = function(origVal) {
 		} else if (scalingMode === "b") {
 			val = val / 1e9;
 		}
-
-		if (!this._precisionEnabled) {
-			val = Math.round(val * 100) / 100;
-		}
 	}
+	// Perform rounding
 	if (this._precisionEnabled) {
 		if (this._precision > 0) {
 			var deno = NumberFormatter._denominator[this._precision];
@@ -282,6 +325,8 @@ NumberFormatter.prototype.format = function(origVal) {
 		} else {
 			val = Math.round(val);
 		}
+	} else if(scalingMode) {
+		val = Math.round(val * 100) / 100;
 	}
 
 	// Convert value to string

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;