@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,448 @@
+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
+* @property {*} content Content to be rendered on the first cell. If null or undefined value is given, no content will be changed.
+*/
+
+/**
+* @constructor
+* @param {RowPainter~Options=} options
+*/
+let RowPainter = function(options) {
+	this._menuIconClicked = this._menuIconClicked.bind(this);
+
+	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.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: calc(100% + 2px);",
+		"background-color: var(--grid-expanded-tag-bg-color);"
+	],
+	".color-tag.main-group::before", [
+		"top: 2px;",
+		"width: 4px;",
+		"height: calc(100% - 1px);"
+	],
+	".color-tag.main-group.closed::before", [
+		"top: 2px;",
+		"width: 4px;",
+		"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;"
+	],
+	".tr-grid .cell .floating-panel .menu-icon", [
+		"display: none;"
+	],
+	".tr-grid.row-menu-enabled .cell:hover .menu-icon", [
+		"display: inline-block;"
+	],
+	".folder .menu-icon", [
+		"color: var(--grid-row-menu-icon-color);"
+	],
+	".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;",
+		"--grid-row-menu-icon-color: #CCCCCC;",
+		"--grid-row-menu-icon-hover-color: #FFFFFF;"
+	],
+	".tr-grid.expander-disabled .expander", [
+		"cursor: default;"
+	],
+	".tr-grid.folder-disabled .cell.folder", [
+		"cursor: default;"
+	],
+	".tr-grid .expander", [
+		"cursor: pointer;",
+		"display: inline-block;" // For transformation
+	],
+	".tr-grid .folder .expander:before", [
+		"content: none !important;" // Prevent deprecated styling
+	],
+	".tr-grid .fallback-arrow", [
+		"vertical-align: middle;",
+		"font-size: 7px;",
+		"line-height: 1;",
+		"display: inline-block;", // For transformation
+		"transform: scaleX(1.5);",
+		"font-family: Arial;"
+	],
+	".tr-grid .expander.closed", [
+		"transform: rotate(-90deg);"
+	],
+	".tr-grid .cell.closed .expander", [
+		"transform: rotate(-90deg);"
+	],
+	".tr-grid .tr-lg .cell.folder.content-header", [ // Used for header row in contentAsHeader mode, espectially with solar theme
+	  "background-color: inherit;"
+	]
+]);
+
+/** @private
+* @param {Object} cell
+* @param {string=} className
+*/
+RowPainter._applyColorTagClass = function(cell, className) {
+	if (!cell) {
+		return;
+	}
+	let el = cell.getElement();
+	if (el) {
+		if (el._tagColoringClass !== className) {
+			if (el._tagColoringClass) {
+				el.classList.remove(el._tagColoringClass);
+				el._tagColoringClass = null;
+			}
+			if (className) {
+				el.classList.add(className);
+				el._tagColoringClass = className;
+			}
+		}
+	}
+};
+
+/** @public
+* @param {tr.Grid} grid
+*/
+RowPainter.applyGroupingStyles = function(grid) {
+	if (grid && !grid._groupingStyles) {
+		grid._groupingStyles = true; // Prevent loading the same style twice
+		injectCss(RowPainter._styles, grid.getElement());
+	}
+};
+
+/** @public
+* @param {tr.Grid} grid
+* @param {boolean=} disabled
+*/
+RowPainter.disableColorTag = function(grid, disabled) {
+	if (grid) {
+		grid.enableClass("color-tag-disabled", disabled !== false);
+	}
+};
+
+/** @public
+* @param {tr.Grid} grid
+* @param {boolean=} enabled
+*/
+RowPainter.enableHeaderMenu = function(grid, enabled) {
+	if (grid) {
+		grid.enableClass("row-menu-enabled", enabled ? true : false);
+	}
+};
+
+/** @public
+* @param {RowPainter~Options=} options
+*/
+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;
+	}
+};
+
+/** @public
+* @param {Object} section ILayoutGrid
+* @param {number} columnIndex
+* @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
+
+	let cell = section.unstretchCell(columnIndex, rowIndex);
+	RowPainter._removeHeaderStyle(cell);
+	cell = section.getCell(columnIndex, rowIndex, false);
+	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
+
+	let 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._removeHeaderStyle = function(cell) {
+	if(cell) {
+		RowPainter._applyColorTagClass(cell, "");
+
+		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.setStyle("paddingLeft", "");
+	}
+};
+
+/** @public
+* @param {RowPainter~RenderingOptions} e
+*/
+RowPainter.prototype.applyHeaderStyle = function(e) {
+	let mainCol = e.colIndex;
+	let r = e.rowIndex;
+	let section = e.section;
+	let colCount = section.getColumnCount();
+	let footerRow = e.footerRow;
+	let checkboxColumnIndex = e.checkboxColumnIndex;
+	let cell = e.cell;
+
+	let stretching;
+	if(e.spanning != null) {
+		stretching = e.spanning;
+	} else {
+		stretching = footerRow ? this._footerSpanning : this._headerSpanning;
+	}
+
+	section.enableRowClass(e.rowIndex, "group-member", false);
+	if (stretching) {
+		let stretchedCell = section.getStretchedCell(mainCol, r);
+		if(!stretchedCell) {
+			cell = e.cell = section.stretchCell(mainCol, r, stretching, true); // No left stretching. Header background is covered by folder class
+		} else {
+			cell = e.cell = stretchedCell;
+		}
+
+		// 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);
+		// Remove all content from the header row for rebinding
+		this._clearCellContent(section, 0, colCount, r, checkboxColumnIndex);
+	}
+	cell._groupHeaderStyle = true;
+
+	// Footer rows and some specific group levels contains no expander (arrow)
+	let newIcon = ExpanderIcon.renderOn(cell, e.hiddenArrow);
+	if (newIcon) {
+		newIcon.getElement().addEventListener("click", this._onCellClicked);
+	}
+
+	if (footerRow) {
+		// Clear the group header styles and retain only the "header" for footer style like a header. We do not currently have a design for the footer row.
+		cell.removeClass("main-group");
+		cell.removeClass("closed");
+		cell.removeClass("folder");
+		cell.unlisten("click", this._onCellClicked); // The footer rows should not be clickable
+		if(stretching) {
+			cell.setContent("");
+		}
+	} else {
+		cell.enableClass("main-group", e.groupLevel === 1); // For color tag of root group header
+		cell.enableClass("closed", e.collapsed ? true : false);
+		cell.enableClass("folder");
+		if (stretching) {
+			if (this._headerMenuClicked) {
+				if (!cell._menuIcon) {
+					let 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); // WARNING: content row share this same listener with this header cell
+		}
+		if (this._segmentMode) {
+			let content = e.content;
+			if(content != null) {
+				cell.setContent(content);
+			}
+		} else {
+			cell.setContent(e.groupId || "");
+		}
+	}
+	cell.enableClass("header");
+	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 (let c = fromColumnIndex; c < toColumnIndex; ++c) {
+		if (c !== checkboxColumnIndex) {
+			let cell = section.getCell(c, rowIndex, false);
+			if(cell) {
+				cell.setContent("");
+			}
+		}
+	}
+};
+
+/** @public
+* @param {Object} e
+* @param {boolean} collapsed
+*/
+RowPainter.prototype.applyContentAsHeaderStyle = function (e) {
+	let cell = e.cell;
+	cell._groupHeaderStyle = true;
+	cell.addClass("folder"); // Required by the fallback arrow from the CSS rules. TODO: Change this
+	cell.enableClass("content-header", true);
+	cell.enableClass("closed", e.collapsed);
+	let newIcon = ExpanderIcon.renderOn(cell, e.footerRow ? true : false);
+	if (newIcon) {
+		newIcon.getElement().addEventListener("click", this._onCellClicked);
+	}
+};
+/** @public
+* @param {Object} e
+*/
+RowPainter.prototype.applyRowStyle = function(e) {
+	let cell = e.cell;
+	let indentSize = e.indentSize;
+	cell.setStyle("paddingLeft", (indentSize > 0) ? indentSize + "px" : "");
+	cell.enableClass("color-tag", !e.nonGroupRow);
+
+	RowPainter._applyColorTagClass(cell, e.colorTagClass);
+
+	let section = e.section;
+	if(section) {
+		section.enableRowClass(e.rowIndex, "group-member", !e.nonGroupRow);
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RowPainter.prototype._menuIconClicked = function(e) {
+	e.stopPropagation();
+	this._headerMenuClicked(e);
+};
+
+export default RowPainter;
+export {RowPainter};

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

@@ -0,0 +1,78 @@
+import { Dom } from "./Dom.js";
+import { Ext } from "./Ext.js";
+import { ElementWrapper } from "./ElementWrapper.js";
+
+declare class SubTable extends ElementWrapper {
+
+    constructor(opt_elem?: (Element|string)|null);
+
+    public insertRow(at?: number|null): Element|null;
+
+    public addRows(count?: number|null): (Element)[];
+
+    public removeRows(count?: number|null): void;
+
+    public removeAllRows(): void;
+
+    public setRowCount(val: number): void;
+
+    public setDefaultRowHeight(val?: (number|null)|null): void;
+
+    public getColumnCount(): number;
+
+    public getRowCount(): number;
+
+    public getCell(c: number, r: number): Element|null;
+
+    public getCellsInColumn(c: number): (Element)[]|null;
+
+    public getCellsInRow(r: number): (Element)[]|null;
+
+    public getAllCells(): (Element)[];
+
+    public getAllRows(): (Element)[];
+
+    public getRows(): (Element)[];
+
+    public getRow(r: number): Element|null;
+
+    public getTextContents(): (string)[][];
+
+    public getCellTextContent(c: number, r: number): string;
+
+    public getColumnTextContent(c: number): string;
+
+    public getRowTextContent(r: number): string;
+
+    public getTableTextContent(): string;
+
+    public toString(): string;
+
+    public getColumnIndex(e: Event|null): number;
+
+    public getRowIndex(e: Event|null): number;
+
+    public getColumnLeft(colIndex: number, rowIndex?: number|null): number;
+
+    public getRowTop(rowRef: number|Element|null): number;
+
+    public getCellPosition(cell: Element|null, ret_obj?: any): any;
+
+    public setCellRenderer(func: ((...params: any[]) => any)|null): void;
+
+    public getCellRenderer(): ((...params: any[]) => any)|null;
+
+    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|null): (string)[][]|null;
+
+}
+
+declare function tdElem(e: Event|null): number;
+
+declare function trElem(colIndex: number, rowIndex?: number|null): number;
+
+export default SubTable;
+export { SubTable };