@refinitiv-ui/efx-grid 6.0.6 → 6.0.8

package/lib/tr-grid-column-stack/es6/ColumnStack.js

@@ -35,10 +35,12 @@ var ColumnStackPlugin = function () {
 	this._onColumnAdded = this._onColumnAdded.bind(this);
 	this._onStackButtonClicked = this._onStackButtonClicked.bind(this);
 	this._updateUI = this._updateUI.bind(this);
+	this._setStack = this._setStack.bind(this);
 	this._hosts = [];
 	this._stacks = {};
 
 	this._conflator = new Conflator(100, this._updateUI);
+	this._stackConflator = new Conflator(100, this._setStack);
 };
 
 Ext.inherits(ColumnStackPlugin, GridPlugin);
@@ -133,6 +135,7 @@ ColumnStackPlugin.prototype.unload = function (host) {
 
 	if(this._hosts.length <= 0) {
 		this._conflator.reset();
+		this._stackConflator.reset();
 		this._stacks = {};
 	}
 	this._dispose();
@@ -384,6 +387,9 @@ ColumnStackPlugin.prototype._moveStackedColumns = function (stackRefs) {
 	for(var i = 1; i < len; ++i) {
 		var fromIndex = this._getColumnIndex(stackRefs[i]);
 		var destIndex = this._getColumnIndex(stackRefs[0]); // Active Column may be shifted due to the move
+		if(fromIndex < destIndex){
+			destIndex -= 1;
+		}
 		this._moveColumn(fromIndex, destIndex + i);
 	}
 };
@@ -766,14 +772,15 @@ ColumnStackPlugin.prototype.getStackId = function(colIndex) {
 * @param {Array.<number|string>=} colRefs Names of fields or column indices. If not specified, selected columns will be used.
 * @param {string=} stackId Must be unique
 * @param {Object=} options
+* @param {boolean=} sort Default to true. If enable and colRefs are column indices, column in stack will be sorted
 * @return {boolean} Return true if all of the given columns is stacked together
 */
-ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
+ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options, sort) {
 	if(!colRefs) {
 		colRefs = this._getSelectedColumns();
 	}
 
-	var needSorting = true;
+	var needSorting = sort !== null ? sort : true;
 	if(colRefs.length) {
 		if(typeof colRefs[0] === "string") {// Do not sort in the case of field stack
 			needSorting = false;
@@ -826,14 +833,12 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 		}
 	}
 
+	// Make sure that all columns stay packed together
+	this._moveStackedColumns(stack.stackRefs);
+
 	if(stack.spreading) {
-		// Make sure that all columns stay packed together
-		this._moveStackedColumns(stack.stackRefs);
 		stack.activeColumn = stack.stackRefs[stack.stackRefs.length - 1]; // Right most column is the active column
 	} else {
-		// Do not move column here to prevent column header from being unrendered because of swapped column index in header binding.
-		// Stacked columns will be moved in the unstacking method.
-		// TODO: Column title will not be rendered in Realtime Grid in the case of column added event.
 		stack.activeColumn = stack.stackRefs[0]; // Left most column is the active column
 		var csp = this._getPlugin("ColumnSelectionPlugin");
 		if(csp && csp.isEnabled()) {
@@ -974,7 +979,7 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 			if(!stackOpt) {
 				continue; // Invalid index
 			}
-			if(stackOpt.collapsed === true) {
+			if(stackOpt.collapsed === true && stackOpt.spreading === true) {
 				this.expandGroup(colIndex);
 			}
 			stacks[stackOpt.stackId] = 1; // Exclude duplicate stacks
@@ -992,9 +997,6 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 		dirty = true;
 
 		var stackRefs = stack.stackRefs;
-		if(stack.spreading !== true) {
-			this._moveStackedColumns(stackRefs);
-		}
 		len = stackRefs.length;
 		if(stack.spreading) {
 			selFrom = this._getColumnIndex(stack.stackRefs[0]);
@@ -1038,9 +1040,6 @@ ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
 		dirty = true;
 
 		var stackRefs = stack.stackRefs;
-		if(stack.spreading !== true && enableUpdateUI) {
-			this._moveStackedColumns(stackRefs);
-		}
 
 		var len = stackRefs.length;
 		for(var i = 0; i < len; ++i) {
@@ -1297,11 +1296,7 @@ ColumnStackPlugin.prototype._onColumnAdded = function (e) {
 
 	var columnStack = this._columnStack;
 	if (columnStack) {
-		var colIndices = this.getColumnIndices(columnStack.fields);
-		if (colIndices.length > 1) {
-			this.removeAllStacks(false);
-			this.stackColumns(columnStack.fields, null, columnStack);
-		}
+		this._setStack(); // asynchronous
 	} else {
 		// add to group
 		var leftStackOpt = this._getColumnStackOptions(colIndex - 1);
@@ -1364,6 +1359,224 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 	this._dispatch("clicked", pos);
 };
 
+/** Remove existing stacks and apply persist stack
+* @private
+*/
+ColumnStackPlugin.prototype._setStack = function() {
+	if(this._stackConflator.conflate()) {
+		return;
+	}
+
+	var columnStack = this._columnStack;
+	if(columnStack){
+		var colIndices = this.getColumnIndices(columnStack.fields);
+		if (colIndices.length > 1) {
+			this.removeAllStacks(false);
+			this.stackColumns(columnStack.fields, null, columnStack);
+		}
+	}
+};
+
+/** @public
+* @description Get member column indices in a stack
+* @param {string} stackId
+* @return {!Array.<number>} Member column indices
+*/
+ColumnStackPlugin.prototype.getStackMemberIndices = function(stackId) {
+	var memberIndices = [];
+	if(stackId !== null) {
+		var stack = this._stacks[stackId];
+		if(stack){
+			var stackRefs = stack.stackRefs;
+			for(var i = 0; i < stackRefs.length; ++i) {
+				var stackRef = stackRefs[i];
+				var colIndex = this._getColumnIndex(stackRef);
+				memberIndices.push(colIndex);
+			}
+		}
+	}
+	return memberIndices;
+};
+
+/** @public
+* @description Get list member column id in a stack
+* @param {string} stackId
+* @return {!Array.<string>} Member column ids
+*/
+ColumnStackPlugin.prototype.getStackMemberIds = function(stackId) {
+	var memberIndices = this.getStackMemberIndices(stackId);
+	return this.getColumnIdsByIndex(memberIndices);
+};
+
+/** @public
+* @description Get column id by column index or indices
+* @param {number|Array<number>} columnIndex
+* @return {!Array.<string>} Column ids
+*/
+ColumnStackPlugin.prototype.getColumnIdsByIndex = function(columnIndex) {
+	var colIndices = [];
+	var colIds = [];
+	if(Array.isArray(columnIndex)){
+		colIndices = columnIndex;
+	} else {
+		colIndices.push(colIds);
+	}
+	for(var i = 0; i < colIndices.length; ++i) {
+		var colId = this.getColumnId(colIndices[i]);
+		colIds.push(colId);
+	}
+	return colIds;
+};
+
+/** @public
+* @description Add specific column to a stack
+* @param {number|string} colRef column id or column index
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.addColumnToStack = function(colRef, stackId) {
+	if(typeof colRef === "string") {
+		colRef = this.getColumnIndex(colRef);
+	}
+
+	var stack = this._stacks[stackId];
+	var isColumnStackable = this.isColumnStackable([colRef]);
+
+	// if column not stackable or destination stack not exist, do nothing
+	if(!isColumnStackable || !stack){
+		return;
+	}
+
+	var isCollapsed = stack.spreading && stack.collapsed;
+	if(isCollapsed){
+		this.expandGroup(this._getColumnIndex(stack.activeColumn));
+	}
+
+	// Prevent from flashing in stack mode
+	if(colRef !== activeIndex && stack.collapsed !== false) {
+		this._setColumnVisibility(colRef, false);
+	}
+
+	// apply stacking
+	this._setColumnStackOptions(colRef, stack);
+	stack.stackRefs.push(this._getColumnStacking(colRef));
+
+	if(stack.spreading) {
+		stack.activeColumn = stack.stackRefs[stack.stackRefs.length - 1];
+		stack.collapsed = isCollapsed;
+	} else {
+		stack.activeColumn  = stack.stackRefs[0];
+	}
+
+	var activeIndex = this._getColumnIndex(stack.activeColumn);
+
+	// Pack stacked columns together
+	this._moveStackedColumns(stack.stackRefs);
+
+	this._updateUI();
+};
+
+/** @public
+* @description Remove specific column from a stack
+* @param {number|string} colRef column id or column index
+*/
+ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
+	if(typeof colRef === "string") {
+		colRef = this.getColumnIndex(colRef);
+	}
+	var stackId = this.getStackId(colRef);
+	var stack = this._stacks[stackId];
+	if(!stack || colRef == -1) {
+		return; // Invalid column index or stackId
+	}
+
+	var stackMembers = this.getStackMemberIndices(stackId);
+	var stackRefs = stack.stackRefs;
+
+	if(stackMembers.length  < 3){
+		this.unstackColumns(stackMembers);
+	} else {
+		var isCollapsed = stack.spreading && stack.collapsed;
+
+		for(var i = 0; i < stackRefs.length; ++i) {
+			var stackRef = stackRefs[i];
+			var colIndex = this._getColumnIndex(stackRef);
+
+			if(colIndex === colRef){
+				if(isCollapsed) {
+					this._collapseMember(stackMembers[i], false);
+				}
+				stackRefs.splice(i, 1);
+				break;
+			}
+		}
+
+		this._removeColumnStackOptions(colRef);
+		this._setColumnVisibility(colRef, true);
+
+		if(stack.spreading) {
+			stack.activeColumn = stackRefs[stackRefs.length - 1];
+			stack.collapsed = isCollapsed;
+		} else {
+			stack.activeColumn  = stackRefs[0];
+		}
+		this._stacks[stackId] = stack;
+
+		this._moveStackedColumns(stack.stackRefs);
+		this._updateUI();
+	}
+};
+
+/** @public
+* @description Reorder columns in a stack
+* @param {Array.<number|string>} colRefs column ids or column indices
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
+	var stack = this._stacks[stackId];
+	if(!stack) {
+		return;
+	}
+
+	var stackMemberIndices = this.getStackMemberIndices(stackId);
+	var stackMemberCount =  stackMemberIndices.length;
+	var len = colRefs.length;
+	if(len) {
+		if(typeof colRefs[0] === "string") {
+			for(var j = 0; j < len; j++ ){
+				colRefs[j] = this.getColumnIndex(colRefs[j]);
+			}
+		}
+	}
+
+	var newStackMembers = [];
+	for(var i = 0; i < len; i++ ){
+		var colIndex = colRefs[i];
+		if(stackMemberIndices.indexOf(colIndex) !== -1){
+			newStackMembers.push(colIndex);
+		}
+	}
+	if(newStackMembers.length !== stackMemberCount){
+		for(i = 0; i < stackMemberCount; i++ ){
+			var columnIndex = stackMemberIndices[i];
+			if(newStackMembers.indexOf(columnIndex) === -1){
+				newStackMembers.push(columnIndex);
+				if(newStackMembers.length === stackMemberCount){
+					break;
+				}
+			}
+		}
+	}
+
+	var options = {
+		spreading: stack.spreading,
+		collapsed: stack.collapsed
+	};
+
+	this.unstackColumns(stackMemberIndices);
+	this.stackColumns(newStackMembers, stackId, options, false);
+
+};
+
 
 export default ColumnStackPlugin;
 export { ColumnStackPlugin, ColumnStackPlugin as ColumnStack, ColumnStackPlugin as ColumnStackExtension };

package/lib/tr-grid-column-stack/es6/index.js

@@ -1 +1 @@
-export * from "./ColumnStack";
+export * from "./ColumnStack.js";

package/lib/tr-grid-conditional-coloring/es6/index.js

@@ -1 +1 @@
-export * from "./ConditionalColoring";
+export * from "./ConditionalColoring.js";

package/lib/tr-grid-content-wrap/es6/index.js

@@ -1 +1 @@
-export * from "./ContentWrap";
+export * from "./ContentWrap.js";

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

@@ -1 +1 @@
-export * from "./ContextMenu";
+export * from "./ContextMenu.js";

package/lib/tr-grid-filter-input/es6/index.js

@@ -1 +1 @@
-export * from "./FilterInput";
+export * from "./FilterInput.js";

package/lib/tr-grid-heat-map/es6/index.js

@@ -1 +1 @@
-export * from "./HeatMap";
+export * from "./HeatMap.js";

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

@@ -1 +1 @@
-export * from "./InCellEditing";
+export * from "./InCellEditing.js";

package/lib/tr-grid-pagination/es6/index.js

@@ -1 +1 @@
-export * from "./Pagination";
+export * from "./Pagination.js";

package/lib/tr-grid-percent-bar/es6/index.js

@@ -1 +1 @@
-export * from "./PercentBar";
+export * from "./PercentBar.js";

package/lib/tr-grid-printer/es6/index.js

@@ -1 +1 @@
-export * from "./GridPrinter";
+export * from "./GridPrinter.js";

package/lib/tr-grid-range-bar/es6/index.js

@@ -1 +1 @@
-export * from "./RangeBar";
+export * from "./RangeBar.js";

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

@@ -1 +1 @@
-export * from "./RowDragging";
+export * from "./RowDragging.js";

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

@@ -1 +1 @@
-export * from "./RowFiltering";
+export * from "./RowFiltering.js";

package/lib/tr-grid-row-grouping/es6/index.js

@@ -1 +1 @@
-export * from "./RowGrouping";
+export * from "./RowGrouping.js";

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

@@ -1 +1 @@
-export * from "./RowSelection";
+export * from "./RowSelection.js";

package/lib/tr-grid-rowcoloring/es6/index.js

@@ -1 +1 @@
-export * from "./RowColoring";
+export * from "./RowColoring.js";

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

@@ -1 +1 @@
-export * from "./TextFormatting";
+export * from "./TextFormatting.js";

package/lib/tr-grid-titlewrap/es6/index.js

@@ -1 +1 @@
-export * from "./TitleWrap";
+export * from "./TitleWrap.js";

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

@@ -289,7 +289,12 @@ RowPainter.prototype.applyHeaderStyle = function(e) {
 
 	section.enableRowClass(e.rowIndex, "group-member", false);
 	if (stretching) {
-		cell = e.cell = section.stretchCell(mainCol, r, stretching, true); // No left stretching. Header background is covered by folder class
+		var stretchedCell = section.getStretchedCell(mainCol, r);
+		if(!stretchedCell) {
+			cell = e.cell = section.stretchCell(mainCol, r, stretching, true); // No left stretching. Header background is covered by folder class
+		} else {
+			cell = e.cell = stretchedCell;
+		}
 
 		// Remove content from cells that are on left side of the stretched cell
 		this._clearCellContent(section, 0, mainCol, r, checkboxColumnIndex);

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

@@ -7,14 +7,14 @@ import { isIE, cloneObject, prepareTSVContent } from "../../tr-grid-util/es6/Uti
 declare namespace CellSelectionPlugin {
 
     type Options = {
-        mode?: string,
-        multipleSelection?: boolean,
-        autoDeselecting?: boolean,
-        tabToSelect?: boolean,
-        selectionChanged?: ((...params: any[]) => any),
-        copy?: ((...params: any[]) => any),
-        beforeMouseDown?: ((...params: any[]) => any),
-        selectableSections?: any[]
+        mode?: string|null,
+        multipleSelection?: boolean|null,
+        autoDeselecting?: boolean|null,
+        tabToSelect?: boolean|null,
+        selectionChanged?: ((...params: any[]) => any)|null,
+        copy?: ((...params: any[]) => any)|null,
+        beforeMouseDown?: ((...params: any[]) => any)|null,
+        selectableSections?: any[]|null
     };
 
 }
@@ -41,7 +41,7 @@ declare class CellSelectionPlugin extends GridPlugin {
 
     public getLastSelectionBounds(opt_ret?: any): any;
 
-    public setSelectableSections(types?: (string|(string)[]|null)): void;
+    public setSelectableSections(types?: (string|(string)[]|null)|null): void;
 
     public selectSingleCell(anchor: any): void;
 
@@ -53,9 +53,9 @@ declare class CellSelectionPlugin extends GridPlugin {
 
     public getAnchorInfo(): any;
 
-    public getSelectedCells(): (any[])[];
+    public getSelectedCells(): (any[])[]|null;
 
-    public disableSelection(opt_disable?: boolean): void;
+    public disableSelection(opt_disable?: boolean|null): void;
 
     public setAutoDeselectingOnBlur(bool: boolean): void;
 

package/lib/types/es6/Core/data/Segment.d.ts

@@ -34,6 +34,10 @@ declare class Segment {
 
     public setValue(val: number): void;
 
+    public getOrder(): number;
+
+    public setOrder(val: number): void;
+
 }
 
 export default Segment;

package/lib/types/es6/Core/data/SegmentCollection.d.ts

@@ -50,6 +50,8 @@ declare class SegmentCollection {
 
     public fillSegments(rids: (string)[]|null): boolean;
 
+    public calcSegmentOrder(rids: (string)[]|null): void;
+
     public getSegmentValues(rids: (string)[]): (number)[]|null;
 
 }

package/lib/types/es6/Core/grid/components/CellFloatingPanel.d.ts

@@ -7,6 +7,8 @@ declare class CellFloatingPanel extends ElementWrapper {
 
     public hasItem(): boolean;
 
+    public containItem(icon: Element|null): boolean;
+
     public insertItem(item: Element|null, opt_order?: number|null): void;
 
     public removeItem(elemRef?: (Element|string)|null): Element|null|null;

package/lib/types/es6/Core/index.d.ts

@@ -36,6 +36,7 @@ import ColumnStats from "./data/ColumnStats.js";
 import DataCache from "./data/DataCache.js";
 import DataTable from "./data/DataTable.js";
 import DataView from "./data/DataView.js";
+import SegmentCollection from "./data/SegmentCollection.js";
 
 
 

package/lib/versions.json

@@ -1,18 +1,18 @@
 {
-	"tr-grid-util": "1.3.76",
+	"tr-grid-util": "1.3.78",
 	"@grid/column-dragging": "1.0.10",
 	"@grid/row-segmenting": "1.0.20",
 	"@grid/statistics-row": "1.0.13",
 	"@grid/zoom": "1.0.11",
 	"tr-grid-auto-tooltip": "1.1.5",
-	"tr-grid-cell-selection": "1.0.31",
+	"tr-grid-cell-selection": "1.0.32",
 	"tr-grid-checkbox": "1.0.59",
 	"tr-grid-column-fitter": "1.0.39",
 	"tr-grid-column-formatting": "0.9.34",
 	"tr-grid-column-grouping": "1.0.24",
 	"tr-grid-column-resizing": "1.0.26",
 	"tr-grid-column-selection": "1.0.25",
-	"tr-grid-column-stack": "1.0.38",
+	"tr-grid-column-stack": "1.0.39",
 	"tr-grid-conditional-coloring": "1.0.56",
 	"tr-grid-content-wrap": "1.0.19",
 	"tr-grid-contextmenu": "1.0.38",
@@ -30,7 +30,7 @@
 	"tr-grid-rowcoloring": "1.0.20",
 	"tr-grid-textformatting": "1.0.44",
 	"tr-grid-titlewrap": "1.0.19",
-	"@grid/formatters": "1.0.48",
+	"@grid/formatters": "1.0.49",
 	"@grid/column-selection-dialog": "4.0.44",
 	"@grid/filter-dialog": "4.0.52",
 	"@grid/column-format-dialog": "4.0.42"

package/lib/zoom/es6/index.js

@@ -1 +1 @@
-export * from "./Zoom";
+export * from "./Zoom.js";

package/package.json

@@ -39,11 +39,11 @@
 		"./window-exporter": "./lib/window-exporter.js"
 	},
 	"peerDependencies": {
-		"@refinitiv-ui/core": "^6.0.0",
+		"@refinitiv-ui/core": "^6.2.0",
 		"@refinitiv-ui/elements": "^6.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.6"
+	"version": "6.0.8"
 }