@refinitiv-ui/efx-grid 6.0.117 → 6.0.118

package/lib/tr-grid-auto-tooltip/es6/AutoTooltip.js

@@ -1,5 +1,6 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
 
 var isSafari = navigator.vendor &&
 	navigator.vendor.indexOf('Apple') > -1 &&
@@ -26,11 +27,20 @@ var isSafari = navigator.vendor &&
 * @extends {GridPlugin}
 */
 var AutoTooltipPlugin = function (options) {
-	this.requestTooltipUpdate = this.requestTooltipUpdate.bind(this);
 	this.applyTooltipToAllColumns = this.applyTooltipToAllColumns.bind(this);
 	this._onPreSectionDataBinding = this._onPreSectionDataBinding.bind(this);
+	this._onPostSectionDataBinding = this._onPostSectionDataBinding.bind(this);
 	this._onColumnAdded = this._onColumnAdded.bind(this);
 
+	this._requestNonContentSectionUpdate = this._requestNonContentSectionUpdate.bind(this);
+	this._nonContentSectionUpdateConflator = new Conflator(300, this._requestNonContentSectionUpdate);
+
+	this._requestContentSectionUpdate = this._requestContentSectionUpdate.bind(this);
+	this._contentSectionUpdateConflator = new Conflator(300, this._requestContentSectionUpdate);
+
+	this.requestTooltipUpdate = this.requestTooltipUpdate.bind(this);
+	this._tooltipUpdateConflator = new Conflator(300, this.requestTooltipUpdate);
+
 	this._hosts = [];
 
 	if (options) {
@@ -39,6 +49,39 @@ var AutoTooltipPlugin = function (options) {
 };
 Ext.inherits(AutoTooltipPlugin, GridPlugin);
 
+/** @private
+* @param {Object} column
+* @return {boolean}
+*/
+AutoTooltipPlugin._isColumnVisible = function(column) {
+	if(!column) {
+		return false;
+	}
+
+	if(column.getVisibility && !column.getVisibility()) {
+		return false;
+	}
+
+	var colElem = column.getElement();
+	if(!colElem) {
+		return false;
+	}
+
+	return true;
+};
+
+/** @private
+* @param {Array.<Object>} hosts
+* @return {boolean}
+*/
+AutoTooltipPlugin._isUpdateRequired = function(hosts) {
+	var len = hosts.length;
+	if(len <= 0 || isSafari) {
+		return false;
+	}
+	return true;
+};
+
 /** If true, include title sections into the calculation
 * @type {boolean}
 * @private
@@ -63,6 +106,11 @@ AutoTooltipPlugin.prototype._applyTimer = 0;
 */
 AutoTooltipPlugin.prototype._calcDelay = 300;
 
+/** @type {boolean}
+* @private
+*/
+AutoTooltipPlugin.prototype._nonContentSectionUpdated = false;
+
 /** @public
 * @return {string}
 */
@@ -87,12 +135,12 @@ AutoTooltipPlugin.prototype.initialize = function (host, options) {
 		return;
 	}
 	host.listen("preSectionDataBinding", this._onPreSectionDataBinding);
-	host.listen("postSectionDataBinding", this.requestTooltipUpdate);
+	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
 	host.listen("widthChanged", this.requestTooltipUpdate);
 	host.listen("columnAdded", this._onColumnAdded);
 
 	// In case of lazy loading
-	this.requestTooltipUpdate();
+	this._requestAllSectionsUpdate();
 };
 
 /** @public
@@ -104,15 +152,13 @@ AutoTooltipPlugin.prototype.unload = function (host) {
 	this._hosts.splice(at, 1);
 
 	host.unlisten("preSectionDataBinding", this._onPreSectionDataBinding);
-	host.unlisten("postSectionDataBinding", this.requestTooltipUpdate);
+	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
 	host.unlisten("widthChanged", this.requestTooltipUpdate);
 	host.unlisten("columnAdded", this._onColumnAdded);
 
 	if (!this._hosts.length) {
-		if (this._applyTimer) {
-			clearTimeout(this._applyTimer);
-			this._applyTimer = 0;
-		}
+		this._tooltipUpdateConflator.reset();
+		this._nonContentSectionUpdateConflator.reset();
 	}
 
 	this._dispose();
@@ -131,9 +177,9 @@ AutoTooltipPlugin.prototype.config = function (options) {
 		if (val != null) {
 			this._title = val ? true : false;
 		}
-		var footerVal = extOptions["footer"];
-		if (footerVal != null) {
-			this._footer = footerVal ? true : false;
+		val = extOptions["footer"];
+		if (val != null) {
+			this._footer = val ? true : false;
 		}
 		// Enable auto tooltip to all column by default
 		val = extOptions["content"];
@@ -142,7 +188,7 @@ AutoTooltipPlugin.prototype.config = function (options) {
 		}
 	}
 
-	// Retrive auto tooltip data from comlum
+	// Retrive auto tooltip data from columns
 	var columns = options["columns"];
 	if (columns) {
 		var len = columns.length;
@@ -217,28 +263,28 @@ AutoTooltipPlugin.prototype._configColumn = function(colIndex, columnConfig) {
 * @param {number=} toR End row index
 */
 AutoTooltipPlugin.prototype.applyTooltip = function (colIndex, fromR, toR) {
-	var len = this._hosts.length;
-	if (len <= 0 || isSafari) {
+	var hosts = this._hosts;
+	if(!AutoTooltipPlugin._isUpdateRequired(hosts)) {
 		return;
 	}
 
-	for (var i = 0; i < len; ++i) {
+	for (var i = 0; i < hosts.length; ++i) {
 		var host = this._hosts[i];
 		if (this._title) {
 			var titles = host.getAllSections("title");
 			for (var t = titles.length; --t >= 0;) {
-				this._applyTooltipToSection(titles[t], colIndex);
+				this._updateNonContentSection(titles[t], colIndex);
 			}
 		}
 		if (this._footer) {
 			var footers = host.getAllSections("footer");
 			for (var j = footers.length; --j >= 0;) {
-				this._applyTooltipToSection(footers[j], colIndex);
+				this._updateNonContentSection(footers[j], colIndex);
 			}
 		}
 
 		if(this._isTooltipCandidate(colIndex)) {
-			this._applyTooltipToSection(host.getSection("content"), colIndex, fromR, toR);
+			this._updateContentSection(host.getSection("content"), colIndex, fromR, toR);
 		}
 	}
 };
@@ -268,6 +314,135 @@ AutoTooltipPlugin.prototype.applyTooltipToAllColumns = function () {
 	}
 };
 
+/** This is similar applyTooltipToColumns() method, but it consolidate multiple requests into one for better performance
+* @public
+*/
+AutoTooltipPlugin.prototype.requestTooltipUpdate = function () {
+	if(this._tooltipUpdateConflator.conflate()) {
+		return;
+	}
+
+	this.applyTooltipToAllColumns();
+};
+
+/**
+* @private
+*/
+AutoTooltipPlugin.prototype._requestAllSectionsUpdate = function () {
+	if(!this._nonContentSectionUpdated) {
+		this._requestNonContentSectionUpdate();
+	}
+
+	this._requestContentSectionUpdate();
+};
+
+/** @private
+*/
+AutoTooltipPlugin.prototype._requestNonContentSectionUpdate = function () {
+	if(this._nonContentSectionUpdateConflator.conflate()) {
+		return;
+	}
+
+	var hosts = this._hosts;
+	if(!AutoTooltipPlugin._isUpdateRequired(hosts)) {
+		return;
+	}
+
+	this._nonContentSectionUpdated = true;
+
+	var colCount = this.getColumnCount();
+	var sections, s, c;
+	for(var i = 0; i < hosts.length; ++i) {
+		var host = hosts[i];
+
+		sections = host.getAllSections("title");
+		for(s = 0; s < sections.length; s++) {
+			for(c = 0; c < colCount; c++) {
+				this._updateNonContentSection(sections[s], c);
+			}
+		}
+
+		sections = host.getAllSections("footer");
+		for(s = 0; s < sections.length; s++) {
+			for(c = 0; c < colCount; c++) {
+				this._updateNonContentSection(sections[s], c);
+			}
+		}
+	}
+};
+
+
+/** @private
+*/
+AutoTooltipPlugin.prototype._requestContentSectionUpdate = function () {
+	if(this._contentSectionUpdateConflator.conflate()) {
+		return;
+	}
+
+	var hosts = this._hosts;
+	if(!AutoTooltipPlugin._isUpdateRequired(hosts)) {
+		return;
+	}
+
+	var colCount = this.getColumnCount();
+	for(var i = 0; i < hosts.length; ++i) {
+		var section = hosts[i].getSection("content");
+		for(var c = 0; c < colCount; c++) {
+			if(this._isTooltipCandidate(c)) {
+				this._updateContentSection(section, c);
+			}
+		}
+	}
+};
+
+/**
+* @private
+* @param {Object} section ILayoutGrid
+* @param {number} colIndex Column index
+* @return {boolean} True if there is any change, otherwise false
+*/
+AutoTooltipPlugin.prototype._updateNonContentSection = function (section, colIndex) {
+	if(!section) { return false; }
+
+	var column = section.getColumn(colIndex);
+	if(!AutoTooltipPlugin._isColumnVisible(column)) {
+		return false;
+	}
+
+	var rowCount = section.getRowCount();
+	for(var r = 0; r < rowCount; ++r) {
+		var cell = section.getCell(colIndex, r, false); // Ignore cell span
+		if(!cell || !cell.isVisible()) { return false; }
+
+		var elem = cell.getContent();
+		if(!elem) { return false; }
+
+		// Set tooltip only if text's length is longer than column width.
+		var tooltip = cell.getAttribute("tooltip") || cell.getTooltip();
+
+		var sw = elem.scrollWidth;
+		if(sw && sw > elem.offsetWidth) {
+			if(!tooltip) {
+				tooltip = cell.getTextContent(); // TODO: Allow custom tooltip text
+				cell._autoTooltip = true;
+			}
+		} else {
+			if(cell._autoTooltip) {
+				tooltip = "";
+				cell._autoTooltip = false;
+			}
+		}
+
+		cell.setTooltip(tooltip); // TODO: Avoiding using getter and setter in the same loop
+		if(tooltip) {
+			cell.setAttribute("ef-title", tooltip); // to make sure ef-title value will actually change
+		} else {
+			cell.removeAttribute("ef-title");
+		}
+	}
+	return true;
+};
+
 /**
 * @private
 * @param {Object} section ILayoutGrid
@@ -276,7 +451,7 @@ AutoTooltipPlugin.prototype.applyTooltipToAllColumns = function () {
 * @param {number=} toR End row index
 * @return {boolean} True if there is any change, otherwise false
 */
-AutoTooltipPlugin.prototype._applyTooltipToSection = function (section, colIndex, fromR, toR) {
+AutoTooltipPlugin.prototype._updateContentSection = function (section, colIndex, fromR, toR) {
 	if (!section) { return false; }
 
 	if (fromR == null) {
@@ -390,7 +565,7 @@ AutoTooltipPlugin.prototype._clearTooltipCache = function (section, colIndex, fr
 * @param {Event} e event from preSectionDataBinding
 */
 AutoTooltipPlugin.prototype._onPreSectionDataBinding = function (e) {
-	if (e && 'content' === e.sectionType) {
+	if (e && e.sectionType === "content") {
 		var colCount = this.getColumnCount();
 		var isDataChange = e.actualUpdate === true;
 		for (var c = 0; c < colCount; ++c) {
@@ -399,13 +574,11 @@ AutoTooltipPlugin.prototype._onPreSectionDataBinding = function (e) {
 	}
 };
 
-/** This is similar applyTooltipToColumns() method, but it consolidate multiple requests into one for better performance
-* @public
+/** @private
+* @param {Event} e event from preSectionDataBinding
 */
-AutoTooltipPlugin.prototype.requestTooltipUpdate = function () {
-	if (!this._applyTimer) {
-		this._applyTimer = setTimeout(this.applyTooltipToAllColumns, this._calcDelay);
-	}
+AutoTooltipPlugin.prototype._onPostSectionDataBinding = function (e) {
+	this._requestAllSectionsUpdate();
 };
 
 /** @private
@@ -414,6 +587,7 @@ AutoTooltipPlugin.prototype.requestTooltipUpdate = function () {
 AutoTooltipPlugin.prototype._onColumnAdded = function(e) {
 	if(e.context && e.colIndex != null) {
 		this._configColumn(e.colIndex, e.context);
+		this._nonContentSectionUpdated = false; // Allow title/footer update in postSectionDataBinding
 	}
 };
 

package/lib/tr-grid-contextmenu/es6/ContextMenu.js

@@ -308,6 +308,17 @@ ContextMenuPlugin.prototype.getMenuModel = function () {
 	return this._contextMenu;
 };
 
+/** @public
+* @ignore
+* @returns {Object}
+*/
+ContextMenuPlugin.prototype._getEventHandlers = function() {
+	return {
+		contextmenu: this._rightClickedHandler
+	};
+};
+
+
 /** @private
 * @param {Object} e
 * @return {!Object} Mouse related information

package/lib/tr-grid-contextmenu/es6/MenuItem.d.ts

@@ -3,7 +3,7 @@ import Ext from "../../tr-grid-util/es6/Ext.js";
 
 declare class MenuItem extends EventDispatcher {
 
-    constructor(options: any);
+    constructor(options?: any);
 
     public dispose(): void;
 
@@ -33,6 +33,8 @@ declare class MenuItem extends EventDispatcher {
 
     public getElement(): Element|null;
 
+    public getOptions(): any;
+
 }
 
 export default MenuItem;

package/lib/tr-grid-contextmenu/es6/MenuItem.js

@@ -3,7 +3,7 @@ import Ext from "../../tr-grid-util/es6/Ext.js";
 
 /** @constructor
 * @extends {EventDispatcher}
-* @param {Object} options
+* @param {Object=} options
 */
 let MenuItem = function (options) {
 	let t = this;
@@ -11,7 +11,12 @@ let MenuItem = function (options) {
 	t._onItemHovered = t._onItemHovered.bind(t);
 	t._onItemClicked = t._onItemClicked.bind(t);
 
-	t._init(options);
+	let li = document.createElement("li");
+	li.className = "tr-contextmenu-item";
+	li.addEventListener("mouseover", t._onItemHovered);
+	li.addEventListener("click", t._onItemClicked);
+	t._elem = li;
+
 	t._config(options);
 };
 Ext.inherits(MenuItem, EventDispatcher);
@@ -49,19 +54,6 @@ MenuItem.prototype._value = null;
 */
 MenuItem.prototype._items = null;
 
-/** @private
-* @param {Object} options
-*/
-MenuItem.prototype._init = function(options) {
-	let t = this;
-
-	let li = document.createElement("li");
-	li.className = "tr-contextmenu-item";
-	li.addEventListener("mouseover", t._onItemHovered);
-	li.addEventListener("click", t._onItemClicked);
-	t._elem = li;
-	t._options = options || null;
-};
 /** @public */
 MenuItem.prototype.dispose = function() {
 	let t = this;
@@ -77,36 +69,37 @@ MenuItem.prototype.dispose = function() {
 };
 
 /** @private
-* @param {*} opt_model
+* @param {*=} options
 */
-MenuItem.prototype._config = function(opt_model) {
-	if (!opt_model) opt_model = {};
-
-	let pref;
+MenuItem.prototype._config = function(options) {
+	if (!options) {
+		options = {};
+	}
 
 	let t = this;
+	t._options = options;
 
-	pref = opt_model["id"];
+	let pref = options["id"];
 	if (pref) {
 		t.setId(pref);
 	}
 
-	pref = opt_model["type"];
+	pref = options["type"];
 	if (pref) {
 		t.setType(pref);
 	}
 
-	pref = opt_model["text"];
+	pref = options["text"];
 	if (pref) {
 		t.setText(pref);
 	}
 
-	pref = opt_model["value"];
-	if (pref) {
+	pref = options["value"];
+	if (pref != null) {
 		t.setValue(pref);
 	}
 
-	pref = opt_model["isDisabled"];
+	pref = options["isDisabled"];
 	if (pref != null) {
 		if (pref === true) {
 			t.setSelectable(false);
@@ -115,7 +108,7 @@ MenuItem.prototype._config = function(opt_model) {
 		}
 	}
 
-	pref = opt_model["isSelectable"];
+	pref = options["isSelectable"];
 	if (pref != null) {
 		if (pref === false) {
 			t.setSelectable(false);
@@ -124,7 +117,7 @@ MenuItem.prototype._config = function(opt_model) {
 		}
 	}
 
-	pref = opt_model["items"];
+	pref = options["items"];
 	if (Array.isArray(pref)) {
 		t.setItems(pref);
 	}
@@ -279,6 +272,13 @@ MenuItem.prototype.getElement = function() {
 	return this._elem;
 };
 
+/** @public
+* @returns {Object}
+*/
+MenuItem.prototype.getOptions = function() {
+	return this._options;
+};
+
 
 
 export default MenuItem;

package/lib/tr-grid-contextmenu/es6/PopupMenu.d.ts

@@ -21,7 +21,11 @@ declare class PopupMenu extends EventDispatcher {
 
     public addPopupChild(element: Element|null, popupMenu: PopupMenu|null): void;
 
-    public setMenu(menuItems: (any)[]|null): void;
+    public setMenu(menuOptions: (any)[]|null): void;
+
+    public getMenuItems(): (MenuItem)[]|null;
+
+    public getChildPopups(): (PopupMenu)[]|null;
 
 }
 

package/lib/tr-grid-contextmenu/es6/PopupMenu.js

@@ -30,11 +30,11 @@ PopupMenu.prototype._evtArg;
 /** @type {Array.<PopupMenu>}
 * @private
 */
-PopupMenu.prototype._children;
+PopupMenu.prototype._nestedPopups;
 /** @type {Array.<MenuItem>}
 * @private
 */
-PopupMenu.prototype._childrenItem;
+PopupMenu.prototype._menuItems;
 /** @type {Element}
 * @private
 */
@@ -59,6 +59,10 @@ PopupMenu.prototype._ulElem;
 * @private
 */
 PopupMenu.prototype._isMounted;
+/** @type {string}
+* @private
+*/
+PopupMenu.prototype._id = "";
 
 /** @private
 * @param {Element} parentElement
@@ -76,8 +80,8 @@ PopupMenu.prototype._init = function(parentElement) {
 	t._popup.setPositioning("custom");
 	t._ulElem = ul;
 
-	t._children = [];
-	t._childrenItem = [];
+	t._nestedPopups = [];
+	t._menuItems = [];
 	t._x = 0;
 	t._y = 0;
 	t._isMounted = true;
@@ -121,10 +125,10 @@ let _disposeObject = function(obj) {
 */
 PopupMenu.prototype._disposeChildren = function () {
 	let t = this;
-	t._children.forEach(_disposeObject);
-	t._childrenItem.forEach(_disposeObject);
-	t._children.length = 0;
-	t._childrenItem.length = 0;
+	t._nestedPopups.forEach(_disposeObject);
+	t._menuItems.forEach(_disposeObject);
+	t._nestedPopups.length = 0;
+	t._menuItems.length = 0;
 };
 
 /** @public */
@@ -191,32 +195,30 @@ PopupMenu.prototype.addPopupChild = function(element, popupMenu) {
 	if (popupMenu instanceof PopupMenu) {
 		popupMenu.attachTo(element, "right");
 		this._popup.addFocusElement(popupMenu._popup);
-		this._children.push(popupMenu);
+		this._nestedPopups.push(popupMenu);
 	}
 };
 
 /** @public
-* @param {Array.<Object>} menuItems
+* @param {Array.<Object>} menuOptions Array of MenuItem options
 */
-PopupMenu.prototype.setMenu = function (menuItems) {
-	if (!menuItems || !Array.isArray(menuItems)) { return; }
-
+PopupMenu.prototype.setMenu = function (menuOptions) {
 	let t = this;
 
-	// Clear existing before set a new items.
-	if (Array.isArray(t._menuItems)) {
+	// Clear existing before set a new items
+	if (t._menuItems.length) {
 		t._disposeChildren();
 	}
 
-	t._menuItems = menuItems;
-
-	for (let i = 0; i < menuItems.length; i++) {
-		let item = menuItems[i];
+	if (!menuOptions || !Array.isArray(menuOptions)) {
+		return;
+	}
 
-		let menuItem = new MenuItem(item);
+	for (let i = 0; i < menuOptions.length; i++) {
+		let menuItem = new MenuItem(menuOptions[i]);
 		menuItem.addEventListener("itemHovered", t._hoveredItem);
 		menuItem.addEventListener("itemClicked", t._clickedItem);
-		t._childrenItem.push(menuItem);
+		t._menuItems.push(menuItem);
 
 		if (Array.isArray(menuItem.getItems())) {
 			let pm = new PopupMenu(t._parentElement);
@@ -230,6 +232,18 @@ PopupMenu.prototype.setMenu = function (menuItems) {
 		t._ulElem.appendChild(menuItem.getElement());
 	}
 };
+/** @public
+* @returns {Array.<MenuItem>}
+*/
+PopupMenu.prototype.getMenuItems = function () {
+	return this._menuItems;
+};
+/** @public
+* @returns {Array.<PopupMenu>}
+*/
+PopupMenu.prototype.getChildPopups = function () {
+	return this._nestedPopups;
+};
 
 /** @private
 * @param {Event} e
@@ -252,18 +266,20 @@ PopupMenu.prototype._clickedChildItem = function (e) {
 PopupMenu.prototype._hoveredItem = function (e) {
 	let t = this;
 	let evt = t._evtArg;
-	let element = e.srcElement;
-	let children = t._children;
-
-	if (element && !!children.length) {
-		for (let i = 0; i < children.length; i++) {
-			let child = children[i];
-			if (child._id === element.getAttribute("id")) {
-				child.show();
+	let elem = e.srcElement;
+
+	if (elem) {
+		let pms = t._nestedPopups;
+		let pmCount = pms.length;
+		let elemId = elem.getAttribute("id");
+		for (let i = 0; i < pmCount; i++) {
+			let pm = pms[i];
+			if (pm._id === elemId) {
+				pm.show();
 			} else {
-				child.hide();
+				pm.hide();
 			}
-		}
+		} // WARNING: evt or _evtArg is not customized to reflect the item that is hovered
 	} else {
 		evt = e;
 	}
@@ -276,15 +292,7 @@ PopupMenu.prototype._hoveredItem = function (e) {
 */
 PopupMenu.prototype._clickedItem = function(e) {
 	let t = this;
-	if (e.item && e.item.id) {
-		for (let i = 0; i < t._menuItems.length; i++) {
-			let menuItem = t._menuItems[i];
-			if (menuItem.id === e.item.id) {
-				t._evtArg["item"] = menuItem;
-				break;
-			}
-		}
-	}
+	t._evtArg["item"] = e["item"];
 	t._dispatch("itemClicked", t._evtArg);
 	t.hide();
 };

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

@@ -116,7 +116,7 @@ GroupDefinitions._toGroupDefinition = function(obj, groupId) {
 			groupDef = GroupDefinitions._cloneObject(obj);
 		}
 		if(groupId) {
-			if(!groupDef.id) {
+			if(!groupDef.name) {
 				groupDef.name = groupId;
 			}
 			groupDef.id = groupId;

package/lib/types/es6/MenuEventAPI.d.ts

@@ -14,7 +14,7 @@ declare class MenuEventAPI {
 
     public getMenuItems(): any[]|null;
 
-    public findItem(id: number): (string)[] | any|null;
+    public findItem(id: number): any[]|null;
 
 }