@refinitiv-ui/efx-grid 6.0.32 → 6.0.34

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

@@ -18,6 +18,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @property {Function=} drag=null Function handler for drag event
 * @property {Function=} dragEnd=null Function handler for dragEnd event
 * @property {Function=} dataMoved=null Function handler for dataMoved event
+* @property {Function=} beforeDataMoved=null Function handler for beforeDataMoved event
 */
 
 /** @event RowDraggingPlugin#drag
@@ -42,8 +43,34 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @type {Object}
 */
 /** @event RowDraggingPlugin#dataMoved
-* @description Fired when rows or data are moved by drag operation.
+* @description Fired when rows or data are moved by the drag operation.
 * @type {Object}
+* @property {Array.<number>} srcRowIndices row indices of the selected rows
+* @property {Array.<string>} srcRowIds row ids of the selected rows
+* @property {Array.<string>} srcRowTypes row types of the selected rows
+* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
+* @property {number} destRowIndex row index of the drop area
+* @property {string} destRowId row id of the drop area. This will be empty string for the end of grid
+* @property {number} destRowType row type of the drop area. This will be empty string for the end of grid
+*/
+/** @event RowDraggingPlugin#beforeDataMoved
+* @description Fired after mouseup and before the data/row is about to be moved. You can check the current drag and drop states, cancel operation or apply custom tasks in this event.
+* @type {Object}
+* @property {Array.<number>} srcRowIndices row indices of the selected rows
+* @property {Array.<string>} srcRowIds row ids of the selected rows
+* @property {Array.<string>} srcRowTypes row types of the selected rows
+* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
+* @property {number} destRowIndex row index of the drop area
+* @property {string} destRowId row id of the drop area. This will be empty string for the end of grid
+* @property {number} destRowType row type of the drop area. This will be empty string for the end of grid
+* @example
+* beforeDataMoved: function(e) {
+*   var srcRowType = e.srcRowTypes[0];
+*   var destRowType = e.destRowType;
+*   if(srcRowType === "GROUP_MEMBER" && destRowType === "CONTENT") {
+*     e.cancel = true; // Prevent a group member row from moving outside of its own group
+*   }
+* }
 */
 
 
@@ -55,6 +82,27 @@ var _isInContentSection = function (pos) {
 	return (pos && pos["sectionType"] === "content") ? true : false;
 };
 
+/** @private
+* @param {string} rowType
+* @return {boolean}
+*/
+var _isNormalRowType = function (rowType) {
+	if(rowType) {
+		if(rowType === "CONTENT") {
+			return true;
+		}
+		if(rowType === "CHAIN") {
+			return true;
+		}
+		if(rowType === "GROUP_HEADER") {
+			return true;
+		}
+		return false;
+	} else {
+		return true;
+	}
+};
+
 /** @constructor
 * @param {RowDraggingPlugin.Options=} options
 * @extends {GridPlugin}
@@ -397,6 +445,7 @@ RowDraggingPlugin.prototype.config = function (options) {
 	this.addListener(extOptions, "drag");
 	this.addListener(extOptions, "dragEnd");
 	this.addListener(extOptions, "dataMoved");
+	this.addListener(extOptions, "beforeDataMoved");
 };
 
 /** Get a current state of grid and extension config
@@ -795,7 +844,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 			var destGrid = destPos["grid"] || srcGrid;
 			var destRowIndex = destPos["rowIndex"];
 
-			var rowSelection = srcGrid.getPlugin('RowSelectionPlugin');
+			var rowSelection = srcGrid.getPlugin("RowSelectionPlugin");
 			var srcRowIndices = rowSelection && rowSelection.getSelectedRows();
 			if (!srcRowIndices || !srcRowIndices.length) {
 				// case no row selection or it disabled
@@ -834,10 +883,9 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 * @return {number}
 */
 RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
-	var destDv = destGrid.getDataSource();
-
 	var srcRowIndices = null;
 	var srcDv = srcGrid.getDataSource();
+	var destDv = destGrid.getDataSource();
 	if(typeof srcRowRef === "string") {
 		var srcRowIndex = srcDv.getRowIndex(this._startingRid);
 		if(srcRowIndex >= 0) {
@@ -851,27 +899,103 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		return 0;
 	}
 
+	// Available row types are ["CONTENT", "CHAIN", "CONSTITUENT", "GROUP_HEADER", "SUBGROUP_HEADER", "GROUP_MEMBER"]
+	var i, len;
+	var srcCount = srcRowIndices.length;
+	var srcRowIds = new Array(srcCount);
+	var srcRowTypes = [];
+	var conRowType = "";
+	var api = this.getGridApi();
+	for(i = 0; i < srcCount; ++i) {
+		var srcIndex = srcRowIndices[i];
+		var rowType = api.getRowType(srcIndex);
+		srcRowIds[i] = srcDv.getRowId(srcIndex);
+		srcRowTypes[i] = rowType;
+		if(conRowType) {
+			if(conRowType !== rowType) {
+				conRowType = "MIXED";
+			}
+		} else {
+			conRowType = rowType;
+		}
+	}
+	var destRowType = api.getRowType(destRowIndex); // TODO: this has to be get from destGrid
+	var destRowId = destDv.getRowId(destRowIndex);
+	var parentRowId, childRowIds;
+
+	if(this.hasListener("beforeDataMoved")) {
+		evtArg["srcRowIndices"] = srcRowIndices;
+		evtArg["srcRowIds"] = srcRowIds;
+		evtArg["srcRowTypes"] = srcRowTypes;
+		evtArg["consolidatedSrcRowType"] = conRowType;
+		evtArg["destRowIndex"] = destRowIndex;
+		evtArg["destRowId"] = destRowId;
+		evtArg["destRowType"] = destRowType;
+		this._dispatch("beforeDataMoved", evtArg);
+		if(evtArg["cancel"]) {
+			return 0;
+		}
+	}
 
+	var rsp = srcGrid.getPlugin("RowSegmentingPlugin");
 	var movedRowIds = null;
-	var destRowId = destDv.getRowId(destRowIndex);
 	if(srcGrid === destGrid) { // TODO: Support wrap mode
-		movedRowIds = srcDv.moveRow(srcRowIndices, destRowIndex) || [];
+		if(conRowType === "MIXED") {
+			movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+		} else if(conRowType === "CONTENT") {
+			if(destRowType === "GROUP_HEADER") {
+				childRowIds = rsp.getSegmentChildIds(destRowId);
+				if(childRowIds) {
+					movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+				} else { // Add content row as a new member only if there is no member
+					rsp.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.moveRow(srcRowIds, destRowId);
+				movedRowIds = srcRowIds;
+			}
+		} else if(conRowType === "CHAIN" || conRowType === "GROUP_HEADER") {
+			if(_isNormalRowType(destRowType)) {
+				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			}
+		} else if(conRowType === "GROUP_MEMBER") {
+			if(srcCount === 1) {
+				parentRowId = rsp.getSegmentParentRowId(srcRowIds[0]);
+				childRowIds = rsp.getSegmentChildIds(parentRowId);
+				var childCount = childRowIds ? childRowIds.length : 0;
+				var endOfSegment = srcDv.getRowIndex(parentRowId) + childCount + 1;
+				if(destRowIndex === endOfSegment) {
+					movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+				} else if(destRowType === "GROUP_MEMBER") {
+					var destParentRowId = rsp.getSegmentParentRowId(destRowId);
+					if(parentRowId === destParentRowId) {
+						movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+					}
+				} 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
 	} else {
+		// TODO: Add support moving row based on row types
 		// TODO: Check if we support moving to last row for multi table
-		// if(!destRowId) {
-		// return 0;
-		// }
-		movedRowIds = [];
+		movedRowIds = srcRowIds;
 		evtArg["destGrid"] = destGrid;
 
 		var originalRows = [];
-		var i;
-		var len = srcRowIndices.length;
-		for(i = 0; i < len; ++i) {
-			var rowId = srcDv.getRowId(srcRowIndices[i]);
+		for(i = 0; i < srcCount; ++i) {
 			var rowData = srcDv.getRowData(rowId);
 			if(rowData) {
-				movedRowIds.push(rowId);
 				originalRows.push(rowData);
 			}
 		}
@@ -891,14 +1015,15 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		}
 	}
 
-	if(movedRowIds.length) {
+	var moveCount = movedRowIds ? movedRowIds.length : 0;
+	if(moveCount) {
 		evtArg["originRowId"] = movedRowIds[0];
 		evtArg["originRowIds"] = movedRowIds;
 		evtArg["destinationRowId"] = destRowId; // Return empty string for the last row
 
 		this._dispatch("dataMoved", evtArg);
 	}
-	return movedRowIds.length;
+	return moveCount;
 };
 /** @private
 * @return {boolean}

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

@@ -7,30 +7,30 @@ import { DateTime } from '../../tr-grid-util/es6/DateTime.js';
 declare namespace TextFormattingPlugin {
 
     type FormatOptions = {
-        formatType?: string,
-        type?: string,
-        field?: string,
-        decimalPlaces?: number,
-        precisionEnabled?: boolean,
-        plusSign?: boolean,
-        separator?: boolean,
-        percentSign?: boolean,
-        scalingUnit?: string,
-        multiplyBy100?: boolean,
-        mutiplyBy100?: boolean,
-        dateTimeFormat?: string,
-        useUTCTime?: boolean,
-        autoTextFormatting?: boolean,
-        formatLogic?: ((...params: any[]) => any)
+        formatType?: string|null,
+        type?: string|null,
+        field?: string|null,
+        decimalPlaces?: number|null,
+        precisionEnabled?: boolean|null,
+        plusSign?: boolean|null,
+        separator?: boolean|null,
+        percentSign?: boolean|null,
+        scalingUnit?: string|null,
+        multiplyBy100?: boolean|null,
+        mutiplyBy100?: boolean|null,
+        dateTimeFormat?: string|null,
+        useUTCTime?: boolean|null,
+        autoTextFormatting?: boolean|null,
+        formatLogic?: ((...params: any[]) => any)|null
     };
 
     type ColumnOptions = {
-        formatType?: (string|TextFormattingPlugin.FormatOptions),
-        autoTextFormatting?: boolean
+        formatType?: (string|TextFormattingPlugin.FormatOptions)|null,
+        autoTextFormatting?: boolean|null
     };
 
     type GridOptions = {
-        autoTextFormatting?: boolean
+        autoTextFormatting?: boolean|null
     };
 
     type FormatLogicArguments = {
@@ -40,7 +40,7 @@ declare namespace TextFormattingPlugin {
         formattedText: string,
         cell: any,
         rowData: any,
-        format: ((...params: any[]) => any)
+        format: ((...params: any[]) => any)|null
     };
 
 }
@@ -61,7 +61,7 @@ declare class TextFormattingPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
-    public setColumnFormat(colIndex: number, formatOptions: TextFormattingPlugin.FormatOptions): void;
+    public setColumnFormat(colIndex: number, formatOptions: TextFormattingPlugin.FormatOptions|null): void;
 
     public getColumnFormatOptions(colIndex: number, options?: any): any;