@refinitiv-ui/efx-grid 6.0.116 → 6.0.117

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -6,6 +6,7 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
 import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
+import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
 
 /** @typedef {Object} InCellEditingPlugin~Options
 * @description InCellEditingPlugin options that can be specified from `inCellEditing` property of the main grid's options
@@ -193,6 +194,12 @@ let InCellEditingPlugin = function (options) {
 	t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
 	t._firstRendered = t._firstRendered.bind(t);
 	t._onGridKeyDown = t._onGridKeyDown.bind(t);
+	t._onRicAdded = t._onRicAdded.bind(t);
+	t._onRicRemoved = t._onRicRemoved.bind(t);
+	t._onColumnChanged = t._onColumnChanged.bind(t);
+	t._onRowCountChanged = t._onRowCountChanged.bind(t);
+	t._requestUpdateStarterText = t._requestUpdateStarterText.bind(t);
+	t._updateStarterTextConflator = new Conflator(100, this._requestUpdateStarterText);
 	t._hosts = [];
 
 	if(options) {
@@ -581,6 +588,37 @@ InCellEditingPlugin.prototype._onColumnAdded = function(e) {
 	}
 };
 
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onRicAdded = function(e) {
+	this._requestUpdateStarterText(false);
+};
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onRicRemoved = function(e) {
+	if(this._realTimeGrid && !this._realTimeGrid.hasRic()) {
+		this._requestUpdateStarterText();
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onColumnChanged = function(e) {
+	this._requestUpdateStarterText();
+};
+
+
+/** @private
+* @param {Event} e
+*/
+InCellEditingPlugin.prototype._onRowCountChanged = function(e) {
+	this._requestUpdateStarterText();
+};
+
 /** Called by grid system when initial plugins.
 * @public
 * @param {Object} host core grid object
@@ -596,6 +634,10 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
 	host.listen("columnAdded", this._onColumnAdded);
 	host.listen("firstRendered", this._firstRendered);
 	host.listen("keydown", this._onGridKeyDown);
+	host.listen("columnAdded", this._onColumnChanged);
+	host.listen("columnRemoved", this._onColumnChanged);
+	host.listen("rowAdded", this._onRowCountChanged);
+	host.listen("rowRemoved", this._onRowCountChanged);
 
 	host.getVScrollbar().listen("scroll", this._onScroll);
 	host.getHScrollbar().listen("scroll", this._onScroll);
@@ -658,13 +700,17 @@ InCellEditingPlugin.prototype.beforeProcessOption = function (optionName, option
 */
 InCellEditingPlugin.prototype._afterInit = function () {
 	this._elfVersion = ElfUtil.getElfVersion();
+	if(this._realTimeGrid) {
+		this._realTimeGrid.listen("ricAdded", this._onRicAdded);
+		this._realTimeGrid.listen("ricRemoved", this._onRicRemoved);
+	}
 };
 
 /** @private
 */
 InCellEditingPlugin.prototype._firstRendered = function () {
 	if(!this._readonly && this._starterText) {
-		this.showStarterText();
+		this._requestUpdateStarterText();
 	}
 };
 
@@ -897,6 +943,12 @@ InCellEditingPlugin.prototype.unload = function (host) {
 	this._hosts.splice(at, 1);
 
 	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("firstRendered", this._firstRendered);
+	host.unlisten("keydown", this._onGridKeyDown);
+	host.unlisten("columnAdded", this._onColumnChanged);
+	host.unlisten("columnRemoved", this._onColumnChanged);
+	host.unlisten("rowAdded", this._onRowCountChanged);
+	host.unlisten("rowRemoved", this._onRowCountChanged);
 	host.getVScrollbar().unlisten("scroll", this._onScroll);
 	host.getHScrollbar().unlisten("scroll", this._onScroll);
 
@@ -916,6 +968,11 @@ InCellEditingPlugin.prototype.unload = function (host) {
 		if(this._starterTextPopup) {
 			this._starterTextPopup.dispose();
 		}
+		if(this._realTimeGrid && this._starterText) {
+			this._realTimeGrid.removeEventListener("ricAdded", this._onRicAdded);
+			this._realTimeGrid.removeEventListener("ricRemoved", this._onRicRemoved);
+		}
+		this._updateStarterTextConflator.reset();
 	}
 	if(this.isEditing()) {
 		this.closeRowEditor(false);
@@ -1061,60 +1118,85 @@ InCellEditingPlugin.prototype._onGridKeyDown = function (e) {
 * @param {boolean=} bool
 */
 InCellEditingPlugin.prototype.showStarterText = function (bool) {
-	setTimeout(this._showStarterText.bind(this, bool), 0); // Need to delay to wait scrollbar or editor closed
+	this._requestUpdateStarterText();
 };
 
-
 /**
-* @private
-* @param {boolean=} bool
+* @description Request to show starter text
+* @public
 */
-InCellEditingPlugin.prototype._showStarterText = function (bool) {
+InCellEditingPlugin.prototype._requestUpdateStarterText = function () {
 	if(!this._realTimeGrid || !this._starterText) {
 		return;
 	}
-	let allRics = this._realTimeGrid.getAllRics();
-	if(allRics.length > 0) {
+	if(this._updateStarterTextConflator.conflate()){
+		return;
+	}
+	this._updateStaterText();
+};
+
+/**
+* @private
+* @param {boolean=} force
+*/
+InCellEditingPlugin.prototype._updateStaterText = function (force) {
+	if(!this._realTimeGrid || !this._starterText) {
 		return;
 	}
-	let popupElem;
+	// TODO: handled grid have ric but no one rows.
+	let popup;
 	if(!this._starterTextPopup) {
-		popupElem = this._starterTextPopup = this._createStaterTextElement();
+		popup = this._starterTextPopup = this._createStaterTextElement();
 	} else {
-		popupElem = this._starterTextPopup;
+		popup = this._starterTextPopup;
 	}
-	if(bool === false) {
-		popupElem.hide();
+	if(force === false || this._realTimeGrid.hasRic()) {
+		popup.hide();
 		return;
 	}
 	let grid = this._hosts[0];
 
+	let contentSection = grid.getSection("content");
+	if(!contentSection || contentSection.getRowCount() <= 0) { // WARNING: Core grid is include title section but realtime grid not include
+		popup.hide();
+		return;
+	}
+
 	let editableColIndex = this._getFirstEditableColumnIndex();
 	if(editableColIndex < 0) { // not editable
+		popup.hide();
 		return;
 	}
-	grid.scrollToRow("content", 0, true);
-	let editableCell = grid.getCell("content", editableColIndex, 0);
-	popupElem.attachTo(editableCell.getElement());
-	popupElem.show(bool, grid.getElement().parentElement);
+	if(grid.getScrollTop()) {
+		grid.setScrollTop(0);
+	}
+
+	let editableCell = contentSection.getCell(editableColIndex, 0);
+	let pos = grid.getRelativePosition(editableCell);
+	if(pos) {
+		let popupElem = popup.getElement();
+		popupElem.style.top = pos.y + "px";
+		popupElem.style.left = pos.x + "px";
+	}
+	popup.show(force, grid.getParent());
 };
 
 /** @private
 * @return {number}
 */
 InCellEditingPlugin.prototype._getFirstEditableColumnIndex = function () {
-	if(this._readonly || !this._editableContent) {
+	if(this._readonly) {
 		return -1;
 	}
-
 	let colCount = this.getColumnCount();
+	let editableCol = -1;
 	for (let i = 0; i < colCount; i++) {
-		let editableCol = this.isColumnEditable(i);
-		if(editableCol) {
-			return i;
+		if(this.isColumnEditable(i)) { // this._editableContent already check in this method
+			editableCol = i;
+			break;
 		}
 	}
-	return -1;
+	return editableCol;
 };
 
 /** @private
@@ -1124,9 +1206,14 @@ InCellEditingPlugin.prototype._createStaterTextElement = function () {
 	let container = document.createElement("div");
 	container.textContent = this._starterText;
 	container.className = "starter-text";
-	let popup = new Popup(container, { positioning: "over"});
-	popup.disableAutoHiding(true);
-	popup.disableHideOnScroll(true);
+	let popup = window.popup = new Popup(container, {
+		positioning: "custom",
+		autoHiding: false,
+		autoRepositioning: false,
+		hideOnScroll: false
+	});
+	let popupElement = popup.getElement();
+	popupElement.style.position = "absolute";
 	return popup;
 };
 
@@ -1550,7 +1637,7 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
 
 	// Dispatch an event for user to setup stuff
 	t._dispatch("editorOpened", arg); // User may modify the editor
-	t.showStarterText(false);
+	t._updateStaterText(false); // Currently Starter text open doesn't have the ric, it needs to be forcefully hide
 
 	inputElement.focus();
 	if(typeof inputElement.select === "function") {
@@ -2078,7 +2165,7 @@ InCellEditingPlugin.prototype._commitText = function (committed, suggestionDetai
 	Dom.removeParent(t._customElement);
 
 	let grid = arg["grid"];
-	this.showStarterText();
+	this._requestUpdateStarterText(); // Need to updaate starter text when text commit
 	if(grid) {
 		t._freezeScrolling(grid, false);
 		grid.focus();

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

@@ -6,6 +6,7 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
 import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
+import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
 
 declare namespace InCellEditingPlugin {
 
@@ -85,6 +86,8 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public showStarterText(bool?: boolean|null): void;
 
+    public _requestUpdateStarterText(): void;
+
     public isEditing(): boolean;
 
     public getTextBox(columnIndex?: number|null, grid?: any): Element|null;

package/lib/types/es6/RealtimeGrid/DataConnector.d.ts

@@ -11,6 +11,8 @@ declare class DataConnector extends EventDispatcher {
 
     public getAllRics(): (string)[]|null;
 
+    public hasRic(): boolean;
+
     public getAllRowDefs(): (RowDefinition)[]|null;
 
     public getAllFields(): (string)[];

package/lib/types/es6/RealtimeGrid/Grid.d.ts

@@ -293,6 +293,8 @@ declare class Grid extends EventDispatcher {
 
     public getAllRics(): (string)[]|null;
 
+    public hasRic(): boolean;
+
     public setRowData(rowRef: Grid.RowReference|null, values: any): void;
 
     public setStaticRowData(rowRef: Grid.RowReference|null, values: any): void;
@@ -333,6 +335,8 @@ declare class Grid extends EventDispatcher {
 
     public clearSort(): void;
 
+    public getSortingStates(): (any)[];
+
     public getDataView(): DataView|null;
 
     public setPage(pageIndex: number): boolean;

package/lib/types/es6/RealtimeGrid/ReferenceCounter.d.ts

@@ -10,6 +10,8 @@ declare class ReferenceCounter {
 
     public getAllReferences(): (string)[];
 
+    public hasReference(): boolean;
+
     public getAllReferers(): (string)[];
 
     public getAllReferrers(): (string)[];

package/lib/versions.json

@@ -2,7 +2,7 @@
 	"tr-grid-util": "1.3.155",
 	"tr-grid-printer": "1.0.18",
 	"@grid/column-dragging": "1.0.20",
-	"@grid/row-segmenting": "1.0.31",
+	"@grid/row-segmenting": "1.0.32",
 	"@grid/statistics-row": "1.0.17",
 	"@grid/zoom": "1.0.11",
 	"tr-grid-auto-tooltip": "1.1.6",
@@ -16,10 +16,10 @@
 	"tr-grid-column-stack": "1.0.75",
 	"tr-grid-conditional-coloring": "1.0.70",
 	"tr-grid-content-wrap": "1.0.20",
-	"tr-grid-contextmenu": "1.0.42",
+	"tr-grid-contextmenu": "1.0.43",
 	"tr-grid-filter-input": "0.9.41",
 	"tr-grid-heat-map": "1.0.29",
-	"tr-grid-in-cell-editing": "1.0.87",
+	"tr-grid-in-cell-editing": "1.0.89",
 	"tr-grid-pagination": "1.0.24",
 	"tr-grid-percent-bar": "1.0.24",
 	"tr-grid-range-bar": "2.0.8",

package/package.json

@@ -69,5 +69,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.116"
+	"version": "6.0.117"
 }