@refinitiv-ui/efx-grid 6.0.15 → 6.0.17

package/lib/tr-grid-row-filtering/es6/RowFiltering.d.ts

@@ -12,33 +12,34 @@ declare namespace RowFilteringPlugin {
 
     type FilterExpression = {
         field: string,
-        expression: RowFilteringPlugin.Expression,
+        expression: RowFilteringPlugin.Expression|null,
         context: any
     };
 
     type ColumnOptions = {
-        filter?: RowFilteringPlugin.Expression,
+        filter?: RowFilteringPlugin.Expression|null,
         filterState?: any,
-        filterIcon?: boolean
+        filterIcon?: boolean|null
     };
 
     type FilterDialogOptions = {
-        sortUI?: boolean,
-        filterUI?: boolean,
-        fieldDataType?: string,
-        lang?: string,
-        rawDataAccessor?: ((...params: any[]) => any),
-        formattedDataAccessor?: ((...params: any[]) => any),
-        sortLogic?: ((...params: any[]) => any)
+        sortUI?: boolean|null,
+        filterUI?: boolean|null,
+        fieldDataType?: string|null,
+        lang?: string|null,
+        rawDataAccessor?: ((...params: any[]) => any)|null,
+        formattedDataAccessor?: ((...params: any[]) => any)|null,
+        sortLogic?: ((...params: any[]) => any)|null
     };
 
     type Options = {
-        disabledUI?: boolean,
-        iconActivation?: string,
-        click?: ((...params: any[]) => any),
-        clicked?: ((...params: any[]) => any),
-        iconCreated?: ((...params: any[]) => any),
-        filterChanged?: ((...params: any[]) => any)
+        disabledUI?: boolean|null,
+        iconActivation?: string|null,
+        dialogOptions?: RowFilteringPlugin.FilterDialogOptions|null,
+        click?: ((...params: any[]) => any)|null,
+        clicked?: ((...params: any[]) => any)|null,
+        iconCreated?: ((...params: any[]) => any)|null,
+        filterChanged?: ((...params: any[]) => any)|null
     };
 
 }
@@ -57,17 +58,17 @@ declare class RowFilteringPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
-    public disable(opt_disabled?: boolean, opt_id?: string): void;
+    public disable(opt_disabled?: boolean|null, opt_id?: string|null): void;
 
-    public addFilter(exp: RowFilteringPlugin.Expression, funcName?: string, ctx?: any): string;
+    public addFilter(exp: RowFilteringPlugin.Expression|null, funcName?: string|null, ctx?: any): string;
 
-    public addGridFilter(exp: RowFilteringPlugin.Expression, ctx?: any): string;
+    public addGridFilter(exp: RowFilteringPlugin.Expression|null, ctx?: any): string;
 
-    public addColumnFilter(colIndex: number, exp: RowFilteringPlugin.Expression, ctx?: (any|string)): boolean;
+    public addColumnFilter(colIndex: number, exp: RowFilteringPlugin.Expression|null, ctx?: (any|string)|null): boolean;
 
-    public setColumnFilter(colIndex: number, exp: RowFilteringPlugin.Expression, ctx?: (any|string)): boolean;
+    public setColumnFilter(colIndex: number, exp: RowFilteringPlugin.Expression|null, ctx?: (any|string)|null): boolean;
 
-    public removeFilter(funcRef: ((...params: any[]) => any)|string): boolean;
+    public removeFilter(funcRef: ((...params: any[]) => any)|string|null): boolean;
 
     public removeColumnFilters(colIndex: number): boolean;
 
@@ -77,11 +78,11 @@ declare class RowFilteringPlugin extends GridPlugin {
 
     public removeAllFilters(): void;
 
-    public setOverridingFilter(func: ((...params: any[]) => any)): void;
+    public setOverridingFilter(func: ((...params: any[]) => any)|null): void;
 
-    public setPreTransform(func: ((...params: any[]) => any)): void;
+    public setPreTransform(func: ((...params: any[]) => any)|null): void;
 
-    public setRowTransform(func: ((...params: any[]) => any)): void;
+    public setRowTransform(func: ((...params: any[]) => any)|null): void;
 
     public getFilters(): (((...params: any[]) => any))[];
 
@@ -89,7 +90,7 @@ declare class RowFilteringPlugin extends GridPlugin {
 
     public getFilterExpressions(): (RowFilteringPlugin.FilterExpression)[]|null;
 
-    public setFilterExpressions(filterExps: (RowFilteringPlugin.FilterExpression)[]): void;
+    public setFilterExpressions(filterExps: (RowFilteringPlugin.FilterExpression)[]|null): void;
 
     public hasColumnFilter(): boolean;
 
@@ -109,13 +110,13 @@ declare class RowFilteringPlugin extends GridPlugin {
 
     public getColumnFilterStates(): any[];
 
-    public getUniqueValues(field: string, formatter?: ((...params: any[]) => any), fmtField?: string, rawDataAccessor?: ((...params: any[]) => any), formattedDataAccessor?: ((...params: any[]) => any)): any;
+    public getUniqueValues(field: string, formatter?: ((...params: any[]) => any)|null, fmtField?: string|null, rawDataAccessor?: ((...params: any[]) => any)|null, formattedDataAccessor?: ((...params: any[]) => any)|null): any;
 
-    public openDialog(colIndex: number, options?: RowFilteringPlugin.FilterDialogOptions): void;
+    public openDialog(colIndex: number, runtimeDialogOptions?: RowFilteringPlugin.FilterDialogOptions|null): void;
 
 }
 
-declare function field(colIndex: number, exp: RowFilteringPlugin.Expression, ctx?: (any|string)): boolean;
+declare function field(colIndex: number, exp: RowFilteringPlugin.Expression|null, ctx?: (any|string)|null): boolean;
 
 export default RowFilteringPlugin;
 export { RowFilteringPlugin, RowFilteringPlugin as RowFiltering, RowFilteringPlugin as RowFilteringExtension };

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