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

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

@@ -0,0 +1,33 @@
+import {Dom} from './Dom.js';
+import {Ext} from './Ext.js';
+import {ElementWrapper} from './ElementWrapper.js';
+import {ElfUtil} from './ElfUtil.js';
+
+declare class RangeBar {
+
+    constructor(elem?: Element|null, options?: any);
+
+    public static readonly defaults: any;
+
+    public setValue(lowVal?: number|null, lastVal?: number|null, highVal?: number|null): void;
+
+    public hide(bool?: boolean|null): void;
+
+    public isHidden(): boolean;
+
+    public enableTooltip(enabled?: boolean|null): void;
+
+    public setStyles(obj?: any): void;
+
+    public getPercent(): number;
+
+    public setPercent(percent?: number|null): void;
+
+    public isValid(): boolean;
+
+    public isInvalid(): boolean;
+
+}
+
+export default RangeBar;
+export {RangeBar};

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

@@ -0,0 +1,260 @@
+import {Dom} from './Dom.js';
+import {Ext} from './Ext.js';
+import {ElementWrapper} from './ElementWrapper.js';
+import {ElfUtil} from './ElfUtil.js';
+
+/** Provides UI for simple range bar
+* @constructor
+* @param {Element=} elem
+* @param {Object=} options
+*/
+let RangeBar = function (elem, options) { // TODO: Add type definition for options object showing all available options
+	this._elem = elem || Dom.div();
+	this._elem.style.lineHeight = "1";
+	this._elem.style.position = "relative";
+	this._elem.style.textAlign = "center";
+
+	this._slider = Dom.div();
+	this._slider.style.width = "3px";
+	this._slider.style.height = "100%";
+	this._slider.style.position = "absolute";
+
+	this.setStyles(options);
+};
+Ext.inherits(RangeBar, ElementWrapper);
+
+/** @type {Object}
+* @public
+* @const
+*/
+RangeBar.defaults = {
+	"trackHeight": "0.8em",
+	"thumbColor": "#FFF", // TODO: Make this able to change dynamically
+	"naText": "N/A"
+};
+
+/** @type {Element}
+* @private
+*/
+RangeBar.prototype._slider = null;
+/** @type {number}
+* @private
+*/
+RangeBar.prototype._percent; // Intentionally left undefined
+/** @type {boolean}
+* @private
+*/
+RangeBar.prototype._tooltipEnabled = true;
+/** @type {boolean}
+* @private
+*/
+RangeBar.prototype._hidden = false;
+/** @type {!Object}
+* @private
+*/
+RangeBar.prototype._styles;
+
+/** @public
+* @param {number=} lowVal
+* @param {number=} lastVal
+* @param {number=} highVal
+*/
+RangeBar.prototype.setValue = function(lowVal, lastVal, highVal) {
+	this.setPercent(RangeBar._calculatePercent(lowVal, lastVal, highVal));
+
+	// If all values are not intialized, hide the rangebar instead of showing N/A
+	this.hide(lowVal == null && lastVal == null && highVal == null);
+
+	// if(this._tooltipEnabled) {
+	// 	this._updateTooltip(lowVal, lastVal, highVal);
+	// }
+};
+/** @public
+* @param {boolean=} bool
+*/
+RangeBar.prototype.hide = function(bool) {
+	bool = bool !== false;
+	if(this._hidden !== bool) {
+		this._hidden = bool;
+		this._elem.style.visibility = bool ? "hidden" : "";
+	}
+};
+/** @public
+* @return {boolean}
+*/
+RangeBar.prototype.isHidden = function() {
+	return this._hidden;
+};
+
+/** @public
+* @param {boolean=} enabled
+*/
+RangeBar.prototype.enableTooltip = function(enabled) {
+// 	enabled = enabled != false;
+// 	if(this._tooltipEnabled !== enabled) {
+// 		if(enabled) {
+// 			this._elem.removeAttribute("title");
+// 		} else {
+// 			this._updateTooltip();
+// 		}
+// 		this._tooltipEnabled = enabled;
+// 	}
+// };
+
+// tr.getTooltipLinebreakChar = function () {
+// 	return tr.isCoralTooltipLoaded() ? "<br>" : "\n";
+};
+/** @public
+* @param {Object=} obj
+*/
+RangeBar.prototype.setStyles = function(obj) {
+	if(!this._styles) {
+		if(!obj) {
+			obj = {};
+		}
+		let defaults = RangeBar.defaults;
+		this._styles = {};
+		this._styles["trackColor"] = obj["trackColor"] || ElfUtil.themeColors["trackColor"];
+		this._styles["fontColor"] = obj["color"] || obj["fontColor"] || defaults["fontColor"] || null;
+		this._styles["trackHeight"] = obj["trackHeight"] || defaults["trackHeight"];
+		this._styles["thumbColor"] = obj["thumbColor"] || defaults["thumbColor"];
+		this._styles["naText"] = obj["naText"] || defaults["naText"];
+	} else if(obj) {
+		if(obj["trackColor"]) {
+			this._styles["trackColor"] = obj["trackColor"];
+		}
+		if(obj["color"] || obj["fontColor"]) {
+			this._styles["fontColor"] = obj["color"] || obj["fontColor"];
+		}
+		if(obj["trackHeight"]) {
+			this._styles["trackHeight"] = obj["trackHeight"];
+		}
+		if(obj["thumbColor"]) {
+			this._styles["thumbColor"] = obj["thumbColor"];
+		}
+		if(obj["naText"] != null) {
+			this._styles["naText"] = obj["naText"] || "";
+		}
+	}
+
+	if(!this.isValid()) {
+		this._elem.style.backgroundColor = this._styles["trackColor"];
+	}
+	if(this._styles["fontColor"] != null) {
+		this._elem.style.color = this._styles["fontColor"];
+	}
+	this._elem.style.minHeight = this._styles["trackHeight"];
+	this._slider.style.backgroundColor = this._styles["thumbColor"];
+};
+
+/** @private
+* @param {number=} lowVal
+* @param {number=} lastVal
+* @param {number=} highVal
+*/
+RangeBar.prototype._updateTooltip = function(lowVal, lastVal, highVal) {
+// 	let lineBreak = "\n";
+// 	let title = "";
+// 	if((typeof lowVal === "number") && (lowVal >= 0)) {
+// 		title += ("Low: " + lowVal);
+// 	}
+// 	if((typeof lastVal === "number") && (lastVal >= 0)) {
+// 		if(title) {
+// 			title += lineBreak;
+// 		}
+// 		title += ("Last: " + lastVal);
+// 	}
+// 	if((typeof highVal === "number") && (highVal >= 0)) {
+// 		if(title) {
+// 			title += lineBreak;
+// 		}
+// 		title += ("High: " + highVal);
+// 	}
+
+// 	this._elem.setAttribute("title", title);
+};
+/** @public
+* @return {!number}
+*/
+RangeBar.prototype.getPercent = function() {
+	return this._percent;
+};
+/** @public
+* @param {number=} percent [0, 1] or NaN
+*/
+RangeBar.prototype.setPercent = function(percent) {
+	percent = RangeBar._limitPercent(percent);
+	if(this._percent !== percent) {
+		if(this.isValid() || percent === percent) { // Prevent unnecessary update by checking NaN
+			this._percent = percent;
+			this._updateUI();
+		}
+	}
+};
+/** @private
+* @function
+* @param {number=} lowVal
+* @param {number=} lastVal
+* @param {number=} highVal
+* @return {number}
+*/
+RangeBar._calculatePercent = function(lowVal, lastVal, highVal) {
+	if((!lowVal && lowVal !== 0) ||
+		(!lastVal && lastVal !== 0) ||
+		(!highVal && highVal !== 0)) {
+		return NaN;
+	}
+	if(highVal === lowVal) {
+		return 0.5;
+	}
+	return (lastVal - lowVal) / (highVal - lowVal);
+};
+/** @private
+* @function
+* @param {number} percent
+* @return {number} [0, 1] or NaN
+*/
+RangeBar._limitPercent = function(percent) {
+	if(percent < 0) {
+		return 0;
+	}
+	if(percent > 1) {
+		return 1;
+	}
+	return percent;
+};
+/** @public
+* @return {boolean}
+*/
+RangeBar.prototype.isValid = function() {
+	return this._percent === this._percent;
+};
+
+/** @public
+* @function
+* @return {boolean}
+*/
+RangeBar.prototype.isInvalid = function() {
+	return !this.isValid();
+};
+
+/** @private */
+RangeBar.prototype._updateUI = function() {
+	if(this.isValid()) {
+		let percent = ((this._percent * 10000) | 0) / 10000; // rounding number
+		this._slider.style.left = "calc(" +
+			(percent * 100) +
+			"% - " +
+			Math.round(percent * 300) / 100 +
+			"px)";
+
+		this._elem.style.backgroundColor = this._styles["trackColor"];
+		Dom.setContent(this._elem, this._slider);
+	} else {
+		this._elem.style.backgroundColor = "";
+		Dom.setContent(this._elem, this._styles["naText"]);
+	}
+};
+
+export default RangeBar;
+export {RangeBar};

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

@@ -0,0 +1,30 @@
+
+
+declare class RequestQueue {
+
+    constructor(reqBuilder: ((...params: any[]) => any)|null, reqLimit?: number|null, timeLimit?: number|null);
+
+    public reset(): void;
+
+    public dispose(): void;
+
+    public setConcurrentLimit(concurrentLimit?: number|null): void;
+
+    public setFrequencyLimit(reqLimit?: number|null, timeLimit?: number|null): void;
+
+    public setRequestBuilder(reqBuilder: ((...params: any[]) => any)|null): void;
+
+    public add(obj: any): void;
+
+    public addFront(obj: any): void;
+
+    public getQueue(): any[];
+
+    public makeRequest(obj: any): Promise<Response>|null;
+
+    public isLimitReached(): boolean;
+
+}
+
+export default RequestQueue;
+export {RequestQueue};

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

@@ -0,0 +1,228 @@
+/** RequestQueue limits number of execution within the specified period of time, while maintain all of the requests in a queue. <br>
+* RequestQueue can be used to limit high frequency requests (preventing server overload). <br>
+* RequestQueue can be used to merge multiple requests into one single request (reducing network calls). <br>
+* RequestQueue can be used to split one large request into several smaller requests (preventing invalid request or long request time). <br>
+* RequestQueue can be used to reduce duplicate requests (removing redundancy). <br>
+*
+* @constructor
+* @param {Function} reqBuilder Function that creates a request
+* @param {number=} reqLimit Number of requests allowed. Use zero reqLimit to lift up the limit
+* @param {number=} timeLimit Time limit in milliseconds
+* @example
+* let rq = new RequestQueue(function(val, q) { console.log(val); return true; }, 1, 1000);
+* for(let i = 0; i < 10; ++i) {
+*  rq.add(i); // Number 1 - 10 will be logged to console every one second
+* }
+*/
+let RequestQueue = function (reqBuilder, reqLimit, timeLimit) {
+	this._onSuccess = this._onSuccess.bind(this);
+	this._onRefreshCounter = this._onRefreshCounter.bind(this);
+	this._nextInQueue = this._nextInQueue.bind(this);
+
+	this._reqQueue = [];
+	this.setRequestBuilder(reqBuilder);
+	this.setFrequencyLimit(reqLimit, timeLimit);
+};
+
+/** @type {number}
+* @private
+*/
+RequestQueue.prototype._concurrentLimit = NaN;
+/** @type {Object}
+* @private
+*/
+RequestQueue.prototype._freqLimit = null;
+
+/** @type {number}
+* @private
+*/
+RequestQueue.prototype._concurrentReqs = 0;
+/** @type {number}
+* @private
+*/
+RequestQueue.prototype._bufferId = 0;
+
+/** @type {!Array}
+* @private
+*/
+RequestQueue.prototype._reqQueue;
+/** @type {Function}
+* @private
+*/
+RequestQueue.prototype._reqBuilder = null;
+
+
+/** Any request left in the queue and unfinished request will be discarded
+* @public
+*/
+RequestQueue.prototype.reset = function() {
+	this._reqQueue.length = 0;
+	this._concurrentReqs = 0;
+
+	if(this._freqLimit) {
+		if(this._freqLimit.timerId) {
+			clearTimeout(this._freqLimit.timerId);
+			this._freqLimit.timerId = 0;
+		}
+		this._freqLimit.reqCount = 0;
+	}
+	if(this._bufferId) {
+		clearTimeout(this._bufferId);
+		this._bufferId = 0;
+	}
+};
+/** @public */
+RequestQueue.prototype.dispose = function() {
+	this.reset();
+
+	this._reqBuilder = null; // Free up user bound function
+};
+
+/** Limit number of requests that is being processed in the server at one time
+* @public
+* @param {number=} concurrentLimit Use zero to have no limit at all
+*/
+RequestQueue.prototype.setConcurrentLimit = function(concurrentLimit) {
+	this._concurrentLimit = (concurrentLimit > 0) ? concurrentLimit : NaN;
+};
+/** Limit number of requests to make within the specified time limit in milliseconds
+* @public
+* @param {number=} reqLimit Number of requests allowed. Use zero reqLimit to lift up the limit
+* @param {number=} timeLimit Time limit in milliseconds
+*/
+RequestQueue.prototype.setFrequencyLimit = function(reqLimit, timeLimit) {
+	if(!reqLimit && !timeLimit) {
+		if(this._freqLimit) {
+			if(this._freqLimit.timerId) {
+				clearTimeout(this._freqLimit.timerId);
+			}
+			this._freqLimit = null;
+		}
+		return;
+	}
+	if(!this._freqLimit) {
+		this._freqLimit = {};
+		this._freqLimit.reqLimit = 1;
+		this._freqLimit.timeLimit = 0; // in milliseconds
+		this._freqLimit.reqCount = 0;
+		this._freqLimit.timerId = 0;
+	}
+
+	if(reqLimit > 0) {
+		this._freqLimit.reqLimit = reqLimit;
+	}
+	if(timeLimit != null) {
+		this._freqLimit.timeLimit = timeLimit;
+	}
+};
+/** @public
+* @param {Function} reqBuilder Function that creates a request
+*/
+RequestQueue.prototype.setRequestBuilder = function(reqBuilder) {
+	this._reqBuilder = reqBuilder;
+};
+
+/** Adding the object to the back of the queue. The back most item will be executed last.
+* @public
+* @param {*} obj A parameter that will be passed to reqBuilder at the request time. Use native JavaScript object to pass multiple data
+*/
+RequestQueue.prototype.add = function(obj) {
+	this._reqQueue.push(obj);
+	if(!this._bufferId) { // Prevent making request repeatedly because items may be added in for loop
+		this._bufferId = setTimeout(this._nextInQueue, 0);
+	}
+};
+/** Adding the object to the front of the queue. The front most item will be executed first.
+* @public
+* @param {*} obj A parameter that will be passed to reqBuilder at the request time. Use native JavaScript object to pass multiple data
+*/
+RequestQueue.prototype.addFront = function(obj) {
+	this._reqQueue.unshift(obj); // Always wait for the queue
+	if(!this._bufferId) { // Prevent making request repeatedly because items may be added in for loop
+		this._bufferId = setTimeout(this._nextInQueue, 0);
+	}
+};
+/** @public
+* @return {!Array}
+*/
+RequestQueue.prototype.getQueue = function() {
+	return this._reqQueue;
+};
+
+/** Force making a request without waiting for the queue or limits
+* @public
+* @suppress {invalidCasts}
+* @param {*} obj An object contains anything for constructing at the actual request time
+* @return {Promise<Response>}
+*/
+RequestQueue.prototype.makeRequest = function(obj) {
+	let req = this._reqBuilder ? this._reqBuilder(obj, this._reqQueue) : null;
+	if(!req) { // 0, null, NaN, undefined, "" (empty string)
+		return null; // No request is created at this time
+	}
+
+	let prom = null;
+	if(typeof req === "string") {
+		// WARNING: fetch() is not supported in IE
+		prom = fetch(req); // WARNING: Response with Response object.
+	} else if(req["then"]) { // thenable object
+		prom = /** @type{Promise} */(req);
+	} else {
+		prom = Promise.resolve(req);
+	}
+
+	if(prom) {
+		if(this._freqLimit) {
+			if(!this._freqLimit.timerId) {
+				this._freqLimit.timerId = setTimeout(this._onRefreshCounter, this._freqLimit.timeLimit);
+			}
+			++this._freqLimit.reqCount;
+		}
+		++this._concurrentReqs;
+		prom["then"](this._onSuccess)["catch"](this._onSuccess);
+	}
+	return /** @type{Promise<Response>} */(prom);
+};
+
+/** @public
+* @return {boolean}
+*/
+RequestQueue.prototype.isLimitReached = function() {
+	if(this._freqLimit) {
+		if(this._freqLimit.reqCount >= this._freqLimit.reqLimit) {
+			return true;
+		}
+	}
+	return (this._concurrentReqs >= this._concurrentLimit);
+};
+
+/** @private
+* @param {*} res
+* @return {Promise}
+*/
+RequestQueue.prototype._onSuccess = function(res) {
+	--this._concurrentReqs;
+	this._nextInQueue();
+	return Promise.resolve(res);
+};
+/** @private */
+RequestQueue.prototype._onRefreshCounter = function() {
+	if(this._freqLimit) {
+		this._freqLimit.reqCount = 0; // Any request waiting for response will not be counted toward reqLimit in the next time frame
+		this._freqLimit.timerId = 0;
+	}
+	this._nextInQueue();
+};
+/** @private */
+RequestQueue.prototype._nextInQueue = function() {
+	this._bufferId = 0;
+	while(this._reqQueue.length) {
+		if(this.isLimitReached()) {
+			break;
+		}
+		this.makeRequest(this._reqQueue.shift()); // Shift out the first item in queue
+	}
+};
+
+export default RequestQueue;
+export {RequestQueue};

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

@@ -0,0 +1,60 @@
+import { injectCss, prettifyCss } from "./Util.js";
+import { ExpanderIcon } from "./ExpanderIcon.js";
+import { Icon } from "./Icon.js";
+
+declare namespace RowPainter {
+
+    type Options = {
+        clickableCell: boolean,
+        headerSpanning?: boolean|null,
+        footerSpanning?: boolean|null,
+        onCellClicked?: ((...params: any[]) => any)|null,
+        headerMenuClicked?: ((...params: any[]) => any)|null,
+        segmentMode?: boolean|null
+    };
+
+    type RenderingOptions = {
+        colIndex: number,
+        rowIndex: number,
+        cell: any,
+        section: any,
+        footerRow?: boolean|null,
+        checkboxColumnIndex: number,
+        collapsed?: boolean|null,
+        hiddenArrow?: boolean|null,
+        groupId?: string|null,
+        groupLevel?: number|null,
+        nonGroupRow?: boolean|null,
+        colorTagClass?: string|null,
+        indentSize?: number|null,
+        content: any
+    };
+
+}
+
+declare class RowPainter {
+
+    constructor(options?: RowPainter.Options|null);
+
+    public static applyGroupingStyles(grid: any): void;
+
+    public static disableColorTag(grid: any, disabled?: boolean|null): void;
+
+    public static enableHeaderMenu(grid: any, enabled?: boolean|null): void;
+
+    public config(options?: RowPainter.Options|null): void;
+
+    public removeHeaderStyle(section: any, columnIndex: number, rowIndex: number): void;
+
+    public removeAllStyles(section: any, columnIndex: number, rowIndex: number): void;
+
+    public applyHeaderStyle(e: RowPainter.RenderingOptions|null): void;
+
+    public applyContentAsHeaderStyle(e: any, collapsed: boolean): void;
+
+    public applyRowStyle(e: any): void;
+
+}
+
+export default RowPainter;
+export {RowPainter};