@refinitiv-ui/efx-grid 6.0.0-next.0

package/lib/tr-grid-textformatting/es6/TextFormatting.d.ts

@@ -0,0 +1,77 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {NumberFormatter} from '../../tr-grid-util/es6/NumberFormatter.js';
+import { FieldFormatter } from '../../tr-grid-util/es6/FieldFormatter.js';
+import { DateTime } from '../../tr-grid-util/es6/DateTime.js';
+
+declare namespace TextFormattingPlugin {
+
+    type FormatOptions = {
+        formatType?: string,
+        type?: string,
+        field?: string,
+        decimalPlaces?: number,
+        precisionEnabled?: boolean,
+        plusSign?: boolean,
+        separator?: boolean,
+        percentSign?: boolean,
+        scalingUnit?: string,
+        multiplyBy100?: boolean,
+        mutiplyBy100?: boolean,
+        dateTimeFormat?: string,
+        useUTCTime?: boolean,
+        autoTextFormatting?: boolean,
+        formatLogic?: ((...params: any[]) => any)
+    };
+
+    type ColumnOptions = {
+        formatType?: (string|TextFormattingPlugin.FormatOptions),
+        autoTextFormatting?: boolean
+    };
+
+    type GridOptions = {
+        autoTextFormatting?: boolean
+    };
+
+    type FormatLogicArguments = {
+        colIndex: number,
+        rowIndex: number,
+        field: string,
+        formattedText: string,
+        cell: any,
+        rowData: any,
+        format: ((...params: any[]) => any)
+    };
+
+}
+
+declare class TextFormattingPlugin extends GridPlugin {
+
+    constructor();
+
+    public getName(): string;
+
+    public hasMultiTableSupport(): boolean;
+
+    public initialize(host: any, options?: any): void;
+
+    public unload(host: any): void;
+
+    public config(options?: any): void;
+
+    public getConfigObject(gridOptions?: any): any;
+
+    public setColumnFormat(colIndex: number, formatOptions: TextFormattingPlugin.FormatOptions): void;
+
+    public getColumnFormatOptions(colIndex: number, options?: any): any;
+
+    public getFormatter(colIndex: number): FieldFormatter;
+
+    public formatText(colIndex: number, obj: any): string;
+
+    public openDialog(colIndex: number): void;
+
+}
+
+export default TextFormattingPlugin;
+export { TextFormattingPlugin, TextFormattingPlugin as TextFormatting, TextFormattingPlugin as TextFormattingExtension };

package/lib/tr-grid-textformatting/es6/TextFormatting.js

@@ -0,0 +1,574 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+import { NumberFormatter } from '../../tr-grid-util/es6/NumberFormatter.js';
+import { FieldFormatter } from '../../tr-grid-util/es6/FieldFormatter.js';
+import { DateTime } from '../../tr-grid-util/es6/DateTime.js';
+/** @event TextFormattingPlugin#formatChanged
+* @description Fired only when a user click OK from the format dialog, that is generated from this extension
+* @type {Object}
+* @property {number} colIndex
+* @property {string} formatType Available options are: number, scaled, percent, date, time and datetime
+* @property {string} field Field defined in the column
+* @property {number=} decimalPlaces=2
+* @property {boolean=} plusSign
+* @property {boolean=} separator
+* @property {boolean=} percentSign
+* @property {string=} scalingUnit Value can be million or billion
+* @property {boolean=} multiplyBy100
+* @property {string=} dateTimeFormat
+* @property {boolean=} useUTCTime
+*/
+
+/** @typedef {Object} TextFormattingPlugin~FormatOptions
+* @description Available options that can be specified in the `formatType` property of each column configuration object
+* @property {string=} formatType Available options are: number, scaled, percent, and datetime
+* @property {string=} type Alias to formatType
+* @property {string=} field Field is required but can be defined in the column definition object
+* @property {number=} decimalPlaces=2
+* @property {boolean=} precisionEnabled=true If disabled, number of decimal will remain as original.
+* @property {boolean=} plusSign=false
+* @property {boolean=} separator=false Thousands separators
+* @property {boolean=} percentSign=false
+* @property {string=} scalingUnit Value can be million or billion
+* @property {boolean=} multiplyBy100=false
+* @property {boolean=} mutiplyBy100=false Alias of multiplyBy100
+* @property {string=} dateTimeFormat
+* @property {boolean=} useUTCTime
+* @property {boolean=} autoTextFormatting=true If disabled, the extension's automatic formatting will not be triggered, including `formatLogic`
+* @property {Function=} formatLogic=null If specified all default formatting will be prevented and replaced by the given function. This should be used when the column has custom rendering. The function must retrieve, format, and insert the data with the provided arguments (i.e., TextFormattingPlugin~FormatLogicArguments).
+*/
+
+/** @typedef {Object} TextFormattingPlugin~ColumnOptions
+* @description Available options that can be specified on the column configuration object
+* @property {(string|TextFormattingPlugin~FormatOptions)=} formatType Format options or a shorthand text (e.g. number, scaled, percent, and datetime).
+* @property {boolean=} autoTextFormatting=true If disabled, the extension's automatic formatting will not be triggered, including `formatLogic`
+*/
+
+/** @typedef {Object} TextFormattingPlugin~GridOptions
+* @description Available options that can be specified on the grid configuration object
+* @property {boolean=} autoTextFormatting=true If disabled, the extension's automatic formatting will be disabled for all columns
+*/
+
+/** @typedef {Object} TextFormattingPlugin~FormatLogicArguments
+* @description Event argument object for formatLogic function
+* @property {number} colIndex
+* @property {number} rowIndex
+* @property {string} field
+* @property {string} formattedText Text that is formatted by the formatter of the specified column
+* @property {*} cell Grid cell instance
+* @property {Object} rowData Row data object
+* @property {Function} format Function that is used to produce formattedText
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+*/
+
+var TextFormattingPlugin = function TextFormattingPlugin() {
+  this._onSectionBinding = this._onSectionBinding.bind(this);
+  this._onColumnAdded = this._onColumnAdded.bind(this);
+  this._hosts = [];
+};
+
+Ext.inherits(TextFormattingPlugin, GridPlugin);
+/** @type {boolean}
+* @private
+*/
+
+TextFormattingPlugin.prototype._noFormatting = true;
+/** @type {boolean}
+* @private
+*/
+
+TextFormattingPlugin.prototype._disabled = false;
+/** @type {string}
+* @private
+*/
+
+TextFormattingPlugin.prototype._idnSource = "";
+/** @public
+* @return {string}
+*/
+
+TextFormattingPlugin.prototype.getName = function () {
+  return "TextFormattingPlugin"; // Read Only
+};
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @return {boolean}
+*/
+
+
+TextFormattingPlugin.prototype.hasMultiTableSupport = function () {
+  return true;
+};
+/** @public
+* @param {Object} host core grid instance
+* @param {Object=} options
+*/
+
+
+TextFormattingPlugin.prototype.initialize = function (host, options) {
+  if (this._hosts.indexOf(host) >= 0) return;
+
+  this._hosts.push(host);
+
+  host.listen("postSectionDataBinding", this._onSectionBinding);
+
+  if (this._hosts.length === 1) {
+    host.listen("columnAdded", this._onColumnAdded);
+    this.config(options);
+  }
+};
+/** @public
+* @param {Object} host core grid instance
+*/
+
+
+TextFormattingPlugin.prototype.unload = function (host) {
+  var at = this._hosts.indexOf(host);
+
+  if (at < 0) {
+    return;
+  }
+
+  host.unlisten("postSectionDataBinding", this._onSectionBinding);
+  host.unlisten("columnAdded", this._onColumnAdded);
+
+  this._hosts.splice(at, 1);
+};
+/** @public
+* @param {Object=} options
+*/
+
+
+TextFormattingPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+
+  this._idnSource = options["idnSource"] ? "idn" : "";
+  var bool = options["autoTextFormatting"];
+
+  if (bool != null) {
+    this._disabled = !bool;
+  }
+
+  var columns = options.columns;
+
+  if (!columns) {
+    return;
+  } // WARNING: Name colliding between column definition and format option can occur
+
+
+  var dirty = 0;
+  var len = columns.length;
+
+  for (var i = 0; i < len; ++i) {
+    dirty |= this._setColumnFormat(i, columns[i]);
+  } // WOWRKAROUND : In test-resource and tr-grid-util, avoid using static variables. duplicating DateTime
+
+
+  var lang = options["lang"];
+
+  if (lang) {
+    DateTime.setLocale(lang);
+  }
+
+  if (dirty) {
+    len = this._hosts.length;
+
+    for (i = 0; i < len; ++i) {
+      this._hosts[i]["requestRowRefresh"]();
+    }
+  }
+};
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+
+
+TextFormattingPlugin.prototype.getConfigObject = function (gridOptions) {
+  var obj = gridOptions || {};
+
+  if (this._idnSource) {
+    obj.idnSource = true;
+  }
+
+  if (this._disabled) {
+    obj.autoTextFormatting = false;
+  }
+
+  var columns = obj.columns;
+
+  if (!columns) {
+    columns = obj.columns = [];
+  }
+
+  var len = this.getColumnCount();
+
+  for (var i = 0; i < len; ++i) {
+    var column = columns[i];
+
+    if (!column) {
+      column = columns[i] = {};
+    }
+
+    this.getColumnFormatOptions(i, column);
+  }
+
+  return obj;
+};
+/** @public
+* @param {number} colIndex
+* @param {TextFormattingPlugin~FormatOptions} formatOptions
+*/
+
+
+TextFormattingPlugin.prototype.setColumnFormat = function (colIndex, formatOptions) {
+  if (this._setColumnFormat(colIndex, formatOptions)) {
+    var len = this._hosts.length;
+
+    for (var i = 0; i < len; ++i) {
+      this._hosts[i]["requestRowRefresh"]();
+    }
+  }
+};
+/** @private
+* @param {number} colIndex
+* @param {TextFormattingPlugin~FormatOptions} userObj This can be column configuration object or FormatTypeObject
+* @return {boolean} Returns true if there is any change
+*/
+
+
+TextFormattingPlugin.prototype._setColumnFormat = function (colIndex, userObj) {
+  var colData = this._newColumnData(colIndex);
+
+  var colDef = userObj;
+  var fo = null; // Actual Format Options
+
+  var field;
+
+  if (colDef) {
+    // Extract field and format type
+    // Extract options from column definition object first
+    field = colDef["field"];
+    var autoTextFormatting = colDef["autoTextFormatting"];
+
+    if (autoTextFormatting != null) {
+      colData["autoTextFormatting"] = autoTextFormatting ? true : false;
+    }
+
+    var formatLogic = colDef["formatLogic"];
+
+    if (typeof formatLogic === "function") {
+      colData["formatLogic"] = formatLogic;
+    } // Fallback
+
+
+    fo = colDef["formatType"] || colDef["type"]; // Format type may be an format option object at this point
+
+    if (fo && _typeof(fo) === "object") {
+      // The formatType can be the format options (object) itself
+      if (fo["field"]) {
+        field = fo["field"];
+      }
+
+      autoTextFormatting = fo["autoTextFormatting"];
+
+      if (autoTextFormatting != null) {
+        colData["autoTextFormatting"] = autoTextFormatting ? true : false;
+      }
+
+      formatLogic = fo["formatLogic"];
+
+      if (typeof formatLogic === "function") {
+        colData["formatLogic"] = formatLogic;
+      }
+    } else {
+      fo = colDef; // colDef = null;
+    }
+  }
+
+  var prevFO = colData["formatOptions"]; // For later use
+  // Clear previously stored data
+
+  colData["formatOptions"] = null;
+  colData["textFormatter"] = null;
+  colData["numberFormatter"] = null; // Check if the provided arguments are valid and sufficient
+
+  if (!fo) {
+    return prevFO ? true : false;
+  }
+
+  var fot = fo["formatType"] || fo["type"];
+
+  if (!fot || typeof fot != "string") {
+    // Format type must be string
+    return prevFO ? true : false;
+  }
+
+  fot = fot.toLowerCase(); // Guaranteed that all format types are case insensitive
+
+  if (fot === "general") {
+    // "general" type means no formatting
+    return prevFO ? true : false;
+  }
+
+  if (!field) {
+    // The field is not given try our best to get it
+    field = this._getField(colIndex);
+
+    if (!field) {
+      if (prevFO) {
+        field = prevFO["field"];
+      }
+    }
+  } // Format option is valid after this point
+
+
+  this._noFormatting = false; // Quick workaround
+  // WARNING: We directly store and modify user data. This may inadvertently cause some bugs
+
+  fo["field"] = field;
+  fo["formatType"] = fot;
+
+  if (!fo["formattedField"]) {
+    fo["formattedField"] = field + "_FORMATTED";
+  }
+
+  if (fo["idnSource"] == null) {
+    fo["idnSource"] = this._idnSource;
+  }
+
+  var ff = new FieldFormatter(fo); // FieldFormatter will be used for rendering
+
+  var nf = null;
+
+  if (fot == "number" || fot == "scaled" || fot == "percent") {
+    nf = new NumberFormatter(fo);
+    ff.setNumberFormatter(nf.format);
+  }
+
+  colData["formatOptions"] = fo;
+  colData["textFormatter"] = ff;
+  colData["numberFormatter"] = nf; // Everything is done. Request for re-rendering
+
+  return true;
+};
+/** @public
+* @param {number} colIndex
+* @param {Object=} options Object for storing returned data
+* @return {!Object}
+*/
+
+
+TextFormattingPlugin.prototype.getColumnFormatOptions = function (colIndex, options) {
+  if (!options) {
+    options = {};
+  }
+
+  var colData = this._getColumnData(colIndex);
+
+  if (colData) {
+    var formatOptions = colData["formatOptions"];
+    var textFormatter = colData["textFormatter"];
+    var numberFormatter = colData["numberFormatter"];
+
+    if (colData["autoTextFormatting"] != null) {
+      options["autoTextFormatting"] = colData["autoTextFormatting"];
+    }
+
+    if (formatOptions) {
+      options["formatType"] = formatOptions.formatType || formatOptions.type;
+    }
+
+    if (textFormatter) {
+      textFormatter.getOptions(options);
+    }
+
+    if (numberFormatter) {
+      numberFormatter.getOptions(options);
+    }
+  }
+
+  return options;
+};
+/** @private
+* @param {Object} e
+*/
+
+
+TextFormattingPlugin.prototype._onColumnAdded = function (e) {
+  if (e.context) {
+    this._setColumnFormat(e.colIndex, e.context);
+  }
+};
+/** @private
+* @param {Object} colData
+* @return {boolean}
+*/
+
+
+TextFormattingPlugin._hasAutoFormatting = function (colData) {
+  if (colData) {
+    if (colData["autoTextFormatting"] === false || colData["percentBar"] || colData["rangeBar"]) {
+      return false;
+    }
+
+    return true;
+  }
+
+  return false;
+};
+/** @private
+* @param {Object} e
+*/
+
+
+TextFormattingPlugin.prototype._onSectionBinding = function (e) {
+  if (this._noFormatting || this._disabled) {
+    return;
+  }
+
+  var section = e["section"];
+  var dataRows = e["dataRows"];
+  var colCount = section.getColumnCount();
+  var fromR =
+  /** @type{number} */
+  e["fromRowIndex"];
+  var toR =
+  /** @type{number} */
+  e["toRowIndex"];
+  var arg = {};
+
+  for (var c = 0; c < colCount; ++c) {
+    var colData = this._getColumnData(c); // will get column data from hosts[0] only
+
+
+    if (!TextFormattingPlugin._hasAutoFormatting(colData)) {
+      continue;
+    }
+
+    var formatOptions =
+    /** @type{TextFormattingPlugin~FormatOptions} */
+    colData["formatOptions"];
+
+    if (!formatOptions) {
+      continue;
+    }
+
+    var formatter = colData["textFormatter"];
+    var formatLogic = colData["formatLogic"];
+    arg.colIndex = c;
+    arg.field = formatter.getField();
+    arg.format = formatter.format; // WARNING: Accessing private member
+
+    for (var r = fromR; r < toR; ++r) {
+      var cell = section.getCell(c, r, false);
+
+      if (cell) {
+        var rowData = this._getRowData(dataRows[r]);
+
+        arg.formattedText = TextFormattingPlugin._getFormattedText(formatter, rowData, cell);
+
+        if (formatLogic) {
+          arg.rowIndex = r;
+          arg.cell = cell;
+          arg.rowData = rowData;
+          formatLogic(arg);
+        } else {
+          cell.setTextContent(arg.formattedText);
+        }
+      }
+    }
+  }
+};
+/** @private
+* @param {FieldFormatter} formatter
+* @param {Object} rowData
+* @param {Object} cell Grid cell instance
+* @return {string}
+*/
+
+
+TextFormattingPlugin._getFormattedText = function (formatter, rowData, cell) {
+  if (rowData) {
+    return formatter.formatRowData(rowData);
+  } else {
+    var content = cell.getContent();
+
+    if (content) {
+      return formatter.formatValue(content.textContent);
+    }
+  }
+
+  return "";
+};
+/** @public
+* @param {number} colIndex
+* @return {FieldFormatter}
+*/
+
+
+TextFormattingPlugin.prototype.getFormatter = function (colIndex) {
+  return this._getColumnOption(colIndex, "textFormatter") || null;
+};
+/** Format the given object by the formatter from the specified column. The object is converted to string, if no formatter is specified
+* @public
+* @param {number} colIndex
+* @param {*} obj The object can be string, number, boolean, or Date object
+* @return {string}
+*/
+
+
+TextFormattingPlugin.prototype.formatText = function (colIndex, obj) {
+  if (obj != null) {
+    var formatter = this.getFormatter(colIndex);
+    return formatter ? formatter.formatValue(obj) : obj + "";
+  }
+
+  return "";
+};
+/** @public
+* @param {number} colIndex
+*/
+
+
+TextFormattingPlugin.prototype.openDialog = function (colIndex) {
+  if (!this._formatDialog) {
+    this._formatDialog = document.createElement('tr-grid-format-dialog');
+
+    this._formatDialog.addEventListener('data-change', this._onFormatDialogDataChange.bind(this));
+  }
+
+  if (this._formatDialog.is === 'tr-grid-format-dialog') {
+    // Check that tr-grid-format-dialog is imported
+    var options = this.getColumnFormatOptions(colIndex);
+    this._formatDialog.data = {
+      valueFormatTab: options
+    };
+    this._formatDialog.colIndex = colIndex;
+
+    this._formatDialog.show();
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+TextFormattingPlugin.prototype._onFormatDialogDataChange = function (e) {
+  var colIndex = this._formatDialog.colIndex;
+  var obj = e.detail.data.valueFormatTab;
+  this.setColumnFormat(colIndex, obj);
+  obj.colIndex = colIndex;
+
+  this._dispatch("formatChanged", obj);
+};
+
+export default TextFormattingPlugin;
+export { TextFormattingPlugin, TextFormattingPlugin as TextFormatting, TextFormattingPlugin as TextFormattingExtension };

package/lib/tr-grid-textformatting/es6/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextFormatting";

package/lib/tr-grid-textformatting/es6/index.js

@@ -0,0 +1 @@
+export * from "./TextFormatting";

package/lib/tr-grid-titlewrap/es6/TitleWrap.d.ts

@@ -0,0 +1,29 @@
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+
+declare class TitleWrapPlugin extends GridPlugin {
+
+    constructor();
+
+    public getName(): string;
+
+    public initialize(host: any, options?: any): void;
+
+    public unload(host: any): void;
+
+    public config(options?: any): void;
+
+    public getConfigObject(gridOptions?: any): any;
+
+    public _adjustRowHeightRefByHost(host: any, sectionRef: any, from?: number, to?: number): boolean;
+
+    public adjustRowHeight(sectionRef: any, from?: number, to?: number): boolean;
+
+    public adjustRowHeightAt(sectionRef: any, rowIndex: number): boolean;
+
+}
+
+declare function val(gridOptions?: any): any;
+
+export default TitleWrapPlugin;
+export { TitleWrapPlugin, TitleWrapPlugin as TitleWrap, TitleWrapPlugin as TitleWrapExtension };