@refinitiv-ui/efx-grid 6.0.16 → 6.0.17

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

@@ -11,6 +11,7 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 * @description Available options describing `columnStack` object specified in grid's option
 * @property {Array.<string>} fields Fields for stacking. The minimum is 2 fields.
 * @property {Array.<ColumnStackPlugin~StackDefinition>} stacks List of stacking configuration
+* @property {boolean=} autoStacking=false If enabled, columns will be auto stacked when new inserted column field match in stack
 */
 
 /** @typedef {Object} ColumnStackPlugin~ColumnOptions
@@ -31,9 +32,10 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 * @property {string} id Group ID
 * @property {boolean=} spreading=false If specified true, this group will be running in collapsing mode
 * @property {boolean=} collapsed=true If disabled, this group will be expanded at the first time
-* @property {Array.<string>} children Children column ID
+* @property {Array.<string>} children Children column ID. Used when autoStacking is disabled
+* @property {Array.<string>} fields Children fiields. Used when autoStacking is enabled
 * @property {string=} name="" Name defined for specific stack
-* @property {string=} activeColumn="" Column Id of active column in stack
+* @property {string=} activeColumn="" If enable autoStacking, field of active column in stack. Else, column Id of active column in stack.
 */
 
 /** @typedef {Object} ColumnStackPlugin~StackConfiguration
@@ -79,6 +81,10 @@ ColumnStackPlugin.prototype._columnStack = null;
 * @private
 */
 ColumnStackPlugin.prototype._updating = false;
+/** @type {boolean}
+* @private
+*/
+ColumnStackPlugin.prototype._autoStacking = false;
 
 
 /** @type {number}
@@ -215,8 +221,12 @@ ColumnStackPlugin.prototype.config = function (options) {
 	var sid, stacks = {};
 	var columnStack = options.columnStack;
 	if(columnStack != null) {
+		if(columnStack.autoStacking != null) {
+			this._autoStacking = columnStack.autoStacking;
+		}
+
 		if(columnStack.fields && columnStack.fields.length > 1) {
-			this._columnStack = options.columnStack;
+			this._columnStack = columnStack.fields;
 			sid = this._generateStackId();
 			stacks[sid] = {
 				colRefs: columnStack.fields,
@@ -289,39 +299,69 @@ ColumnStackPlugin.prototype.config = function (options) {
 ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 	var obj = gridOptions || {};
 
-	if (this._columnStack != null) {
-		obj.columnStack = this._columnStack;
-	} else {
-		var stacks = this._stacks;
-		var stackOptions = [];
-
-		for (var stackKey in stacks) {
-			var stackOption = stacks[stackKey];
-			var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
-			var stackConfigObj = {
-				id: stackOption.stackId,
-				children: this.getStackMemberIds(stackOption.stackId),
-				activeColumn: this.getColumnId(activeColIndex)
-			};
-			var name = stackOption.name;
-			var collapsed = stackOption.collapsed;
-			var spreading = stackOption.spreading;
-			if (name) {
-				stackConfigObj.name = name;
-			}
-			if (collapsed !== true) {
-				stackConfigObj.collapsed = collapsed;
-			}
-			if (spreading !== false) {
-				stackConfigObj.spreading = spreading;
+	var columnOptions = obj["columns"];
+
+	var stacks = this._stacks;
+	var stackOptions = [];
+
+	for (var stackKey in stacks) {
+		var stackOption = stacks[stackKey];
+		var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+
+		if(columnOptions && columnOptions.length){
+			var memberIndices = this.getStackMemberIndices(stackOption.stackId);
+			for(var i = 0; i < memberIndices.length; i++){
+				var colOption = columnOptions[memberIndices[i]];
+				if(colOption){
+					if(memberIndices[i] == activeColIndex){
+						if(colOption["hidden"]) {
+							delete colOption["hidden"];
+						}
+					} else {
+						colOption.hidden = true;
+					}
+				}
 			}
-			stackOptions.push(stackConfigObj);
 		}
 
-		obj.columnStack = {};
-		obj.columnStack.stacks = stackOptions;
+		var stackConfigObj = {
+			id: stackOption.stackId
+		};
+		var name = stackOption.name;
+		var collapsed = stackOption.collapsed;
+		var spreading = stackOption.spreading;
+
+		if (name) {
+			stackConfigObj.name = name;
+		}
+		if (collapsed !== true) {
+			stackConfigObj.collapsed = collapsed;
+		}
+		if (spreading !== false) {
+			stackConfigObj.spreading = spreading;
+		}
+
+		if (this._autoStacking) {
+			var fields = this._columnStack[stackOption.stackId];
+			var activeColumnField = this._getField(activeColIndex);
+
+			stackConfigObj.fields = fields;
+			stackConfigObj.activeColumn = activeColumnField;
+
+		} else {
+			var children = this.getStackMemberIds(stackOption.stackId);
+			var activeColumn = this.getColumnId(activeColIndex);
+
+			stackConfigObj.children = children;
+			stackConfigObj.activeColumn = activeColumn;
+		}
+		stackOptions.push(stackConfigObj);
 	}
 
+	obj.columnStack = {};
+	obj.columnStack.stacks = stackOptions;
+	obj.columnStack.autoStacking = this._autoStacking;
+
 	return obj;
 };
 
@@ -390,6 +430,7 @@ ColumnStackPlugin.prototype._setColumnStackOptions = function(colIndex, stackOpt
 ColumnStackPlugin.prototype._transformStackConfig = function(stackConfig) {
 	stackConfig.colRefs = [];
 	var children = stackConfig.children;
+	var fields = stackConfig.fields;
 	var activeColumn = stackConfig.activeColumn;
 	var field;
 	if(children){
@@ -401,15 +442,16 @@ ColumnStackPlugin.prototype._transformStackConfig = function(stackConfig) {
 				stackConfig.colRefs.push(field);
 			}
 		}
+	} else if(fields) {
+		stackConfig.colRefs = fields;
 	}
-	if(activeColumn){
+	if(activeColumn && !this._autoStacking){
 		var activeColIndex = this.getColumnIndex(activeColumn);
 		if(activeColIndex !== -1){
 			field = this._getField(colIndex);
 			if(field){
 				stackConfig.activeColumn;
 			}
-
 		}
 	}
 	return stackConfig;
@@ -859,21 +901,54 @@ ColumnStackPlugin.prototype.getStackId = function(colIndex) {
 * @return {boolean} Return true if all of the given columns is stacked together
 */
 ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
-	var needSorting = true;
+	var fields = [];
+	var i, colIndex, sid;
+	options = options || {};
+
+	if(stackId) {
+		if(this._stacks[stackId]) {
+			return false; // Cannot store the same stack Id
+		}
+		sid = stackId;
+	} else {
+		sid = this._generateStackId();
+	}
+
+	// If grid is not initialize, add setting to pending stacks
+	if(!this._initializedGrid) {
+		var pendingStacks = this._pendingStacks || {};
+		pendingStacks[sid] = {
+			colRefs: colRefs,
+			spreading: false,
+			collapsed: false,
+			activeColumn: options.activeColumn || colRefs[0]
+		};
+		this._pendingStacks = pendingStacks;
+		return false;
+	}
 
 	if(!colRefs) {
 		colRefs = this._getSelectedColumns();
 	}
 
 	if(colRefs.length) {
-		if(typeof colRefs[0] === "string") {// Do not sort in the case of field stack
-			needSorting = false;
+		if(typeof colRefs[0] === "string") {
+			fields = colRefs.slice();
+		} else {
+			colRefs.sort(function(a, b) { return a - b; }); // Only sort in the case of column index stack
+			for(i = 0; i < colRefs.length; i++){
+				var field = this._getField(colRefs[i]);
+				fields.push(field);
+			}
 		}
 		colRefs = this.getColumnIndices(colRefs);
 	}
 
-	if(needSorting) {
-		colRefs.sort(function(a, b) { return a - b; });
+	// Save stack fields for
+	if(this._autoStacking){
+		var columnStack = this._columnStack || {};
+		columnStack[sid] = fields;
+		this._columnStack = columnStack;
 	}
 
 	var len = colRefs.length;
@@ -883,17 +958,6 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 	if(!this.isColumnStackable(colRefs)) {
 		return false;
 	}
-	var sid;
-	if(stackId) {
-		if(this._stacks[stackId]) {
-			return false; // Cannot store the same stack Id
-		}
-		sid = stackId;
-	} else {
-		sid = this._generateStackId();
-	}
-
-	options = options || {};
 
 	var activeIndex = options.activeColumn ? this.getColumnIndices(options.activeColumn) : colRefs[0];
 	if (activeIndex.length){
@@ -912,7 +976,6 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 	}
 	stack.collapsed = options.collapsed !== false;
 	stack.stackRefs = new Array(len);
-	var i, colIndex;
 	for(i = 0; i < len; ++i) {
 		colIndex = colRefs[i];
 		this._setColumnStackOptions(colIndex, stack);
@@ -960,99 +1023,18 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 * @return {boolean} If the stack has been updated, return true.
 */
 ColumnStackPlugin.prototype.setStack = function(colRefs, activeColRef) {
-	// Keep state
-	var i, colRef, type;
-	var fields = [];
-	if(Array.isArray(colRefs)) {
-		for (i = 0; i < colRefs.length; i++) {
-			colRef = colRefs[i];
-			type = typeof colRef;
-			if(type === "number") {
-				fields.push(this._getField(colRef));
-			} else if (type === "string") {
-				fields.push(colRef);
-			}
-		}
-	}
-	if(activeColRef && typeof activeColRef === "number") {
-		activeColRef = this._getField(activeColRef);
-	}
 
-	if(fields.length > 1) {
-		if(!this._columnStack) {
-			this._columnStack = {
-				spreading: false,
-				collapsed: false
-			};
-		}
-		this._columnStack.fields = fields;
-	} else {
-		this._columnStack = null;
-	}
-
-	// Update UI
 	var sid = "_uniqueStack"; // WARNING : This hardcode for assign uniqe stacking id
-	if(!this._initializedGrid) {
-		if(this._columnStack) {
-			var pendingStacks = {};
-			pendingStacks[sid] = {
-				colRefs: fields,
-				spreading: false,
-				collapsed: false
-			};
-			this._pendingStacks = pendingStacks;
-		}
-		return false;
-	}
 
-	colRefs = this.getColumnIndices(colRefs);
-	if(colRefs.length <= 1) { // When the array is empty or contains only one element, all stacking is removed
-		return this.removeAllStacks();
-	}
+	this.removeAllStacks();
 
-	var activeIndex = colRefs[0]; // For the active index, choose the first element.
-	if(activeColRef){
-		var indices = this.getColumnIndices(activeColRef);
-		if(indices.length){
-			var index = indices[0];
-			if(colRefs.indexOf(index) !== -1){
-				activeIndex = indices[0];
-			}
-		}
-	}
-
-	this.removeAllStacks(false); // Remove the stack without updating the UI (UI will only update when column is stacked)
+	var stackOptions = {};
 
-	// Collecting data
-	var stack = {};
-	stack.stackId = sid;
-	stack.spreading = false;
-	stack.stackRefs = new Array(colRefs.length);
-	for(i = 0; i < colRefs.length; ++i) {
-		var colIndex = colRefs[i];
-		stack.stackRefs[i] = this._getColumnStacking(colIndex);
-		this._setColumnStackOptions(colIndex, stack);
-
-		if(colIndex == activeIndex){
-			stack.activeColumn = stack.stackRefs[i];
-		}
-
-		// Prevent from flashing in stack mode
-		if(colIndex !== activeIndex && stack.collapsed !== false) {
-			this._setColumnVisibility(colIndex, false);
-		}
+	if(activeColRef) {
+		stackOptions.activeColumn = activeColRef;
 	}
+	this.stackColumns(colRefs, sid, stackOptions);
 
-	// Make sure that all columns stay packed together
-	this._moveStackedColumns(stack.stackRefs);
-
-	// stack.activeColumn = stack.stackRefs[0]; // The first stacking (the first given columns) is the active column
-	this._stacks[sid] = stack;
-	var cfp = this._getPlugin("ColumnFilterPlugin");
-	if(cfp) {
-		cfp["refresh"]();
-	}
-	this._updateUI(); // asyncronuos
 	return true;
 };
 /** @public
@@ -1095,11 +1077,7 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 
 		var stackRefs = stack.stackRefs;
 		len = stackRefs.length;
-		if(stack.spreading) {
-			selFrom = this._getColumnIndex(stack.stackRefs[0]);
-		} else {
-			selFrom = this._getColumnIndex(stack.activeColumn);
-		}
+		selFrom = this._getColumnIndex(stack.stackRefs[0]);
 		selLen = len - 1;
 
 		for(i = 0; i < len; ++i) {
@@ -1109,6 +1087,9 @@ ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
 			this._setColumnVisibility(colIndex, true);
 		}
 
+		if(this._autoStacking) {
+			delete this._columnStack[sid];
+		}
 		delete this._stacks[sid]; // Remove all reference to the stack
 	}
 	if(dirty) {
@@ -1150,6 +1131,7 @@ ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
 		}
 	}
 	if(dirty) {
+		this._columnStack = {};
 		this._stacks = {};
 		if(!disableUpdateUI) {
 			this._updateUI(); // asyncronous
@@ -1390,7 +1372,7 @@ ColumnStackPlugin.prototype._onColumnAdded = function (e) {
 
 	var columnStack = this._columnStack;
 	if (columnStack) {
-		this._setStack(); // asynchronous
+		this._setStack();  //asynchronous
 	} else {
 		// add to group
 		var leftStackOpt = this._getColumnStackOptions(colIndex - 1);
@@ -1464,10 +1446,13 @@ ColumnStackPlugin.prototype._setStack = function() {
 
 	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.removeAllStacks(false);
+		for(var sid in columnStack){
+			var fields = columnStack[sid];
+			var colIndices = this.getColumnIndices(fields);
+			if (colIndices.length > 1) {
+				this.stackColumns(fields, sid);
+			}
 		}
 	}
 };
@@ -1543,6 +1528,25 @@ ColumnStackPlugin.prototype.getColumnIndicesByColumnIds = function(columnId) {
 	return colIndices;
 };
 
+/** @public
+* @description Get column ids by fields
+* @param {string|Array<string>} field
+* @return {!Array.<string>} Column indices
+*/
+ColumnStackPlugin.prototype.getColumnIdsByFields = function(field) {
+	var colIndices = [];
+	var fields = [];
+	if(Array.isArray(field)){
+		fields = field;
+	} else {
+		fields.push(field);
+	}
+
+	colIndices = this.getColumnIndices(field);
+
+	return this.getColumnIdsByIndex(colIndices);
+};
+
 /** @public
 * @description Add specific column to a stack
 * @param {number|string} colRef column field or column index
@@ -1731,6 +1735,23 @@ ColumnStackPlugin.prototype.getStackName = function(stackId) {
 	return stackName;
 };
 
+/** @public
+* @description Get active column field of specific stack
+* @param {string} stackId
+* @return {string} active column field
+*/
+ColumnStackPlugin.prototype.getActiveColumnField = function(stackId) {
+	var field  = "";
+	if(stackId !== null) {
+		var stack = this._stacks[stackId];
+		if(stack){
+			var activeColIndex = this._getColumnIndex(stack.activeColumn);
+			field = this._getField(activeColIndex);
+		}
+	}
+	return field;
+};
+
 
 export default ColumnStackPlugin;
 export { ColumnStackPlugin, ColumnStackPlugin as ColumnStack, ColumnStackPlugin as ColumnStackExtension };

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

@@ -10,50 +10,51 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 declare namespace InCellEditingPlugin {
 
     type Options = {
-        balloonMode?: boolean,
-        editableTitle?: boolean,
-        editableContent?: boolean,
-        autoCommitText?: boolean,
-        dataBinding?: boolean,
-        popupElement?: Element,
-        doubleClick?: boolean,
-        tabToMove?: boolean,
-        contentSource?: boolean,
-        inlineStyling?: boolean,
-        disablingScroll?: boolean,
-        uiBlocking?: boolean,
-        preEditorOpening?: ((...params: any[]) => any),
-        editorOpened?: ((...params: any[]) => any),
-        beforeCommit?: ((...params: any[]) => any),
-        editorClosed?: ((...params: any[]) => any),
-        keyUp?: ((...params: any[]) => any),
-        beforeRowCommit?: ((...params: any[]) => any),
-        rowEditorClosed?: ((...params: any[]) => any),
-        autoSuggest?: Element,
-        closingOnScroll?: boolean
+        balloonMode?: boolean|null,
+        editableTitle?: boolean|null,
+        editableContent?: boolean|null,
+        autoCommitText?: boolean|null,
+        dataBinding?: boolean|null,
+        popupElement?: Element|null,
+        doubleClick?: boolean|null,
+        tabToMove?: boolean|null,
+        contentSource?: boolean|null,
+        inlineStyling?: boolean|null,
+        disablingScroll?: boolean|null,
+        uiBlocking?: boolean|null,
+        preEditorOpening?: ((...params: any[]) => any)|null,
+        editorOpened?: ((...params: any[]) => any)|null,
+        beforeCommit?: ((...params: any[]) => any)|null,
+        editorClosed?: ((...params: any[]) => any)|null,
+        keyUp?: ((...params: any[]) => any)|null,
+        beforeRowCommit?: ((...params: any[]) => any)|null,
+        rowEditorClosed?: ((...params: any[]) => any)|null,
+        autoSuggest?: Element|null,
+        closingOnScroll?: boolean|null
     };
 
     type Cache = {
-        editor: Element,
-        balloonPopup: Element,
-        inputElement: Element
+        editor: Element|null,
+        balloonPopup: Element|null,
+        inputElement: Element|null
     };
 
     type EditorOptions = {
-        type?: string,
-        entries?: any[]
+        type?: string|null,
+        entries?: any[]|null,
+        attributes?: any
     };
 
     type ColumnOptions = {
-        editableContent?: boolean,
-        inCellEditing?: InCellEditingPlugin.EditorOptions
+        editableContent?: boolean|null,
+        inCellEditing?: InCellEditingPlugin.EditorOptions|null
     };
 
 }
 
 declare class InCellEditingPlugin extends GridPlugin {
 
-    constructor(options?: InCellEditingPlugin.Options);
+    constructor(options?: InCellEditingPlugin.Options|null);
 
     public initialize(host: any, options: any): void;
 
@@ -65,23 +66,23 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public openEditor(colIndex: number, rowIndex: number, sectionRef?: any, grid?: any): void;
 
-    public closeCellEditor(opt_forceCommit?: boolean): void;
+    public closeCellEditor(opt_forceCommit?: boolean|null): void;
 
-    public enableBalloonMode(opt_enabled?: boolean): void;
+    public enableBalloonMode(opt_enabled?: boolean|null): void;
 
-    public enableTitleEditing(opt_enabled?: boolean): void;
+    public enableTitleEditing(opt_enabled?: boolean|null): void;
 
-    public disableTitleEditing(opt_disabled?: boolean): void;
+    public disableTitleEditing(opt_disabled?: boolean|null): void;
 
-    public disableCellEditing(cell: any, opt_disabled?: boolean): void;
+    public disableCellEditing(cell: any, opt_disabled?: boolean|null): void;
 
-    public disableDataBinding(opt_disabled?: boolean): void;
+    public disableDataBinding(opt_disabled?: boolean|null): void;
 
-    public disableDblClick(opt_disabled?: boolean): void;
+    public disableDblClick(opt_disabled?: boolean|null): void;
 
     public isEditing(): boolean;
 
-    public getTextBox(columnIndex?: number, grid?: any): Element|null;
+    public getTextBox(columnIndex?: number|null, grid?: any): Element|null;
 
     public getInitialText(): string;
 
@@ -97,17 +98,17 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public getInputElementPosition(): any;
 
-    public enableAutoCommitText(opt_enable?: boolean): void;
+    public enableAutoCommitText(opt_enable?: boolean|null): void;
 
     public isColumnEditable(colIndex: number): boolean;
 
     public openRowEditor(rowIndex: number, grid?: any): void;
 
-    public closeRowEditor(isCommit?: boolean): void;
+    public closeRowEditor(isCommit?: boolean|null): void;
 
-    public toggleRowEditor(rowIndex: number, isCommit?: boolean, grid?: any): void;
+    public toggleRowEditor(rowIndex: number, isCommit?: boolean|null, grid?: any): void;
 
-    public setPopupElement(elm: Element): void;
+    public setPopupElement(elm: Element|null): void;
 
     public setText(content: any): void;
 
@@ -119,13 +120,13 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public appendText(word: string): void;
 
-    public commitText(word?: string): void;
+    public commitText(word?: string|null): void;
 
     public getBalloonPopup(): Popup|null|null;
 
     public getAutoSuggest(): Element|null;
 
-    public setDisablingScroll(disabled?: boolean): boolean;
+    public setDisablingScroll(disabled?: boolean|null): boolean;
 
     public requestShowEditorPopup(): void;