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

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

@@ -0,0 +1,245 @@
+import EventDispatcher from "../../tr-grid-util/es6/EventDispatcher.js";
+import Ext from "../../tr-grid-util/es6/Ext.js";
+
+/** @constructor
+* @extends {EventDispatcher}
+* @param {Object} options
+*/
+var MenuItem = function (options) {
+	var t = this;
+
+	t._onItemHovered = t._onItemHovered.bind(t);
+	t._onItemClicked = t._onItemClicked.bind(t);
+
+	t._init(options);
+	t._config(options);
+};
+Ext.inherits(MenuItem, EventDispatcher);
+
+/** @type {Element}
+* @private
+*/
+MenuItem.prototype._elem;
+/** @type {Object}
+* @private
+*/
+MenuItem.prototype._options;
+/** @type {boolean}
+* @private
+*/
+MenuItem.prototype._isSelectable = true;
+
+/** @private
+* @param {Object} options
+*/
+MenuItem.prototype._init = function(options) {
+	var t = this;
+
+	var li = document.createElement("li");
+	li.className = "tr-contextmenu-item";
+	li.addEventListener("mouseover", t._onItemHovered);
+	li.addEventListener("click", t._onItemClicked);
+	t._elem = li;
+	t._options = options;
+};
+
+/** @public */
+MenuItem.prototype.dispose = function() {
+	var t = this;
+	t.removeAllEventListeners();
+	t._elem.removeEventListener("mouseover", t._onItemHovered);
+	t._elem.removeEventListener("click", t._onItemClicked);
+	t._elem.parentNode.removeChild(t._elem);
+};
+
+/** @private
+* @param {*} opt_model
+*/
+MenuItem.prototype._config = function(opt_model) {
+	if (!opt_model) opt_model = {};
+
+	var pref;
+
+	var t = this;
+
+	pref = opt_model["id"];
+	if (pref) {
+		t.setId(pref);
+	}
+
+	pref = opt_model["type"];
+	if (pref) {
+		t.setType(pref);
+	}
+
+	pref = opt_model["text"];
+	if (pref) {
+		t.setText(pref);
+	}
+
+	pref = opt_model["value"];
+	if (pref) {
+		t.setValue(pref);
+	}
+
+	pref = opt_model["isDisabled"];
+	if (pref != null) {
+		if (pref === true) {
+			t.setSelectable(false);
+		} else {
+			t.setSelectable(true);
+		}
+	}
+
+	pref = opt_model["isSelectable"];
+	if (pref != null) {
+		if (pref === false) {
+			t.setSelectable(false);
+		} else {
+			t.setSelectable(true);
+		}
+	}
+
+	pref = opt_model["items"];
+	if (Array.isArray(pref)) {
+		t.setItems(pref);
+	}
+
+};
+
+/** @private
+* @param {Object} e
+*/
+MenuItem.prototype._onItemHovered = function(e) {
+	var t = this;
+
+	// Cannot be hover if disabled or has no children
+	if (!t.isSelectable()) { return; }
+
+	e["item"] = t._options;
+	t._dispatch("itemHovered", e);
+};
+
+/** @private
+* @param {Object} e
+*/
+MenuItem.prototype._onItemClicked = function(e) {
+	var t = this;
+
+	// Cannot be clicked if disabled or has children
+	if (!t.isSelectable() || Array.isArray(t.getItems())) { return; }
+
+	e["item"] = t._options;
+	t._dispatch("itemClicked", e);
+};
+
+/** @public
+* @param {*} id
+*/
+MenuItem.prototype.setId = function(id) {
+	var t = this;
+	t._elem.setAttribute("id", id);
+	this._id = id;
+};
+
+/** @public
+* @returns {*}
+*/
+MenuItem.prototype.getId = function() {
+	return this._id;
+};
+
+/** @public
+* @param {*} text
+*/
+MenuItem.prototype.setText = function(text) {
+	var t = this;
+	t._elem.textContent = text + "";
+	this._text = text;
+};
+
+/** @public
+* @returns {string}
+*/
+MenuItem.prototype.getText = function() {
+	return this._text;
+};
+
+/** @public
+* @param {*} value
+*/
+MenuItem.prototype.setValue = function(value) {
+	this._value = value;
+};
+
+/** @public
+* @returns {*}
+*/
+MenuItem.prototype.getValue = function() {
+	return this._value;
+};
+
+/** @public
+* @param {boolean=} selectable
+*/
+MenuItem.prototype.setSelectable = function(selectable) {
+	var t = this;
+	if (selectable) {
+		t._elem.removeAttribute("data-unselectable");
+		t._elem.removeAttribute("disabled");
+	} else {
+		t._elem.setAttribute("data-unselectable", "true");
+		t._elem.setAttribute("disabled", "true");
+	}
+	t._isSelectable = selectable ? true : false;
+};
+
+/** @public
+* @returns {boolean}
+*/
+MenuItem.prototype.isSelectable = function() {
+	return this._isSelectable;
+};
+
+/** @public
+* @param {Array} items
+*/
+MenuItem.prototype.setItems = function(items) {
+	var t = this;
+	t._items = items;
+	t._elem.classList.add("has-child");
+};
+
+/** @public
+* @returns {Array}
+*/
+MenuItem.prototype.getItems = function() {
+	return this._items;
+};
+
+/** @public
+* @param {string} type
+*/
+MenuItem.prototype.setType = function(type) {
+	this._elem.setAttribute("data-type", type);
+	this._type = type;
+};
+
+/** @public
+* @returns {string}
+*/
+MenuItem.prototype.getType = function() {
+	return this._type;
+};
+
+/** @public
+* @returns {Element}
+*/
+MenuItem.prototype.getElement = function() {
+	return this._elem;
+};
+
+
+
+export default MenuItem;
+export { MenuItem };

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

@@ -0,0 +1,29 @@
+import MenuItem from "./MenuItem.js";
+import Popup from "../../tr-grid-util/es6/Popup.js";
+import EventDispatcher from "../../tr-grid-util/es6/EventDispatcher.js";
+import Ext from "../../tr-grid-util/es6/Ext.js";
+
+declare class PopupMenu extends EventDispatcher {
+
+    constructor(parentElement: Element);
+
+    public isDisposed(): boolean;
+
+    public dispose(): void;
+
+    public show(): void;
+
+    public hide(): void;
+
+    public attachTo(elem: Element, positioning: Popup.Positioning): void;
+
+    public setPosition(positioning: Popup.Positioning, x: number, y: number): void;
+
+    public addPopupChild(element: Element, popupMenu: PopupMenu): void;
+
+    public setMenu(menuItems: (any)[]): void;
+
+}
+
+export default PopupMenu;
+export { PopupMenu };

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

@@ -0,0 +1,292 @@
+import MenuItem from "./MenuItem.js";
+import Popup from "../../tr-grid-util/es6/Popup.js";
+import EventDispatcher from "../../tr-grid-util/es6/EventDispatcher.js";
+import Ext from "../../tr-grid-util/es6/Ext.js";
+
+/** @constructor
+* @extends {EventDispatcher}
+* @param {Element} parentElement
+*/
+var PopupMenu = function (parentElement) {
+	var t = this;
+
+	t.show = t.show.bind(t);
+	t.attachTo = t.attachTo.bind(t);
+	t.setMenu = t.setMenu.bind(t);
+	t.setPosition = t.setPosition.bind(t);
+	t._hoveredItem = t._hoveredItem.bind(t);
+	t._hoveredChildItem = t._hoveredChildItem.bind(t);
+	t._clickedItem = t._clickedItem.bind(t);
+	t._clickedChildItem = t._clickedChildItem.bind(t);
+
+	t._init(parentElement);
+};
+Ext.inherits(PopupMenu, EventDispatcher);
+
+/** @type {Object}
+* @private
+*/
+PopupMenu.prototype._evtArg;
+/** @type {Array.<PopupMenu>}
+* @private
+*/
+PopupMenu.prototype._children;
+/** @type {Array.<MenuItem>}
+* @private
+*/
+PopupMenu.prototype._childrenItem;
+/** @type {Element}
+* @private
+*/
+PopupMenu.prototype._parentElement;
+/** @type {number}
+* @private
+*/
+PopupMenu.prototype._x;
+/** @type {number}
+* @private
+*/
+PopupMenu.prototype._y;
+/** @type {Popup}
+* @private
+*/
+PopupMenu.prototype._popup;
+/** @type {Element}
+* @private
+*/
+PopupMenu.prototype._ulElem;
+/** @type {boolean}
+* @private
+*/
+PopupMenu.prototype._isMounted;
+
+/** @private
+* @param {Element} parentElement
+*/
+PopupMenu.prototype._init = function(parentElement) {
+	var t = this;
+
+	var topNode = document.createElement("div");
+	topNode.className = "tr-contextmenu-popup";
+	var ul = document.createElement("ul");
+	ul.className = "tr-contextmenu";
+	topNode.appendChild(ul);
+
+	t._popup = new Popup(topNode);
+	t._popup.setPositioning("custom");
+	t._ulElem = ul;
+
+	t._children = [];
+	t._childrenItem = [];
+	t._x = 0;
+	t._y = 0;
+	t._isMounted = true;
+	t._parentElement = parentElement || window.document;
+
+	t._evtArg = {
+		"target": t._popup._elem,
+		"currentTarget": t._popup._elem
+	};
+};
+
+/** @public
+* @return {boolean}
+*/
+PopupMenu.prototype.isDisposed = function () {
+	return !this._isMounted;
+};
+
+/** @public */
+PopupMenu.prototype.dispose = function () {
+	var t = this;
+	if (t._isMounted) {
+		t.removeAllEventListeners();
+		t._popup.dispose();
+		t._disposeChildren();
+		t._isMounted = false;
+	}
+};
+
+/** @private */
+PopupMenu.prototype._disposeChildren = function () {
+	var t = this;
+	t._children.forEach(function (child) {
+		if (child) {
+			child.dispose();
+		}
+	});
+	t._childrenItem.forEach(function (child) {
+		if (child) {
+			child.dispose();
+		}
+	});
+	t._children.length = 0;
+	t._childrenItem.length = 0;
+};
+
+/** @public */
+PopupMenu.prototype.show = function () {
+	var t = this;
+	t._popup.show(true, t._parentElement);
+	t.setPosition(t._popup._positioning, t._x, t._y);
+};
+
+/** @public */
+PopupMenu.prototype.hide = function () {
+	this._popup.hide();
+};
+
+/** @public
+* @param {Element} elem
+* @param {Popup~Positioning} positioning
+*/
+PopupMenu.prototype.attachTo = function (elem, positioning) {
+	if (elem) {
+		this._popup.attachTo(elem, positioning);
+	}
+};
+
+/** @public
+* @param {Popup~Positioning} positioning
+* @param {number} x
+* @param {number} y
+*/
+PopupMenu.prototype.setPosition = function(positioning, x, y) {
+	var t = this;
+
+	if (positioning === "custom") {
+		t._x = x;
+		t._y = y;
+		var ww = window.innerWidth;
+		var wh = window.innerHeight;
+		var sx = (window.scrollX != null) ? window.scrollX : window.pageXOffset;
+		var sy = (window.scrollY != null) ? window.scrollY : window.pageYOffset;
+		var rb = ww + sx; // view port right bound
+		var bb = wh + sy; // view port bottom boundnd
+		var aw = t._popup._elem.offsetWidth;
+		var ah = t._popup._elem.offsetHeight;
+
+		if (x + aw > rb) { // Do not overflow right bound
+			x = rb - aw;
+		}
+		if (y + ah > bb) { // Do not overflow bottom bound
+			y = bb - ah;
+		}
+
+		t._popup._elem.style.left = (x - sx) + "px"; // Due to fixed position we have to subtract window scrolling
+		t._popup._elem.style.top = (y - sy) + "px";
+	}
+};
+
+/** @public
+* @param {Element} element
+* @param {PopupMenu} popupMenu
+*/
+PopupMenu.prototype.addPopupChild = function(element, popupMenu) {
+	if (popupMenu instanceof PopupMenu) {
+		popupMenu.attachTo(element, "right");
+		this._popup.addFocusElement(popupMenu._popup);
+		this._children.push(popupMenu);
+	}
+};
+
+/** @public
+* @param {Array.<Object>} menuItems
+*/
+PopupMenu.prototype.setMenu = function (menuItems) {
+	if (!menuItems || !Array.isArray(menuItems)) { return; }
+
+	var t = this;
+
+	// Clear existing before set a new items.
+	if (Array.isArray(t._menuItems)) {
+		t._disposeChildren();
+	}
+
+	t._menuItems = menuItems;
+
+	for (var i = 0; i < menuItems.length; i++) {
+		var item = menuItems[i];
+
+		var menuItem = new MenuItem(item);
+		menuItem.addEventListener("itemHovered", t._hoveredItem);
+		menuItem.addEventListener("itemClicked", t._clickedItem);
+		t._childrenItem.push(menuItem);
+
+		if (Array.isArray(menuItem.getItems())) {
+			var pm = new PopupMenu(t._parentElement);
+			pm._id = menuItem.getId();
+			pm.setMenu(menuItem.getItems());
+			pm.addEventListener("itemHovered", t._hoveredChildItem);
+			pm.addEventListener("itemClicked", t._clickedChildItem);
+			t.addPopupChild(menuItem.getElement(), pm);
+		}
+
+		t._ulElem.appendChild(menuItem.getElement());
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+PopupMenu.prototype._hoveredChildItem = function (e) {
+	var t = this;
+	t._dispatch("itemHovered", e);
+};
+
+/** @private
+* @param {Event} e
+*/
+PopupMenu.prototype._clickedChildItem = function (e) {
+	var t = this;
+	t._dispatch("itemClicked", e);
+	t.hide();
+};
+
+/** @private
+* @param {Event} e
+*/
+PopupMenu.prototype._hoveredItem = function (e) {
+	var t = this;
+	var evt = t._evtArg;
+	var element = e.srcElement;
+	var children = t._children;
+
+	if (element && !!children.length) {
+		for (var i = 0; i < children.length; i++) {
+			var child = children[i];
+			if (child._id === element.getAttribute("id")) {
+				child.show();
+			} else {
+				child.hide();
+			}
+		}
+	} else {
+		evt = e;
+	}
+
+	t._dispatch("itemHovered", evt);
+};
+
+/** @private
+* @param {Event} e
+*/
+PopupMenu.prototype._clickedItem = function(e) {
+	var t = this;
+	if (e.item && e.item.id) {
+		for (var i = 0; i < t._menuItems.length; i++) {
+			var menuItem = t._menuItems[i];
+			if (menuItem.id === e.item.id) {
+				t._evtArg["item"] = menuItem;
+				break;
+			}
+		}
+	}
+	t._dispatch("itemClicked", t._evtArg);
+	t.hide();
+};
+
+
+
+export default PopupMenu;
+export { PopupMenu };

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

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

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

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

package/lib/tr-grid-filter-input/es6/FilterInput.d.ts

@@ -0,0 +1,57 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+import {ElfDate} from '../../tr-grid-util/es6/ElfDate.js';
+import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
+
+declare namespace FilterInputPlugin {
+
+    type GridColumn = {
+        filterInput?: FilterInputPlugin.ColumnOptions
+    };
+
+    type ColumnOptions = {
+        defaultLogic?: ((...params: any[]) => any),
+        filterLogic?: ((...params: any[]) => any),
+        disabled?: boolean,
+        placeholder?: string,
+        type?: string,
+        entries?: any[]
+    };
+
+    type Options = {
+        inputCreated?: ((...params: any[]) => any)
+    };
+
+}
+
+declare class FilterInputPlugin extends GridPlugin {
+
+    constructor(options?: FilterInputPlugin.Options);
+
+    public getName(): string;
+
+    public initialize(host: any, options?: any): void;
+
+    public unload(host: any): void;
+
+    public config(options?: any): void;
+
+    public getConfigObject(out_obj?: any): any;
+
+    public getColumnInput(colIndex: number): Element;
+
+    public removeColumnFilters(colIndex?: (null|number)): void;
+
+    public removeColumnFilter(colIndex?: (null|number)): void;
+
+    public refresh(delayMs?: number): void;
+
+    public setFilterLogic(colIndex: number, func: ((...params: any[]) => any), ctx?: any): void;
+
+    public filterColumn(colIndex: number, text: string): void;
+
+}
+
+export default FilterInputPlugin;
+export { FilterInputPlugin, FilterInputPlugin as FilterInput, FilterInputPlugin as FilterInputExtension };