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

package/lib/core/es6/grid/util/PercentBarRenderer.js

@@ -0,0 +1,316 @@
+/* eslint-disable */
+import ElementWrapper from "../components/ElementWrapper.js";
+import PercentBar from "./PercentBar.js";
+/* eslint-enable */
+
+/** @constructor
+ */
+var PercentBarRenderer = function () {
+	this._pbs = [];
+};
+//#region Public Methods
+/** @public
+ */
+PercentBarRenderer.prototype.dispose = function() {
+	for(var i = this._pbs.length; --i >= 0;) {
+		this._pbs[i].dispose();
+	}
+	this._pbs = null;
+};
+
+//#region Public Methods
+/** @public
+ * @param {ElementWrapper} cell
+ * @param {number} value
+ * @param {number=} opt_max
+ * @param {string=} opt_displayText
+ * @param {number=} opt_textWidth
+ */
+PercentBarRenderer.prototype.render = function(cell, value, opt_max, opt_displayText, opt_textWidth) {
+	if(!cell) { return; }
+	if (value) {
+		var numValue = +value;
+		if (numValue !== numValue) { // string that can't be converted to number
+			cell.setContent(value);
+			return;
+		}
+	}
+
+	var content = cell.getContent();
+	var pb = (content) ? content._percentBar : null;
+	if(!pb) {
+		pb = this._createPercentBar(opt_textWidth);
+
+		this._pbs.push(pb);
+
+		cell.setContent(pb);
+	}
+
+	if (opt_textWidth) {
+		pb.setTextWidth(opt_textWidth); // Custom textWidth per cell
+	}
+	var displayText = opt_displayText || cell["percentText"] || "";
+	this._setDisplayText(pb, value, displayText, opt_max);
+};
+/** @public
+ * @param {ElementWrapper} cell
+ * @param {number} value
+ * @param {number=} opt_max
+ * @return {PercentBar}
+ */
+PercentBarRenderer.prototype.renderForPrinting = function(cell, value, opt_max) {
+	if (value) {
+		var numValue = +value;
+		if (numValue !== numValue) { // string that can't be converted to number
+			cell.setContent(value);
+			return null;
+		}
+	}
+
+	var pb = this._createPercentBar();
+	this._setDisplayText(pb, value, cell["percentText"], opt_max);
+	cell.setContent(pb);
+	return pb;
+};
+/** @private
+ * @param {number=} opt_textWidth
+ * @return {!PercentBar}
+ */
+PercentBarRenderer.prototype._createPercentBar = function(opt_textWidth) {
+	var pb = new PercentBar();
+	if (!opt_textWidth) {
+		if(this._textWidth) {
+			pb.setTextWidth(this._textWidth); // Default text width
+		}
+	}
+	pb.setAlignment(this._alignment);
+	pb.setMovementColor(this._movementColor);
+	pb.useMovementColor(this._movementColorUsed);
+	pb.hideText(this._textHidden);
+	pb.setTrackColor(this._trackColor);
+	pb.enableTooltip(this._tooltipEnabled);
+	return pb;
+};
+/** @private
+ * @param {!PercentBar} pb
+ * @param {number} value
+ * @param {string=} displayText
+ * @param {number=} opt_max
+ */
+PercentBarRenderer.prototype._setDisplayText = function(pb, value, displayText, opt_max) {
+	pb.setValue(value, opt_max, displayText);
+	if(this._txtResizing && displayText) { // HACK: Perform text auto resizing if only displayText exists
+		var tsw = pb.getTextScrollWidth();
+		if(this._maxTextWidth === this._maxTextWidth) {
+			if(tsw > this._maxTextWidth) {
+				this._maxTextWidth = tsw;
+			}
+		} else {
+			this._maxTextWidth = tsw;
+		}
+	}
+};
+
+/** @public
+ * @param {string} alignment Alignment can be "left", "center", "right"
+ */
+PercentBarRenderer.prototype.setAlignment = function(alignment) {
+	if (!alignment) { alignment = "center"; }
+
+	this._alignment = alignment;
+	for(var i = this._pbs.length; --i >= 0;) {
+		this._pbs[i].setAlignment(alignment);
+	}
+};
+/** @public
+ * @param {Object=} colorObj
+ */
+PercentBarRenderer.prototype.setMovementColor = function(colorObj) {
+	this._movementColor = colorObj || null;
+	for(var i = this._pbs.length; --i >= 0;) {
+		this._pbs[i].setMovementColor(colorObj);
+	}
+};
+/** @public
+ * @param {boolean=} opt_enabled
+ */
+PercentBarRenderer.prototype.useMovementColor = function(opt_enabled) {
+	this._movementColorUsed = opt_enabled !== false;
+	for(var i = this._pbs.length; --i >= 0;) {
+		this._pbs[i].useMovementColor(opt_enabled);
+	}
+};
+/** @public
+ * @param {string=} color
+ */
+PercentBarRenderer.prototype.setTrackColor = function(color) {
+	this._trackColor = color ? color : "";
+	for(var i = this._pbs.length; --i >= 0;) {
+		this._pbs[i].setTrackColor(color);
+	}
+};
+/** @public
+ * @param {boolean=} opt_enabled
+ */
+PercentBarRenderer.prototype.hideText = function(opt_enabled) {
+	this._textHidden = opt_enabled !== false;
+	for(var i = this._pbs.length; --i >= 0;) {
+		this._pbs[i].hideText(opt_enabled);
+	}
+};
+
+/** @public
+ * @param {number|string} width
+ * @param {Array.<PercentBar>=} opt_pbs
+ */
+PercentBarRenderer.prototype.setTextWidth = function(width, opt_pbs) {
+	var newWidth = "";
+	if(width || width === 0) {
+		newWidth = (typeof width === "number") ? width + "px" : width;
+	}
+
+	var i;
+	if(opt_pbs) {
+		for(i = opt_pbs.length; --i >= 0;) {
+			opt_pbs[i].setTextWidth(width);
+		}
+	} else if(this._textWidth !== newWidth) {
+		this._textWidth = newWidth;
+		for(i = this._pbs.length; --i >= 0;) {
+			this._pbs[i].setTextWidth(newWidth);
+		}
+	}
+};
+
+/** @public
+ * @param {boolean=} opt_enabled
+ */
+PercentBarRenderer.prototype.enableTooltip = function(opt_enabled) {
+	this._tooltipEnabled = opt_enabled !== false;
+	for(var i = this._pbs.length; --i >= 0;) {
+		this._pbs[i].enableTooltip(opt_enabled);
+	}
+};
+
+/** @public
+ * @return {string} alignment Alignment can be "left", "center", "right"
+ */
+PercentBarRenderer.prototype.getAlignment = function() {
+	return this._alignment;
+};
+/** @public
+ * @return {boolean}
+ */
+PercentBarRenderer.prototype.isMovementColorUsed = function() {
+	return this._movementColorUsed;
+};
+/** @public
+ * @return {boolean}
+ */
+PercentBarRenderer.prototype.isTextHidden = function() {
+	return this._textHidden;
+};
+
+/** @public
+ * @return {boolean}
+ */
+PercentBarRenderer.prototype.startTextAutoResizing = function() {
+	if(this._txtResizing) {
+		return false;
+	}
+	if(this._textHidden) {
+		return false;
+	}
+	if(this._alignment !== "left" && this._alignment !== "right") {
+		return false;
+	}
+	this._txtResizing = true;
+	return true;
+};
+/** @public
+ * @param {number=} widthLimit
+ * @param {boolean=} opt_resetToDefaultWidth
+ * @param {Array.<PercentBar>=} opt_pbs
+ */
+PercentBarRenderer.prototype.endTextAutoResizing = function(widthLimit, opt_resetToDefaultWidth, opt_pbs) {
+	if(this._txtResizing) {
+		this._txtResizing = false;
+		if(typeof widthLimit == "number" && this._maxTextWidth + 8 >= widthLimit) {
+			this.setTextWidth(0, opt_pbs);
+		} else if(this._maxTextWidth === this._maxTextWidth) {
+			this.setTextWidth(this._maxTextWidth + 8, opt_pbs); // 8 is padding
+		}
+	}
+
+	if(opt_resetToDefaultWidth) {
+		this._maxTextWidth = NaN;
+	}
+};
+//#endregion Public Methods
+
+//#region Private Methods
+
+//#endregion Private Methods
+
+//#region Private Members
+
+
+/** @private
+ * @type {Array.<PercentBar>}
+ */
+PercentBarRenderer.prototype._pbs = null;
+
+/**
+ * @type {Object}
+ * @private
+ */
+PercentBarRenderer.prototype._movementColor = null;
+/**
+ * @type {boolean}
+ * @private
+ */
+PercentBarRenderer.prototype._movementColorUsed = true;
+/**
+ * @type {string}
+ * @private
+ */
+PercentBarRenderer.prototype._trackColor = "";
+/**
+ * @type {boolean}
+ * @private
+ */
+PercentBarRenderer.prototype._textHidden = false;
+/**
+ * @type {string}
+ * @private
+ */
+PercentBarRenderer.prototype._textWidth = "";
+/**
+ * @type {string}
+ * @private
+ */
+PercentBarRenderer.prototype._alignment = "";
+
+/**
+ * @type {boolean}
+ * @private
+ */
+PercentBarRenderer.prototype._txtResizing = false;
+/**
+ * @type {number}
+ * @private
+ */
+PercentBarRenderer.prototype._maxTextWidth = NaN;
+
+/**
+ * @type {boolean}
+ * @private
+ */
+PercentBarRenderer.prototype._tooltipEnabled = true;
+
+//#endregion Private Members
+
+PercentBarRenderer._proto = PercentBarRenderer.prototype;
+
+export default PercentBarRenderer;
+export { PercentBarRenderer };

package/lib/core/es6/grid/util/RangeBar.d.ts

@@ -0,0 +1,25 @@
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import Util from "../util/util.js";
+import ElementFrameWork from "./ElementFrameWork.js";
+import ElementWrapper from "../components/ElementWrapper.js";
+
+declare class RangeBar extends ElementWrapper {
+
+    constructor(opt_element?: Element);
+
+    public static getControl(obj: any): RangeBar;
+
+    public getPercent(): number;
+
+    public setLowValue(lowVal: number): void;
+
+    public setLastValue(lastVal: number): void;
+
+    public setHighValue(highVal: number): void;
+
+    public setLowLastHigh(lowVal: number, lastVal: number, highVal: number, opt_values?: any): void;
+
+}
+
+export default RangeBar;
+export { RangeBar };

package/lib/core/es6/grid/util/RangeBar.js

@@ -0,0 +1,255 @@
+/* eslint-disable */
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import Util from "../util/util.js";
+import ElementFrameWork from "./ElementFrameWork.js";
+import ElementWrapper from "../components/ElementWrapper.js";
+/* eslint-enable */
+
+/**
+ * @constructor
+ * @extends {ElementWrapper}
+ * @param {Element=} opt_element
+ */
+var RangeBar = function (opt_element) {
+	this._element = opt_element ? opt_element : document.createElement("div");
+	this._element.className = "tr-range-bar";
+	this._scalebar = ElementFrameWork.createRangeBar();
+	this._na = document.createElement('span');
+	this._na.textContent = "N/A";
+
+	this._na.className = "tr-range-bar-na";
+
+	this._scalebar.setSliderWidth(3);
+
+	var element = this._element;
+	element["_rangeBar"] = this;
+	element.appendChild(this._na);
+	element.appendChild(this._scalebar);
+};
+
+Ext.inherits(RangeBar, ElementWrapper);
+
+/** Retrieve Rangebar control from an element
+ * @public
+ * @function
+ * @param {*} obj
+ * @return {RangeBar}
+ */
+RangeBar.getControl = function (obj) {
+	if (obj) {
+		return obj["_rangeBar"] || null;
+	}
+
+	return null;
+};
+
+/**
+ * @public
+ * @param {number} lowVal
+ * @param {number} lastVal
+ * @param {number} highVal
+ * @return {number}
+ */
+RangeBar.calculatePercent = Util.calculatePercent;
+
+/**
+ * @public
+ * @return {number} // Percent can be NaN
+ */
+RangeBar.prototype.getPercent = function () {
+	return this._percent;
+};
+
+/**
+ * @public
+ * @param {number} lowVal
+
+ */
+RangeBar.prototype.setLowValue = function (lowVal) {
+	if (this._lowVal === lowVal) {
+		return;
+	}
+	this._lowVal = lowVal;
+	this._updateRangeBar();
+};
+
+/**
+ * @public
+ * @param {number} lastVal
+ */
+RangeBar.prototype.setLastValue = function (lastVal) {
+	if (this._lastVal === lastVal) {
+		return;
+	}
+	this._lastVal = lastVal;
+	this._updateRangeBar();
+};
+
+/**
+ * @public
+ * @param {number} highVal
+ */
+RangeBar.prototype.setHighValue = function (highVal) {
+	if (this._highVal === highVal) {
+		return;
+	}
+
+	this._highVal = highVal;
+	this._updateRangeBar();
+};
+
+/** Get value of RangeBar
+ * @public
+ * @param {number} lowVal
+ * @param {number} lastVal
+ * @param {number} highVal
+ * @param {{ffLowVal: string, ffLastVal: string, ffHighVal: string, isEmptyCell: boolean}=} opt_values
+ */
+RangeBar.prototype.setLowLastHigh = function (lowVal, lastVal, highVal, opt_values) {
+	if (this._lowVal === lowVal &&
+		this._lastVal === lastVal &&
+		this._highVal === highVal &&
+		this._isEmptyCell === (opt_values && opt_values.isEmptyCell)) {
+		return;
+	}
+
+	this._lowVal = lowVal;
+	this._lastVal = lastVal;
+	this._highVal = highVal;
+
+	if (opt_values) {
+		this._opt_ffLowVal = opt_values.ffLowVal;
+		this._opt_ffLastVal = opt_values.ffLastVal;
+		this._opt_ffHighVal = opt_values.ffHighVal;
+		this._isEmptyCell = opt_values.isEmptyCell;
+	} else {
+		this._opt_ffLowVal = "0";
+		this._opt_ffLastVal = "0";
+		this._opt_ffHighVal = "0";
+		// eslint-disable-next-line
+		this._isEmptyCell = undefined;
+	}
+
+	this._updateRangeBar();
+};
+
+/**
+ * @private
+ */
+RangeBar.prototype._updateRangeBar = function () {
+	var DISPLAY_NA = 1;
+	var DISPLAY_EMPTY = 2;
+	var invalidVal = 0;
+
+	this._percent = Util.calculatePercent(this._lowVal, this._lastVal, this._highVal);
+
+	if (this._percent === this._percent) {
+		this._scalebar.updateScale(this._percent, this._lowVal, this._lastVal, this._highVal);
+		this._scalebar["title"] = this._calculateTooltip();
+	} else {
+		if (this._isEmptyCell != null) {
+			invalidVal = this._isEmptyCell ? DISPLAY_EMPTY : DISPLAY_NA;
+		} else {
+			if (this._lowVal != null || this._lastVal != null || this._highVal != null) {
+				invalidVal = DISPLAY_NA;
+			} else {
+				invalidVal = DISPLAY_EMPTY;
+			}
+		}
+	}
+
+	if (this._invalidValue !== invalidVal) {
+		this._invalidValue = invalidVal;
+		if (this._invalidValue > 1) {
+			this.hide();
+		} else {
+			this._na.title = this._calculateTooltip();
+			this.enableClass("na-value", this._invalidValue === DISPLAY_NA);
+			this.show();
+		}
+	}
+};
+
+/**
+ * @private
+ * @param {number} val
+ * @param {string|undefined} ff
+ * @return {number|string}
+ */
+RangeBar.prototype._getRenderValue = function (val, ff) {
+	var DOUBLE_DASH = "--";
+
+	if (ff == null && val === 0) { // +0 case
+		return DOUBLE_DASH;
+	}
+
+	return Util.isEmpty(val) ? DOUBLE_DASH : val;
+};
+
+/**
+ * @private
+ * @return {string}
+ */
+RangeBar.prototype._calculateTooltip = function () {
+	var tooltipLinebreakChar = Util.getTooltipLinebreakChar();
+	var renderLowVal = this._getRenderValue(this._lowVal, this._opt_ffLowVal);
+	var renderLastVal = this._getRenderValue(this._lastVal, this._opt_ffLastVal);
+	var renderHighVal = this._getRenderValue(this._highVal, this._opt_ffHighVal);
+
+	return "Low: " + renderLowVal + tooltipLinebreakChar + "Last: " + renderLastVal + tooltipLinebreakChar + "High: " + renderHighVal;
+};
+
+/** @private
+ * @type {Element}
+ */
+RangeBar.prototype._scalebar = null;
+
+/** @private
+ * @type {Element}
+ */
+RangeBar.prototype._slider = null;
+
+/** @private
+ * @type {number}
+ */
+RangeBar.prototype._lowVal = 0;
+
+/** @private
+ * @type {number}
+ */
+RangeBar.prototype._lastVal = 0;
+
+/** @private
+ * @type {number}
+ */
+RangeBar.prototype._highVal = 0;
+
+/** @private
+ * @type {string|undefined}
+ */
+RangeBar.prototype._opt_ffLowVal = "0";
+
+/** @private
+ * @type {string|undefined}
+ */
+RangeBar.prototype._opt_ffLastVal = "0";
+
+/** @private
+ * @type {string|undefined}
+ */
+RangeBar.prototype._opt_ffHighVal = "0";
+
+/** @private
+ * @type {number}
+ */
+RangeBar.prototype._percent = 0;
+
+/** @private
+ * @type {number}
+ */
+RangeBar.prototype._invalidValue = 0;
+
+RangeBar._proto = RangeBar.prototype;
+
+export default RangeBar;
+export { RangeBar };

package/lib/core/es6/grid/util/Reverter.d.ts

@@ -0,0 +1,14 @@
+
+
+declare class Reverter {
+
+    constructor(opt_func?: ((...params: any[]) => any)|number, opt_ms?: number|((...params: any[]) => any));
+
+    public start(): void;
+
+    public dispose(): void;
+
+}
+
+export default Reverter;
+export { Reverter };

package/lib/core/es6/grid/util/Reverter.js

@@ -0,0 +1,79 @@
+
+/** @description Reverter is used executed the given method after the specified delay. If Reverter is activated the second time within the delay, the delay time will be extended.
+* @constructor
+* @param {Function|number=} opt_func
+* @param {number|Function=} opt_ms The delay time in millisecond before executing the function
+*/
+var Reverter = function (opt_func, opt_ms) {
+	this._onInterval = this._onInterval.bind(this);
+
+	if(typeof opt_func == "function") {
+		this._func = opt_func;
+	} else if (typeof opt_ms == "function") { // Parameter can be swapped places
+		this._func = opt_ms;
+	}
+
+	if(typeof opt_ms == "number") {
+		this._delay = opt_ms;
+	} else if (typeof opt_func == "number") { // Parameter can be swapped places
+		this._delay = opt_func;
+	}
+};
+
+/** @type {Function}
+* @private
+*/
+Reverter.prototype._func = null;
+/** @type {number}
+* @private
+*/
+Reverter.prototype._delay = 0;
+/** @type {number}
+* @private
+*/
+Reverter.prototype._timerId = 0;
+/** @type {boolean}
+* @private
+*/
+Reverter.prototype._pending = false;
+
+
+/** @public
+*/
+Reverter.prototype.start = function () {
+	if(this._func) {
+		if(!this._timerId) {
+			this._timerId = setInterval(this._onInterval, this._delay);
+		} else {
+			this._pending = true;
+		}
+	}
+};
+
+/** @public
+*/
+Reverter.prototype.dispose = function () {
+	if(this._timerId) {
+		clearInterval(this._timerId);
+		this._timerId = 0;
+	}
+	this._func = null; // Release user bound function
+};
+
+
+/** @private
+*/
+Reverter.prototype._onInterval = function () {
+	if(this._pending) {
+		this._pending = false;
+	} else {
+		this._func();
+		clearInterval(this._timerId);
+		this._timerId = 0;
+	}
+};
+
+Reverter._proto = Reverter.prototype;
+
+export default Reverter;
+export { Reverter };