@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,611 @@
+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
+*/
+let GridElements = {
+	"EFX-GRID": 1,
+	"ATLAS-BLOTTER": 1,
+	"EF-GRID": 1
+};
+/** @type {Object.<string, number>}
+* @private
+* @const
+*/
+let InvalidHostElements = {
+	"BODY": 1,
+	"HTML": 1,
+	"EFX-GRID": 1,
+	"ATLAS-BLOTTER": 1,
+	"EF-GRID": 1
+};
+
+/** @private
+* @param {Object} instance
+* @return {Object}
+*/
+let _cloneInstance = function (instance) {
+	return new instance.constructor();
+};
+/** @private
+* @param {number} num
+* @return {!Array.<Object>}
+*/
+let _newArrayOfObject = function (num) {
+	let ary = new Array(num);
+	for(let i = 0; i < num; ++i) {
+		ary[i] = {};
+	}
+	return ary;
+};
+/** @private
+* @param {Element} elem
+* @param {boolean=} bool
+*/
+let _toggleInlineElement = function (elem, bool) {
+	if(!elem || elem.style.display === "none") {
+		return;
+	}
+
+	let 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
+*/
+let MultiTableManager = function (gridElem) {
+	this._onDelayedConfiguration = this._onDelayedConfiguration.bind(this);
+	this._onConfiguration = this._onConfiguration.bind(this);
+	this._onWrapCountChanged = this._onWrapCountChanged.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;
+/** @type {number}
+* @private
+*/
+MultiTableManager.prototype._wrapSize = 0;
+
+
+/** @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.");
+	}
+
+	let gridLen = 0;
+	if(gridElems) {
+		if(GridElements[gridElems.tagName]) { // Accept single grid element as a parameter
+			gridElems = [gridElems];
+		}
+		gridLen = gridElems.length || 0;
+	}
+
+	// Element validation
+	let i, gridElem;
+	let 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.");
+	}
+
+	let promises = [];
+	for(i = 0; i < gridLen; ++i) {
+		gridElem = validatedElems[i];
+		if(gridElem.api) {
+			promises.push(Promise.resolve(gridElem));
+		} else {
+			let 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) {
+	let gridElem = e.currentTarget;
+	gridElem.removeEventListener("configured", MultiTableManager._onGridConfigured);
+	if(gridElem._deferredConfig) {
+		let 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(hScrollbarHost);
+
+	vScrollbarHost.style.overflow = "hidden";
+	vScrollbarHost.style.position = "relative";
+
+	hScrollbarHost.style.whiteSpace = "nowrap";
+	hScrollbarHost.style.overflow = "auto hidden";
+
+	let gridLen = gridElems.length;
+	let mainCore = gridElems[0].api.getCoreGrid();
+	for(let i = 0; i < gridLen; ++i) {
+		let gridElem = gridElems[i];
+		let 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);
+};
+
+/** @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() : [];
+
+	let 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) {
+	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
+* @param {Object} e
+*/
+MultiTableManager.prototype._onConfiguration = function () {
+	if(this._ready) {
+		return;
+	}
+	this._ready = true;
+
+	if(this._wrapSize) {
+		this._wrapTable(this._wrapSize);
+	} else {
+		this._setTableCount(this._tableCount);
+	}
+};
+
+/** @public
+*/
+MultiTableManager.prototype.dispose = function () {
+	let len = this._tables.length;
+	for(let i = 0; i < len; ++i) {
+		let table = this._tables[i];
+		if(table.api) {
+			table.api.dispose();
+
+		} else {
+			table.dispose(); // rt-grid
+		}
+	}
+	this._tables = [];
+	this._extensions = null;
+	this._ready = false;
+};
+
+
+/** @private
+* @return {!Object}
+*/
+MultiTableManager.prototype._cloneConfig = function () {
+	let obj = null;
+	if(this._configObj) {
+		obj = cloneObject(this._configObj);
+		if(Array.isArray(obj.columns)) {
+			let runtimeConfig = this._tables[0].api ? this._tables[0].api.getConfigObject() : this._configObj;
+			obj.columns = runtimeConfig.columns.slice();
+		}
+	}
+	return obj || {};
+};
+
+/** @public
+* @return {number}
+*/
+MultiTableManager.prototype.getTableCount = function() {
+	return this._tables.length;
+};
+/** @private
+* @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) {
+		let tableCount = this._tables.length;
+		if(this._tableCount > tableCount) {
+			this._addTables(this._tableCount - tableCount);
+		} else if(this._tableCount < tableCount) {
+			this._removeTables(tableCount - this._tableCount);
+		}
+	}
+};
+/**
+* @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(tableIndex) {
+	let main = this._tables[0];
+	let parentElem = main.parentNode;
+	let core = main.api.getCoreGrid();
+	let mainDataView = main.api.getDataView();
+	let stp = core.getPlugin("SortableTitlePlugin");
+	let dtp = core.getPlugin("DragAndDropTitlePlugin");
+
+	let configObj = this._cloneConfig();
+	configObj.extensions = this._generateExtensions();
+	configObj.multitable = true;
+
+	delete configObj.staticDataRows;
+	delete configObj.rows;
+	delete configObj.dataModel;
+
+	if(this._wrapSize) {
+		let wrappedViews = mainDataView.getWrappedViews();
+		configObj.dataView = wrappedViews[tableIndex - 1];
+		configObj.grid = main.api;
+	} else {
+		configObj["SortableTitle"] = stp;
+		configObj["DragAndDropTitle"] = dtp;
+		let rowCount = mainDataView.getRowCount();
+
+		let ary = _newArrayOfObject(rowCount);
+		if(this._emeraldGrid) {
+			configObj.dataModel = {
+				data: ary
+			};
+		} else {
+			configObj.rows = ary;
+		}
+	}
+
+	let sub = document.createElement(main.tagName);
+	_toggleInlineElement(sub, true);
+
+	sub.config = configObj;
+
+	let 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;
+	}
+
+	let main = this._tables[0];
+	_toggleInlineElement(main, true); // TODO: Check if we need to do this every time
+
+	for(let i = 0; i < num; ++i) {
+		let grid = this._addTable(this._tables.length);
+		this._tables.push(grid);
+	}
+
+	if(!this._wrapSize) {
+		if(main._vScrollbarSynchronization) {
+			MultiTableManager.synchronizeVScrollbar(
+				main.api.getCoreGrid().getVScrollbar().getParent(),
+				main.parentNode,
+				this._tables
+			);
+		}
+	}
+};
+/**
+* @private
+* @param {number} num
+*/
+MultiTableManager.prototype._removeTables = function(num) {
+	let tableCount = this._tables.length;
+	if (tableCount - num < 1) {
+		num = tableCount - 1;
+	}
+	if(!num) {
+		return;
+	}
+	for(let i = 0; i < num; ++i) {
+		let sub = this._tables.pop();
+		sub.config = null;
+		if(sub.parentNode) {
+			sub.parentNode.removeChild(sub);
+		}
+	}
+};
+
+
+/** @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) {
+		let 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);
+		}
+
+		let dv = main.api.getDataView();
+		dv.listen("wrapCountChanged", this._onWrapCountChanged);
+		dv.wrapView(this._wrapSize);
+	}
+};
+/**
+* @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._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}
+*/
+MultiTableManager.prototype.getTable = function(at) {
+	if(!at) {
+		at = 0;
+	}
+	return this._tables[at] || null;
+};
+
+/** @private
+* @return {!Array}
+*/
+MultiTableManager.prototype._generateExtensions = function() {
+	let extCount = this._extensions ? this._extensions.length : 0;
+	let ary = new Array(extCount);
+	for(let i = 0; i < extCount; ++i) {
+		let 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) {
+	let tableCount = this._tables.length;
+	for(let i = 0; i < tableCount; ++i) {
+		let 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]();
+		}
+	}
+};
+
+/** @public
+* @param {Object=} rowOption
+* @param {number=} at
+*/
+MultiTableManager.prototype.insertRow = function(rowOption, at) {
+	if(this._emeraldGrid) {
+		return;
+	}
+
+	if(this._wrapSize) {
+		this.getTable().api.insertRow(rowOption, at);
+	} else {
+		let tableCount = this._tables.length;
+		for(let i = 0; i < tableCount; ++i) {
+			let tbl = this._tables[i];
+			tbl.api.insertRow(rowOption, at);
+		}
+	}
+};
+/** @public
+* @param {number=} at
+*/
+MultiTableManager.prototype.removeRow = function(at) {
+	if(this._emeraldGrid) {
+		return;
+	}
+	if(at == null) {
+		at = this.getRowCount() - 1;
+	}
+
+	if(this._wrapSize) {
+		this.getTable().api.removeRow(at);
+	} else {
+		let tableCount = this._tables.length;
+		for(let i = 0; i < tableCount; ++i) {
+			let 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;
+	}
+
+	let tableCount = this._tables.length;
+	for(let i = 0; i < tableCount; ++i) {
+		let tbl = this._tables[i];
+		tbl.api.insertColumn(columnOption, idx);
+	}
+};
+/** @public
+* @param {*} colRef Column reference
+*/
+MultiTableManager.prototype.removeColumn = function(colRef) {
+	if(this._emeraldGrid) {
+		return;
+	}
+	let tableCount = this._tables.length;
+	for(let i = 0; i < tableCount; ++i) {
+		let tbl = this._tables[i];
+		tbl.api.removeColumn(colRef);
+	}
+};
+
+/** @public
+* @return {number}
+*/
+MultiTableManager.prototype.getColumnCount = function() {
+	return this.getTable().api.getColumnCount();
+};
+
+export default MultiTableManager;
+export { MultiTableManager };

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

@@ -0,0 +1,85 @@
+
+
+declare namespace NumberFormatter {
+
+    type Options = {
+        formatType?: string|null,
+        type: string,
+        precisionEnabled?: boolean|null,
+        decimalPlaces?: number|null,
+        plusSign?: boolean|null,
+        separator?: boolean|null,
+        percentSign?: boolean|null,
+        scalingUnit?: string|null,
+        multiplyBy100?: boolean|null,
+        mutiplyBy100?: boolean|null
+    };
+
+}
+
+declare class NumberFormatter {
+
+    constructor(options?: NumberFormatter.Options|null);
+
+    public init(options?: NumberFormatter.Options|null): void;
+
+    public resetToDefaults(): void;
+
+    public static padDecimalPartWithZeroes(str: string, precision: number): string;
+
+    public static multiplyByHundred(num: number): number;
+
+    public getOptions(options?: any): any;
+
+    public format(origVal: number): string;
+
+    public enableDefaultFormat(): void;
+
+    public enablePrecision(bool?: boolean|null): void;
+
+    public enableSeparator(bool?: boolean|null): void;
+
+    public enablePercentSign(bool?: boolean|null): void;
+
+    public enablePercentFormat(bool?: boolean|null): void;
+
+    public enablePlusSign(bool?: boolean|null): void;
+
+    public enableMultiplyBy100(bool?: boolean|null): void;
+
+    public enableMillionScaling(bool?: boolean|null): void;
+
+    public enableBillionScaling(bool?: boolean|null): 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};