@refinitiv-ui/efx-grid 6.0.2 → 6.0.5

package/lib/tr-grid-row-selection/es6/RowSelection.js

@@ -1,7 +1,7 @@
-import { Ext } from '../../tr-grid-util/es6/Ext.js';
-import { EventDispatcher } from '../../tr-grid-util/es6/EventDispatcher.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { isMac as isMacFn } from '../../tr-grid-util/es6/Util.js';
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
 import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
@@ -50,7 +50,6 @@ var RowSelectionPlugin = function (options) {
 	t._updateMenuIcon = t._updateMenuIcon.bind(t);
 
 	t._hosts = [];
-	t._anchorRowDict = {};
 	t._isIE = isIE();
 	t._textRange = document.createRange();
 
@@ -94,11 +93,11 @@ RowSelectionPlugin.prototype._basedOnContent = false;
 * @private
 */
 RowSelectionPlugin.prototype._selectionField = "SELECTED_ROW";
-/** @type {Object}
+/** @type {string}
 * @private
 * @description use with _basedOnContent mode for tracking current anchor row
 */
-RowSelectionPlugin.prototype._anchorRowDict = null;
+RowSelectionPlugin.prototype._anchorRowId = "";
 /** @type {boolean}
 * @private
 */
@@ -367,13 +366,18 @@ RowSelectionPlugin.prototype.getActiveGrid = function () {
 * @return {number} rowIndex of anchor
 */
 RowSelectionPlugin.prototype.getRowAnchor = function (sectRef) {
-	var section = this._getSection(sectRef);
-	if (!section || !section.getRowAnchor) return -1;
 	if (this._basedOnContent) {
-		return this._anchorRowDict[section] || -1;
+		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if( dv && this._anchorRowId){
+			return dv.getRowIndex(this._anchorRowId);
+		}
 	} else {
-		return section.getRowAnchor();
+		var section = this._getSection(sectRef);
+		if (section && section.getRowAnchor){
+			return section.getRowAnchor();
+		}
 	}
+	return -1;
 };
 
 /** @public
@@ -393,7 +397,7 @@ RowSelectionPlugin.prototype.getFirstSelectedIndex = function (sectRef) {
 		var count = rows.length;
 		var dataRow;
 		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
-			dataRow = this._getRowData(rows[rowIndex]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
@@ -421,7 +425,7 @@ RowSelectionPlugin.prototype.getLastSelectedIndex = function (sectRef) {
 		var count = rows.length;
 		var dataRow;
 		for (var rowIndex = count - 1; rowIndex >= 0; rowIndex--) {
-			dataRow = this._getRowData(rows[rowIndex]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
@@ -451,7 +455,7 @@ RowSelectionPlugin.prototype.getSelectedRows = function (sectRef) {
 		var selectedRows = [];
 		var dataRow;
 		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
-			dataRow = this._getRowData(rows[rowIndex]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				selectedRows.push(rowIndex);
 			}
@@ -611,6 +615,9 @@ RowSelectionPlugin.prototype._onClick = function (e) {
 		}
 		this._dispatchSelectionChanged(e);
 	}
+	if(this._activeGrid != null){
+		this._activeGrid.focus();
+	}
 };
 /** @private
 * @description Left click will cause single row selection <br>
@@ -643,8 +650,8 @@ RowSelectionPlugin.prototype._onMouseDown = function (e) {
 	if (!ctx["hit"] || ctx["sectionType"] !== "content") { return; }
 	if (e.button === 2) { // Right click at the selected column should override clicking row to select;
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (csp && csp['isEnabled']()) {
-			if (csp['isSelectedColumn'](ctx["colIndex"])) {
+		if (csp && csp["isEnabled"]()) {
+			if (csp["isSelectedColumn"](ctx["colIndex"])) {
 				return;
 			}
 		}
@@ -740,7 +747,7 @@ RowSelectionPlugin.prototype._onMouseMove = function (e) {
 */
 RowSelectionPlugin.prototype._setPendingClickIndex = function (rowIndex, host) {
 	this._pendingClickIndex = rowIndex;
-	host && host.listen('mousemove', this._onMouseMove);
+	host && host.listen("mousemove", this._onMouseMove);
 };
 
 /** To clear _pendingClickIndex
@@ -749,7 +756,7 @@ RowSelectionPlugin.prototype._setPendingClickIndex = function (rowIndex, host) {
 */
 RowSelectionPlugin.prototype._clearPendingClickIndex = function (host) {
 	this._pendingClickIndex = -1;
-	host && host.unlisten('mousemove', this._onMouseMove);
+	host && host.unlisten("mousemove", this._onMouseMove);
 };
 
 
@@ -853,15 +860,25 @@ RowSelectionPlugin.prototype._onCopy = function (e) {
 */
 RowSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
 	if (!this._basedOnContent
-		|| 'content' !== e.sectionType
+		|| "content" !== e.sectionType
 		|| !this._activeGrid) {
 		return;
 	}
-	var dataRow, isSelect;
-	for (var rowIndex = e.fromRowIndex; rowIndex < e.toRowIndex; rowIndex++) {
-		dataRow = this._getRowData(e.dataRows[rowIndex]);
-		isSelect = dataRow ? dataRow[this._selectionField] : false;
-		e.section.setSelectedRow(rowIndex, isSelect === true);
+	var section = e.section;
+	var dv = e.dataSource;
+
+	var field = this._selectionField;
+	section.clearSelectedRows();
+
+	var fromR = section.getFirstIndexInView();
+	var toR = section.getLastIndexInView();
+	for (var r = fromR; r <= toR; ++r) {
+		var dataRow = this._rowGetter(dv.getRowDataAt(r));
+		if(dataRow) {
+			if(dataRow[field]) {
+				section.setSelectedRow(r, true);
+			}
+		}
 	}
 	this._updateMenuIcon();
 };
@@ -956,7 +973,7 @@ RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { //
 				var dataRow, firstIndex;
 				var len = rows.length;
 				for (i = 0; i < len; i++) {
-					dataRow = this._getRowData(rows[i]);
+					dataRow = this._rowGetter(rows[i]);
 					if (dataRow && dataRow[this._selectionField]) {
 						valueList.push(false);
 						ridList.push(rids[i]);
@@ -999,6 +1016,10 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 
 	if (!this._anchorSection) { return; }
 
+	if(this._activeGrid != null){
+		this._activeGrid.focus();
+	}
+
 	var shiftKey = e.shiftKey;
 	var next = 0;
 	var rowLimit = this._anchorSection.getRowCount() - 1;
@@ -1024,8 +1045,8 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 	}
 	if (next < 0) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (!shiftKey && csp && csp['isEnabled']()) {
-			csp['selectSingleColumn'](null, this._activeGrid);
+		if (!shiftKey && csp && csp["isEnabled"]()) {
+			csp["selectSingleColumn"](null, this._activeGrid);
 
 			this.clearAllSelections();
 			return;
@@ -1067,7 +1088,7 @@ RowSelectionPlugin.prototype._sectionSetSelectedRow = function (section, rowInde
 			var dataRow = this._getRow(dv, rowIndex);
 			if (dataRow) {
 				this._setData(dv, rowIndex, this._selectionField, isSelect);
-				if (isSelect) this._anchorRowDict[section] = rowIndex;
+				if (isSelect) this._anchorRowId = dv.getRowId(rowIndex);
 			}
 		}
 	} else {
@@ -1125,7 +1146,7 @@ RowSelectionPlugin.prototype._sectionClearSelectedRows = function (section, pres
 			}
 		}
 		if (!preserveAnchor) {
-			this._anchorRowDict[section] = -1;
+			this._anchorRowId = "";
 		}
 	} else {
 		section.clearSelectedRows();
@@ -1312,6 +1333,9 @@ RowSelectionPlugin.prototype._gotoGrid = function (gridIndex) {
 	var sectionIndex = this._anchorSection.getIndex();
 	this.clearSelectedRows(); // Clear all current grid's selections
 	this.selectSingleRow(anchorRow, sectionIndex, this._hosts[gridIndex]); // go to the next grid at the first column
+	if(this._activeGrid != null){
+		this._activeGrid.focus();
+	}
 };
 
 /** @private
@@ -1353,8 +1377,8 @@ RowSelectionPlugin.prototype._dispatchBeforeSelection = function (e, ctx) {
 RowSelectionPlugin.prototype._dispatchSelectionChanged = function (e, rowIndex, section) {
 	if (this._activeGrid) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (csp && csp['isEnabled']()) {
-			csp['clearSelection']();
+		if (csp && csp["isEnabled"]()) {
+			csp["clearSelection"]();
 		}
 		var cep = this._getPlugin("CellEditingPlugin");
 		if (cep) {

package/lib/tr-grid-textformatting/es6/TextFormatting.d.ts

@@ -65,7 +65,7 @@ declare class TextFormattingPlugin extends GridPlugin {
 
     public getColumnFormatOptions(colIndex: number, options?: any): any;
 
-    public getFormatter(colIndex: number): FieldFormatter;
+    public getFormatter(colIndex: number): FieldFormatter|null;
 
     public formatText(colIndex: number, obj: any): string;
 

package/lib/tr-grid-textformatting/es6/TextFormatting.js

@@ -122,6 +122,18 @@ TextFormattingPlugin.prototype.initialize = function (host, options) {
     this.config(options);
   }
 };
+/** @override
+*/
+
+
+TextFormattingPlugin.prototype._afterInit = function () {
+  // WOWRKAROUND : In test-resource and tr-grid-util, avoid using static variables. duplicating DateTime
+  var rtGrid = this._realTimeGrid;
+
+  if (rtGrid && rtGrid.setDateTimeUtil) {
+    rtGrid.setDateTimeUtil(DateTime);
+  }
+};
 /** @public
 * @param {Object} host core grid instance
 */

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

@@ -840,7 +840,7 @@ CellPainter._onThemeChanged = function(colors) {
 */
 CellPainter.loadThemeColors = function() {
 	if(!CellPainter.themeReady) {
-		CellPainter.themeReady = ElfUtil.getThemeColors().then(CellPainter._onThemeChanged);
+		CellPainter.themeReady = ElfUtil.getThemeColors(CellPainter._onThemeChanged).then(CellPainter._onThemeChanged);
 	}
 	return CellPainter.themeReady;
 };

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

@@ -0,0 +1,16 @@
+import { injectCss, prettifyCss } from "./Util.js";
+import Dom from "./Dom.js";
+import ElfUtil from "./ElfUtil.js";
+
+declare class DragUI {
+
+    constructor(options: any);
+
+    public static applyThemeColor(grid: any): void;
+
+    public onThemeLoaded(colors: any): void;
+
+}
+
+export default DragUI;
+export {DragUI};

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

@@ -0,0 +1,214 @@
+import { injectCss, prettifyCss } from "./Util.js";
+import Dom from "./Dom.js";
+import ElfUtil from "./ElfUtil.js";
+
+/**
+* @constructor
+* @param {Object} options
+*/
+var DragUI = function(options) {
+	this._dragBox = options.dragBox;
+	this._dragBoxIcon = options.dragBoxIcon;
+
+};
+
+/** @type {string}
+* @private
+*/
+DragUI._styles = ""; // Static variable
+/** @type {Element}
+* @private
+*/
+DragUI.prototype._guideline = null;
+/** @type {Element}
+* @private
+*/
+DragUI.prototype._dragBox = null;
+/** @type {Element}
+* @private
+*/
+DragUI.prototype._dragBoxIcon = null;
+/** Core grid instance
+* @type {Object}
+* @private
+*/
+DragUI.prototype._grid = null;
+
+/** @public
+* @param {Object} grid core grid instance
+*/
+DragUI.applyThemeColor = function(grid) {
+	// This call after onThemeLoaded from extensions initialize
+
+	if(!grid || grid._dragUIStyles) {
+		return;
+	}
+
+	if(DragUI._styles) {
+		grid._dragUIStyles = true; // Prevent loading the same style twice
+		injectCss(DragUI._styles, grid.getElement());
+	} else {
+		// TODO : Handle if can not load DragUI._styles try to set new DragUI._styles
+		// Warning: This process have to use ElfUtil.getThemeColors() that async process for Backward compatability.
+		// When use async process, then it can be load theme multiple times.
+
+	}
+};
+
+/** @public
+* @param {Object} colors
+*/
+DragUI.prototype.onThemeLoaded = function(colors) {
+	if(!DragUI._styles) {
+		var styles = [ // Main Styles without theme
+			".tr-row-guideline", [ // Backward compatability of row dragging
+				"position: absolute;",
+				"left: 0;",
+				"top: 0;",
+				"pointer-events: none;",
+				"text-align: center;",
+				"border-top-width: 3px;",
+				"border-top-style: solid;"
+			],
+			".guideline", [
+				"position: absolute;",
+				"left: 0;",
+				"top: 0;",
+				"pointer-events: none;",
+				"text-align: center;",
+				"border-top-style: solid;",
+				"width: 3px;",
+				"border-top-color: var(--grid-title-icon-color);",
+				"color: var(--grid-title-icon-color);",
+				"background-color: var(--grid-title-icon-color);"
+			],
+			".drag-box", [
+				"position: absolute;",
+				"left: 0;",
+				"top: 0;",
+				"pointer-events: none;",
+				"background-color: var(--grid-dragbox-bgcolor);",
+				"border: solid 1px var(--grid-title-sort-icon-color);",
+				"width: 134px;",
+				"height: 29px;",
+				"line-height: 29px;",
+				"white-space: nowrap;",
+				"overflow-x: clip;",
+				"text-overflow: ellipsis;",
+				"padding: 0 7px 0 7px;",
+				"box-shadow: 0 0 8px var(--grid-dragbox-bordercolor);"
+			],
+			".drag-box-disabled", [
+				"width: 100px;",
+				"left: 0;",
+				"top: 0;",
+				"position: absolute;"
+			],
+			".drag-box-icon", [
+				"top: -4px;",
+				"left: 12px;",
+				"padding: 2px;",
+				"border-radius: 100%;",
+				"font-size: 11px;",
+				"position: absolute;"
+			],
+			".drag-box-icon[icon='void']", [
+				"background-color:var(--grid-void-icon-bgcolor);",
+				"color:var(--grid-void-icon-color);"
+			],
+			".drag-box-icon[icon='add']", [
+				"background-color:var(--grid-insertion-icon-bgcolor);",
+				"color:var(--grid-insertion-icon-color);"
+			],
+			":host", [
+				"--grid-dragbox-bgcolor: #ffffff;", // If the value cannot be found, default to halo-light
+				"--grid-insertion-icon-bgcolor: #39c46e;",
+				"--grid-insertion-icon-color: #1A1A1A;",
+				"--grid-void-icon-bgcolor: #F5475B;",
+				"--grid-void-icon-color: #FFFFFF;"
+			],
+			".mouse-dragging .cell:hover", [ // for change mouse cursor when hover header while dragging
+				"cursor: grabbing !important;"
+			],
+			":host .column .cell.drag-indicator", [
+				"border: var(--grid-drag-indicator);" // defualt is "none"
+			],
+			".tr-dragging, .tr-dragging *", [
+				"-webkit-touch-callout: none;",
+				".user-select(none);"
+			]
+		];
+		var guidelineColor = "#ff9933";
+		var ElfVersion = ElfUtil.getElfVersion();
+		if(colors.primary) {
+			guidelineColor = colors.primary;
+		}
+		guidelineColor += ";";
+
+		styles.push(".tr-row-guideline", [
+			"border-top-color: " + guidelineColor,
+			"color: " + guidelineColor
+		]);
+
+		if(ElfVersion < 3) { // Backward compatability
+			styles.push(".pearl .tr-row-guideline, *[theme=pearl] .tr-row-guideline", [
+				"border-top-color: #ee7600;",
+				"color: #ee7600;",
+				"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));"
+			]);
+		}
+		DragUI._styles = prettifyCss(styles);
+	}
+};
+
+/** @private
+* @param {!Element|Event|MouseEvent} e
+* @param {Object} grid
+* @returns {boolean}=true means dragBox can be drop
+*/
+DragUI.prototype.renderDragBox = function (e, grid) {
+	if(!grid) {
+		return false;
+	}
+
+	var gridElem = grid.getElement();
+	var gridParent = grid.getParent().parentNode;
+	var pn = this._dragBox.parentNode;
+	if(!pn) {
+		gridParent.appendChild(this._dragBox);
+	}
+
+	var iconParent = this._dragBoxIcon.parentNode;
+
+	var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon;
+	this._dragBoxIcon.style.visibility = "visible";
+	var drop = true;
+	if(dragBoxIcon === "insertion") {
+		drop = false;
+		this._dragBoxIcon.icon = "add";
+		if(!iconParent) {
+			this._dragBox.appendChild(this._dragBoxIcon);
+		}
+	} else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
+		drop = false;
+		this._dragBoxIcon.icon = "void";
+		if(!iconParent) {
+			this._dragBox.appendChild(this._dragBoxIcon);
+		}
+	} else {
+		Dom.removeParent(this._dragBoxIcon);
+	}
+
+	var gridRect = gridElem.getBoundingClientRect();
+
+	var x = e.clientX - gridRect.left;
+	var y = e.pageY - gridRect.top;
+
+	// space for mouse cursor
+	this._dragBox.style.left = x - 5 + "px";
+	this._dragBox.style.top = y + 8  + "px";
+	return drop;
+};
+
+export default DragUI;
+export {DragUI};

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

@@ -4,6 +4,8 @@ declare namespace ElementObserver {
 
     function addLanguageListener(element: Element): void;
 
+    function addAttributeListener(element: Element, listener: ((...params: any[]) => any), attributeName?: string): void;
+
 }
 
 export default ElementObserver;

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

@@ -13,6 +13,23 @@ var _onLanguageMutated = function (elem, mutation) {
 	}
 };
 
+/** @private
+* @param {Function} listener
+* @param {string=} attributeName
+* @param {MutationRecord} mutation
+*/
+var _onAttributeMutated = function (listener, attributeName, mutation) {
+	if (mutation.type === "attributes") {
+		if (attributeName != null) {
+			if (mutation.attributeName === attributeName) {
+				listener(mutation.target.getAttribute(attributeName));
+			}
+		} else {
+			listener(mutation.target);
+		}
+	}
+};
+
 /** @private
 * @return {string}
 */
@@ -61,9 +78,12 @@ ElementObserver._addListener = function(elem, fn) {
 	}
 	if (!elem._observeId) {
 		var id = ElementObserver._getNewId();
-		listeners[id] = [];
 		elem._observeId = id;
 	}
+	if (!listeners[elem._observeId]) { // Always check to support the using of separated ElfUtil module in testing page
+		listeners[elem._observeId] = [];
+	}
+
 	var listener = listeners[elem._observeId];
 	if (listener.indexOf(fn) < 0) {
 		listener.push(fn);
@@ -71,7 +91,7 @@ ElementObserver._addListener = function(elem, fn) {
 };
 
 /** @public Add a listener to a html lang attribute
-* @param {Element} element A target element to listen to
+* @param {Element} element An element within the DOM tree to watch for changes
 */
 ElementObserver.addLanguageListener = function(element) {
 	if (!element) { return; }
@@ -81,6 +101,16 @@ ElementObserver.addLanguageListener = function(element) {
 	ElementObserver._addObserver(document.documentElement, _onLanguageMutated.bind(null, element));
 };
 
+/** @public Add a listener to a html attribute
+* @param {Element} element An element within the DOM tree to watch for changes
+* @param {Function} listener A function which will be called on each attribute change
+* @param {string=} attributeName If not specified, listener will be called on every attribute change
+*/
+ElementObserver.addAttributeListener = function(element, listener, attributeName) {
+	if (!element || !listener) { return; }
+	ElementObserver._addObserver(element, _onAttributeMutated.bind(null, listener, attributeName));
+};
+
 /**
 * @type {MutationObserver}
 * @private

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

@@ -1,5 +1,6 @@
 import { nestedObjectToArray, rgb2Hex } from "./Util.js";
 import { Deferred } from "./Deferred.js";
+import { ElementObserver } from "./ElementObserver.js";
 
 declare namespace ElfUtil {
 
@@ -23,10 +24,12 @@ declare namespace ElfUtil {
 
     function prepareIconPreloading(): (string)[]|null;
 
-    function getThemeColors(): Promise<any>|null;
+    function setRTK(rtk: any): void;
 
     function getMovementColorProfile(): string;
 
+    function getThemeColors(themeChangedCb?: ((...params: any[]) => any)): Promise<any>|null;
+
 }
 
 export default ElfUtil;