@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,506 @@
+import { Ext } from "./Ext.js";
+import { EventDispatcher } from "./EventDispatcher.js";
+import { cloneObject } from "./Util.js";
+import { Deferred } from "./Deferred.js";
+import { Dom } from "./Dom.js";
+
+
+/** @type {Object.<string, number>}
+* @private
+* @const
+*/
+var GridElements = {
+	"EFX-GRID": 1,
+	"ATLAS-BLOTTER": 1,
+	"EF-GRID": 1
+};
+/** @type {Object.<string, number>}
+* @private
+* @const
+*/
+var InvalidHostElements = {
+	"BODY": 1,
+	"HTML": 1,
+	"EFX-GRID": 1,
+	"ATLAS-BLOTTER": 1,
+	"EF-GRID": 1
+};
+
+/** @private
+* @param {Object} instance
+* @return {Object}
+*/
+var _cloneInstance = function (instance) {
+	return new instance.constructor();
+};
+/** @private
+* @param {number} num
+* @return {!Array.<Object>}
+*/
+var _newArrayOfObject = function (num) {
+	var ary = new Array(num);
+	for(var i = 0; i < num; ++i) {
+		ary[i] = {};
+	}
+	return ary;
+};
+/** @private
+* @param {Element} elem
+* @param {boolean=} bool
+*/
+var _toggleInlineElement = function (elem, bool) {
+	var s = elem.style;
+	if(bool == null) {
+		bool = s.display !== "inline-block";
+	}
+	if(bool) {
+		s.display = "inline-block";
+		s.verticalAlign = "top";
+	} else {
+		s.display = "";
+		s.verticalAlign = "";
+	}
+};
+
+/** @constructor
+* @param {Element} gridElem
+*/
+var MultiTableManager = function (gridElem) {
+	this._onDelayedConfiguration = this._onDelayedConfiguration.bind(this);
+	this._onConfiguration = this._onConfiguration.bind(this);
+	this._onDataChanged = this._onDataChanged.bind(this);
+
+	this._tables = [];
+	if(gridElem) {
+		this._emeraldGrid = gridElem.tagName === "EF-GRID";
+		this._tables.push(gridElem);
+	}
+};
+Ext.inherits(MultiTableManager, EventDispatcher);
+
+/** @type {Array.<Element>}
+* @private
+*/
+MultiTableManager.prototype._tables = null;
+/** @type {Object}
+* @private
+*/
+MultiTableManager.prototype._configObj = null;
+/** @type {Array}
+* @private
+*/
+MultiTableManager.prototype._extensions = null;
+/** @type {number}
+* @private
+*/
+MultiTableManager.prototype._tableCount = 1;
+/** @type {boolean}
+* @private
+*/
+MultiTableManager.prototype._emeraldGrid = false;
+/** @type {boolean}
+* @private
+*/
+MultiTableManager.prototype._ready = false;
+
+
+/** @public
+* @function
+* @param {Element} vScrollbarHost Host element for the vertical scrollbar.
+* @param {Element} hScrollbarHost Host element for the horizontal scrollbar. This element must be a child of the vScrollbarHost element.
+* @param {Array.<Element>} gridElems Array of grid elements. The first element will be treated as primary grid.
+* @return {Promise.<Array>}
+*/
+MultiTableManager.synchronizeVScrollbar = function(vScrollbarHost, hScrollbarHost, gridElems) {
+	if(!vScrollbarHost || !hScrollbarHost) {
+		return Promise.reject("Host elements for vertical and horizontal scrollbars are not specified.");
+	}
+	if(vScrollbarHost === hScrollbarHost) {
+		return Promise.reject("Vertical and horizontal scrollbars cannot have the same host element.");
+	}
+	if(InvalidHostElements[vScrollbarHost.tagName] || InvalidHostElements[hScrollbarHost.tagName]) {
+		return Promise.reject("Host element cannot be body element.");
+	}
+
+	var gridLen = 0;
+	if(gridElems) {
+		if(GridElements[gridElems.tagName]) { // Accept single grid element as a parameter
+			gridElems = [gridElems];
+		}
+		gridLen = gridElems.length || 0;
+	}
+
+	// Element validation
+	var i, gridElem;
+	var validatedElems = [];
+	for(i = 0; i < gridLen; ++i) {
+		gridElem = gridElems[i];
+		if(gridElem && GridElements[gridElem.tagName]) {
+			validatedElems.push(gridElem);
+		}
+	}
+	gridLen = validatedElems.length;
+	if(!gridLen) {
+		return Promise.reject("No grid element detected for scrollbar synchronization.");
+	}
+
+	var promises = [];
+	for(i = 0; i < gridLen; ++i) {
+		gridElem = validatedElems[i];
+		if(gridElem.api) {
+			promises.push(Promise.resolve(gridElem));
+		} else {
+			var deferredConfig = gridElem._deferredConfig;
+			if(!deferredConfig) {
+				deferredConfig = gridElem._deferredConfig = new Deferred();
+				gridElem.addEventListener("configured", MultiTableManager._onGridConfigured);
+			}
+			promises.push(deferredConfig.promise);
+		}
+	}
+	return Promise.all(promises).then(
+		MultiTableManager._onVScrollbarSynchronization.bind(null, vScrollbarHost, hScrollbarHost, validatedElems)
+	);
+};
+/** @private
+* @function
+* @param {Object} e
+*/
+MultiTableManager._onGridConfigured = function(e) {
+	var gridElem = e.currentTarget;
+	gridElem.removeEventListener("configured", MultiTableManager._onGridConfigured);
+	if(gridElem._deferredConfig) {
+		var d = gridElem._deferredConfig;
+		gridElem._deferredConfig = null;
+		d.resolve(gridElem);
+	}
+};
+/** @private
+* @function
+* @param {Element} vScrollbarHost Host element for the vertical scrollbar.
+* @param {Element} hScrollbarHost Host element for the horizontal scrollbar. This element must be a child of the vScrollbarHost element.
+* @param {Array.<Element>} gridElems
+*/
+MultiTableManager._onVScrollbarSynchronization = function(vScrollbarHost, hScrollbarHost, gridElems) {
+	// Dom.removeChildren(vScrollbarHost);
+	Dom.removeChildren(hScrollbarHost);
+
+	vScrollbarHost.style.overflow = "hidden";
+	vScrollbarHost.style.position = "relative";
+
+	hScrollbarHost.style.whiteSpace = "nowrap";
+	hScrollbarHost.style.overflow = "auto hidden";
+
+	var gridLen = gridElems.length;
+	var mainCore = gridElems[0].api.getCoreGrid();
+	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);
+		} else {
+			core.getVScrollbar().attachToExternalElement(vScrollbarHost);
+			gridElem._vScrollbarSynchronization = true; // Marked for internal usage
+		}
+	}
+
+	Dom.appendChild(hScrollbarHost, gridElems);
+	// Dom.appendChild(vScrollbarHost, hScrollbarHost);
+};
+
+/** @public
+* @param {Object=} configObj
+*/
+MultiTableManager.prototype.setGridConfig = function (configObj) {
+	// TODO: Clear Previous Config
+
+	this._configObj = configObj;
+	if(!configObj) {
+		// TODO: Remove all existing tables
+		return;
+	}
+	this._extensions = configObj.extensions ? configObj.extensions.slice() : [];
+
+	var main = this._tables[0];
+	if(main) {
+		configObj = this._cloneConfig();
+		main.addEventListener("configured", this._onDelayedConfiguration);
+		main.config = configObj;
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+MultiTableManager.prototype._onDelayedConfiguration = function (e) {
+	setTimeout(this._onConfiguration, 10); // Add delay to ensure that scrollbars are synchronized first
+};
+/** @private
+* @param {Object} e
+*/
+MultiTableManager.prototype._onConfiguration = function () {
+	if(this._ready) {
+		return;
+	}
+	this._ready = true;
+
+	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();
+	}
+	this._tables = [];
+	this._extensions = null;
+	this._ready = false;
+};
+
+
+/** @private
+* @return {!Object}
+*/
+MultiTableManager.prototype._cloneConfig = function () {
+	var obj = null;
+	if(this._configObj) {
+		obj = cloneObject(this._configObj);
+		if(Array.isArray(obj.columns)) {
+			obj.columns = this._configObj.columns.slice();
+		}
+	}
+	return obj || {};
+};
+
+/** @public
+* @return {number}
+*/
+MultiTableManager.prototype.getTableCount = function() {
+	return this._tableCount;
+};
+/**
+* @public
+* @param {number} num Number of tables. Number cannot be less than one.
+*/
+MultiTableManager.prototype.setTableCount = function(num) {
+	this._tableCount = num > 0 ? num : 1;
+
+	if(this._ready) {
+		var tableCount = this._tables.length;
+		if(this._tableCount > tableCount) {
+			this._addTables(this._tableCount - tableCount);
+		} else if(this._tableCount < tableCount) {
+			this._removeTables(tableCount - this._tableCount);
+		}
+	}
+};
+/**
+* @private
+* @return {Element}
+*/
+MultiTableManager.prototype._addTable = function() {
+	var main = this._tables[0];
+	var parentElem = main.parentNode;
+	var mainDataView = main.api.getDataView();
+	// var mainDataTable = main.api.getDataTable();
+
+	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
+		};
+	} else {
+		configObj.rows = ary;
+	}
+
+	var sub = document.createElement(main.tagName);
+	_toggleInlineElement(sub, true);
+
+	sub.config = configObj;
+
+	var lastTable = this._tables[this._tables.length - 1];
+	parentElem.insertBefore(sub, lastTable.nextSibling);
+	return sub;
+};
+/**
+* @private
+* @param {number} num
+*/
+MultiTableManager.prototype._addTables = function(num) {
+	if(!num || num < 0) {
+		return;
+	}
+
+	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();
+		this._tables.push(grid);
+	}
+
+	if(main._vScrollbarSynchronization) {
+		MultiTableManager.synchronizeVScrollbar(
+			main.api.getCoreGrid().getVScrollbar().getParent(),
+			main.parentNode,
+			this._tables
+		);
+	}
+};
+/**
+* @private
+* @param {number} num
+*/
+MultiTableManager.prototype._removeTables = function(num) {
+	var tableCount = this._tables.length;
+	if (tableCount - num < 1) {
+		num = tableCount - 1;
+	}
+	if(!num) {
+		return;
+	}
+	for(var i = 0; i < num; ++i) {
+		var sub = this._tables.pop();
+		sub.config = null;
+		if(sub.parentNode) {
+			sub.parentNode.removeChild(sub);
+		}
+	}
+	if(this._tables.length === 1) {
+		// TODO: Reset state
+		this._tables[0].style.display = "";
+	}
+};
+/**
+* @private
+* @param {Object} e
+*/
+MultiTableManager.prototype._onDataChanged = function(e) {
+
+};
+
+
+/** @public
+* @param {number=} at
+* @return {Element}
+*/
+MultiTableManager.prototype.getTable = function(at) {
+	if(!at) {
+		at = 0;
+	}
+	return this._tables[at] || null;
+};
+
+/** @private
+* @return {!Array}
+*/
+MultiTableManager.prototype._generateExtensions = function() {
+	var extCount = this._extensions ? this._extensions.length : 0;
+	var ary = new Array(extCount);
+	for(var i = 0; i < extCount; ++i) {
+		var ext = this._extensions[i];
+		if(ext.hasMultiTableSupport && ext.hasMultiTableSupport()) {
+			ary[i] = ext;
+		} else {
+			ary[i] = _cloneInstance(ext);
+		}
+	}
+	return ary;
+};
+/** @private
+* @param {string} methodName
+* @param {...*} args
+*/
+MultiTableManager.prototype._execAll = function(methodName, args) {
+	var tableCount = this._tables.length;
+	for(var i = 0; i < tableCount; ++i) {
+		var tbl = this._tables[i];
+		if(args !== undefined) { // eslint-disable-line
+			if(arguments.length > 2) {
+				tbl.api[methodName].apply(
+					tbl.api,
+					Array.prototype.slice.call(arguments, 1)
+				);
+			} else {
+				tbl.api[methodName](args);
+			}
+		} else {
+			tbl.api[methodName]();
+		}
+	}
+};
+
+/** @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
+*/
+MultiTableManager.prototype.insertRow = function(rowOption, at) {
+	if(this._emeraldGrid) {
+		return; // TODO
+	}
+
+	var tableCount = this._tables.length;
+	for(var i = 0; i < tableCount; ++i) {
+		var tbl = this._tables[i];
+		tbl.api.insertRow(rowOption, at);
+	}
+};
+/** @public
+* @param {number=} at
+*/
+MultiTableManager.prototype.removeRow = function(at) {
+	if(this._emeraldGrid) {
+		return; // TODO
+	}
+	if(at == null) {
+		at = this.getRowCount() - 1;
+	}
+
+	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();
+};
+
+export default MultiTableManager;
+export { MultiTableManager };

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

@@ -0,0 +1,83 @@
+
+
+declare namespace NumberFormatter {
+
+    type Options = {
+        formatType?: string,
+        type: string,
+        precisionEnabled?: boolean,
+        decimalPlaces?: number,
+        plusSign?: boolean,
+        separator?: boolean,
+        percentSign?: boolean,
+        scalingUnit?: string,
+        multiplyBy100?: boolean,
+        mutiplyBy100?: boolean
+    };
+
+}
+
+declare class NumberFormatter {
+
+    constructor(options?: NumberFormatter.Options);
+
+    public init(options?: NumberFormatter.Options): void;
+
+    public resetToDefaults(): void;
+
+    public static padDecimalPartWithZeroes(str: string, precision: number): string;
+
+    public getOptions(options?: any): any;
+
+    public format(origVal: number): string;
+
+    public enableDefaultFormat(): void;
+
+    public enablePrecision(bool?: boolean): void;
+
+    public enableSeparator(bool?: boolean): void;
+
+    public enablePercentSign(bool?: boolean): void;
+
+    public enablePercentFormat(bool?: boolean): void;
+
+    public enablePlusSign(bool?: boolean): void;
+
+    public enableMultiplyBy100(bool?: boolean): void;
+
+    public enableMillionScaling(bool?: boolean): void;
+
+    public enableBillionScaling(bool?: boolean): void;
+
+    public isDefaultFormatEnabled(): boolean;
+
+    public isPrecisionEnabled(): boolean;
+
+    public isSeparatorEnabled(): boolean;
+
+    public isPercentSignEnabled(): boolean;
+
+    public isPercentFormatEnabled(): boolean;
+
+    public isPlusSignEnabled(): boolean;
+
+    public isMultiplyBy100Enabled(): boolean;
+
+    public isMillionScalingEnabled(): boolean;
+
+    public isBillionScalingEnabled(): boolean;
+
+    public getPrecision(): number;
+
+    public setPrecision(num: number): void;
+
+    public setSeparatorCharacter(cha: string): void;
+
+    public setPercentSignCharacter(cha: string): void;
+
+}
+
+declare function val(): void;
+
+export default NumberFormatter;
+export {NumberFormatter};