@refinitiv-ui/efx-grid 6.0.130 → 6.0.132

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -73,6 +73,8 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public setJETDragContent(content: any): void;
 
+    public moveRows(srcRowIndices: (number)[]|null, destRowIndex: number, srcGrid?: any, destGrid?: any): number;
+
 }
 
 export default RowDraggingPlugin;

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -83,7 +83,12 @@ import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util
 * @return {boolean}
 */
 let _isInContentSection = function (pos) {
-	return (pos && pos["sectionType"] === "content") ? true : false;
+	if(pos) {
+		if(pos["sectionType"] === "content") {
+			return pos["sectionName"] !== "bottomPadding";
+		}
+	}
+	return false;
 };
 
 /** @private
@@ -107,6 +112,20 @@ let _isNormalRowType = function (rowType) {
 	}
 };
 
+/** @private
+* @param {Object} api
+* @param {number|string} rowRef
+* @returns {string}
+*/
+let _getRowType = function (api, rowRef) {
+	if(api) {
+		if(api.getRowType) {
+			return api.getRowType(rowRef);
+		}
+	}
+	return "CONTENT";
+};
+
 /** @constructor
 * @param {RowDraggingPlugin.Options=} options
 * @extends {GridPlugin}
@@ -130,6 +149,7 @@ let RowDraggingPlugin = function (options) {
 	t._onJETDrop = t._onJETDrop.bind(t);
 	t._onJETDragOver = t._onJETDragOver.bind(t);
 	t._delayStart = t._delayStart.bind(t);
+	t._onMouseOut = t._onMouseOut.bind(t);
 
 	t._hosts = [];
 
@@ -261,7 +281,7 @@ RowDraggingPlugin.prototype._dragUI = null;
 /** @type {number}
 * @private
 */
-RowDraggingPlugin.prototype._timerId = -1;
+RowDraggingPlugin.prototype._timerId = 0;
 /** @type {boolean}
 * @private
 */
@@ -378,6 +398,10 @@ RowDraggingPlugin.prototype.unload = function (host) {
 
 		this._clearCache();
 	}
+	if(this._timerId) {
+		clearTimeout(this._timerId);
+		this._timerId = 0;
+	}
 	this._dispose();
 };
 
@@ -570,13 +594,10 @@ RowDraggingPlugin.prototype.startDrag = function (startRef) {
 };
 /** @public */
 RowDraggingPlugin.prototype.stopDrag = function () {
-	if (!this._dragging) {
-		this.cancelDrag(); // Cancel drag if this method is called on dragStart event
-		return;
+	this.cancelDrag(); // Cancel drag if this method is called on dragStart event
+	if(this._dragging) {
+		this._onDragEnd();
 	}
-
-	this.cancelDrag();
-	this._onDragEnd();
 };
 /** @public */
 RowDraggingPlugin.prototype.cancelDrag = function () {
@@ -764,6 +785,8 @@ RowDraggingPlugin.prototype._onMouseDown = function (e) {
 * @param {boolean=} fromJET
 */
 RowDraggingPlugin.prototype._onDragStart = function (e, fromJET) {
+	this._timerId = 0;
+
 	if (this._dragging) { return; }
 	if (!this._pos) { return; }
 
@@ -814,9 +837,7 @@ RowDraggingPlugin.prototype._onDragStart = function (e, fromJET) {
 			let dv = grid.getDataSource();
 			this._startingRid = dv.getRowId(rowIndex);
 			this._startingGrid = grid;
-			let api = this.getGridApi();
-			let rowType =  api.getRowType(rowIndex);
-			this._startingRowType = rowType;
+			this._startingRowType = _getRowType(this.getGridApi(grid), rowIndex);
 
 			if (this._dragBoxRenderer) { // For custom drag box rendering
 				let arg = cloneObject(e); // TODO: Check if cloning is necessary
@@ -872,34 +893,36 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
 		Dom.preventDefault(e);
 	}
 
-	var prevPos = this._pos;
-	this._pos = this._hitTest(e); // A new object is created
-
-	if(this._pos["grid"] && prevPos) { // mouse is in grid area
-		if(this._pos["sectionType"] !== "content") {  // mouse is in title or footer section, or grid has no row
-			this._pos = prevPos;
+	let newPos = this._hitTest(e); // A new object is created
+	if(newPos["grid"]) { //Mouse is in grid area
+		if(_isInContentSection(this._pos) && this._pos["grid"] === newPos["grid"]) {
+			if(!_isInContentSection(newPos) || !(newPos["rowIndex"] >= 0)) { // Mouse is on un-dropable area
+				newPos = null;
+			}
 		}
 	}
+	if(newPos) {
+		this._pos = newPos;
+	} else {
+		newPos = this._pos;
+	}
 
-	this._pos["dragBox"] = this._dragBox; // assign dragBox for user determine valid target
+	newPos["dragBox"] = this._dragBox; // assign dragBox for user determine valid target
 
 	// need to check grid properties because row can be move outside the grid
-	if(this._pos["grid"] && this._shouldPreventDrop(this._pos["rowIndex"])) {
-		this._pos.dragBoxIcon = "void";
+	if(this._shouldPreventDrop(newPos)) {
+		newPos.dragBoxIcon = "void";
 	}
 
-	let dropable = true;
-	if(this._entryPoint === 'JET' && !this._jetContentHasRic) {
-		dropable = false;
-	}
+	let dropable = (this._entryPoint !== "JET" || this._jetContentHasRic);
 	if(dropable) {
 		this._updateGuidePosition(e);
 	}
 
 	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
-	this._dispatch("drag", this._pos);
+	this._dispatch("drag", newPos);
 	if(!this._uiDisabled && dropable) {
-		e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
+		e.dragBoxIcon = newPos.dragBoxIcon; // access event object instread of element for prevent element persistence
 		let drop = this._dragUI.renderDragBox(e, this._startingGrid);
 		if(!drop) { // can not be drop or not allow to drop or insertion
 			this.cancelDrag();
@@ -973,11 +996,33 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 	this._clearCache();
 	this._jetDragContent = null;
 };
+
+/** Move multiple rows to the specified row index. The move results will be based on row type of the given rows. The behavior is the same as drag and drop operation from this extension.
+* @public
+* @param {Array.<number>} srcRowIndices Array of row indices from the source Grid (e.g., row index or row id)
+* @param {number} destRowIndex Destination row index
+* @param {Object=} srcGrid Core grid instance of the source rows
+* @param {Object=} destGrid Core grid instance of the destination
+* @return {number} Number of rows from the given rows that have been moved
+*/
+RowDraggingPlugin.prototype.moveRows = function (srcRowIndices, destRowIndex, srcGrid, destGrid) {
+	if(!srcGrid) {
+		srcGrid = this._startingGrid || this._hosts[0];
+		if(!srcGrid) {
+			return 0;
+		}
+	}
+	if(!destGrid) {
+		destGrid = srcGrid;
+	}
+
+	return this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, {});
+};
 /** @private
 * @param {Array.<number>|string} srcRowRef
 * @param {number} destRowIndex
-* @param {Object} srcGrid core grid instance
-* @param {Object} destGrid core grid instance
+* @param {!Object} srcGrid core grid instance
+* @param {!Object} destGrid core grid instance
 * @param {!Object} evtArg
 * @return {number}
 */
@@ -986,7 +1031,7 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 	let srcDv = srcGrid.getDataSource();
 	let destDv = destGrid.getDataSource();
 	if(typeof srcRowRef === "string") {
-		let srcRowIndex = srcDv.getRowIndex(this._startingRid);
+		let srcRowIndex = srcDv.getRowIndex(srcRowRef);
 		if(srcRowIndex >= 0) {
 			srcRowIndices = [srcRowIndex];
 		}
@@ -1001,24 +1046,24 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 	}
 
 	// Available row types are ["CONTENT", "CHAIN", "CONSTITUENT", "GROUP_HEADER", "SUBGROUP_HEADER", "GROUP_MEMBER"]
-	let i, len;
+	let i;
 	let srcCount = srcRowIndices.length;
 	let srcRowIds = new Array(srcCount);
 	let srcRowTypes = [];
 	let conRowType = "";
-	let api = this.getGridApi();
+	let api = this.getGridApi(srcGrid);
 	if(api && !api.getRowType) {
 		api = null;
 	}
 	for(i = 0; i < srcCount; ++i) {
 		let srcIndex = srcRowIndices[i];
-		let rowType = api ? api.getRowType(srcIndex) : "CONTENT";
+		let rowType = _getRowType(api, srcIndex);
 		srcRowIds[i] = srcDv.getRowId(srcIndex);
 		srcRowTypes[i] = rowType;
 		if(conRowType) {
 			if(conRowType !== rowType) {
 				conRowType = "MIXED";
-			}
+			} // TODO: Check if the GROUP_MEMBER coms from the same parent
 		} else {
 			conRowType = rowType;
 		}
@@ -1026,9 +1071,9 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 	if(!conRowType) {
 		conRowType = "CONTENT";
 	}
-	let destRowType = api ? api.getRowType(destRowIndex) : ""; // TODO: this has to be get from destGrid
+	let destRowType = _getRowType(api, destRowIndex); // TODO: this has to be get from destGrid
 	let destRowId = destDv.getRowId(destRowIndex);
-	let parentRowId, childRowIds;
+	let destParentRowId = destDv.getSegmentParentRowId(destRowId);
 
 	evtArg["rowIndex"] = srcRowIndices[0];
 	evtArg["srcRowIndices"] = srcRowIndices;
@@ -1043,25 +1088,22 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		return 0;
 	}
 
-	let rsp = srcGrid.getPlugin("RowSegmentingPlugin");
 	let movedRowIds = null;
 	if(srcGrid === destGrid) { // TODO: Support wrap mode
 		if(conRowType === "MIXED") {
-			movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			movedRowIds = srcDv.moveRow(srcRowIds, destRowId); // TODO: Handle each row individually in this mixed case
 		} else if(conRowType === "CONTENT") {
 			if(destRowType === "GROUP_HEADER") {
-				childRowIds = rsp.getSegmentChildIds(destRowId);
-				if(childRowIds) {
+				if(srcDv.getSegmentChildIds(destRowId)) {
 					movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
 				} else { // Add content row as a new member only if there is no member
-					rsp.addSegmentChildren(destRowId, srcRowIds);
+					srcDv.addSegmentChildren(destRowId, srcRowIds);
 					movedRowIds = srcRowIds;
 				}
 			} else if(_isNormalRowType(destRowType)) {
 				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
 			} else if(destRowType === "GROUP_MEMBER") {
-				parentRowId = rsp.getSegmentParentRowId(destRowId);
-				rsp.addSegmentChildren(parentRowId, srcRowIds);
+				srcDv.addSegmentChildren(destParentRowId, srcRowIds);
 
 				srcDv.moveRow(srcRowIds, destRowId);
 				movedRowIds = srcRowIds;
@@ -1071,58 +1113,53 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
 			}
 		} else if(conRowType === "GROUP_MEMBER") {
-			if(srcCount === 1) {
+			if(destRowType !== "CONSTITUENT" && destRowType !== "SUBGROUP_HEADER") {
 				let srcRowId = srcRowIds[0];
-				parentRowId = rsp.getSegmentParentRowId(srcRowId);
-				childRowIds = rsp.getSegmentChildIds(parentRowId);
-				let childCount = childRowIds ? childRowIds.length : 0;
-				let endOfSegment = srcDv.getRowIndex(parentRowId) + childCount + 1;
-				if(destRowIndex === endOfSegment) {
-					movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
-				} else if(destRowType === "GROUP_MEMBER") {
-					let destParentRowId = rsp.getSegmentParentRowId(destRowId);
-					if(parentRowId === destParentRowId) {
-						movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
-					} else { // Moving row between two segments
-						rsp.removeSegmentChild(parentRowId, srcRowId);
-						rsp.addSegmentChild(destParentRowId, srcRowId);
-						movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+				let parentRowId = srcDv.getSegmentParentRowId(srcRowId);
+				let endOfSegment = -1;
+				if(!srcDv.isSegmentCollapsed(parentRowId)) {
+					let childRowIds = srcDv.getSegmentChildIds(parentRowId);
+					let childCount = childRowIds ? childRowIds.length : 0;
+					endOfSegment = srcDv.getRowIndex(parentRowId) + childCount + 1;
+				}
+				if(destRowIndex !== endOfSegment) {
+					if(destRowType !== "GROUP_MEMBER" || parentRowId !== destParentRowId) {
+						srcDv.removeSegmentChildren(parentRowId, srcRowIds); // move members out of existing segment
+						if(destParentRowId) {
+							srcDv.addSegmentChildren(destParentRowId, srcRowIds); // Moving row between two segments
+						}
 					}
-				} else if(_isNormalRowType(destRowType)) { // move member out of existing segment
-					rsp.removeSegmentChild(parentRowId, srcRowIds[0]);
-
-					movedRowIds = srcDv.moveRow(srcRowIds[0], destRowId);
 				}
-			} else {
 				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
-			}
-		} // else CONSTITUENT, SUBGROUP_HEADER and other types cannot be moved
+			} // CONSTITUENT and SUBGROUP_HEADER types are not valid destination
+		} // CONSTITUENT and SUBGROUP_HEADER types cannot be moved
 	} else {
 		// TODO: Add support moving row based on row types
-		// TODO: Check if we support moving to last row for multi table
-		movedRowIds = srcRowIds;
+		// TODO: Check if we support moving to last row for multi-table
+
 		evtArg["destGrid"] = destGrid;
 
-		let originalRows = [];
-		for(i = 0; i < srcCount; ++i) {
-			let rowData = srcDv.getRowData(srcRowIds[i]);
-			if(rowData) {
-				originalRows.push(rowData);
-			}
-		}
-		len = originalRows.length;
-		if(len) {
-			srcDv.removeRows(srcRowIndices);
-			if(this._realTimeGrid) {
-				for(i = 0; i < len; ++i) {
-					let rowDef = originalRows[i]["ROW_DEF"];
-					rowDef.registerToView(destDv, destRowId);
+		if(api) { // This can only be Real-time Grid
+			let destApi = this.getGridApi(destGrid);
+			if(destApi) {
+				movedRowIds = srcRowIds;
+				for(i = 0; i < srcCount; ++i) {
+					let rowDef = api.getRowDefinition(srcRowIds[i]);
+					if(rowDef) {
+						destApi.insertRow(rowDef.getConfigObject(), destRowId);
+					}
 				}
-			} else {
-				for(i = 0; i < len; ++i) {
-					destDv.insertRow(destRowId, originalRows[i]); // TODO: Update view data source and grid
+				api.removeRows(srcRowIds);
+			}
+		} else {
+			movedRowIds = srcRowIds;
+			for(i = 0; i < srcCount; ++i) {
+				let rowData = srcDv.getRowData(srcRowIds[i]);
+				if(rowData) {
+					destDv.insertRow(destRowId, rowData); // TODO: Update view data source and grid
 				}
 			}
+			srcDv.removeRows(srcRowIndices);
 		}
 	}
 
@@ -1206,34 +1243,34 @@ RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
 
 
 /** @private
-* @param {string|number} destRowRef
+* @param {Object} posObj
 * @return {boolean}
 */
-RowDraggingPlugin.prototype._shouldPreventDrop = function (destRowRef) {
-
-	let api = this.getGridApi();
-	if(!api) { // It should not move the row if api doesn't initialize
-		return false;
-	}
-
+RowDraggingPlugin.prototype._shouldPreventDrop = function (posObj) {
 	if(this._startingRowType === "CONSTITUENT" || this._startingRowType === "SUBGROUP_HEADER") {
 		return true;
 	}
 
-	let grid = this._pos["grid"];
-	let rsp = grid.getPlugin("RowSegmentingPlugin");
-	if(!rsp) { // If row segment extension is not used, row drag and drop will not be protected by default.
+	if(!posObj) {
 		return false;
 	}
-	let destParentId = rsp.getSegmentParentRowId(destRowRef);
-	let startingParentId = rsp.getSegmentParentRowId(this._startingRid);
-	let destParentType;
-	if(this._startingRowType === "GROUP_MEMBER") {
-		let startingParentType = api.getRowType(startingParentId);
-		if(startingParentType === "SUBGROUP_HEADER") {
-			destParentType = api.getRowType(destParentId);
+	let grid = posObj["grid"];
+	if(!grid) {
+		return false;
+	}
+	let dv = grid.getDataSource();
+	if(!dv) {
+		return false; // Grid has been disposed
+	}
 
-			if(!startingParentId || !destParentId) {
+	let destApi = this.getGridApi(grid);
+	let destRowId = dv.getRowId(posObj["rowIndex"]);
+	let destParentId = dv.getSegmentParentRowId(destRowId);
+	if(this._startingRowType === "GROUP_MEMBER") {
+		let startingParentId = dv.getSegmentParentRowId(this._startingRid);
+		let startingApi = this.getGridApi(this._startingGrid);
+		if(_getRowType(startingApi, startingParentId) === "SUBGROUP_HEADER") {
+			if(!destParentId) {
 				return true;
 			}
 
@@ -1243,25 +1280,23 @@ RowDraggingPlugin.prototype._shouldPreventDrop = function (destRowRef) {
 			return true;
 		}
 		// else { } starting have GROUP_HEADER case, it can be move outside the group
-
 	} else if(this._startingRowType === "CHAIN" ) {
 		if(destParentId) { // CHAIN can not move inside the member that have parent
 			return true;
 		}
 	} else if (this._startingRowType === "GROUP_HEADER") {
-		if( destParentId !== startingParentId) { // GROUP_HEADER can't move inside another GROUP or SUBGROUP
+		if(destParentId) { // GROUP_HEADER can't move inside another GROUP, SUBGROUP, or the same group
 			return true;
 		}
 	}
 
-	let destRowType =  api.getRowType(destRowRef);
+	let destRowType = _getRowType(destApi, destRowId);
 	if(destRowType === "CONSTITUENT" || destRowType === "SUBGROUP_HEADER") { // Do not allow dropping this type when starting with any row types
 		return true;
 	}
 
 	if(destRowType === "GROUP_MEMBER") {
-		destParentType = api.getRowType(destParentId);
-		if(destParentType === "SUBGROUP_HEADER") { // Do not allow to drop group member that have parent is SUBGROUP_HEADER
+		if(_getRowType(destApi, destParentId) === "SUBGROUP_HEADER") { // Do not allow to drop group member that have parent is SUBGROUP_HEADER
 			return true;
 		}
 	}
@@ -1323,11 +1358,14 @@ RowDraggingPlugin.prototype._setEntryPoint = function (str) {
  * @param {Object} e
  */
 RowDraggingPlugin.prototype._onMouseOut = function (e) {
-	e = e ? e : window.event;
+	if(!e) {
+		e = window.event;
+		if(!e) {
+			return;
+		}
+	}
 	let from = e.relatedTarget || e.toElement;
 	if (!from || from.nodeName == "HTML") {
-		// window.console.warn("Left window");
-
 		/*
 		 * TRGRID-1493
 		 * The DragStart is delayed using a timer (_timerId created by _delayStart )
@@ -1337,9 +1375,9 @@ RowDraggingPlugin.prototype._onMouseOut = function (e) {
 		 */
 
 		// cancel the timer - _onDragStart will not be called by the timer
-		if(this._timerId >= 0) {
+		if(this._timerId) {
 			clearTimeout(this._timerId);
-			this._timerId = -1;
+			this._timerId = 0;
 		}
 
 		this._onDragStart();
@@ -1353,7 +1391,7 @@ RowDraggingPlugin.prototype._onMouseOut = function (e) {
 RowDraggingPlugin.prototype._delayStart = function (e) {
 	this._startingGrid.unlisten("mousemove", this._delayStart);
 
-	if (this._timerId < 0) {
+	if(!this._timerId) {
 		this._timerId = window.setTimeout(this._onDragStart, 200);
 	}
 	if (this._jetDnD) {
@@ -1437,6 +1475,16 @@ RowDraggingPlugin.prototype._onJETDrop = function (jetObj) {
 	this._onDragEnd(jetObj["mouse"]["srcEvent"]);
 };
 
+/** @public
+* @ignore
+* @return {!Object}
+*/
+RowDraggingPlugin.prototype._getEventHandlers = function() {
+	return {
+		"mouseout": this._onMouseOut
+	};
+};
+
 
 
 export default RowDraggingPlugin;

package/lib/tr-grid-row-filtering/es6/RowFiltering.js

@@ -282,6 +282,10 @@ RowFilteringPlugin.prototype._activeColFilters = null;
 * @private
 */
 RowFilteringPlugin.prototype._iconActivation = "onActiveFilter";
+/** @type {string}
+* @private
+*/
+RowFilteringPlugin.prototype._iconTag = "";
 /** @type {number}
 * @private
 */
@@ -369,6 +373,9 @@ RowFilteringPlugin.prototype.initialize = function (host, options) {
 				"color: var(--grid-header-txtcolor,inherit);"
 			],
 			".always-on-filter .active-filter .floating-panel .title-filter-icon", [
+				"color: var(--grid-title-icon-color,inherit);"
+			],
+			".always-on-filter .active-filter .floating-panel .title-filter-icon:hover", [
 				"color: var(--grid-title-filter-icon-hover-color,inherit);"
 			],
 			".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter", [
@@ -445,6 +452,17 @@ RowFilteringPlugin.prototype.unload = function (host) {
 * @ignore
 */
 RowFilteringPlugin.prototype._afterInit = function() {
+	if(!this._iconTag) {
+		let tagName = "ef-icon";
+		if(ElfUtil.hasComponent(tagName) >= 3) {
+			this._iconTag = tagName;
+		} else if(ElfUtil.hasComponent("ef-icon")) {
+			this._iconTag = "ef-icon";
+		} else {
+			this._iconTag = "div";
+		}
+		this._updateAllColumnIcons();
+	}
 	if(!this._filterDialog) {
 		this._filterDialog = RowFilteringPlugin._createDialog();
 		this._dialogInitialized = false;
@@ -1349,6 +1367,10 @@ RowFilteringPlugin.prototype.refresh = function() {
 * @param {number} colIndex
 */
 RowFilteringPlugin.prototype._updateColumnIcon = function(colIndex) {
+	if(!this._initializedGrid) {
+		return;
+	}
+
 	let colSettings = this._getUserColumnSettings(colIndex); // colData["rowFiltering"]
 	if(colSettings.hiddenIcon) {
 		return;
@@ -1386,8 +1408,8 @@ RowFilteringPlugin.prototype._updateColumnIcon = function(colIndex) {
 		if(!noFilterIcon) {
 			if(!cell._filterIcon) {
 				let filterIcon;
-				if(ElfUtil.hasComponent("ef-icon") >= 3) {
-					filterIcon = document.createElement("ef-icon");
+				if(this._iconTag && this._iconTag !== "div") {
+					filterIcon = document.createElement(this._iconTag);
 					filterIcon.setAttribute("icon", "filter");
 				} else {
 					filterIcon = document.createElement("div");