@refinitiv-ui/efx-grid 6.0.4 → 6.0.6

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js

@@ -28,7 +28,10 @@ var ColumnGroupingPlugin = function ColumnGroupingPlugin(options) {
   var t = this;
   t._hosts = [];
   t._onColumnChanged = t._onColumnChanged.bind(t);
+  t._onColumnAdded = t._onColumnAdded.bind(t);
+  t._onColumnMoved = t._onColumnMoved.bind(t);
   t._onPostSectionRender = t._onPostSectionRender.bind(t);
+  t._onBeforeColumnBoundUpdate = t._onBeforeColumnBoundUpdate.bind(t);
   t._groupDefs = [];
   t._groupMap = {};
   t._childToParent = {};
@@ -63,12 +66,17 @@ ColumnGroupingPlugin.prototype._childToParent;
 * @private
 */
 
-ColumnGroupingPlugin.prototype._maxDepth = -1;
+ColumnGroupingPlugin.prototype._maxDepth = 0;
 /** @type {boolean}
 * @private
 */
 
 ColumnGroupingPlugin.prototype._restructuring = false;
+/** @type {number}
+* @private
+*/
+
+ColumnGroupingPlugin.prototype._rerenderTimerId = 0;
 /** @private
 * @param {ColumnGroupingPlugin~GroupDefinition} groupingOptions
 * @return {string}
@@ -137,11 +145,12 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
   this._hosts.push(host);
 
   if (this._hosts.length === 1) {
-    host.listen("columnAdded", this._onColumnChanged);
-    host.listen("columnMoved", this._onColumnChanged);
+    host.listen("columnAdded", this._onColumnAdded);
+    host.listen("columnMoved", this._onColumnMoved);
     host.listen("columnRemoved", this._onColumnChanged);
     host.listen("columnVisibilityChanged", this._onColumnChanged);
     host.listen("postSectionRender", this._onPostSectionRender);
+    host.listen("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
   }
 
   this.config(options);
@@ -186,9 +195,17 @@ ColumnGroupingPlugin.prototype.unload = function (host) {
   this._hosts.splice(at, 1);
 
   host.unlisten("columnAdded", this._onColumnChanged);
-  host.unlisten("columnMoved", this._onColumnChanged);
+  host.unlisten("columnMoved", this._onColumnMoved);
   host.unlisten("columnRemoved", this._onColumnChanged);
   host.unlisten("postSectionRender", this._onPostSectionRender);
+  host.unlisten("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
+
+  if (!this._hosts.length) {
+    if (this._rerenderTimerId) {
+      clearTimeout(this._rerenderTimerId);
+      this._rerenderTimerId = 0;
+    }
+  }
 
   this._dispose();
 };
@@ -307,6 +324,8 @@ ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (colModels) {
 
 
 ColumnGroupingPlugin.prototype._applyGrouping = function () {
+  this._rerenderTimerId = 0;
+
   if (this._restructuring) {
     return;
   }
@@ -345,6 +364,58 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
     }
   }
 };
+/** Set a timer to call applyGrouping only once to avoid performance issue
+* @private
+*/
+
+
+ColumnGroupingPlugin.prototype._requestApplyGrouping = function () {
+  if (!this._rerenderTimerId) {
+    this._rerenderTimerId = setTimeout(this._applyGrouping.bind(this), 10);
+  }
+};
+/** Apply nearest grouping to column.
+* @private
+* @param {number} colIndex
+*/
+
+
+ColumnGroupingPlugin.prototype._applyNearestGrouping = function (colIndex) {
+  if (colIndex == null || colIndex < 0) {
+    return;
+  }
+
+  var colIndexLeft = colIndex - 1;
+  var colIndexRight = colIndex + 1;
+  var groupLeftIds = this.getGroupIds(colIndexLeft);
+  var groupRightIds = this.getGroupIds(colIndexRight);
+
+  if (groupLeftIds && groupRightIds) {
+    var i, j, groupLeftId, groupRightId, field;
+    var found = false;
+
+    for (i = 0; i < groupLeftIds.length; i++) {
+      groupLeftId = groupLeftIds[i];
+
+      for (j = 0; j < groupRightIds.length; j++) {
+        groupRightId = groupRightIds[j];
+
+        if (groupLeftId === groupRightId) {
+          // found same Id between group
+          field = this.getColumnId(colIndex);
+
+          this._addGroupChild(field, groupRightId);
+
+          found = true;
+        }
+      }
+
+      if (found) {
+        break;
+      }
+    }
+  }
+};
 /** @private
 * @param {Object=} titleSection
 */
@@ -363,13 +434,13 @@ ColumnGroupingPlugin.prototype._spanGroupVertically = function (titleSection) {
   var colCount = api.getColumnCount();
 
   for (var col = 0; col < colCount; col++) {
-    var toSpan = maxDepth + 1;
+    var toSpan = rowCount;
 
     var parentNode = this._getParentGroup(this.getColumnId(col));
 
     if (parentNode) {
       var depth = parentNode["onRow"] + 1;
-      toSpan = maxDepth - depth + 1;
+      toSpan = rowCount - depth;
     } // Note that invisible column cannot have row span
 
 
@@ -461,11 +532,151 @@ ColumnGroupingPlugin.prototype._onPostSectionRender = function (e) {
   }
 };
 /** @private
+* @param {Object} e dispatching of columnAdded event object
+*/
+
+
+ColumnGroupingPlugin.prototype._onColumnAdded = function (e) {
+  var colIndex = e.colIndex;
+
+  this._applyNearestGrouping(colIndex);
+
+  this._requestApplyGrouping();
+};
+/** @private
 */
 
 
 ColumnGroupingPlugin.prototype._onColumnChanged = function () {
-  this._applyGrouping();
+  this._requestApplyGrouping();
+};
+/** @private
+* @param {Object} e dispatching of columnMoved event object
+*/
+
+
+ColumnGroupingPlugin.prototype._onColumnMoved = function (e) {
+  var toColIndex = e.toColIndex;
+  var colId = this.getColumnId(toColIndex);
+  var groupId = this._childToParent[colId];
+  var colIndexLeft = toColIndex - 1;
+  var colIndexRight = toColIndex + 1;
+  var colIdLeft = this.getColumnId(colIndexLeft);
+  var colIdRight = this.getColumnId(colIndexRight);
+  var groupIdLeft = this._childToParent[colIdLeft];
+  var groupIdRight = this._childToParent[colIdRight];
+
+  if (groupId != groupIdLeft && groupId != groupIdRight) {
+    // remove column from previous group
+    if (groupId) {
+      var groupChild = this.getGroupChildren(groupId);
+      var removeIndex = groupChild.indexOf(colId);
+
+      if (removeIndex > -1) {
+        groupChild.splice(removeIndex, 1);
+      }
+
+      this.setGroupChildren(groupId, groupChild);
+    }
+
+    this._applyNearestGrouping(toColIndex);
+  }
+
+  this._requestApplyGrouping();
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
+  var selectedColumns = e.selectedColumns;
+  var parentMap = this._childToParent; // Find non-grouped column
+
+  var i, colId, nonGroupedColId, groupId;
+  var colIds = [];
+  var groupMap = {};
+
+  for (i = 0; i < selectedColumns.length; i++) {
+    colId = this.getColumnId(selectedColumns[i]);
+
+    if (colId) {
+      groupId = parentMap[colId];
+
+      if (!groupId) {
+        nonGroupedColId = colId;
+        break;
+      } else {
+        groupMap[groupId] = this._groupMap[groupId]; // Cache group node for further calculation
+      }
+
+      colIds.push(colId); // Cache column id for further calculation
+    }
+  }
+
+  if (nonGroupedColId) {
+    e.topBoundRowIndex = 0;
+    return;
+  }
+
+  var topBoundRowIndex = this._maxDepth; // Column title row
+  // Find minimum row index of group
+
+  var rootGroupMap = {};
+  var headerRowIndex, group;
+
+  for (groupId in groupMap) {
+    group = this._getRootGroup(groupId);
+    rootGroupMap[group.id] = group;
+    headerRowIndex = groupMap[groupId].onRow + 1;
+
+    if (headerRowIndex < topBoundRowIndex) {
+      topBoundRowIndex = headerRowIndex;
+    }
+  } // Traverse down from the root group to find group that its all members are selected
+
+
+  var n, members, allSelected, findingGroup, children;
+  var nextLevelGroups = rootGroupMap;
+
+  for (i = 0; i < topBoundRowIndex; i++) {
+    findingGroup = nextLevelGroups;
+    nextLevelGroups = {};
+
+    for (groupId in findingGroup) {
+      group = findingGroup[groupId];
+      allSelected = true;
+      members = this._getGroupMembers(group);
+
+      if (members.length <= colIds.length) {
+        for (n = 0; n < members.length; n++) {
+          if (colIds.indexOf(members[n]) < 0) {
+            allSelected = false;
+            break;
+          }
+        }
+
+        if (allSelected) {
+          e.topBoundRowIndex = i;
+          return;
+        }
+      } // Cache the next level group
+
+
+      children = group.children;
+
+      for (n = 0; n < children.length; n++) {
+        var id = children[n];
+        group = this._groupMap[id];
+
+        if (group) {
+          nextLevelGroups[id] = group;
+        }
+      }
+    }
+  }
+
+  e.topBoundRowIndex = topBoundRowIndex;
 };
 /** Deprecated. Column should be directly added through grid APIs.
 * @deprecated
@@ -614,7 +825,7 @@ ColumnGroupingPlugin.prototype.setGroupDefinition = function (groupId, newDef) {
   }
 };
 /** @public
-* @param {number} groupId
+* @param {string} groupId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
 
@@ -649,8 +860,8 @@ ColumnGroupingPlugin.prototype.setGroupChildren = function (groupId, newChildLis
   }
 };
 /** @public
-* @param {number} groupId
-* @return {ColumnGroupingPlugin~GroupDefinition}
+* @param {string} groupId
+* @return {Array.<string>}
 */
 
 
@@ -663,6 +874,144 @@ ColumnGroupingPlugin.prototype.getGroupChildren = function (groupId) {
 
   return null;
 };
+/** Return all column indices under the given group id
+* @public
+* @param {string} groupId
+* @return {Array.<number>}
+*/
+
+
+ColumnGroupingPlugin.prototype.getChildColumnIndices = function (groupId) {
+  var group = this._groupMap[groupId];
+
+  if (group) {
+    var colIds = this._getGroupMembers(group);
+
+    var colIndices = [];
+    var id;
+
+    for (var i = 0; i < colIds.length; i++) {
+      id = this._getColumnIndexById(colIds[i]);
+
+      if (id > -1) {
+        colIndices.push(id);
+      }
+    }
+
+    return colIndices.sort();
+  }
+
+  return null;
+};
+/** @public
+* @param {string|number} colRef
+* @return {Array.<string>}
+*/
+
+
+ColumnGroupingPlugin.prototype.getGroupIds = function (colRef) {
+  if (colRef != null) {
+    var colId = colRef;
+
+    if (typeof colRef === "number") {
+      colId = this.getColumnId(colRef);
+    }
+
+    if (colId) {
+      var groupId = this._childToParent[colId];
+
+      if (groupId) {
+        var groupIds = [groupId];
+        var group = this._groupMap[groupId];
+
+        while (group && group.parent) {
+          group = this.getGroupDefinition(group.parent);
+
+          if (group) {
+            groupIds.push(group.id);
+          }
+        }
+
+        return groupIds;
+      }
+    }
+  }
+
+  return null;
+};
+/** Return deepest row index of column headers
+* @public
+* @return {number}
+*/
+
+
+ColumnGroupingPlugin.prototype.getMaxGroupLevel = function () {
+  return this._maxDepth;
+};
+/** Return row index of the given group id
+* @public
+* @param {string} groupId
+* @return {number}
+*/
+
+
+ColumnGroupingPlugin.prototype.getGroupLevel = function (groupId) {
+  var group = this._groupMap[groupId];
+
+  if (group) {
+    return group.onRow;
+  }
+
+  return -1;
+};
+/** @private
+* @param {ColumnGroupingPlugin~GroupDefinition} group Group definition
+* @param {Array=} members
+* @return {Array.<string>}
+*/
+
+
+ColumnGroupingPlugin.prototype._getGroupMembers = function (group, members) {
+  if (!members) {
+    members = [];
+  }
+
+  var children = group.children;
+  var groupMap = this._groupMap;
+  var g, id;
+
+  for (var i = 0; i < children.length; i++) {
+    id = children[i];
+    g = groupMap[id];
+
+    if (g) {
+      this._getGroupMembers(g, members);
+    } else {
+      members.push(id);
+    }
+  }
+
+  return members;
+};
+/** @private
+* @param {String} groupId
+* @return {ColumnGroupingPlugin~GroupDefinition}
+*/
+
+
+ColumnGroupingPlugin.prototype._getRootGroup = function (groupId) {
+  if (!groupId) {
+    return null;
+  }
+
+  var group = this._groupMap[groupId];
+
+  while (group.parent) {
+    group = this.getGroupDefinition(group.parent);
+  }
+
+  return group;
+};
 /** @private
 */
 
@@ -910,7 +1259,7 @@ ColumnGroupingPlugin.prototype._addGroupChild = function (childId, groupId) {
   }
 };
 /** @private
-* @param {number} childId
+* @param {string} childId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
 
@@ -918,6 +1267,202 @@ ColumnGroupingPlugin.prototype._addGroupChild = function (childId, groupId) {
 ColumnGroupingPlugin.prototype._getParentGroup = function (childId) {
   return this.getGroupDefinition(this._childToParent[childId]);
 };
+/** @private
+* @param {string} colId
+* @param {number} groupLevel
+* @return {string}
+*/
+
+
+ColumnGroupingPlugin.prototype._getGroupId = function (colId, groupLevel) {
+  var groupId = this._childToParent[colId];
+
+  if (!groupId) {
+    return "";
+  }
+
+  if (groupLevel == null) {
+    return groupId;
+  }
+
+  var currentLevel = this.getGroupLevel(groupId);
+
+  while (currentLevel > groupLevel && groupId) {
+    groupId = this._childToParent[groupId];
+    currentLevel--;
+  }
+
+  return groupId || "";
+};
+/** @public
+* @param {Element|Event|MouseEvent} e
+* @return {Object}
+*/
+
+
+ColumnGroupingPlugin.prototype.getCellInfo = function (e) {
+  var api = this.getGridApi();
+  var grid = e["grid"] || this.getRelativeGrid(e);
+
+  if (!api || !grid) {
+    return null;
+  }
+
+  var cellInfo = grid.getCellInfo(e);
+
+  if (!cellInfo.cell) {
+    var cell = cellInfo.section.getCell(cellInfo.colIndex, cellInfo.rowIndex);
+    cellInfo["cell"] = cell;
+  }
+
+  var colId = this.getColumnId(cellInfo.colIndex);
+
+  var groupId = this._getGroupId(colId, cellInfo.sectionType == "title" ? cellInfo.rowIndex : null);
+
+  if (!groupId) {
+    cellInfo["columnId"] = colId;
+    return cellInfo;
+  }
+
+  var groupInfo = this.getGroupDefinition(groupId);
+
+  if (groupInfo) {
+    var isGroupHeader = cellInfo.sectionType == "title" && cellInfo.rowIndex == this.getGroupLevel(groupId);
+
+    if (isGroupHeader) {
+      cellInfo["groupId"] = groupInfo.id;
+      cellInfo["groupName"] = groupInfo.name;
+      cellInfo["children"] = groupInfo.children;
+    } else {
+      cellInfo["columnId"] = colId;
+    }
+
+    cellInfo["parent"] = isGroupHeader ? groupInfo.parent || null : groupInfo.id;
+  }
+
+  return cellInfo;
+};
+/** @public
+* @param {number|string} from //Column index or id that should be moved
+* @param {number} to
+* @param {string} groupId
+*/
+
+
+ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (from, to, groupId) {
+  var fromIndex = -1;
+
+  if (typeof from == "string") {
+    fromIndex = this._getColumnIndexById(from);
+  } else {
+    fromIndex = from;
+  }
+
+  if (fromIndex == -1) {
+    return;
+  }
+
+  var groupDef = this.getGroupDefinition(groupId);
+
+  if (!groupDef) {
+    for (var j = this._hosts.length; --j >= 0;) {
+      var grid = this._hosts[j];
+      grid.moveColumn(fromIndex, to);
+    }
+
+    return;
+  }
+
+  var childIndices = this.getChildColumnIndices(groupId);
+  var startIndex = -1;
+  var endIndex = -1;
+
+  if (childIndices && childIndices.length) {
+    startIndex = childIndices[0];
+    endIndex = childIndices[childIndices.length - 1];
+  }
+
+  if (to < startIndex) {
+    to = startIndex; // handle move column to right
+
+    if (to > fromIndex) {
+      to -= 1;
+    }
+  } else if (to > endIndex) {
+    to = endIndex; // handle move column to left
+
+    if (to < fromIndex) {
+      to += 1;
+    }
+  } //find column index that should be moved, it should not be between columns in child group
+
+
+  for (var i = 0; i < groupDef.children.length; i++) {
+    var notAllowIndices = this.getChildColumnIndices(groupDef.children[i]);
+
+    if (notAllowIndices && notAllowIndices.length) {
+      var notAllowStart = notAllowIndices[0];
+      var notAllowEnd = notAllowIndices[notAllowIndices.length - 1];
+
+      if (to > fromIndex) {
+        notAllowStart -= 1;
+      }
+
+      if (to < fromIndex) {
+        notAllowEnd += 1;
+      }
+
+      if (to > notAllowStart && to < notAllowEnd) {
+        to = notAllowEnd;
+      }
+    }
+  }
+
+  for (var gridIndex = this._hosts.length; --gridIndex >= 0;) {
+    var host = this._hosts[gridIndex];
+    host.moveColumn(fromIndex, to);
+  } //remove previous group apply to column
+
+
+  var colId = this.getColumnId(to);
+  var previousGroup = this._childToParent[colId];
+
+  if (previousGroup) {
+    var previousGroupChild = this.getGroupChildren(previousGroup);
+    previousGroupChild.splice(previousGroupChild.indexOf(colId), 1);
+    this.setGroupChildren(previousGroup, previousGroupChild);
+  } //apply new group
+
+
+  var children = this.getGroupChildren(groupId);
+
+  if (children.indexOf(colId) == -1) {
+    if (colId) {
+      children.push(colId);
+    }
+  }
+
+  this.setGroupChildren(groupId, children);
+
+  this._requestApplyGrouping();
+};
+/** @public
+* @param {number|string} columnIndex //Column index or id that should be moved
+* @param {string} groupId
+*/
+
+
+ColumnGroupingPlugin.prototype.setColumnParent = function (columnIndex, groupId) {
+  var api = this.getGridApi();
+
+  if (!api) {
+    return;
+  }
+
+  var grid = this._hosts[0];
+  var colCount = grid.getColumnCount();
+  this.moveColumnIntoGroup(columnIndex, colCount, groupId);
+};
 
 export default ColumnGroupingPlugin;
 export { ColumnGroupingPlugin, ColumnGroupingPlugin as ColumnGrouping, ColumnGroupingPlugin as ColumnGroupingExtension };

package/lib/tr-grid-column-resizing/es6/ColumnResizing.d.ts

@@ -50,11 +50,11 @@ declare class ColumnResizingPlugin extends GridPlugin {
 
     public setAllColumnWidths(colWidth: number, scalability?: boolean): boolean;
 
-    public getColumnWidths(): (number)[];
+    public getColumnWidths(): (number)[]|null;
 
     public resetAllColumnsToDefaultWidth(): boolean;
 
-    public getColumnSizeStates(): (any)[];
+    public getColumnSizeStates(): (any)[]|null;
 
     public setColumnSizeStates(columns: (any)[]|string): void;
 

package/lib/tr-grid-column-resizing/es6/ColumnResizing.js

@@ -1009,5 +1009,6 @@ ColumnResizingPlugin.prototype._getResizingCols = function (clickIndex) {
 };
 
 
+
 export default ColumnResizingPlugin;
 export { ColumnResizingPlugin, ColumnResizingPlugin as ColumnResizing, ColumnResizingPlugin as ColumnResizingExtension };

package/lib/tr-grid-column-selection/es6/ColumnSelection.js

@@ -159,16 +159,15 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
     } else {
       ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
 
-      ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded);
+      ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
     }
   }
 };
 /** @private
-* @param {Object} colors
 */
 
 
-ColumnSelectionPlugin.prototype._onThemeLoaded = function (colors) {
+ColumnSelectionPlugin.prototype._onThemeLoaded = function () {
   if (!ColumnSelectionPlugin._styles) {
     var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
     ]];