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

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

@@ -0,0 +1,592 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { GridPlugin, rowDefRowGetter } from "../../tr-grid-util/es6/GridPlugin.js";
+import { ExpanderIcon } from "../../tr-grid-util/es6/ExpanderIcon.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
+
+/** @typedef {Object} RowSegmentingPlugin~Options
+* @description The options can be specified by `rowSegmenting` property of the main grid's options
+* @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=} 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
+*/
+
+/** @callback RowSegmentingPlugin~SortingLogic
+* @description Comparer function for comparing the order of 2 segment separator rows. The function takes at least 2 parameters. <br> The function should return -1 if the first parameter should comes first, 1 for the other way, and 0 if they are equal.
+* @param {Object} rowDataA Row data of the segment separator row
+* @param {Object} rowDataB Row data of the segment separator row
+* @return {number}
+*/
+
+/** @constructor
+* @param {RowSegmentingPlugin~Options=} options
+* @extends {GridPlugin}
+*/
+var RowSegmentingPlugin = function (options) {
+	var t = this;
+	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
+	t._updateHeader = t._updateHeader.bind(t);
+	t._onArrowClick = t._onArrowClick.bind(t);
+	t._applyInitialSegments = t._applyInitialSegments.bind(t);
+	t._rtSortingLogic = t._rtSortingLogic.bind(t);
+
+	t._hosts = [];
+	t._indentSize = [0, 22, 37, 52, 67];
+	this.config({ rowSegmenting: options });
+};
+Ext.inherits(RowSegmentingPlugin, GridPlugin);
+
+/** @type {Array.<Object>}
+* @private
+*/
+RowSegmentingPlugin.prototype.initialSegments = null;
+/** @type {RowSegmentingPlugin~SortingLogic}
+* @private
+*/
+RowSegmentingPlugin.prototype._userSortingLogic = null;
+/** @type {boolean}
+* @private
+*/
+RowSegmentingPlugin.prototype._spanning = true;
+/** @type {!Array.<number>}
+* @private
+*/
+RowSegmentingPlugin.prototype._indentSize = null;
+/** @type {Object}
+* @private
+*/
+RowSegmentingPlugin.prototype._rowPainter = null;
+/** @type {boolean|null}
+* @private
+*/
+RowSegmentingPlugin.prototype._colorTag = null;
+
+/** @public
+* @return {string}
+*/
+RowSegmentingPlugin.prototype.getName = function () {
+	return "RowSegmentingPlugin"; // Read Only
+};
+
+/** @public
+* @ignore
+* @param {Element} elem
+* @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];
+	}
+};
+
+/** @public
+* @param {Object} host core grid instance
+* @param {Object=} options
+*/
+RowSegmentingPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) {
+		return;
+	}
+
+	ExpanderIcon.loadExpanderStyles();
+	ExpanderIcon.injectExpanderStyles(host.getElement());
+
+	this._hosts.push(host);
+	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+
+	this.config(options);
+
+	var enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
+	RowPainter.disableColorTag(host, enabled === false);
+	RowPainter.applyGroupingStyles(host);
+	this._applyInitialSegments();
+};
+/** @public
+* @param {Object=} host core grid instance
+*/
+RowSegmentingPlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if (at < 0) {
+		return;
+	}
+	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+	this._hosts.splice(at, 1);
+	this._dispose();
+};
+
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+RowSegmentingPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	var option = options.rowSegmenting;
+	if (!option) { return; }
+
+	if (option.initialSegments != null) {
+		this._initialSegments = option.initialSegments;
+	}
+	if (typeof option.sortingLogic === "function") {
+		this._userSortingLogic = option.sortingLogic;
+	}
+	if(option.spanning != null) {
+		this._spanning = option.spanning ? true : false;
+	}
+
+	this.addListener(option, "clicked");
+	this.addListener(option, "segmentSeparatorBinding");
+	this.addListener(option, "nonSegmentSeparatorBinding");
+
+	this._rowPainter = new RowPainter({
+		clickableCell: false,
+		headerSpanning: this._spanning,
+		footerSpanning: false,
+		onCellClicked: this._onArrowClick
+	});
+	if (option.colorTag != null) {
+		this._colorTag = option.colorTag;
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+RowSegmentingPlugin.prototype.getConfigObject = function (gridOptions) {
+	var obj = gridOptions || {};
+
+	var extOptions = obj.rowSegmenting;
+	if(!extOptions) {
+		extOptions = obj.rowSegmenting = {};
+	}
+	if(this._initialSegments) {
+		extOptions.initialSegments = this._initialSegments;
+	}
+	if(!this._spanning) {
+		extOptions.spanning = false;
+	}
+	if(this._colorTag != null) {
+		extOptions.colorTag = this._colorTag;
+	}
+	return obj;
+};
+
+/** @private
+*/
+RowSegmentingPlugin.prototype._applyInitialSegments = function () {
+
+};
+
+/** @private
+* @param {Object} e
+*/
+RowSegmentingPlugin.prototype._onPostSectionDataBinding = function (e) {
+	this._updateHeader(
+		e.sectionSettings,
+		e.fromRowIndex,
+		e.toRowIndex - 1
+	);
+};
+
+/** @private
+* @param {Array.<Object>} segments
+*/
+RowSegmentingPlugin.prototype._addSegments = function (segments) {
+	// this.updateHeaders();
+};
+
+/** @public */
+RowSegmentingPlugin.prototype.updateHeaders = function () {
+	this._timerId = 0;
+	var host = this._hosts[0];
+	if (!host) {
+		return;
+	}
+	var settingList = host.getAllSectionSettings("content");
+	for (var i = settingList.length; --i >= 0;) {
+		this._updateHeader(settingList[i]);
+	}
+};
+
+/** @private
+* @param {Object} settings SectionSettings
+* @return {boolean}
+*/
+RowSegmentingPlugin.prototype._hasSegmentation = function (settings) {
+	if (settings && settings.getType() === "content") {
+		var dv = settings.getDataSource();
+		if (dv) {
+			if(dv.hasSegmentation()) {
+				dv._previouslyHasSegmentation = true; // Allow one more cycle to clean up styling
+				return true;
+			} else if(dv._previouslyHasSegmentation) {
+				dv._previouslyHasSegmentation = false;
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
+/** @public
+* @param {string|number} rowRef Row Id or row index
+* @return {string} parent row id of this segmentation. If the parent row id for this segmentation cannot be found, return ""
+*/
+RowSegmentingPlugin.prototype.getSegmentParentRowId = function (rowRef) {
+	var dv = this._getDataView();
+	if(dv) {
+		var rowId = "";
+		if(typeof rowRef === "number") {
+			rowId = dv.getRowId(rowRef); // WARNING: This is very slow
+		} else {
+			rowId = rowRef;
+		}
+		return dv.getSegmentParentRowId(rowId);
+	}
+	return "";
+};
+
+/** @private
+* @param {Object} settings SectionSettings
+* @param {number=} firstRowIndex
+* @param {number=} lastRowIndex INCLUSIVE
+*/
+RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex, lastRowIndex) {
+	if (!this._hasSegmentation(settings)) {
+		return;
+	}
+
+	var headerColumn = 0; // TODO: Header column is not always 0 as checkbox column can be added
+	var dv = settings.getDataSource();
+	var section = settings.getSection();
+	var fi = (firstRowIndex != null) ? firstRowIndex : section.getFirstIndexInView();
+	var li = (lastRowIndex != null) ? lastRowIndex : section.getLastIndexInView();
+
+	var arg = {};
+	arg.section = section;
+	arg.colIndex = headerColumn;
+	arg.groupLevel = 1;
+
+	var colCount = section.getColumnCount();
+	for (var c = 0; c < colCount; c++) {
+		if(this._getColumnOption(c, "isCheckboxColumn")) {
+			arg.checkboxColumnIndex = c;
+			break;
+		}
+	}
+
+	var rowPainter = this._rowPainter;
+	for (var r = fi; r <= li; r++) {
+		var cell = section.getCell(headerColumn, r, false); // Work only one row
+		if (!cell) { // There may be no header to be updated
+			continue;
+		}
+
+		arg.cell = cell;
+		arg.rowIndex = r;
+		arg.rowData = this._getRow(dv, r); // Support composite and rt-grid
+
+		var rowId = arg.rowId = dv.getRowId(r); // Slow
+		var segmentSeparator = arg.segmentSeparator = dv.isSegmentSeparator(rowId);
+		arg.collapsedSegment = arg.collapsed = segmentSeparator ? dv.isSegmentCollapsed(rowId) : false;
+		var indentLevel = 0;
+		if (segmentSeparator) {
+			arg.indentSize = this._indentSize[indentLevel];
+			rowPainter.applyHeaderStyle(arg);
+			this._dispatch("segmentSeparatorBinding", arg);
+		} else {
+			var parentId = this.getSegmentParentRowId(rowId);
+			if(parentId) {
+				indentLevel = 1; // TODO: Provide a way for segmenting multiple levels. Currently, just one level is supported.
+				arg.nonGroupRow = false;
+			} else {
+				arg.nonGroupRow = true;
+			}
+			arg.indentSize = this._indentSize[indentLevel];
+			rowPainter.removeHeaderStyle(arg.section, arg.colIndex, r);
+			rowPainter.applyRowStyle(arg);
+			this._dispatch("nonSegmentSeparatorBinding", arg);
+		}
+	}
+};
+
+/** @private
+* @param {MouseEvent} e
+*/
+RowSegmentingPlugin.prototype._onArrowClick = function (e) {
+	var host = this._hosts[0];
+	var info = host.getRelativePosition(e);
+	var cellElem = info.cell ? info.cell.getElement() : null;
+	if(!cellElem) {
+		return;
+	}
+
+	var rowIndex = info.rowIndex;
+	var collapsedSegment = this.isSegmentCollapsed(rowIndex); // current state
+	collapsedSegment = !collapsedSegment; // Toggle state
+
+	if (collapsedSegment) {
+		cellElem.classList.add("closed");
+		this.collapseSegment(rowIndex);
+	} else {
+		cellElem.classList.remove("closed");
+		this.expandSegment(rowIndex);
+	}
+	info.collapsedSegment = collapsedSegment;
+	this._dispatch("clicked", info);
+};
+
+/** @private
+* @return {Object} DataView instance
+*/
+RowSegmentingPlugin.prototype._getDataView = function () {
+	var host = this._hosts[0];
+	return host ? host.getDataSource() : null;
+};
+
+/** Set specified row as a segment separator
+* @public
+* @param {string|number} rowRef Row id or row index
+* @param {boolean=} enabled
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.setSegmentSeparator = function(rowRef, enabled) {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.setSegmentSeparator(rowRef, enabled);
+	}
+	return false;
+};
+/** Clear all segment separator rows
+* @public
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.unsetAllSegmentSeparators = function() {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.unsetAllSegmentSeparators();
+	}
+	return false;
+};
+/** Check if there is at least one segment separator in the data view
+* @public
+* @return {boolean}
+*/
+RowSegmentingPlugin.prototype.hasSegmentation = function() {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.hasSegmentation();
+	}
+	return false;
+};
+/** Check if the specified row is a segment separator
+* @public
+* @param {string|number} rowRef Row id or row index (not recommended for usage)
+* @return {boolean}
+*/
+RowSegmentingPlugin.prototype.isSegmentSeparator = function(rowRef) {
+	var dv = this._getDataView();
+	if(dv) {
+		var rowId = "";
+		if(typeof rowRef === "number") {
+			rowId = dv.getRowId(rowRef); // WARNING: This is very slow
+		} else {
+			rowId = rowRef;
+		}
+
+		return dv.isSegmentSeparator(rowId);
+	}
+	return false;
+};
+
+/** Hide all members in the segment
+* @public
+* @param {string|number} rowRef Row id or row index of the segment separator
+* @param {boolean=} collapsed
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.collapseSegment = function(rowRef, collapsed) {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.collapseSegment(rowRef, collapsed);
+	}
+	return false;
+};
+/** @public
+* @param {string|number} rowRef Row id or row index
+* @param {boolean=} expanded
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.expandSegment = function(rowRef, expanded) {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.expandSegment(rowRef, expanded);
+	}
+	return false;
+};
+/** @public
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.expandAllSegments = function() {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.expandAllSegments();
+	}
+	return false;
+};
+/** @public
+* @param {string|number} rowRef Row id or row index
+* @return {boolean} Return true if only the given row is a collapsed segment separator
+*/
+RowSegmentingPlugin.prototype.isSegmentCollapsed = function(rowRef) {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.isSegmentCollapsed(rowRef);
+	}
+	return false;
+};
+/** @public
+* @param {Function} func By default, all row members are hidden in a collapsed segment
+*/
+RowSegmentingPlugin.prototype.setSegmentCollapsingLogic = function(func) {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.setSegmentCollapsingLogic(func);
+	}
+};
+
+/** Remove existing segment children and fill the segments with all contnet rows before the next segment separator
+* @public
+* @param {string|number} segmentRef Row id or row index
+*/
+RowSegmentingPlugin.prototype.fillSegment = function(segmentRef) {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.fillSegment(this._toRowId(segmentRef));
+	}
+};
+/** Remove all existing segment children in each segment and fill the segments with all contnet rows before the next segment separator
+* @public
+*/
+RowSegmentingPlugin.prototype.fillSegments = function() {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.fillSegments();
+	}
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {string|number} rowRef Row id, row index
+*/
+RowSegmentingPlugin.prototype.addSegmentChild = function(segmentRef, rowRef) {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.addSegmentChild(segmentRef, rowRef);
+	}
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {Array.<string|number>} rowRefs Array of row ids or row indices.  If null is given, no child will be removed.
+*/
+RowSegmentingPlugin.prototype.addSegmentChildren = function(segmentRef, rowRefs) {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.addSegmentChildren(segmentRef, rowRefs);
+	}
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {string|number} rowRef Row id, row index
+*/
+RowSegmentingPlugin.prototype.removeSegmentChild = function(segmentRef, rowRef) {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.removeSegmentChild(segmentRef, rowRef);
+	}
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {Array.<string|number>} rowRefs Array of row ids or row indices
+*/
+RowSegmentingPlugin.prototype.removeSegmentChildren = function(segmentRef, rowRefs) {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.removeSegmentChildren(segmentRef, rowRefs);
+	}
+};
+/** @public
+*/
+RowSegmentingPlugin.prototype.removeAllSegmentChildren = function() {
+	var dv = this._getDataView();
+	if(dv) {
+		dv.removeAllSegmentChildren();
+	}
+};
+/** Get row ids of all segment separator
+* @public
+* @return {Array.<string>} Return null if there is no segment separator
+*/
+RowSegmentingPlugin.prototype.getSegmentIds = function() {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.getSegmentIds();
+	}
+	return null;
+};
+/** Get row ids of all children from the specified segment
+* @public
+* @param {string|number} segmentRef Row id or row index
+* @return {Array.<string>} Returns array of row ids. Returns null if there is no child or no segment separator found
+*/
+RowSegmentingPlugin.prototype.getSegmentChildIds = function(segmentRef) {
+	var dv = this._getDataView();
+	if(dv) {
+		return dv.getSegmentChildIds(segmentRef);
+	}
+	return null;
+};
+
+/** @public
+* @param {RowSegmentingPlugin~SortingLogic} sortFunction
+*/
+RowSegmentingPlugin.prototype.setSortingLogic = function (sortFunction) {
+	this._userSortingLogic = (typeof sortFunction === "function") ? sortFunction : null;
+};
+/** @public
+* @param {RowSegmentingPlugin~SortingLogic=} sortFunction
+*/
+RowSegmentingPlugin.prototype.sortSegments = function (sortFunction) {
+	if(sortFunction != null) {
+		this.setSortingLogic(sortFunction);
+	}
+	if (this._userSortingLogic) {
+		var dv = this._getDataView();
+		if (dv) {
+			var sortingLogic = this._realTimeGrid ? this._rtSortingLogic : this._userSortingLogic;
+			dv.sortSegments(sortingLogic);
+		}
+	}
+};
+/** @private
+* @param {Object} rowDataA
+* @param {Object} rowDataB
+* @return {number}
+*/
+RowSegmentingPlugin.prototype._rtSortingLogic = function (rowDataA, rowDataB) {
+	return this._userSortingLogic(
+		rowDefRowGetter(rowDataA),
+		rowDefRowGetter(rowDataB)
+	);
+};
+
+
+
+export default RowSegmentingPlugin;
+export { RowSegmentingPlugin, RowSegmentingPlugin as RowSegmenting, RowSegmentingPlugin as RowSegmentingExtension };

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

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

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

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