@refinitiv-ui/efx-grid 6.0.0 → 6.0.3

package/lib/index.js

@@ -2,34 +2,34 @@
 import {DataGenerator} from "./tr-grid-util/es6/jet/DataGenerator.js"
 
 // Extensions
-import {RowSegmentingExtension} from "./row-segmenting/es6/RowSegmenting.js";
-import {StatisticsRowExtension} from "./statistics-row/es6/StatisticsRow.js";
-import {ZoomExtension} from "./zoom/es6/Zoom.js";
-import {AutoTooltipExtension} from "./tr-grid-auto-tooltip/es6/AutoTooltip.js";
-import {CellSelectionExtension} from "./tr-grid-cell-selection/es6/CellSelection.js";
-import {CheckboxExtension} from "./tr-grid-checkbox/es6/Checkbox.js";
-import {ColumnFitterExtension} from "./tr-grid-column-fitter/es6/ColumnFitter.js";
-import {ColumnFormattingExtension} from "./tr-grid-column-formatting/es6/ColumnFormatting.js";
-import {ColumnGroupingExtension} from "./tr-grid-column-grouping/es6/ColumnGrouping.js";
-import {ColumnResizingExtension} from "./tr-grid-column-resizing/es6/ColumnResizing.js";
-import {ColumnSelectionExtension} from "./tr-grid-column-selection/es6/ColumnSelection.js";
-import {ColumnStackExtension} from "./tr-grid-column-stack/es6/ColumnStack.js";
-import {ConditionalColoringExtension} from "./tr-grid-conditional-coloring/es6/ConditionalColoring.js";
-import {ContentWrapExtension} from "./tr-grid-content-wrap/es6/ContentWrap.js";
-import {ContextMenuExtension} from "./tr-grid-contextmenu/es6/ContextMenu.js";
-import {FilterInputExtension} from "./tr-grid-filter-input/es6/FilterInput.js";
-import {HeatMapExtension} from "./tr-grid-heat-map/es6/HeatMap.js";
-import {InCellEditingExtension} from "./tr-grid-in-cell-editing/es6/InCellEditing.js";
-import {PaginationExtension} from "./tr-grid-pagination/es6/Pagination.js";
-import {PercentBarExtension} from "./tr-grid-percent-bar/es6/PercentBar.js";
-import {RangeBarExtension} from "./tr-grid-range-bar/es6/RangeBar.js";
-import {RowDraggingExtension} from "./tr-grid-row-dragging/es6/RowDragging.js";
-import {RowFilteringExtension} from "./tr-grid-row-filtering/es6/RowFiltering.js";
-import {RowGroupingExtension} from "./tr-grid-row-grouping/es6/RowGrouping.js";
-import {RowSelectionExtension} from "./tr-grid-row-selection/es6/RowSelection.js";
-import {RowColoringExtension} from "./tr-grid-rowcoloring/es6/RowColoring.js";
-import {TextFormattingExtension} from "./tr-grid-textformatting/es6/TextFormatting.js";
-import {TitleWrapExtension} from "./tr-grid-titlewrap/es6/TitleWrap.js";
+import {RowSegmenting} from "./row-segmenting/es6/RowSegmenting.js";
+import {StatisticsRow} from "./statistics-row/es6/StatisticsRow.js";
+import {Zoom} from "./zoom/es6/Zoom.js";
+import {AutoTooltip} from "./tr-grid-auto-tooltip/es6/AutoTooltip.js";
+import {CellSelection} from "./tr-grid-cell-selection/es6/CellSelection.js";
+import {Checkbox} from "./tr-grid-checkbox/es6/Checkbox.js";
+import {ColumnFitter} from "./tr-grid-column-fitter/es6/ColumnFitter.js";
+import {ColumnFormatting} from "./tr-grid-column-formatting/es6/ColumnFormatting.js";
+import {ColumnGrouping} from "./tr-grid-column-grouping/es6/ColumnGrouping.js";
+import {ColumnResizing} from "./tr-grid-column-resizing/es6/ColumnResizing.js";
+import {ColumnSelection} from "./tr-grid-column-selection/es6/ColumnSelection.js";
+import {ColumnStack} from "./tr-grid-column-stack/es6/ColumnStack.js";
+import {ConditionalColoring} from "./tr-grid-conditional-coloring/es6/ConditionalColoring.js";
+import {ContentWrap} from "./tr-grid-content-wrap/es6/ContentWrap.js";
+import {ContextMenu} from "./tr-grid-contextmenu/es6/ContextMenu.js";
+import {FilterInput} from "./tr-grid-filter-input/es6/FilterInput.js";
+import {HeatMap} from "./tr-grid-heat-map/es6/HeatMap.js";
+import {InCellEditing} from "./tr-grid-in-cell-editing/es6/InCellEditing.js";
+import {Pagination} from "./tr-grid-pagination/es6/Pagination.js";
+import {PercentBar} from "./tr-grid-percent-bar/es6/PercentBar.js";
+import {RangeBar} from "./tr-grid-range-bar/es6/RangeBar.js";
+import {RowDragging} from "./tr-grid-row-dragging/es6/RowDragging.js";
+import {RowFiltering} from "./tr-grid-row-filtering/es6/RowFiltering.js";
+import {RowGrouping} from "./tr-grid-row-grouping/es6/RowGrouping.js";
+import {RowSelection} from "./tr-grid-row-selection/es6/RowSelection.js";
+import {RowColoring} from "./tr-grid-rowcoloring/es6/RowColoring.js";
+import {TextFormatting} from "./tr-grid-textformatting/es6/TextFormatting.js";
+import {TitleWrap} from "./tr-grid-titlewrap/es6/TitleWrap.js";
 
 // Formatters
 import {EFButtonFormatter} from "./formatters/es6/EFButtonFormatter.js";
@@ -53,34 +53,34 @@ import {TextFormatter} from "./formatters/es6/TextFormatter.js";
 
 export {
 	DataGenerator,
-	RowSegmentingExtension,
-	StatisticsRowExtension,
-	ZoomExtension,
-	AutoTooltipExtension,
-	CellSelectionExtension,
-	CheckboxExtension,
-	ColumnFitterExtension,
-	ColumnFormattingExtension,
-	ColumnGroupingExtension,
-	ColumnResizingExtension,
-	ColumnSelectionExtension,
-	ColumnStackExtension,
-	ConditionalColoringExtension,
-	ContentWrapExtension,
-	ContextMenuExtension,
-	FilterInputExtension,
-	HeatMapExtension,
-	InCellEditingExtension,
-	PaginationExtension,
-	PercentBarExtension,
-	RangeBarExtension,
-	RowDraggingExtension,
-	RowFilteringExtension,
-	RowGroupingExtension,
-	RowSelectionExtension,
-	RowColoringExtension,
-	TextFormattingExtension,
-	TitleWrapExtension,
+	RowSegmenting,
+	StatisticsRow,
+	Zoom,
+	AutoTooltip,
+	CellSelection,
+	Checkbox,
+	ColumnFitter,
+	ColumnFormatting,
+	ColumnGrouping,
+	ColumnResizing,
+	ColumnSelection,
+	ColumnStack,
+	ConditionalColoring,
+	ContentWrap,
+	ContextMenu,
+	FilterInput,
+	HeatMap,
+	InCellEditing,
+	Pagination,
+	PercentBar,
+	RangeBar,
+	RowDragging,
+	RowFiltering,
+	RowGrouping,
+	RowSelection,
+	RowColoring,
+	TextFormatting,
+	TitleWrap,
 	EFButtonFormatter,
 	EFCheckboxFormatter,
 	EFComboBoxFormatter,

package/lib/row-segmenting/es6/RowSegmenting.d.ts

@@ -12,6 +12,7 @@ declare namespace RowSegmentingPlugin {
         spanning?: boolean,
         colorTag?: boolean,
         clicked?: ((...params: any[]) => any),
+        headerMenuClicked?: ((...params: any[]) => any),
         segmentSeparatorBinding?: ((...params: any[]) => any),
         nonSegmentSeparatorBinding?: ((...params: any[]) => any),
         sortingLogic?: ((...params: any[]) => any)

package/lib/row-segmenting/es6/RowSegmenting.js

@@ -9,6 +9,7 @@ import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
 * @property {boolean=} spanning=true If disabled, segment separator rows will not be spanned/stretched across multiple cells
 * @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
 * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
+* @property {Function=} headerMenuClicked=null Event handler when user clicks on menu icon. The menu icon will be displayed if spanning option is true.
 * @property {Function=} segmentSeparatorBinding=null Logic that will be executed on each segment separator row
 * @property {Function=} nonSegmentSeparatorBinding=null Logic that will be executed for all non segment separator row
 * @property {Function=} sortingLogic=null Logic to be used by sortSegments method
@@ -34,7 +35,6 @@ var RowSegmentingPlugin = function (options) {
 	t._rtSortingLogic = t._rtSortingLogic.bind(t);
 
 	t._hosts = [];
-	t._indentSize = [0, 22, 37, 52, 67];
 	this.config({ rowSegmenting: options });
 };
 Ext.inherits(RowSegmentingPlugin, GridPlugin);
@@ -51,10 +51,14 @@ RowSegmentingPlugin.prototype._userSortingLogic = null;
 * @private
 */
 RowSegmentingPlugin.prototype._spanning = true;
-/** @type {!Array.<number>}
+/** @type {Array.<number>}
 * @private
 */
-RowSegmentingPlugin.prototype._indentSize = null;
+RowSegmentingPlugin.prototype._indentSizes = null;
+/** @type {number}
+* @private
+*/
+RowSegmentingPlugin.prototype._arrowSize = 9;
 /** @type {Object}
 * @private
 */
@@ -77,12 +81,8 @@ RowSegmentingPlugin.prototype.getName = function () {
 * @param {Object} config
 */
 RowSegmentingPlugin.prototype.beforeInit = function(elem, config) {
-	// Set default indentSize here
 	if (ElfUtil.isHaloTheme()) {
-		// only for halo theme
-		this._indentSize = [0, 30, 50, 70, 90];
-	} else {
-		this._indentSize = [0, 22, 37, 52, 67];
+		this._arrowSize = 18;
 	}
 };
 
@@ -106,6 +106,11 @@ RowSegmentingPlugin.prototype.initialize = function (host, options) {
 	var enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
 	RowPainter.disableColorTag(host, enabled === false);
 	RowPainter.applyGroupingStyles(host);
+	host.addClass("folder-disabled"); // Mouse cursor will be pointer when hovering at header rows
+
+	enabled = this._headerMenuClicked;
+	RowPainter.enableHeaderMenu(host, enabled ? true : false);
+
 	this._applyInitialSegments();
 };
 /** @public
@@ -136,6 +141,9 @@ RowSegmentingPlugin.prototype.config = function (options) {
 	if (typeof option.sortingLogic === "function") {
 		this._userSortingLogic = option.sortingLogic;
 	}
+	if (typeof option.headerMenuClicked === "function") {
+		this._headerMenuClicked = option.headerMenuClicked;
+	}
 	if(option.spanning != null) {
 		this._spanning = option.spanning ? true : false;
 	}
@@ -148,7 +156,9 @@ RowSegmentingPlugin.prototype.config = function (options) {
 		clickableCell: false,
 		headerSpanning: this._spanning,
 		footerSpanning: false,
-		onCellClicked: this._onArrowClick
+		onCellClicked: this._onArrowClick,
+		headerMenuClicked: this._headerMenuClicked,
+		segmentMode: true
 	});
 	if (option.colorTag != null) {
 		this._colorTag = option.colorTag;
@@ -298,7 +308,7 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 		arg.collapsedSegment = arg.collapsed = segmentSeparator ? dv.isSegmentCollapsed(rowId) : false;
 		var indentLevel = 0;
 		if (segmentSeparator) {
-			arg.indentSize = this._indentSize[indentLevel];
+			arg.indentSize = this._getIndentSize(indentLevel, true);
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch("segmentSeparatorBinding", arg);
 		} else {
@@ -309,7 +319,7 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 			} else {
 				arg.nonGroupRow = true;
 			}
-			arg.indentSize = this._indentSize[indentLevel];
+			arg.indentSize = this._getIndentSize(indentLevel, false);
 			rowPainter.removeHeaderStyle(arg.section, arg.colIndex, r);
 			rowPainter.applyRowStyle(arg);
 			this._dispatch("nonSegmentSeparatorBinding", arg);
@@ -317,6 +327,27 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 	}
 };
 
+/** @private
+* @param {number} indentLevel
+* @param {boolean} groupRow
+* @return {number}
+*/
+RowSegmentingPlugin.prototype._getIndentSize = function (indentLevel, groupRow) {
+	var indentSize = 0;
+	if(this._indentSizes) {
+		indentSize = this._indentSizes[0];
+		if(indentLevel > 0) {
+			var indentLimit = this._indentSizes.length;
+			indentSize = indentLevel < indentLimit ? this._indentSizes[indentLevel] : this._indentSizes[indentLimit - 1];
+		}
+	} else if(indentLevel > 0) {
+		indentSize = 8 + indentLevel * 4; // 8 is default cell padding
+		if(!groupRow) {
+			indentSize += this._arrowSize;
+		}
+	}
+	return indentSize;
+};
 /** @private
 * @param {MouseEvent} e
 */
@@ -469,7 +500,7 @@ RowSegmentingPlugin.prototype.setSegmentCollapsingLogic = function(func) {
 RowSegmentingPlugin.prototype.fillSegment = function(segmentRef) {
 	var dv = this._getDataView();
 	if(dv) {
-		dv.fillSegment(this._toRowId(segmentRef));
+		dv.fillSegment(segmentRef);
 	}
 };
 /** Remove all existing segment children in each segment and fill the segments with all contnet rows before the next segment separator