@refinitiv-ui/efx-grid 6.0.111 → 6.0.113

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

@@ -86,12 +86,21 @@ The expression can take various forms:<br>
 * @property {Function=} rawDataAccessor In case you have custom data type for the specified field, data getter is needed to retrieve raw value for filtering
 * @property {Function=} formattedDataAccessor This function will be called on each raw data, allowing formatting data to be displayed on the filter item list
 * @property {Function=} sortLogic This function for sorting filter item list in the dialog. The comparison will perform on raw values, and not formatted values
+* @property {Function=} groupCriteria This function for specify group of items to show group as headers.
+* @property {Function=} groupSortLogic This function for sorting of group header, used with `groupCriteria` to show as group.
 * @property {Array=} itemList Item list to be shown in the dialog. If this is not specified, the list will be collected from existing data on the grid
 * @property {Array=} additionalItems Additional items to be put on the itemList
 * @property {boolean=} compactMode=false force compact mode in dialog
 * @property {(boolean|string)=} blankValues Display a "(Blanks)" item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item
 */
 
+/** @typedef {Object} RowFilteringPlugin~FilterEntry
+* @description item object to rendered element-item
+ * @property {string=} type=null Available types are "header" and "divider". If null, it will be shown as a normal item.
+ * @property {string} label="" Text of each item. If the type is "header", it will be shown as a header. If the type is "divider", it will not be shown.
+ * @property {boolean} checked=false Set to true to check the checkbox item in the filter dialog basic item.
+*/
+
 /** @typedef {Object} RowFilteringPlugin~Options
 * @description The options can be specified by `rowFiltering` property of the main grid's options
 * @property {boolean=} emptySegmentFiltering=false If enabled, the filter will automatically hide empty segment when all of its member are filtered out. If there is no active filter, any empty segment will not be hidden. Collapsed segment does not count as having a filter. A segment with no child is treated the same way as an empty segment.
@@ -153,13 +162,20 @@ const BlankValues = {
 * @function
 * @param {Array} ary
 * @param {string} str
+* @param {*=} orignalValue
 * @returns {boolean} Returns true if there is any change
 */
-let _pushRawValue = function(ary, str) {
+let _pushRawValue = function(ary, str, orignalValue) {
 	if(str) {
 		if(!BlankValues[str]) {
 			let dateObj = stringToDateObject(str);
 			if(dateObj !== str) {
+				if(orignalValue && typeof orignalValue === "number") {
+					let originalDate = new Date(orignalValue);
+					if(originalDate.getTime()) {
+						dateObj = originalDate;
+					}
+				}
 				ary.push(dateObj);
 			} else {
 				try {
@@ -1881,7 +1897,7 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 		} else if(typeof exp === "function" || typeof exp === "string" || typeof exp === "object") {
 			if(typeof exp === "object") {
 				for(let expKey in exp) {
-					_pushRawValue(userInputs, expKey);
+					_pushRawValue(userInputs, expKey, exp[expKey]);
 				}
 			}
 		}
@@ -1922,13 +1938,10 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 		});
 	}
 
-	let items = keys.map(function(formattedVal, idx) {
-		return {
-			id: idx,
-			title: formattedVal,
-			nodes: [],
-			checked: selectedItems[formattedVal] ? true : false
-		};
+	let items = this._toListScheme({
+		dialogConfig: dialogConfig,
+		keys: keys,
+		selectedItems: selectedItems
 	});
 
 	// Adding inputs from conditions to uniqueValues for mapping back from the dialog
@@ -1946,7 +1959,6 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 			}
 		}
 	}
-
 	// Initialize dialog
 	if(this._filterDialog.init) { // TODO: support initiailization in v1
 		this._filterDialog.init(dialogConfig);
@@ -2016,6 +2028,16 @@ RowFilteringPlugin._overrideConfig = function(config, userConfig) {
 		config.sortLogic = sortLogic;
 	}
 
+	let groupCriteria = userConfig["groupCriteria"];
+	if(typeof groupCriteria === "function" || groupCriteria === null) { // Allow null value
+		config.groupCriteria = groupCriteria;
+	}
+
+	let groupSortLogic = userConfig["groupSortLogic"];
+	if(typeof groupSortLogic === "function" || groupSortLogic === null) { // Allow null value
+		config.groupSortLogic = groupSortLogic;
+	}
+
 	let itemList = userConfig["itemList"];
 	if(itemList != null) {
 		config.itemList = itemList;
@@ -2034,6 +2056,72 @@ RowFilteringPlugin._overrideConfig = function(config, userConfig) {
 		}
 	}
 };
+
+/** @private
+* @param {Object} listObj
+* @return {Array<Object>}
+*/
+RowFilteringPlugin.prototype._toListScheme = function(listObj) {
+	let dialogConfig = listObj.dialogConfig;
+	let keys = listObj.keys;
+	let selectedItems = listObj.selectedItems;
+
+	let groupCriteria = dialogConfig.groupCriteria;
+	let items = keys;
+	let groupMap = {};
+	if(groupCriteria) {
+		for (let idx = 0; idx < items.length; idx++) {
+			let formattedVal = items[idx];
+			let item = {
+				id: idx,
+				label: formattedVal,
+				title: formattedVal, // Backward compatibility
+				nodes: [],
+				checked: selectedItems[formattedVal] ? true : false,
+				group: groupCriteria(formattedVal) || null // no group will be null map
+			};
+			if(!groupMap[item.group]) {
+				groupMap[item.group] = [];
+			}
+			groupMap[item.group].push(item);
+		}
+		let groupOrdered = Object.keys(groupMap);
+		let groupSortLogic = dialogConfig.groupSortLogic;
+		if(groupSortLogic) {
+			groupOrdered = groupOrdered.sort(groupSortLogic);
+		}
+		let sortedGroupItems = [];
+		for (let i = 0; i < groupOrdered.length; i++) {
+			let groupName = groupOrdered[i];
+			let groupAry = groupMap[groupName];
+			let validGroup = groupName != "null" ? true : false;
+			if(validGroup) {
+				sortedGroupItems.push({
+					type: "header",
+					label: groupName
+				});
+			}
+			sortedGroupItems = sortedGroupItems.concat(groupAry);
+			if(validGroup) {
+				sortedGroupItems.push({
+					type: "divider"
+				});
+			}
+		}
+		items = sortedGroupItems;
+	} else {
+		items = keys.map(function(formattedVal, idx) {
+			return {
+				id: idx,
+				label: formattedVal,
+				title: formattedVal, // Backward compatibility
+				nodes: [],
+				checked: selectedItems[formattedVal] ? true : false
+			};
+		});
+	}
+	return items;
+};
 /** @private
 * @param {number} colIndex
 * @return {Function}
@@ -2144,7 +2232,7 @@ RowFilteringPlugin.prototype._onDialogFilterChanged = function(e) {
 	let selectedItems = {};
 	let atLeastOne = false;
 	for(let i = 0; i < selCount; ++i) {
-		let formattedVal = selAry[i].title; // title is defined by the multi-select element
+		let formattedVal = selAry[i].label || selAry[i].title; // title is defined by the multi-select element
 		// let selIdx = selAry[i].index; // index cannot be used due to filtering
 		if(selAry[i].value === BLANKS) {
 			if(!ctx) {
@@ -2163,7 +2251,8 @@ RowFilteringPlugin.prototype._onDialogFilterChanged = function(e) {
 
 		let jLen = rawVals.length;
 		for(let j = 0; j < jLen; ++j) {
-			itemMap[rawVals[j]] = true;
+			let rawVal = rawVals[j];
+			itemMap[rawVal] = (rawVal instanceof Date) ? rawVal.getTime() : rawVal;
 		}
 	}
 	if(atLeastOne) {

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

@@ -758,6 +758,12 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
 * @return {Array.<number>} resultColor
 */
 CellPainter.blendColor = blendColor; // For backward compatability
+/** @private
+* @function
+* @param {Array.<number>} triplet
+* @return {string} resultColor
+*/
+CellPainter.blackAndWhite = getContrastColor; // For backward compatability
 /** @public
 * @function
 * @param {string} rgbCode

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

@@ -3,7 +3,7 @@ import Ext from "../../tr-grid-util/es6/Ext.js";
 import MenuEventAPI from "./MenuEventAPI.js";
 import PopupMenu from "./PopupMenu.js";
 import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
-import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
+import { rgb2Hex, num2Hex, hex2Num, blendColor, getContrastColor } from "../../tr-grid-util/es6/Color.js";
 
 declare namespace ContextMenuPlugin {
 

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

@@ -32,12 +32,20 @@ declare namespace RowFilteringPlugin {
         rawDataAccessor?: ((...params: any[]) => any)|null,
         formattedDataAccessor?: ((...params: any[]) => any)|null,
         sortLogic?: ((...params: any[]) => any)|null,
+        groupCriteria?: ((...params: any[]) => any)|null,
+        groupSortLogic?: ((...params: any[]) => any)|null,
         itemList?: any[]|null,
         additionalItems?: any[]|null,
         compactMode?: boolean|null,
         blankValues?: (boolean|string)|null
     };
 
+    type FilterEntry = {
+        type?: string|null,
+        label: string,
+        checked: boolean
+    };
+
     type Options = {
         emptySegmentFiltering?: boolean|null,
         separatorFiltering?: boolean|null,

package/lib/versions.json

@@ -1,5 +1,5 @@
 {
-	"tr-grid-util": "1.3.154",
+	"tr-grid-util": "1.3.155",
 	"tr-grid-printer": "1.0.18",
 	"@grid/column-dragging": "1.0.20",
 	"@grid/row-segmenting": "1.0.31",
@@ -16,7 +16,7 @@
 	"tr-grid-column-stack": "1.0.75",
 	"tr-grid-conditional-coloring": "1.0.70",
 	"tr-grid-content-wrap": "1.0.20",
-	"tr-grid-contextmenu": "1.0.41",
+	"tr-grid-contextmenu": "1.0.42",
 	"tr-grid-filter-input": "0.9.41",
 	"tr-grid-heat-map": "1.0.29",
 	"tr-grid-in-cell-editing": "1.0.87",
@@ -24,7 +24,7 @@
 	"tr-grid-percent-bar": "1.0.24",
 	"tr-grid-range-bar": "2.0.8",
 	"tr-grid-row-dragging": "1.0.35",
-	"tr-grid-row-filtering": "1.0.78",
+	"tr-grid-row-filtering": "1.0.80",
 	"tr-grid-row-grouping": "1.0.88",
 	"tr-grid-row-selection": "1.0.30",
 	"tr-grid-rowcoloring": "1.0.25",
@@ -32,6 +32,6 @@
 	"tr-grid-titlewrap": "1.0.22",
 	"@grid/formatters": "1.0.55",
 	"@grid/column-selection-dialog": "4.0.57",
-	"@grid/filter-dialog": "4.0.65",
+	"@grid/filter-dialog": "4.0.66",
 	"@grid/column-format-dialog": "4.0.45"
 }

package/package.json

@@ -3,6 +3,7 @@
 	"description": "Grid Components Library",
 	"author": "Refinitiv",
 	"license": "SEE LICENSE IN LICENSE",
+	"type": "module",
 	"main": "./lib/grid/index.js",
 	"module": "./lib/grid/index.js",
 	"types": "./lib/types/index.d.ts",
@@ -68,5 +69,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.111"
+	"version": "6.0.113"
 }