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

package/lib/tr-grid-contextmenu/es6/ContextMenu.js

@@ -0,0 +1,453 @@
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import Ext from "../../tr-grid-util/es6/Ext.js";
+import MenuEventAPI from "./MenuEventAPI.js";
+import PopupMenu from "./PopupMenu.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { rgb2Hex, num2Hex, hex2Num, blendColor, getContrastColor } from "../../tr-grid-util/es6/Color.js";
+
+/** @typedef {"header" | "content" | "footer" | "filterRow"} ContextMenuPlugin~Context
+* @description All available context types for the extension
+*/
+
+/** @typedef {Object} ContextMenuPlugin~Options
+* @description Available options describing `contextMenu` object specified in grid's option
+* @property {Object.<string, ContextMenuPlugin~MenuItem>} items
+* @property {ContextMenuPlugin~OnMenuEventCallback=} onMenu
+@ @property {Function=} contextmenu
+*/
+
+// TODO:: Are isVisible, isSeparator already deprecated?
+// I can't see any code relate to this attributes.
+
+/** @typedef {Object} ContextMenuPlugin~MenuItem
+* @property {string=} text Text to diplay at the item
+* @property {(string|number)=} value Value attached to the item
+* @property {boolean=} isDisabled If true the item will be disabled, default is false
+* @property {boolean=} isVisible If false the item will not be displayed, default is true
+* @property {boolean=} isSeparator If true the item is rendered as an item separator
+* @property {Array.<ContextMenuPlugin~MenuItem>=} items Array of sub-menu items
+* @property {Function=} renderer Callback function to do custom rendering of the item, see more information in later section
+* @property {ContextMenuPlugin~MenuItemEventCallback=} callback Menu item clicked handler function
+*/
+
+/** @typedef {Object} ContextMenuPlugin~MenuItemEvent
+* @property {boolean} altKey Flag to indicate if ALT key is pressed when the mouse is clicked
+* @property {Object} cell Cell object at the mouse clicked position
+* @property {number} colIndex Index number of the column that the mouse clicked on
+* @property {object} columnDef Column Definition of the column that the mouse clicked on
+* @property {ContextMenuPlugin~Context} context Area of the grid that the mouse clicked on
+* @property {boolean} ctrlKey Flag to indicate if CTRL key is pressed when the mouse is clicked
+* @property {ContextMenuPlugin~MenuItem} item The item the mouse is clicked on
+* @property {Object.<string, ContextMenuPlugin~MenuItem>} items Object reference to the menu items under items option
+* @property {MenuEventAPI} menu API for adding menu items to be rendered
+* @property {number} rowIndex Index number of the row the mouse clicked on
+* @property {Object} section Wrapper(ILayoutGrid) Object of the grid's area the mouse clicked on
+* @property {boolean} shiftKey Flag to indicate if SHIFT key is pressed when the mouse is clicked
+*/
+
+/** @callback ContextMenuPlugin~MenuItemEventCallback
+* @param {ContextMenuPlugin~MenuItemEvent} e
+*/
+
+/** @typedef {Object} ContextMenuPlugin~OnMenuEvent
+* @property {Object} cell Grid cell object at the mouse clicked position
+* @property {number} colIndex Index number of the column that the mouse clicked on
+* @property {string} field Field of the column that the mouse clicked on
+* @property {string} colId Column ID of the column that the mouse clicked on
+* @property {ContextMenuPlugin~Context} context Area of the grid that the mouse clicked on
+* @property {object} items Object reference to the menu items under items option
+* @property {MenuEventAPI} menu API for adding menu items to be rendered
+* @property {number} rowIndex Index number of the row the mouse clicked on
+* @property {Object} section Wraper(ILayoutGrid) Object of the grid's area the mouse clicked on
+* @property {Array.<number>} selectedColumns Array of selected indices. Return null, if no selection
+* @property {Array.<number>} selectedRows Array of selected indices. Return null, if no selection
+*/
+
+/** @callback ContextMenuPlugin~OnMenuEventCallback
+* @param {ContextMenuPlugin~OnMenuEvent} e
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {(ContextMenuPlugin~Options|ContextMenuPlugin~OnMenuEvent)=} options
+*/
+let ContextMenuPlugin = function (options) {
+	let t = this;
+	t._hosts = [];
+
+	t._onItemClicked = t._onItemClicked.bind(t);
+	t._rightClickedHandler = t._rightClickedHandler.bind(t);
+
+	t.config({ "contextMenu": options });
+};
+Ext.inherits(ContextMenuPlugin, GridPlugin);
+
+/** @type {Object}
+* @private
+*/
+ContextMenuPlugin.prototype._contextMap = {
+	"title": "header",
+	"content": "content",
+	"footer": "footer",
+	"filterRow": "filterRow"
+};
+
+/** @type {boolean}
+* @private
+*/
+ContextMenuPlugin.prototype._disabled = false;
+/** @type {Object}
+* @private
+*/
+ContextMenuPlugin.prototype._popup = null;
+/** @type {Object}
+* @private
+*/
+ContextMenuPlugin.prototype._mouseInfo = null;
+/** @type {Object}
+* @private
+*/
+ContextMenuPlugin.prototype._menuAPI = null;
+/** @type {Object}
+* @private
+*/
+ContextMenuPlugin.prototype._csp = null;
+/** @type {Object}
+* @private
+*/
+ContextMenuPlugin.prototype._rsp = null;
+/** @type {Object}
+* @private
+*/
+ContextMenuPlugin.prototype._contextMenu = null;
+
+/** @private
+* @param {Object} colors
+* @return {string}
+*/
+ContextMenuPlugin._styleCalculator = function (colors) {
+	let css = prettifyCss([
+		".tr-contextmenu", [
+			"outline: none;",
+			"box-sizing: border-box;",
+			"-moz-box-sizing: border-box;",
+			"border-style: solid;",
+			"border-width: 1px;",
+			"overflow: hidden;",
+			"padding: 1px;",
+			"margin: 0;",
+			"user-select: none;",
+			"list-style-type: none;",
+			"background-color: backgroundColor;",
+			"color: fontColor;",
+			"border-color: borderColor;"
+		],
+		".tr-contextmenu-item", [
+			"list-style: none;",
+			"padding: 3px 7px;",
+			"margin: 0;",
+			"vertical-align: middle;",
+			"white-space: nowrap;",
+			"cursor: pointer;",
+			"line-height: 20px;"
+		],
+		".tr-contextmenu-item[disabled]", [
+			"color: disabledColor;",
+			"cursor: default;"
+		],
+		".tr-contextmenu-item", [
+			"padding-right: 20px;"
+		],
+		".tr-contextmenu-item:hover:not([disabled])", [
+			"background-color: hoveredColor;"
+		],
+		".tr-contextmenu-popup", [
+			"box-shadow: 0 0 10px rgba(0,0,0,0.5);",
+			"z-index: 10;"
+		],
+		".tr-contextmenu-item.has-child", [
+			"position: relative;"
+		],
+		".tr-contextmenu-item.has-child:after", [
+			"box-sizing: border-box;",
+			"-moz-box-sizing: border-box;",
+			"display: inline-block;",
+			"width: 7px;",
+			"height: 7px;",
+			"border-style: solid;",
+			"border-width: 1px;",
+			"content: \"\";",
+			"-webkit-transform: rotate(45deg);",
+			"transform: rotate(45deg);",
+			"border-left-width: 0;",
+			"border-bottom-width: 0;",
+			"position: absolute;",
+			"right: 8px;",
+			"top: -webkit-calc(50% - 4px);",
+			"top: -moz-calc(50% - 4px);",
+			"top: calc(50% - 4px);",
+			"border-color: fontColor;"
+		],
+		".tr-contextmenu-item[data-type=\"separator\"]", [
+			"padding: 0;",
+			"border: none;",
+			"border-bottom-style: solid;",
+			"border-bottom-width: 1px;",
+			"border-bottom-color: disabledColor;"
+		]
+	]);
+
+	let hex = rgb2Hex(colors.tableBg);
+	let triplet = hex2Num(hex);
+	let bw = getContrastColor(triplet);
+	let blendRatio;
+	if (bw === "#000000") { // Light theme
+		blendRatio = 0.1;
+		css = css.replace(/disabledColor/g, "lightgrey");
+	} else { // Dark theme
+		blendRatio = 0.2;
+		css = css.replace(/disabledColor/g, "gray");
+	}
+	let hoverd = num2Hex(blendColor(hex, bw, blendRatio));
+	css = css.replace(/hoveredColor/g, hoverd);
+	css = css.replace(/backgroundColor/g, colors.tableBg);
+	css = css.replace(/fontColor/g, colors.tableText);
+	css = css.replace(/borderColor/g, colors.tableBorder);
+
+	return css;
+};
+
+/** @public
+* @return {string}
+*/
+ContextMenuPlugin.prototype.getName = function () {
+	return "ContextMenuPlugin"; // Read Only
+};
+
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+ContextMenuPlugin.prototype.initialize = function (host, options) {
+	let t = this;
+	if (t._hosts.indexOf(host) >= 0) { return; }
+	t._hosts.push(host);
+
+	host.listen("postSectionRender", t._onPostSectionRender);
+	host.listen("contextmenu", t._rightClickedHandler);
+
+	t.config(options);
+
+	t.applyStaticStyles(ContextMenuPlugin._styleCalculator);
+};
+
+/** @public
+* @param {Object} host core grid object
+*/
+ContextMenuPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if (at < 0) { return; }
+
+	host.unlisten("postSectionRender", this._onPostSectionRender);
+	host.unlisten("contextmenu", this._rightClickedHandler);
+
+	this._hosts.splice(at, 1);
+
+	this._dispose();
+
+	if(!this._hosts.length) {
+		this._csp = this._rsp = null;
+	}
+};
+
+/** @public
+* @param {ContextMenuPlugin.Options=} options
+*/
+ContextMenuPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let t = this;
+
+	let contextMenu = options["contextMenu"];
+
+	if (contextMenu == null) { return; }
+	else if (typeof contextMenu === "object") {
+		// TODO:: Check - Should _menuAPI created regardless contextMenu is object or not
+		t._menuAPI = new MenuEventAPI(contextMenu);
+		if (!contextMenu.items) { //Make sure the context menu option structure is there
+			contextMenu.items = {};
+		}
+	} else if (typeof contextMenu === "function") {
+		contextMenu = {
+			contextmenu: contextMenu // assign to contextmenu event
+		};
+	}
+
+	this.addListener(contextMenu, "contextmenu");
+
+	t._contextMenu = contextMenu;
+	t._disabled = !contextMenu;
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ContextMenuPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	obj.contextMenu = this._contextMenu;
+
+	return obj;
+};
+
+/** @public
+* @returns {Object}
+*/
+ContextMenuPlugin.prototype.getMenuModel = function () {
+	return this._contextMenu;
+};
+
+/** @public
+* @ignore
+* @returns {Object}
+*/
+ContextMenuPlugin.prototype._getEventHandlers = function() {
+	return {
+		contextmenu: this._rightClickedHandler
+	};
+};
+
+
+/** @private
+* @param {Object} e
+* @return {!Object} Mouse related information
+*/
+ContextMenuPlugin.prototype._configureMouseInfo = function (e) {
+	let host = this._hosts[0];
+	let mouseInfo = host.getRelativePosition(e);
+
+	// Supply possibly needed arguments for the event handler
+	mouseInfo.context = this._contextMap[mouseInfo.sectionType] || "";
+	let colIndex = mouseInfo.colIndex;
+	let columnDef = mouseInfo.columnDef = {};
+	mouseInfo.field = columnDef.field = this.getColumnField(colIndex);
+	mouseInfo.colId = columnDef.id = this.getColumnId(colIndex);
+
+	if (!this._csp) {
+		this._csp = this._getPlugin("ColumnSelectionPlugin");
+	}
+	if (!this._rsp) {
+		this._rsp = this._getPlugin("RowSelectionPlugin");
+	}
+
+	if (this._csp) {
+		let selCols = this._csp.getSelectedColumns();
+		mouseInfo.selectedColumns = selCols && selCols.length ? selCols : null;
+	} else {
+		mouseInfo.selectedColumns = null;
+	}
+	if (this._rsp) {
+		let selRows = this._rsp.getSelectedRows();
+		mouseInfo.selectedRows = selRows && selRows.length ? selRows : null;
+	} else {
+		mouseInfo.selectedRows = null;
+	}
+
+	mouseInfo.mouseEvent = e; // In case, user want some native event info
+	return mouseInfo;
+};
+
+/** @private
+* @param {Object} e
+*/
+ContextMenuPlugin.prototype._rightClickedHandler = function (e) {
+	let t = this;
+
+	let host = t._hosts[0];
+
+	if (!host) { return; }
+
+	let pos = host.getRelativePosition(e);
+	if(pos.rowIndex == null) {
+		return;
+	}
+
+	e.preventDefault(); // Prevent default system menu
+
+	let mouseInfo = t._mouseInfo = t._configureMouseInfo(e);
+	let contextMenu = t._contextMenu;
+
+	if (!contextMenu || t._disabled) { return; }
+
+	if (t._menuAPI) {
+		mouseInfo.items = contextMenu.items; // All items
+
+		t._menuAPI.clear(); // Clear cache everytime
+		mouseInfo.menu = t._menuAPI; // Augment the event argument with Context Menu API
+
+		let menuItems;
+		if (contextMenu.onMenu) {
+			contextMenu.onMenu(mouseInfo); // Let user populates menu items based on the context
+			menuItems = mouseInfo.menu.getMenuItems();
+		}
+
+		if (!menuItems || !menuItems.length) {
+			return; // No item has been populated
+		}
+
+		// Clear old instance from memory
+		if (t._popup && !t._popup.isDisposed()) {
+			t._popup.dispose();
+		}
+
+		let hostElem = host.getElement();
+
+		// TODO: Cannot initiate PopupMenu once because of blur timer trigger in Popup.
+		// Blur timer (10ms) will try to hide popup after mousedown event.
+		// But we want to show a Popup immediately after right click using the same instance.
+		t._popup = new PopupMenu(hostElem);
+		t._popup.setMenu(menuItems);
+		t._popup.setPosition("custom", e.pageX, e.pageY); // Popup position to the right of cursor
+		t._popup.addEventListener("itemClicked", t._onItemClicked);
+		t._popup.show();
+	}
+
+	t._dispatch("contextmenu", mouseInfo);
+	delete mouseInfo.mouseEvent; // Prevent memory leak
+};
+
+/** @private
+* @param {Event} e
+*/
+ContextMenuPlugin.prototype._onItemClicked = function (e) {
+	let menuItem = e.item;
+	let subMenu = menuItem.items;
+	if (subMenu && subMenu.length) {
+		return; // The selected item is not a leaf node
+	}
+
+	let pathArray = this._menuAPI.findItem(menuItem.id);
+	if (!pathArray) {
+		return; // Invalid item id
+	}
+
+	// User don't need to specify callback for each individual item.
+	// User can specify call back at the parent item as a fallback method
+	let len = pathArray.length;
+	for (let i = 0; i < len; ++i) {
+		let itemModel = pathArray[i];
+		if (itemModel.callback) {
+			for (let propName in this._mouseInfo) {
+				e[propName] = this._mouseInfo[propName];
+			}
+			itemModel.callback(e);
+			break;
+		}
+	}
+};
+
+
+
+export default ContextMenuPlugin;
+export { ContextMenuPlugin, ContextMenuPlugin as ContextMenu, ContextMenuPlugin as ContextMenuExtension };

package/lib/tr-grid-contextmenu/es6/MenuEventAPI.d.ts

@@ -0,0 +1,22 @@
+
+
+declare class MenuEventAPI {
+
+    constructor(menuModel: any, columns: any[]|null, columnGroups: any[]|null, legacyColumnGroups: any[]|null);
+
+    public clear(): void;
+
+    public addItem(item: (string)[] | any | string|null): void;
+
+    public addItems(item: (string)[] | any | string|null): void;
+
+    public addSeparator(): void;
+
+    public getMenuItems(): any[]|null;
+
+    public findItem(id: number): any[]|null;
+
+}
+
+export default MenuEventAPI;
+export { MenuEventAPI };

package/lib/tr-grid-contextmenu/es6/MenuEventAPI.js

@@ -0,0 +1,138 @@
+
+
+/** @constructor
+* @param {Object} menuModel
+* @param {Array} columns
+* @param {Array} columnGroups
+* @param {Array} legacyColumnGroups
+*/
+let MenuEventAPI = function (menuModel) {
+	this._model = menuModel || null; // for mapping string value
+	this._items = [];
+	this._runningId = 0;
+};
+
+/** @public */
+MenuEventAPI.prototype.clear = function () {
+	this._items.length = 0;
+	this._runningId = 0;
+};
+
+/** @public
+* @param {Array.<string> | Object | string} item
+*/
+MenuEventAPI.prototype.addItem = function (item) {
+	this._addItem(item, 0); // Recursive method
+};
+
+/** @public
+* @param {Array.<string> | Object | string} item
+*/
+MenuEventAPI.prototype.addItems = function (item) { // Alias
+	this._addItem(item, 0); // Recursive method
+};
+
+/** @private
+* @param {Array.<string> | Object | string} item
+* @param {number} level
+*/
+MenuEventAPI.prototype._addItem = function (item, level) {
+	if (!item) {
+		return; // No item to be added
+	}
+	if (level >= 10) {
+		console.warn("Circular reference detected");
+		return;
+	}
+
+	if (typeof item === "string") { // The item is referencing another item
+		if (item === "SEPARATOR" || item.match(/-{3,}/)) { // Special keyword
+			this.addSeparator();
+		} else if(this._model) {
+			if(this._model.items) {
+				this._addItem(this._model.items[item], level + 1);
+			}
+		}
+	} else if (Array.isArray(item)) { // The item is an item list
+		let len = item.length;
+		for (let i = 0; i < len; ++i) {
+			this._addItem(item[i], level + 1);
+		}
+	} else { // Assume the item has an object type
+		this._assignId(item);  // The item can have child items
+		this._items.push(item);
+	}
+};
+
+/** @public */
+MenuEventAPI.prototype.addSeparator = function () {
+	this._items.push({ type: "separator" });
+};
+
+/** Get immidiate child menu items
+* @public
+* @returns {Array}
+*/
+MenuEventAPI.prototype.getMenuItems = function () {
+	return this._items;
+};
+
+/** @public
+* @param {number} id
+* @returns {Array} Array of items (ordered by leaf node to root node)
+*/
+MenuEventAPI.prototype.findItem = function (id) { // For internal use
+	return this._findItem(id, this._items);
+};
+
+/** @private
+* @param {number} id
+* @param {Array.<string> | Object} item
+* @returns {Array}
+*/
+MenuEventAPI.prototype._findItem = function (id, item) {
+	if (!item) {
+		return null;
+	}
+
+	let foundItemPath;
+	if (Array.isArray(item)) {
+		let len = item.length;
+		for (let i = 0; i < len; ++i) {
+			foundItemPath = this._findItem(id, item[i]);
+			if (foundItemPath) {
+				return foundItemPath;
+			}
+		}
+		return null;
+	} else if (item.id === id) {
+		return [item]; // Return item in path array
+	}
+
+	foundItemPath = this._findItem(id, item.items);
+	if (foundItemPath) {
+		foundItemPath.push(item); // Push parent to the back
+	}
+	return foundItemPath;
+};
+
+/** @private
+* @param {Array.<string> | Object} items
+*/
+MenuEventAPI.prototype._assignId = function (items) {
+	if (Array.isArray(items)) {
+		for (let i = 0; i < items.length; i++) {
+			this._assignId(items[i]);
+		}
+	} else {
+		items.id = "_item_" + this._runningId++;
+		if (items.items) {
+			this._assignId(items.items);
+		}
+	}
+};
+
+
+
+export default MenuEventAPI;
+export { MenuEventAPI };

package/lib/tr-grid-contextmenu/es6/MenuItem.d.ts

@@ -0,0 +1,41 @@
+import EventDispatcher from "../../tr-grid-util/es6/EventDispatcher.js";
+import Ext from "../../tr-grid-util/es6/Ext.js";
+
+declare class MenuItem extends EventDispatcher {
+
+    constructor(options?: any);
+
+    public dispose(): void;
+
+    public setId(id: any): void;
+
+    public getId(): any;
+
+    public setText(text: any): void;
+
+    public getText(): string;
+
+    public setValue(value: any): void;
+
+    public getValue(): any;
+
+    public setSelectable(selectable?: boolean|null): void;
+
+    public isSelectable(): boolean;
+
+    public setItems(items: any[]|null): void;
+
+    public getItems(): any[]|null;
+
+    public setType(type: string): void;
+
+    public getType(): string;
+
+    public getElement(): Element|null;
+
+    public getOptions(): any;
+
+}
+
+export default MenuItem;
+export { MenuItem };