@refinitiv-ui/efx-grid 6.0.4 → 6.0.6

package/lib/tr-grid-util/es6/RowPainter.js

@@ -2,56 +2,102 @@ import { injectCss, prettifyCss } from "./Util.js";
 import { ExpanderIcon } from "./ExpanderIcon.js";
 import { Icon } from "./Icon.js";
 
+/** @typedef {Object} RowPainter~Options
+* @property {boolean} clickableCell
+* @property {boolean=} headerSpanning
+* @property {boolean=} footerSpanning
+* @property {Function=} onCellClicked
+* @property {Function=} headerMenuClicked
+* @property {boolean=} segmentMode
+*/
+
+/** @typedef {Object} RowPainter~RenderingOptions
+* @property {number} colIndex
+* @property {number} rowIndex
+* @property {*} cell Cell instance
+* @property {*} section Section instance
+* @property {boolean=} footerRow
+* @property {number} checkboxColumnIndex Exception index for clearing content
+* @property {boolean=} collapsed
+* @property {boolean=} hiddenArrow
+* @property {string=} groupId Text for default content
+* @property {number=} groupLevel
+* @property {boolean=} nonGroupRow
+* @property {string=} colorTagClass CSS class for custom coloring
+* @property {number=} indentSize
+*/
+
 /**
 * @constructor
-* @param {Object} options
+* @param {RowPainter~Options=} options
 */
 var RowPainter = function(options) {
-	this._clickableCell = options.clickableCell;
-	this._headerSpanning = options.headerSpanning;
-	this._footerSpanning = options.footerSpanning;
-	this._onCellClicked = options.onCellClicked;
-	this._headerMenuClicked = options.headerMenuClicked;
 	this._menuIconClicked = this._menuIconClicked.bind(this);
-	this._segmentMode = options.segmentMode;
+
+	this.config(options);
 };
 
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._clickableCell = false;
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._headerSpanning = false;
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._footerSpanning = false;
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._segmentMode = false;
+
+/** @type {Function}
+* @private
+*/
+RowPainter.prototype._onCellClicked = null;
+/** @type {Function}
+* @private
+*/
+RowPainter.prototype._headerMenuClicked = null;
+
+
 /** @type {string}
 * @private
 */
 RowPainter._styles = prettifyCss([
-	".cell.folder", [
-		"text-align: left;"
-	],
-	".cell.folder:not(.closed), .cell.folder.main-group", [
+	".cell.folder.tr-stretched.main-group, .cell.folder.tr-stretched:not(.closed)", [
 		"font-weight: 600;"
 	],
 	".color-tag::before", [
 		"content: '';",
 		"display: block;",
 		"position: absolute;",
+		"left: -1px;",
+		"top: -1px;",
 		"width: 2px;",
-		"height: 100%;",
-		"left: 0;",
+		"height: calc(100% + 2px);",
 		"background-color: var(--grid-expanded-tag-bg-color);"
 	],
 	".color-tag.main-group::before", [
 		"top: 2px;",
 		"width: 4px;",
-		"height: calc(100% - 2px);"
+		"height: calc(100% - 1px);"
 	],
 	".color-tag.main-group.closed::before", [
 		"top: 2px;",
 		"width: 4px;",
-		"height: calc(100% - 5px);",
+		"height: calc(100% - 3px);",
 		"background-color: var(--grid-tag-bg-color);"
 	],
+	".color-tag.main-group.closed:hover::before", [
+		"background-color: var(--grid-expanded-tag-bg-color);"
+	],
 	".color-tag-disabled .color-tag::before", [
 		"content: unset;"
 	],
-	".cell.highlighted-row.color-tag::before", [
-		"background-color: var(--grid-expanded-tag-bg-color);"
-	],
 	".tr-grid .cell .floating-panel .menu-icon", [
 		"display: none;"
 	],
@@ -64,6 +110,10 @@ RowPainter._styles = prettifyCss([
 	".folder .menu-icon:hover", [
 		"color: var(--grid-row-menu-icon-hover-color);"
 	],
+	".tr-lg .cell.group-member", [
+		// "background-color: var(TODO);",
+		"border-top-style: dashed;"
+	],
 	":host", [
 		"--grid-tag-bg-color: #333333;",
 		"--grid-expanded-tag-bg-color: #4D4D4D;",
@@ -125,20 +175,30 @@ RowPainter.enableHeaderMenu = function(grid, enabled) {
 	}
 };
 
-/** @private
-* @param {Object} section ILayoutGrid
-* @param {number} fromColumnIndex
-* @param {number} toColumnIndex
-* @param {number} rowIndex
-* @param {number} checkboxColumnIndex
+/** @public
+* @param {RowPainter~Options=} options
 */
-RowPainter.prototype._clearCellContent = function(section, fromColumnIndex, toColumnIndex, rowIndex, checkboxColumnIndex) {
-	if(!this._segmentMode) {
-		for (var c = fromColumnIndex; c <= toColumnIndex; ++c) {
-			if (section.isColumnVisible(c) && c !== checkboxColumnIndex) {
-				section.getCell(c, rowIndex, false).setContent("");
-			}
-		}
+RowPainter.prototype.config = function(options) {
+	if(!options) {
+		return;
+	}
+	if(options.clickableCell != null) {
+		this._clickableCell = options.clickableCell ? true : false;
+	}
+	if(options.headerSpanning != null) {
+		this._headerSpanning = options.headerSpanning ? true : false;
+	}
+	if(options.footerSpanning != null) {
+		this._footerSpanning = options.footerSpanning ? true : false;
+	}
+	if(options.segmentMode != null) {
+		this._segmentMode = options.segmentMode ? true : false;
+	}
+	if(options.onCellClicked != null) { // TODO: Accept null value for clearing listener at runtime
+		this._onCellClicked = options.onCellClicked;
+	}
+	if(options.headerMenuClicked != null) {
+		this._headerMenuClicked = options.headerMenuClicked;
 	}
 };
 
@@ -148,39 +208,68 @@ RowPainter.prototype._clearCellContent = function(section, fromColumnIndex, toCo
 * @param {number} rowIndex
 */
 RowPainter.prototype.removeHeaderStyle = function(section, columnIndex, rowIndex) {
+	section.enableRowClass(rowIndex, "group-member", false); // TODO: Slow
 	section.enableRowClass(rowIndex, "header", false); // TODO: Slow
-	section.enableRowClass(rowIndex, "folder", false); // TODO: Slow
+
 	var cell = section.unstretchCell(columnIndex, rowIndex);
-	this._removeHeaderStyle(cell);
+	RowPainter._removeHeaderStyle(cell);
 	cell = section.getCell(columnIndex, rowIndex, false);
-	this._removeHeaderStyle(cell);
+	RowPainter._removeHeaderStyle(cell);
 };
 
+/** @public
+* @param {Object} section ILayoutGrid
+* @param {number} columnIndex
+* @param {number} rowIndex
+*/
+RowPainter.prototype.removeAllStyles = function(section, columnIndex, rowIndex) {
+	section.enableRowClass(rowIndex, "group-member", false); // TODO: Slow
+	section.enableRowClass(rowIndex, "header", false); // TODO: Slow
+
+	var cell = section.unstretchCell(columnIndex, rowIndex);
+	if(!RowPainter._removeHeaderStyle(cell)) {
+		RowPainter._removeContentStyle(cell);
+	}
+	cell = section.getCell(columnIndex, rowIndex, false);
+	if(!RowPainter._removeHeaderStyle(cell)) {
+		RowPainter._removeContentStyle(cell);
+	}
+};
 /** @private
 * @param {Object} cell Cell container
+* @return {boolean} Returns true if group header styles are removed
 */
-RowPainter.prototype._removeHeaderStyle = function(cell) {
-	if(!cell) {
-		return;
-	}
-
-	RowPainter._applyColorTagClass(cell, "");
+RowPainter._removeHeaderStyle = function(cell) {
+	if(cell) {
+		RowPainter._applyColorTagClass(cell, "");
 
-	if(cell._groupHeaderStyle) {
-		cell._groupHeaderStyle = false;
-		cell.removeClass("folder");
-		cell.removeClass("closed");
-		cell.removeClass("content-header");
+		if(cell._groupHeaderStyle) {
+			cell._groupHeaderStyle = false;
+			cell.removeClass("header");
+			cell.removeClass("folder");
+			cell.removeClass("closed");
+			cell.removeClass("content-header");
+			cell.removeClass("main-group");
+			RowPainter._removeContentStyle(cell);
+			cell.removeIcon();
+			cell.unlisten("click", this._onCellClicked);
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @param {Object} cell Cell container
+*/
+RowPainter._removeContentStyle = function(cell) {
+	if(cell) {
 		cell.removeClass("color-tag");
-		cell.removeClass("main-group");
 		cell.setStyle("paddingLeft", "");
-		cell.removeIcon();
-		cell.unlisten("click", this._onCellClicked);
 	}
 };
 
 /** @public
-* @param {Object} e
+* @param {RowPainter~RenderingOptions} e
 */
 RowPainter.prototype.applyHeaderStyle = function(e) {
 	var mainCol = e.colIndex;
@@ -188,58 +277,87 @@ RowPainter.prototype.applyHeaderStyle = function(e) {
 	var section = e.section;
 	var colCount = section.getColumnCount();
 	var footerRow = e.footerRow;
-	var stretching = footerRow ? this._footerSpanning : this._headerSpanning;
 	var checkboxColumnIndex = e.checkboxColumnIndex;
 	var cell = e.cell;
 
+	var stretching;
+	if(e.spanning != null) {
+		stretching = e.spanning;
+	} else {
+		stretching = footerRow ? this._footerSpanning : this._headerSpanning;
+	}
+
+	section.enableRowClass(e.rowIndex, "group-member", false);
 	if (stretching) {
 		cell = e.cell = section.stretchCell(mainCol, r, stretching, true); // No left stretching. Header background is covered by folder class
+
+		// Remove content from cells that are on left side of the stretched cell
+		this._clearCellContent(section, 0, mainCol, r, checkboxColumnIndex);
 	} else {
 		section.unstretchCell(mainCol, r);
 		section.enableRowClass(r, "header", true);
-		section.enableRowClass(r, "closed", e.collapsed ? true : false);
-		// Remove content from cell that appear on right side of mainCol
-		this._clearCellContent(section, mainCol + 1, colCount - 1, r, checkboxColumnIndex);
+		// Remove all content from the header row for rebinding
+		this._clearCellContent(section, 0, colCount, r, checkboxColumnIndex);
 	}
 	cell._groupHeaderStyle = true;
 
-	// Remove content from cell that appear on left side of mainCol
-	this._clearCellContent(section, 0, mainCol - 1, r, checkboxColumnIndex);
-
 	// Footer rows and some specific group levels contains no expander (arrow)
 	var newIcon = ExpanderIcon.renderOn(cell, e.hiddenArrow);
 	if (newIcon) {
 		newIcon.getElement().addEventListener("click", this._onCellClicked);
 	}
 
-	if (!footerRow) {
+	if (footerRow) {
+		if(stretching) {
+			cell.setContent("");
+		}
+		// TODO: Render color tag for footer rows
+	} else {
+		cell.enableClass("main-group", e.groupLevel === 1); // For color tag of root group header
+		cell.enableClass("closed", e.collapsed ? true : false);
+		cell.enableClass("header");
+		cell.enableClass("folder");
 		if (stretching) {
-			cell.addClass("folder"); // Stretched cell is in the cover-layer
-		} else {
-			section.enableRowClass(r, "folder", true); // Required by the fallback arrow from the CSS rules. TODO: Change this
+			if (this._headerMenuClicked) {
+				if (!cell._menuIcon) {
+					var icon = cell._menuIcon = Icon.create("more", "menu-icon");
+					icon.addEventListener("click", this._menuIconClicked);
+				}
+				cell.insertFloatingIcon(cell._menuIcon);
+			}
 		}
+
 		if (this._clickableCell) {
-			cell.listen("click", this._onCellClicked);
-		}
-		if (e.groupId) {
-			cell.setContent(e.groupId);
+			cell.listen("click", this._onCellClicked); // WARNING: content row share this same listener with this header cell
 		}
-		cell.enableClass("main-group", e.groupLevel === 1);
-		if (this._headerMenuClicked && stretching) {
-			if (!cell._menuIcon) {
-				var icon = cell._menuIcon = Icon.create("more", "menu-icon");
-				icon.addEventListener("click", this._menuIconClicked);
-			}
-			cell.insertFloatingIcon(cell._menuIcon);
+		if (!this._segmentMode) {
+			cell.setContent(e.groupId || "");
 		}
-	} else {
-		cell.setContent("");
 	}
-	cell.enableClass("closed", e.collapsed ? true : false);
 	cell.enableClass("color-tag", true);
 	RowPainter._applyColorTagClass(cell, e.colorTagClass);
 	cell.setStyle("paddingLeft", (e.indentSize > 0) ? e.indentSize + "px" : "");
 };
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} fromColumnIndex Inclusive
+* @param {number} toColumnIndex Exclusive
+* @param {number} rowIndex
+* @param {number} checkboxColumnIndex
+*/
+RowPainter.prototype._clearCellContent = function(section, fromColumnIndex, toColumnIndex, rowIndex, checkboxColumnIndex) {
+	if(this._segmentMode) {
+		return; // A group separator row has its own data row and does not need to be cleared
+	}
+	for (var c = fromColumnIndex; c < toColumnIndex; ++c) {
+		if (c !== checkboxColumnIndex) {
+			var cell = section.getCell(c, rowIndex, false);
+			if(cell) {
+				cell.setContent("");
+			}
+		}
+	}
+};
 
 /** @public
 * @param {Object} e
@@ -256,7 +374,6 @@ RowPainter.prototype.applyContentAsHeaderStyle = function (e) {
 		newIcon.getElement().addEventListener("click", this._onCellClicked);
 	}
 };
-
 /** @public
 * @param {Object} e
 */
@@ -264,8 +381,14 @@ RowPainter.prototype.applyRowStyle = function(e) {
 	var cell = e.cell;
 	var indentSize = e.indentSize;
 	cell.setStyle("paddingLeft", (indentSize > 0) ? indentSize + "px" : "");
-	cell.enableClass("color-tag", e.nonGroupRow ? false : true);
+	cell.enableClass("color-tag", !e.nonGroupRow);
+
 	RowPainter._applyColorTagClass(cell, e.colorTagClass);
+
+	var section = e.section;
+	if(section) {
+		section.enableRowClass(e.rowIndex, "group-member", !e.nonGroupRow);
+	}
 };
 
 /** @private

package/lib/tr-grid-util/es6/SubTable.d.ts

@@ -4,19 +4,19 @@ import { ElementWrapper } from "./ElementWrapper.js";
 
 declare class SubTable extends ElementWrapper {
 
-    constructor(opt_elem?: (Element|string));
+    constructor(opt_elem?: (Element|string)|null);
 
-    public insertRow(at?: number): Element|null;
+    public insertRow(at?: number|null): Element|null;
 
-    public addRows(count?: number): (Element)[];
+    public addRows(count?: number|null): (Element)[];
 
-    public removeRows(count?: number): void;
+    public removeRows(count?: number|null): void;
 
     public removeAllRows(): void;
 
     public setRowCount(val: number): void;
 
-    public setDefaultRowHeight(val?: (number|null)): void;
+    public setDefaultRowHeight(val?: (number|null)|null): void;
 
     public getColumnCount(): number;
 
@@ -48,27 +48,27 @@ declare class SubTable extends ElementWrapper {
 
     public toString(): string;
 
-    public getColumnIndex(e: Event): number;
+    public getColumnIndex(e: Event|null): number;
 
-    public getRowIndex(e: Event): number;
+    public getRowIndex(e: Event|null): number;
 
-    public getColumnLeft(colIndex: number, rowIndex?: number): number;
+    public getColumnLeft(colIndex: number, rowIndex?: number|null): number;
 
-    public getRowTop(rowRef: number|Element): number;
+    public getRowTop(rowRef: number|Element|null): number;
 
-    public getCellPosition(cell: Element, ret_obj?: any): any;
+    public getCellPosition(cell: Element|null, ret_obj?: any): any;
 
-    public setCellRenderer(func: ((...params: any[]) => any)): void;
+    public setCellRenderer(func: ((...params: any[]) => any)|null): void;
 
-    public cloak(elem: Element, opt_elementType?: string): void;
+    public cloak(elem: Element|null, opt_elementType?: string|null): void;
 
     public spanBlock(c1: number, c2: number, r1: number, r2: number): Element|null;
 
-    public static parseTableContent(tbl: Element): (string)[][]|null;
+    public static parseTableContent(tbl: Element|null): (string)[][]|null;
 
 }
 
-declare function tdElem(e: Event): number;
+declare function tdElem(e: Event|null): number;
 
 export default SubTable;
 export { SubTable };

package/lib/tr-grid-util/es6/Table.d.ts

@@ -5,7 +5,7 @@ import { SubTable } from "./SubTable.js";
 
 declare class Table extends ElementWrapper {
 
-    constructor(elem?: (Element|number), opt_colCount?: (number|any), opt_rowCount?: number);
+    constructor(elem?: (Element|number)|null, opt_colCount?: (number|any)|null, opt_rowCount?: number|null);
 
     public getTableElement(): Element|null;
 
@@ -13,17 +13,17 @@ declare class Table extends ElementWrapper {
 
     public init(options: any): void;
 
-    public addColumns(opt_count?: number): (Element)[]|null;
+    public addColumns(opt_count?: number|null): (Element)[]|null;
 
-    public removeColumns(opt_count?: number): void;
+    public removeColumns(opt_count?: number|null): void;
 
     public removeAllColumns(): void;
 
     public setColumnCount(val: number): void;
 
-    public addRows(opt_count?: number): (Element)[];
+    public addRows(opt_count?: number|null): (Element)[];
 
-    public removeRows(opt_count?: number): void;
+    public removeRows(opt_count?: number|null): void;
 
     public removeAllRows(): void;
 
@@ -49,27 +49,27 @@ declare class Table extends ElementWrapper {
 
     public spanHorizontally(r: number, bool: boolean): Element|null;
 
-    public setColMinWidths(val: number|string|(string|number)[], opt_at?: number): void;
+    public setColMinWidths(val: number|string|(string|number)[]|null, opt_at?: number|null): void;
 
-    public setColumnWidths(val: number|string|(string|number)[], opt_at?: number): void;
+    public setColumnWidths(val: number|string|(string|number)[]|null, opt_at?: number|null): void;
 
-    public setColBackgroundColors(val: string|(string)[], opt_at?: number): void;
+    public setColBackgroundColors(val: string|(string)[]|null, opt_at?: number|null): void;
 
-    public setColBGColors(val: string|(string)[], opt_at?: number): void;
+    public setColBGColors(val: string|(string)[]|null, opt_at?: number|null): void;
 
-    public setColBorders(val: number|string|(number|string)[], opt_at?: number): void;
+    public setColBorders(val: number|string|(number|string)[]|null, opt_at?: number|null): void;
 
     public setSize(width: number, height: number): void;
 
     public setCellSize(defaultWidth: number, defaultHeight: number): void;
 
-    public setDefaultColumnWidth(val?: (number|null)): void;
+    public setDefaultColumnWidth(val?: (number|null)|null): void;
 
-    public setDefaultRowHeight(val?: (number|null)): void;
+    public setDefaultRowHeight(val?: (number|null)|null): void;
 
     public distributeColumnWidth(): void;
 
-    public log(opt_rowLimit?: number): void;
+    public log(opt_rowLimit?: number|null): void;
 
     public getTextContents(): (string)[][];
 
@@ -81,37 +81,37 @@ declare class Table extends ElementWrapper {
 
     public getTableTextContent(): string;
 
-    public fixateTableWidth(opt_bool?: boolean): void;
+    public fixateTableWidth(opt_bool?: boolean|null): void;
 
-    public loosenTableWidth(opt_bool?: boolean): void;
+    public loosenTableWidth(opt_bool?: boolean|null): void;
 
-    public addHeaderRows(opt_count?: number): (Element)[];
+    public addHeaderRows(opt_count?: number|null): (Element)[];
 
     public getHeaderCell(c: number, r: number): Element|null;
 
     public getAllHeaderCells(): (Element)[];
 
-    public removeHeaderRows(opt_count?: number): void;
+    public removeHeaderRows(opt_count?: number|null): void;
 
-    public addFooterRows(opt_count?: number): (Element)[];
+    public addFooterRows(opt_count?: number|null): (Element)[];
 
     public getFooterCell(c: number, r: number): Element|null;
 
     public getAllFooterCells(): (Element)[];
 
-    public removeFooterRows(opt_count?: number): void;
+    public removeFooterRows(opt_count?: number|null): void;
 
-    public getColumnIndex(e: Event): number;
+    public getColumnIndex(e: Event|null): number;
 
-    public getRowIndex(e: Event): number;
+    public getRowIndex(e: Event|null): number;
 
-    public getColumnLeft(colIndex: number, rowIndex?: number): number;
+    public getColumnLeft(colIndex: number, rowIndex?: number|null): number;
 
-    public getRowTop(rowRef: number|Element): number;
+    public getRowTop(rowRef: number|Element|null): number;
 
-    public getCellPosition(cell: Element, ret_obj?: any): any;
+    public getCellPosition(cell: Element|null, ret_obj?: any): any;
 
-    public cloak(tblElem: Element): void;
+    public cloak(tblElem: Element|null): void;
 
     public getBody(): SubTable|null;
 

package/lib/tr-grid-util/es6/TextHighlighter.d.ts

@@ -12,7 +12,7 @@ declare namespace TextHighlighter {
 
 }
 
-declare function score(haystack: string, needle: string|RegExp, caseSensitive?: (boolean|number)): (string)[];
+declare function score(haystack: string, needle: string|RegExp|null, caseSensitive?: (boolean|number)|null): (string)[];
 
 export default TextHighlighter;
 export {TextHighlighter};

package/lib/tr-grid-util/es6/Timer.d.ts

@@ -2,7 +2,7 @@
 
 declare class Timer {
 
-    constructor(duration: number, func?: ((...params: any[]) => any), ctx?: any);
+    constructor(duration: number, func?: ((...params: any[]) => any)|null, ctx?: any);
 
     public start(): void;
 

package/lib/tr-grid-util/es6/TouchProxy.d.ts

@@ -4,27 +4,27 @@ import {EventDispatcher} from "./EventDispatcher.js";
 declare namespace TouchProxy {
 
     type Options = {
-        useTouchMove?: boolean,
-        preventDefault?: boolean
+        useTouchMove?: boolean|null,
+        preventDefault?: boolean|null
     };
 
 }
 
 declare class TouchProxy extends EventDispatcher {
 
-    constructor(elem?: Element, options?: (boolean|any));
+    constructor(elem?: Element|null, options?: (boolean|any)|null);
 
     public static readonly passive: EventListenerOptions;
 
     public getElement(): Element|null;
 
-    public setElement(elem?: Element): void;
+    public setElement(elem?: Element|null): void;
 
-    public applyTrait(elem: Element): void;
+    public applyTrait(elem: Element|null): void;
 
     public dispose(): void;
 
-    public addTouchListeners(touchStartFunc?: ((...params: any[]) => any), touchEndFunc?: ((...params: any[]) => any), touchMoveFunc?: ((...params: any[]) => any)): void;
+    public addTouchListeners(touchStartFunc?: ((...params: any[]) => any)|null, touchEndFunc?: ((...params: any[]) => any)|null, touchMoveFunc?: ((...params: any[]) => any)|null): void;
 
     public removeTouchListeners(): void;
 
@@ -32,13 +32,13 @@ declare class TouchProxy extends EventDispatcher {
 
     public detachTouchMoveEvent(): void;
 
-    public attachTouchEvents(touchMove?: boolean): void;
+    public attachTouchEvents(touchMove?: boolean|null): void;
 
     public detachTouchEvents(): void;
 
-    public static getButtonType(e: Event): number;
+    public static getButtonType(e: Event|null): number;
 
-    public static getPosition(e: Event|any, obj?: any): any;
+    public static getPosition(e: Event|any|null, obj?: any): any;
 
 }