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

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

@@ -0,0 +1,471 @@
+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 { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import CellPainter from "../../tr-grid-util/es6/CellPainter.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 {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 {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
+*/
+var ContextMenuPlugin = function (options) {
+	var t = this;
+	t._hosts = [];
+
+	t._onItemClicked = t._onItemClicked.bind(t);
+	t._rightClickedHandler = t._rightClickedHandler.bind(t);
+	t._onThemeLoaded = t._onThemeLoaded.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 {string}
+* @private
+*/
+ContextMenuPlugin._styles = ""; // Static variable
+/** @type {Promise<Object>}
+* @private
+*/
+ContextMenuPlugin._stylePromise = null; // Static variable
+/** @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;
+/** @type {Array}
+* @private
+*/
+ContextMenuPlugin.prototype._userColumns = null;
+
+/** @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) {
+	var 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);
+
+	if(ContextMenuPlugin._stylePromise) {
+		ContextMenuPlugin._applyThemeColor(host);
+	} else {
+		ContextMenuPlugin._stylePromise = ElfUtil.getThemeColors();
+		ContextMenuPlugin._stylePromise.then(this._onThemeLoaded);
+	}
+};
+
+/** @public
+* @param {Object} host core grid object
+*/
+ContextMenuPlugin.prototype.unload = function (host) {
+	var 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; }
+
+	var t = this;
+
+	t._userColumns = options["columns"];
+	var 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) {
+	var obj = gridOptions || {};
+
+	obj.contextMenu = this._contextMenu;
+
+	return obj;
+};
+
+/** @public
+* @returns {Object}
+*/
+ContextMenuPlugin.prototype.getMenuModel = function () {
+	return this._contextMenu;
+};
+
+/** @private
+* @param {Object} e
+* @return {!Object} Mouse related information
+*/
+ContextMenuPlugin.prototype._configureMouseInfo = function (e) {
+	var mouseInfo = this._hosts[0].getRelativePosition(e);
+
+	// Supply possibly needed arguments for the event handler
+	mouseInfo.context = this._contextMap[mouseInfo.sectionType] || "";
+	mouseInfo.columnDef = this._userColumns[mouseInfo.colIndex];
+
+	if (!this._csp) {
+		this._csp = this._getPlugin("ColumnSelectionPlugin");
+	}
+	if (!this._rsp) {
+		this._rsp = this._getPlugin("RowSelectionPlugin");
+	}
+
+	if (this._csp) {
+		var selCols = this._csp.getSelectedColumns();
+		mouseInfo.selectedColumns = selCols && selCols.length ? selCols : null;
+	} else {
+		mouseInfo.selectedColumns = null;
+	}
+	if (this._rsp) {
+		var 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) {
+	var t = this;
+
+	var host = t._hosts[0];
+
+	if (!host) { return; }
+
+	var pos = host.getRelativePosition(e);
+	if(pos.rowIndex == null) {
+		return;
+	}
+
+	e.preventDefault(); // Prevent default system menu
+
+	var mouseInfo = t._mouseInfo = t._configureMouseInfo(e);
+	var 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
+
+		var 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();
+		}
+
+		var 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) {
+	var menuItem = e.item;
+	var subMenu = menuItem.items;
+	if (subMenu && subMenu.length) {
+		return; // The selected item is not a leaf node
+	}
+
+	var 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
+	var len = pathArray.length;
+	for (var i = 0; i < len; ++i) {
+		var itemModel = pathArray[i];
+		if (itemModel.callback) {
+			for (var propName in this._mouseInfo) {
+				e[propName] = this._mouseInfo[propName];
+			}
+			itemModel.callback(e);
+			break;
+		}
+	}
+};
+
+/** @private
+* @param {Object} colors
+*/
+ContextMenuPlugin.prototype._onThemeLoaded = function (colors) {
+	var 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;"
+		]
+	]);
+
+	var hex = CellPainter.rgb2Hex(colors.tableBg);
+	var triplet = CellPainter.hex2Num(hex);
+	var bw = CellPainter.blackAndWhite(triplet);
+	var 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");
+	}
+	var hoverd = CellPainter.num2Hex(CellPainter.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);
+
+	ContextMenuPlugin._styles = css;
+
+	for(var i = this._hosts.length; --i >= 0;) {
+		ContextMenuPlugin._applyThemeColor(this._hosts[i]);
+	}
+};
+/** @private
+* @param {Object} grid core grid object
+*/
+ContextMenuPlugin._applyThemeColor = function(grid) {
+	if(!grid || grid._contextMenuStyles) {
+		return;
+	}
+	if(ContextMenuPlugin._styles) {
+		grid._contextMenuStyles = true; // Prevent loading the same style twice
+		injectCss(ContextMenuPlugin._styles, grid.getElement());
+	}
+};
+
+
+
+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[], columnGroups: any[], legacyColumnGroups: any[]);
+
+    public clear(): void;
+
+    public addItem(item: (string)[] | any | string): void;
+
+    public addItems(item: (string)[] | any | string): void;
+
+    public addSeparator(): void;
+
+    public getMenuItems(): any[];
+
+    public findItem(id: number): (string)[] | any;
+
+}
+
+export default MenuEventAPI;
+export { MenuEventAPI };

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

@@ -0,0 +1,133 @@
+
+
+/** @constructor
+* @param {Object} menuModel
+* @param {Array} columns
+* @param {Array} columnGroups
+* @param {Array} legacyColumnGroups
+*/
+var MenuEventAPI = function (menuModel) {
+	this._model = menuModel;
+	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 {
+			this._addItem(this._model.items[item], level + 1);
+		}
+	} else if (Array.isArray(item)) { // The item is an item list
+		var len = item.length;
+		for (var 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" });
+};
+
+/** @public
+* @returns {Array}
+*/
+MenuEventAPI.prototype.getMenuItems = function () {
+	return this._items;
+};
+
+/** @public
+* @param {number} id
+* @returns {Array.<string> | Object}
+*/
+MenuEventAPI.prototype.findItem = function (id) { // For internal use
+	return this._findItem(id, this._items);
+};
+
+/** @private
+* @param {number} id
+* @param {Array.<string> | Object} item
+* @returns {string}
+*/
+MenuEventAPI.prototype._findItem = function (id, item) {
+	var foundItemPath;
+	if (!item) {
+		return null;
+	} else if (Array.isArray(item)) {
+		var len = item.length;
+		for (var 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 (var 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,39 @@
+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): void;
+
+    public isSelectable(): boolean;
+
+    public setItems(items: any[]): void;
+
+    public getItems(): any[];
+
+    public setType(type: string): void;
+
+    public getType(): string;
+
+    public getElement(): Element;
+
+}
+
+export default MenuItem;
+export { MenuItem };