@refinitiv-ui/efx-grid 6.0.16 → 6.0.18

package/lib/tr-grid-column-stack/es6/ColumnStack.d.ts

@@ -11,7 +11,8 @@ declare namespace ColumnStackPlugin {
 
     type Options = {
         fields: (string)[]|null,
-        stacks: (ColumnStackPlugin.StackDefinition)[]|null
+        stacks: (ColumnStackPlugin.StackDefinition)[]|null,
+        autoStacking?: boolean|null
     };
 
     type ColumnOptions = {
@@ -30,6 +31,7 @@ declare namespace ColumnStackPlugin {
         spreading?: boolean|null,
         collapsed?: boolean|null,
         children: (string)[]|null,
+        fields: (string)[]|null,
         name?: string|null,
         activeColumn?: string|null
     };
@@ -100,6 +102,8 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public getColumnIndicesByColumnIds(columnId: string|(string)[]|null): (string)[];
 
+    public getColumnIdsByFields(field: string|(string)[]|null): (string)[];
+
     public addColumnToStack(colRef: number|string|null, stackId: string): void;
 
     public removeColumnFromStack(colRef: number|string|null): void;
@@ -110,6 +114,8 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public getStackName(stackId: string): string;
 
+    public getActiveColumnField(stackId: string): string;
+
 }
 
 export default ColumnStackPlugin;

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,64 @@ 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 colIndex = memberIndices[i];
+				var colOption = columnOptions[colIndex];
+				if(colOption){
+					colOption.hidden = colIndex !== activeColIndex;
+				}
 			}
-			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 +425,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 +437,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 +896,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 +953,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 +971,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 +1018,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();
-	}
-
-	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)
 
-	// 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);
+	this.removeAllStacks();
 
-		if(colIndex == activeIndex){
-			stack.activeColumn = stack.stackRefs[i];
-		}
+	var stackOptions = {};
 
-		// 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 +1072,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 +1082,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 +1126,7 @@ ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
 		}
 	}
 	if(dirty) {
+		this._columnStack = {};
 		this._stacks = {};
 		if(!disableUpdateUI) {
 			this._updateUI(); // asyncronous
@@ -1390,7 +1367,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);
@@ -1441,7 +1418,8 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 		menuData[i] = {
 			value: i,
 			selected: i === activeIndex,
-			label: this.getColumnName(colIndices[i])
+			label: this.getColumnName(colIndices[i]),
+			field: this._getField(colIndices[i])
 		};
 	}
 	pos["menuData"] = menuData;
@@ -1464,10 +1442,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 +1524,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 +1731,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-filter-input/es6/FilterInput.d.ts

@@ -17,6 +17,7 @@ declare namespace FilterInputPlugin {
         placeholder?: string,
         type?: string,
         entries?: any[],
+        defaultValue: any,
         trigger?: string
     };
 

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

@@ -16,6 +16,7 @@ import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
 * @property {string=} placeholder="" Placeholder text inside the input
 * @property {string=} type="text" Type of UI. Available types are "number", "select", "dropdown", "date"
 * @property {Array=} entries Entries of dropdown filters when type is "select"
+* @property {*} defaultValue Default value of input filter
 * @property {string=} trigger="keyup" Available types of trigger are `false | ""` (no trigger) , `"keyup"` (default) , `"enter"` (on enter key *only available for text type)
 */
 
@@ -275,6 +276,10 @@ FilterInputPlugin.prototype.getConfigObject = function (out_obj) {
       filterInput.entries = opt.entries;
     }
 
+    if (opt.defaultValue != null) {
+      filterInput.defaultValue = opt.defaultValue;
+    }
+
     if (opt.trigger != null) {
       filterInput.trigger = opt.trigger;
     }
@@ -455,6 +460,17 @@ FilterInputPlugin.prototype._createColumnInputs = function (section, host) {
     }
 
     this._dispatch("inputCreated", inputArgs);
+
+    var defaultValue = colOpt.defaultValue;
+
+    if (defaultValue) {
+      if (colOpt.type == "date") {
+        var dateObj = ElfDate.from(defaultValue);
+        defaultValue = dateObj ? dateObj.toDateString().substr(4) : "";
+      }
+
+      this.filterColumn(c, defaultValue);
+    }
   }
 };
 /** @type {Object.<string, string>=}
@@ -475,6 +491,7 @@ FilterInputPlugin._uiMap = {
 
 FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
   var elemType = colOpt.type;
+  var defaultValue = colOpt.defaultValue;
   var elemTrigger = colOpt.trigger != null ? colOpt.trigger : this._inputTrigger;
   var uiTag = FilterInputPlugin._uiMap[elemType] || "input";
 
@@ -502,6 +519,10 @@ FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
   elem.addEventListener("keydown", FilterInputPlugin._stopPropagation, false);
   elem.addEventListener("click", FilterInputPlugin._stopPropagation, false);
 
+  if (defaultValue) {
+    elem.value = colOpt.defaultValue;
+  }
+
   switch (uiTag) {
     case "ef-input":
       elem.setAttribute("type", "number");
@@ -652,6 +673,12 @@ FilterInputPlugin.prototype._retrieveColumnOption = function (colIndex, colDef)
         option["entries"] = entries;
       }
 
+      var defaultValue = filterOption["defaultValue"];
+
+      if (defaultValue) {
+        option["defaultValue"] = defaultValue;
+      }
+
       var trigger = filterOption["trigger"];
 
       if (typeof trigger == "string" || trigger == false) {