@refinitiv-ui/efx-grid 6.0.14 → 6.0.16

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

@@ -9,6 +9,20 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @description click event is dispatched when a user clicks the column filter icon.
 */
 
+/** @event RowFilteringPlugin#beforeDialogOpened
+* @description Fired before the opening of filter dialog. This can be used to cancel the operation or set a dialog configuration at runtime.
+* @property {number} colIndex Column index
+* @property {string} field Field
+* @property {Object} grid Core grid instance
+* @example
+* beforeDialogOpened: function(e) {
+*   e.cancel = true; // To cancel the operation
+* },
+* beforeDialogOpened: function(e) {
+*   e.dialogOptions = { sortLogic: func }; // To set a dialog configuration
+* },
+*/
+
 /** @event RowFilteringPlugin#iconCreated
 * @description iconCreated event is dispatched when a new column filter icon is created.
 * @property {Element} icon Filter icon element
@@ -60,7 +74,7 @@ The expression can take various forms:<br>
 */
 
 /** @typedef {Object} RowFilteringPlugin~FilterDialogOptions
-* @description Options that specific UI of filter dialog
+* @description Options that specify UIs of filter dialog
 * @property {boolean=} sortUI show/hide sort UI
 * @property {boolean=} filterUI show/hide filter UI
 * @property {string=} fieldDataType data type of column
@@ -72,8 +86,9 @@ The expression can take various forms:<br>
 
 /** @typedef {Object} RowFilteringPlugin~Options
 * @description The options can be specified by `rowFiltering` property of the main grid's options
-* @property {boolean=} disabledUI=false If enabled, filter icon will not be created/shown.
+* @property {boolean=} disabledUI=false Deprecated in favor of `iconActivation`. Set iconActivation to none instead.
 * @property {string=} iconActivation=onActiveFilter Filter icon redering behavior, can be set to `always`,`onHover`,`onActiveFilter`,or `none`
+* @property {RowFilteringPlugin~FilterDialogOptions=} dialogOptions=null Default configuration for Filter Dialog, applying to all columns.
 * @property {Function=} click=null Event handler dispatched when a user clicks the column filter icon.
 * @property {Function=} clicked=null Alias to `click` event handler
 * @property {Function=} iconCreated=null Event handler dispatched when a new column filter icon is created.
@@ -105,7 +120,7 @@ var RowFilteringPlugin = function RowFilteringPlugin() {
   t._onPreSectionRender = t._onPreSectionRender.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onColumnRemoved = t._onColumnRemoved.bind(t);
-  t._onIconClick = t._onIconClick.bind(t);
+  t._onIconClicked = t._onIconClicked.bind(t);
   t._filterLogic = t._filterLogic.bind(t);
   t._updateAllColumnIcons = t._updateAllColumnIcons.bind(t);
   t.refresh = t.refresh.bind(t);
@@ -203,6 +218,11 @@ RowFilteringPlugin.prototype._rowTransform = null;
 */
 
 RowFilteringPlugin.prototype._filterDialog = null;
+/** @type {RowFilteringPlugin~FilterDialogOptions}
+* @private
+*/
+
+RowFilteringPlugin.prototype._dialogOptions = null;
 /** @type {FilterBuilder}
 * @private
 */
@@ -308,11 +328,16 @@ RowFilteringPlugin.prototype.config = function (options) {
       }
     }
 
+    if (rowFiltering["dialogOptions"]) {
+      this._dialogOptions = rowFiltering["dialogOptions"];
+    }
+
     if (rowFiltering["clicked"]) {
       rowFiltering["click"] = rowFiltering["clicked"];
     }
 
     this.addListener(rowFiltering, "click");
+    this.addListener(rowFiltering, "beforeDialogOpened");
     this.addListener(rowFiltering, "iconCreated");
     this.addListener(rowFiltering, "filterChanged");
     this.addListener(rowFiltering, "refreshed");
@@ -356,17 +381,17 @@ RowFilteringPlugin.prototype.getConfigObject = function (gridOptions) {
       column = columns[i] = {};
     }
 
-    var colOptions = this._getColumnFilterOption(i);
+    var cfo = this._getColumnFilterOption(i);
 
-    if (colOptions) {
-      var exp = colOptions._expressions[0];
+    if (cfo) {
+      var exp = cfo._expressions[0];
 
       if (exp && typeof exp !== "function") {
         // TODO: Accept function type
         column.filter = exp; // This could be string, array, or object
       }
 
-      var ctx = colOptions._context[0];
+      var ctx = cfo._context[0];
 
       if (ctx != null) {
         if (_typeof(ctx) !== "object" || !ctx._autoGenerated) {
@@ -382,7 +407,14 @@ RowFilteringPlugin.prototype.getConfigObject = function (gridOptions) {
     extOptions = obj.rowFiltering = {};
   }
 
-  extOptions.iconActivation = this._iconActivation;
+  if (this._iconActivation !== "onActiveFilter") {
+    extOptions.iconActivation = this._iconActivation;
+  }
+
+  if (this._dialogOptions) {
+    extOptions.dialogOptions = this._dialogOptions; // TODO: dialogOptions should not contain any function
+  }
+
   return obj;
 };
 /** All filter logics in DataView will be temporarily removed until re-enabling. This is useful when trying to insert an item at the specified index. After re-enabling, both logics and icons will be restored.
@@ -617,7 +649,8 @@ RowFilteringPlugin.prototype.setColumnFilter = function (colIndex, exp, ctx) {
 
   return removed || added;
 };
-/** @private
+/** Set data to colData["rowFiltering"]
+* @private
 * @param {number} colIndex
 * @param {RowFilteringPlugin~ColumnOptions} columnOptions
 * @example
@@ -658,7 +691,7 @@ RowFilteringPlugin.prototype._setColumnOptions = function (colIndex, columnOptio
 };
 /** @private
  * @param {number} colIndex
- * @return {Object|null}
+ * @return {Object} colData["rowFiltering"]
  */
 
 
@@ -684,7 +717,7 @@ RowFilteringPlugin.prototype._newExtColumnOptions = function (colIndex) {
 };
 /** @private
 * @param {number} colIndex
-* @return {Object|null}
+* @return {Object} colData["rowFiltering"]["filterOption"]
 */
 
 
@@ -697,7 +730,8 @@ RowFilteringPlugin.prototype._getColumnFilterOption = function (colIndex) {
     return null;
   }
 };
-/** @private
+/** Set data to colData["rowFiltering"]["filterOption"]
+* @private
 * @param {number} colIndex
 * @param {Object} filterOption
 */
@@ -1098,15 +1132,14 @@ RowFilteringPlugin.prototype._onPreSectionRender = function (e) {
 */
 
 
-RowFilteringPlugin.prototype._onIconClick = function (e) {
+RowFilteringPlugin.prototype._onIconClicked = function (e) {
   var host = this._hosts[0];
 
   if (!host) {
     return;
   }
 
-  var pos = host.getRelativePosition(e); // TODO: Support reopenning with fieldDataType
-
+  var pos = host.getRelativePosition(e);
   this.openDialog(pos.colIndex);
   e.stopPropagation();
   e.preventDefault();
@@ -1308,7 +1341,7 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
 
         filterIcon.classList.add("title-filter-icon"); // Icon reference
 
-        filterIcon.addEventListener("click", this._onIconClick, false);
+        filterIcon.addEventListener("click", this._onIconClicked, false);
 
         this._dispatch("iconCreated", {
           "icon": filterIcon,
@@ -1552,11 +1585,11 @@ RowFilteringPlugin.prototype.getUniqueValues = function (field, formatter, fmtFi
 };
 /** @public
 * @param {number} colIndex
-* @param {RowFilteringPlugin~FilterDialogOptions=} options
+* @param {RowFilteringPlugin~FilterDialogOptions=} runtimeDialogOptions
 */
 
 
-RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
+RowFilteringPlugin.prototype.openDialog = function (colIndex, runtimeDialogOptions) {
   var stp = this._getPlugin("SortableTitlePlugin");
 
   if (!this._filterDialog) {
@@ -1584,7 +1617,7 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
   }
 
   if (this._filterDialog.isShown) {
-    this._filterDialog.hide(); // Hide previously openned dialog
+    this._filterDialog.hide(); // Hide previously opened dialog
 
 
     if (this._filterDialog._colIndex === colIndex) {
@@ -1620,27 +1653,89 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
     return; // The specified column has no field
   }
 
+  if (this.hasListener("beforeDialogOpened")) {
+    var arg = {
+      colIndex: colIndex,
+      field: field,
+      grid: host
+    };
+
+    if (runtimeDialogOptions) {
+      arg["dialogOptions"] = runtimeDialogOptions;
+    }
+
+    this._dispatch("beforeDialogOpened", arg);
+
+    if (arg["cancel"]) {
+      return;
+    }
+
+    if (arg["dialogOptions"]) {
+      runtimeDialogOptions = arg["dialogOptions"];
+    }
+  }
+
+  if (_typeof(runtimeDialogOptions) !== "object") {
+    runtimeDialogOptions = null;
+  }
+
   if (stp) {
     this._filterDialog.setSortState(stp.getSortOrder(colIndex)); // This is for ELF v3
 
-  } // TODO: _initColumnFilterOption is just a lazy (bad) way to populate the non-existing object.
+  } // Setting up dialog configuration
+  // cfo is required for storing unique entries in the dialog, even though no filter is active
 
 
-  var cfo = this._initColumnFilterOption(colIndex);
+  var cfo = this._initColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
 
-  var rawDataAccessor = cfo._rawDataAccessor || null;
-  var formattedDataAccessor = cfo._formattedDataAccessor || null;
 
-  if (options && _typeof(options) === "object") {
-    if (options.rawDataAccessor != null) {
-      rawDataAccessor = cfo._rawDataAccessor = options.rawDataAccessor || null;
+  var colOptions = this._getExtColumnOptions(colIndex); // colData["rowFiltering"]
+
+
+  var colData = host.getColumnData(colIndex);
+  var formatOptions = colData.formatOptions;
+  var useUTCTime = false;
+
+  if (formatOptions) {
+    if (formatOptions.formatType) {
+      useUTCTime = true;
+
+      if (formatOptions.useUTCTime != null) {
+        useUTCTime = formatOptions.useUTCTime;
+      }
     }
+  }
 
-    if (options.formattedDataAccessor != null) {
-      formattedDataAccessor = cfo._formattedDataAccessor = options.formattedDataAccessor || null;
+  var dialogConfig = {
+    // default config
+    sortUI: true,
+    filterUI: true,
+    fieldDataType: "",
+    lang: "",
+    rawDataAccessor: null,
+    formattedDataAccessor: null,
+    sortLogic: null
+  };
+  var columnDialogOptions = null;
+
+  if (colOptions) {
+    if (colOptions.fieldDataType) {
+      // TODO: Use data type from Composite Grid (getColumnDataType) or Realtime Grid (getDataType) instead
+      columnDialogOptions = {
+        fieldDataType: colOptions.fieldDataType
+      };
     }
-  } // Populate data for filter dialog based on existing states
+  }
+
+  RowFilteringPlugin._overrideConfig(dialogConfig, this._dialogOptions);
 
+  RowFilteringPlugin._overrideConfig(dialogConfig, columnDialogOptions);
+
+  RowFilteringPlugin._overrideConfig(dialogConfig, runtimeDialogOptions);
+
+  var rawDataAccessor = cfo._rawDataAccessor = dialogConfig.rawDataAccessor || null;
+  var formattedDataAccessor = cfo._formattedDataAccessor = dialogConfig.formattedDataAccessor || null;
+  var sortLogic = dialogConfig.sortLogic || null; // Populate data for filter dialog based on existing states
 
   var customFilter = cfo._expressions[0] || "";
   var ctx = cfo._context[0];
@@ -1655,8 +1750,7 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
   var uniqueValues = cfo.uniqueValues = this.getUniqueValues(field, this._getFormatter(colIndex), "", rawDataAccessor, formattedDataAccessor);
   var keys = Object.keys(uniqueValues);
 
-  if (options && options.sortLogic) {
-    var sortLogic = options.sortLogic;
+  if (sortLogic) {
     keys.sort(function (a, b) {
       var rawValueA = uniqueValues[a][0];
       var rawValueB = uniqueValues[b][0];
@@ -1671,96 +1765,80 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
       nodes: [],
       checked: selectedItems[formattedVal] ? true : false
     };
-  }); //Setting up default default column options
+  }); // Initialize dialog
 
-  var colOptions = this._newExtColumnOptions(colIndex);
+  if (this._filterDialog.init) {
+    // TODO: support initiailization in v1
+    this._filterDialog.init(dialogConfig);
+  } // TODO: Move all settings to configuration object
 
-  var fdt = "";
-  var sui = true;
-  var fui = true;
-  var lang = "";
 
-  if (colOptions) {
-    if (colOptions.fieldDataType != null) {
-      fdt = colOptions.fieldDataType; // TODO: Retrieve data type from Composite/Realtime Grid instead
-    }
+  this._filterDialog.useUTCTime = useUTCTime;
+  this._filterDialog.target = cell.getElement();
+  this._filterDialog._colIndex = colIndex;
+  this._filterDialog.data = items; // TODO: Move all settings to configuration object
 
-    if (colOptions.sortUI != null) {
-      sui = colOptions.sortUI;
-    }
+  this._filterDialog.filterMode = customFilter ? "advanced" : "";
+  this._filterDialog.conditions = customFilter; // WARNING: This must be 2D Array
 
-    if (colOptions.filterUI != null) {
-      fui = colOptions.filterUI;
-    }
+  this._filterDialog.show();
+};
+/** @private
+* @function
+* @param {Object} config
+* @param {RowFilteringPlugin~FilterDialogOptions=} userConfig
+*/
 
-    if (colOptions.lang != null) {
-      lang = colOptions.lang;
-    }
+
+RowFilteringPlugin._overrideConfig = function (config, userConfig) {
+  if (!userConfig) {
+    return;
   }
 
-  var dialogConfig = {
-    sortUI: sui,
-    filterUI: fui,
-    fieldDataType: fdt,
-    lang: lang
-  };
+  var sortUI = userConfig["sortUI"];
 
-  if (options && _typeof(options) === "object") {
-    var fieldDataType = options["fieldDataType"];
-    var sortUI = options["sortUI"];
-    var filterUI = options["filterUI"];
-    var optionLang = options["lang"];
+  if (sortUI != null) {
+    config.sortUI = sortUI;
+  }
 
-    if (sortUI === false) {
-      dialogConfig.sortUI = sortUI;
-      colOptions.sortUI = sortUI;
-    }
+  var filterUI = userConfig["filterUI"];
 
-    if (filterUI === false) {
-      dialogConfig.filterUI = filterUI;
-      colOptions.filterUI = filterUI;
-    }
+  if (filterUI != null) {
+    config.filterUI = filterUI;
+  }
 
-    if (fieldDataType != null) {
-      dialogConfig.fieldDataType = fieldDataType;
-      colOptions.fieldDataType = fieldDataType;
-    }
+  var fieldDataType = userConfig["fieldDataType"];
 
-    if (optionLang != null) {
-      dialogConfig.lang = optionLang;
-      colOptions.lang = optionLang;
-    }
+  if (fieldDataType != null) {
+    config.fieldDataType = fieldDataType;
   }
 
-  if (this._filterDialog.init) {
-    // TODO: support initiailization in v1
-    this._filterDialog.init(dialogConfig);
+  var lang = userConfig["lang"];
+
+  if (lang != null) {
+    config.lang = lang;
   }
 
-  var colData = host.getColumnData(colIndex);
-  var formatOptions = colData.formatOptions;
-  var useUTCTime = false;
+  var rawDataAccessor = userConfig["rawDataAccessor"];
 
-  if (formatOptions) {
-    if (formatOptions.formatType) {
-      useUTCTime = true;
-
-      if (formatOptions.useUTCTime != null) {
-        useUTCTime = formatOptions.useUTCTime;
-      }
-    }
+  if (typeof rawDataAccessor === "function" || rawDataAccessor === null) {
+    // Allow null value
+    config.rawDataAccessor = rawDataAccessor;
   }
 
-  this._filterDialog.useUTCTime = useUTCTime;
-  this._filterDialog.target = cell.getElement();
-  this._filterDialog._colIndex = colIndex;
-  this._filterDialog.data = items; // TODO: Move all settings to configuration object
+  var formattedDataAccessor = userConfig["formattedDataAccessor"];
 
-  this._filterDialog.filterMode = customFilter ? "advanced" : ""; // this._filterDialog.customFilter = customFilter;
+  if (typeof formattedDataAccessor === "function" || formattedDataAccessor === null) {
+    // Allow null value
+    config.formattedDataAccessor = formattedDataAccessor;
+  }
 
-  this._filterDialog.conditions = customFilter; // WARNING: This must be 2D Array
+  var sortLogic = userConfig["sortLogic"];
 
-  this._filterDialog.show();
+  if (typeof sortLogic === "function" || sortLogic === null) {
+    // Allow null value
+    config.sortLogic = sortLogic;
+  }
 };
 /** @private
 * @param {number} colIndex

package/lib/tr-grid-rowcoloring/es6/RowColoring.d.ts

@@ -5,20 +5,22 @@ import {injectCss, prettifyCss} from "../../tr-grid-util/es6/Util.js";
 declare namespace RowColoringPlugin {
 
     type Options = {
-        bgColoring?: boolean,
-        textColoring?: boolean,
-        bgColorField?: string,
-        textColorField?: string,
-        cssField?: string,
+        bgColoring?: boolean|null,
+        textColoring?: boolean|null,
+        bgColorField?: string|null,
+        textColorField?: string|null,
+        cssField?: string|null,
+        cssRangeField?: string|null,
+        altCssField?: string|null,
         predefinedColors?: any,
-        predefinedColoring?: boolean
+        predefinedColoring?: boolean|null
     };
 
 }
 
 declare class RowColoringPlugin extends GridPlugin {
 
-    constructor(options?: RowColoringPlugin.Options);
+    constructor(options?: RowColoringPlugin.Options|null);
 
     public getName(): string;
 
@@ -30,25 +32,25 @@ declare class RowColoringPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
-    public setRowColor(rowRef: string|number, bgColor?: (string|null), txtColor?: (string|null)): void;
+    public setRowColor(rowRef: string|number|null, bgColor?: (string|null)|null, txtColor?: (string|null)|null): void;
 
-    public getRowColor(rowRef: string|number): string;
+    public getRowColor(rowRef: string|number|null): string;
 
-    public removeRowColor(rowRef: string|number): void;
+    public removeRowColor(rowRef: string|number|null): void;
 
-    public toggleRowColor(rowRef: string|number, bgColor?: (string|null), txtColor?: (string|null), state?: boolean): boolean;
+    public toggleRowColor(rowRef: string|number|null, bgColor?: (string|null)|null, txtColor?: (string|null)|null, state?: boolean|null): boolean;
 
-    public setRowPredefinedColor(rowRef: string|number, color?: (string|null)): void;
+    public setRowPredefinedColor(rowRef: string|number|null, color?: (string|null)|null, range?: (number)[]|null, altColor?: (string|null)|null): void;
 
     public getPredefinedColors(): any;
 
     public setPredefinedColors(predefinedColors: any): void;
 
-    public disableTextColoring(opt_bool?: boolean): void;
+    public disableTextColoring(opt_bool?: boolean|null): void;
 
-    public disableBgColoring(opt_bool?: boolean): void;
+    public disableBgColoring(opt_bool?: boolean|null): void;
 
-    public disableRowColoring(disabled?: boolean): void;
+    public disableRowColoring(disabled?: boolean|null): void;
 
     public static getContrastColor(hexColor: string): string;