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

package/lib/formatters/es6/FormatterBuilder.js

@@ -0,0 +1,334 @@
+
+
+/** @typedef {Object} FormatterBuilder~Options
+* @description FormatterBuilder options
+* @property {Object=} attributes
+* @property {Object=} styles
+* @property {Object=} events
+*/
+
+/** Dictionary that contain reserved attribute to context element
+* @type {object}
+* @private
+*/
+var _reservedAttributesDict = {
+	"api": true,
+	"wrapper": true,
+	"grid": true,
+	"field": true,
+	"rowIndex": true,
+	"value": true,
+	"setData": true,
+	"getData": true,
+	"styles": true,
+	"attributes": true,
+	"tagName": true,
+	"events": true,
+	"userEvents": true,
+	"defaultEvents": true,
+	"onContextCreated": true,
+	"onElementCreated": true,
+	"onElementUpdated": true,
+	"changeHook": true,
+	"changeHooks": true
+};
+
+function convertPxToString(px) {
+	return px + (typeof px === "number" ? "px" : "");
+}
+
+function positionLocator(ctx, userFunc, e) { // eslint-disable-line
+	if (!ctx.grid.isBinding()) {
+		ctx.grid.getRelativePosition(e, ctx);
+		userFunc(e, ctx);
+	}
+}
+
+function forEachSetProperties(attrs, fn) {
+	if (typeof attrs === "object" && typeof fn === "function") {
+		for (var name in attrs) {
+			var val = attrs[name];
+			if (name === "height" || name === "width") {
+				val = convertPxToString(val);
+			} else {
+				val += ""; // force to string
+			}
+			fn(name, val);
+		}
+	}
+}
+
+function assignAttribute(text, options, defaultOpt) {
+	forEachSetProperties(defaultOpt.attributes, function (name, val) {
+		text.push('    element.setAttribute("' + name + '", "' + val + '");');
+	});
+
+	forEachSetProperties(options.attributes, function (name, val) {
+		text.push('    element.setAttribute("' + name + '", "' + val + '");');
+	});
+}
+
+function assignStyle(text, options, defaultOpt) {
+	forEachSetProperties(defaultOpt.styles, function (name, val) {
+		text.push('    element.style["' + name + '"] = "' + val + '";');
+	});
+
+	forEachSetProperties(options.styles, function (name, val) {
+		text.push('    element.style["' + name + '"] = "' + val + '";');
+	});
+}
+
+function assignListener(text, options, defaultOpt) {
+	var name;
+	var events = defaultOpt.events || {};
+	for (name in events) {
+		if (typeof events[name] === "function") {
+			text.push('    element.addEventListener("' + name + '", positionLocator.bind(null, ctx, ctx.defaultEvents["' + name + '"]));');
+		}
+	}
+
+	events = options.events || {};
+	for (name in events) {
+		if (typeof events[name] === "function") {
+			text.push('    element.addEventListener("' + name + '", positionLocator.bind(null, ctx, ctx.userEvents["' + name + '"]));');
+		}
+	}
+}
+
+
+/** @private
+* @this ContextObject
+* @param {Object} colDef User's column definition object
+* @param {tr.Grid} grid Core grid instance
+*/
+function _onInitContextObject(colDef, grid) { // Executed once per column
+	this.grid = grid; // WARNING: using ctx as closure variable
+	if (!this.field) {
+		this.field = colDef.field;
+		if(this.disablingField === null) {
+			this.disablingField = this.field ? this.field + "_DISABLED" : null;
+		}
+		if(this.errorField === null) {
+			this.errorField = this.field ? this.field + "_ERROR" : null;
+		}
+	}
+
+	this.setData = _setData;
+	this.getData = _getData;
+	this.disableElement = _disableElement;
+	this.isElementDisabled = _isElementDisabled;
+	this.setError = _setError;
+	this.getError = _getError;
+}
+/** @private
+* @this ContextObject
+* @param {string} field
+* @param {*} value
+*/
+function _setData(field, value) {
+	if(this.wrapper === "real-time-grid") {
+		var rowDef = this.api.getRowDefinition(this.rowIndex);
+		if(rowDef) {
+			rowDef.setStaticData(field, value);
+		}
+	} else {
+		this.api.getDataView().setDataAt(this.rowIndex, field, value); // WARNING: Use of closure variable
+	}
+}
+/** @private
+* @this ContextObject
+* @param {boolean} field
+* @return {*} Value
+*/
+function _getData(field) {
+	if(this.wrapper === "real-time-grid") {
+		var rowDef = this.api.getRowDefinition(this.rowIndex);
+		return rowDef ? rowDef.getData(field) : null;
+	} else {
+		return this.api.getDataView().getDataAt(this.rowIndex, field);
+	}
+}
+/** @private
+* @this ContextObject
+* @param {boolean} bool
+*/
+function _disableElement(bool) {
+	if(this.disablingField) {
+		this.setData(this.disablingField, bool !== false);
+	}
+}
+/** @private
+* @this ContextObject
+* @return {boolean}
+*/
+function _isElementDisabled() {
+	return this.getData(this.disablingField);
+}
+/** @private
+* @this ContextObject
+* @param {*} val
+*/
+function _setError(val) {
+	if(this.errorField) {
+		this.setData(this.errorField, val);
+	}
+}
+/** @private
+* @this ContextObject
+* @return {*}
+*/
+function _getError() {
+	return this.getData(this.errorField);
+}
+
+
+function buildFnText(wrapper, ctx, options, defaultOpt) {
+	for (var defKey in defaultOpt) {
+		if (!_reservedAttributesDict[defKey]) {
+			ctx[defKey] = defaultOpt[defKey];
+		}
+	}
+	for (var optKey in options) {
+		if (!_reservedAttributesDict[optKey]) {
+			ctx[optKey] = options[optKey];
+		}
+	}
+
+	if (defaultOpt.onContextCreated) {
+		defaultOpt.onContextCreated(ctx, options);
+	}
+
+	var text = [];
+	// Initial setup based on different types of grid
+	if(wrapper === "real-time-grid") {
+		text.push('(function(e) {');
+		text.push('  ctx.api = e["grid"];');
+		text.push('  ctx.wrapper = "real-time-grid";');
+		if (options.field) {
+			text.push('  ctx.value = e["rowData"][ctx.field];');
+		} else {
+			text.push('  ctx.value = e["data"];');
+		}
+		text.push('  ctx.rowIndex = e["rowIndex"];');
+		text.push('  ctx.colIndex = e["colIndex"];');
+		text.push('  var cell = ctx.cell = e["cell"];'); // cell is for referencing later
+	} else {
+		text.push('(function(rowIndex, columnIndex, value, cell, colDef, dataRow, dataTable, dataView, cgrid) {');
+		text.push('  ctx.api = cgrid;');
+		text.push('  ctx.wrapper = "composite-grid";');
+		if (options.field) {
+			text.push('  ctx.value = dataRow ? dataRow[ctx.field] : null;');
+		} else {
+			text.push('  ctx.value = value;');
+		}
+		text.push('  ctx.rowIndex = rowIndex;');
+		text.push('  ctx.colIndex = columnIndex;');
+		text.push('  ctx.cell = cell;');
+	}
+
+	// Common setups triggered once per element
+	text.push('  var element = cell.getContent();');
+	text.push('  if(!element || (element._formatterName !== "' + defaultOpt.refName + '")) {');
+	text.push('    element = document.createElement("' + defaultOpt.tagName + '");');
+	text.push('    element._formatterName = "' + defaultOpt.refName + '";');
+	if (defaultOpt.onElementCreated) {
+		ctx.onElementCreated = defaultOpt.onElementCreated;
+		text.push('    ctx.onElementCreated(element, ctx);');
+	}
+
+	assignAttribute(text, options, defaultOpt);
+	assignStyle(text, options, defaultOpt);
+	assignListener(text, options, defaultOpt);
+
+	text.push('  }\n'); // End of setup
+
+	if(typeof options.disablingField  === "string" || options.disablingField == null) {
+		text.push('  if(ctx.isElementDisabled()) {');
+		text.push('    element.setAttribute("disabled", "");');
+		text.push('  } else {');
+		text.push('    element.removeAttribute("disabled");');
+		text.push('  }');
+	}
+	if(typeof options.errorField  === "string" || options.errorField == null) {
+		text.push('  if(ctx.getError()) {');
+		text.push('    element.setAttribute("error", "");');
+		text.push('  } else {');
+		text.push('    element.removeAttribute("error");');
+		text.push('  }');
+	}
+
+	// Element binding/updating
+	if (defaultOpt.onElementUpdated) {
+		ctx.onElementUpdated = defaultOpt.onElementUpdated;
+		text.push('  ctx.onElementUpdated(element, ctx);');
+	}
+
+	if (typeof options.onElementRendered === "function") {
+		ctx.onElementRendered = options.onElementRendered;
+		text.push('  ctx.onElementRendered(element, ctx);');
+	}
+
+	text.push('  cell.setContent(element);');
+	text.push('})');
+	return text.filter(Boolean).join('\n');
+}
+
+/** @constructor
+* @param {*=} options
+*/
+var FormatterBuilder = function (options) {
+	// TODO: FormatterBuilder should not be initializable
+};
+
+/** @public
+* @param {FormatterBuilder~Options=} userOptions
+* @param {FormatterBuilder~Options=} defaultOpt
+* @return {Object}
+*/
+FormatterBuilder.create = function (userOptions, defaultOpt) {
+	userOptions = userOptions || {};
+	defaultOpt = defaultOpt || {};
+	var ctx = {}; // WANRING: This object is used as a closure variable
+	ctx.field = userOptions.field;
+
+	if (defaultOpt.changeHook) {
+		var changeHandler = userOptions.changeHandler || defaultOpt.changeHandler;
+		if (!defaultOpt.events) {
+			defaultOpt.events = {};
+		}
+		defaultOpt.events[defaultOpt.changeHook] = changeHandler;
+	} else if (defaultOpt.changeHooks) {
+		var changeHandlers = userOptions.changeHandlers || defaultOpt.changeHandlers;
+		if (!defaultOpt.events) {
+			defaultOpt.events = {};
+		}
+		for (var i = 0; i < changeHandlers.length; i++) {
+			defaultOpt.events[defaultOpt.changeHooks[i]] = changeHandlers[i];
+		}
+	}
+
+	if (defaultOpt.events) {
+		ctx.defaultEvents = defaultOpt.events;
+	}
+
+	if (userOptions.events) {
+		ctx.userEvents = userOptions.events;
+	}
+
+	var txt;
+	txt = buildFnText("composite-grid", ctx, userOptions, defaultOpt);
+	var compositeGridBinding = eval(txt);
+
+	txt = buildFnText("real-time-grid", ctx, userOptions, defaultOpt);
+	var rtGridBinding = eval(txt);
+
+	return {
+		render: function () {},
+		init: _onInitContextObject.bind(ctx),
+		bind: compositeGridBinding,
+		binding: rtGridBinding
+	};
+};
+
+export default FormatterBuilder;
+export { FormatterBuilder };

package/lib/formatters/es6/NumericInputFormatter.d.ts

@@ -0,0 +1,13 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+declare class NumericInputFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|any)): any;
+
+}
+
+export default NumericInputFormatter;
+export { NumericInputFormatter };

package/lib/formatters/es6/NumericInputFormatter.js

@@ -0,0 +1,64 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+var onElementUpdated = function (element, ctx) {
+	element.value = ctx.value;
+};
+
+var onElementCreated = function (element, ctx) {
+	element.setAttribute("type", "number");
+};
+
+var _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+var _inputChangeHandler = function (e, ctx) {
+	ctx.value = +e.currentTarget.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var NumericInputFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+NumericInputFormatter.create = function (options) {
+	var tn = "input";
+	if(ElfUtil.hasComponent("ef-number-field")) {
+		tn = "ef-number-field";
+	} else if(ElfUtil.hasComponent("ef-input")) {
+		tn = "ef-input";
+	}
+
+	var defaultOpt = {
+		tagName: tn,
+		refName: "NumericInputFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "value-changed",
+		changeHandler: _changeHandler,
+		styles: {
+			margin: "0",
+			width: "100%"
+		}
+	};
+	if(tn !== "ef-number-field") {
+		defaultOpt.onElementCreated = onElementCreated;
+		if(tn === "input") {
+			defaultOpt.changeHook = "change";
+			defaultOpt.changeHandler = _inputChangeHandler;
+		}
+	}
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default NumericInputFormatter;
+export { NumericInputFormatter };

package/lib/formatters/es6/PercentBarFormatter.d.ts

@@ -0,0 +1,25 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import {PercentBar} from "../../tr-grid-util/es6/PercentBar.js";
+
+declare namespace PercentBarFormatter {
+
+    type Options = {
+        alignment?: string,
+        movementColor?: boolean,
+        barColor?: string,
+        textHidden?: boolean,
+        textWidth?: (number|string)
+    };
+
+}
+
+declare class PercentBarFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|PercentBarFormatter.Options|any)): any;
+
+}
+
+export default PercentBarFormatter;
+export { PercentBarFormatter };

package/lib/formatters/es6/PercentBarFormatter.js

@@ -0,0 +1,62 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import {PercentBar} from "../../tr-grid-util/es6/PercentBar.js";
+
+/** @typedef {Object} PercentBarFormatter~Options
+* @description PercentBarFormatter options
+* @property {string=} alignment="left" Possible values are l, r, c, left, right, and center
+* @property {boolean=} movementColor=true If disabled, percent bar will not use up and down colors
+* @property {string=} barColor="" Custom color for bar element. This will override the movementColor
+* @property {boolean=} textHidden=false If enabled, text label will not be shown
+* @property {(number|string)=} textWidth=56 Number of pixel or percentage width
+*/
+
+/** Due to stamping technique is used in the FormatterBuilder, we have to store the constructor in context object
+* @private
+* @param {Object} ctx Context object
+* @param {Object} options User options
+*/
+var onContextCreated = function (ctx, options) {
+	ctx.PercentBar = PercentBar;
+};
+
+/** @private
+* @param {Element} element
+* @param {Object} ctx Context object
+*/
+var onElementCreated = function (element, ctx) {
+	element["_percentBar"] = new ctx.PercentBar(element, ctx);
+};
+
+/** @private
+* @param {Element} element
+* @param {Object} ctx Context object
+*/
+var onElementUpdated = function (element, ctx) {
+	element["_percentBar"].setValue(ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var PercentBarFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|PercentBarFormatter.Options|Object)=} options
+* @return {Object}
+*/
+PercentBarFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "div",
+		refName: "PercentBarFormatter",
+		onContextCreated: onContextCreated,
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default PercentBarFormatter;
+export { PercentBarFormatter };

package/lib/formatters/es6/SimpleImageFormatter.d.ts

@@ -0,0 +1,21 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare namespace SimpleImageFormatter {
+
+    type Options = {
+        height?: (string|number),
+        width?: (string|number)
+    };
+
+}
+
+declare class SimpleImageFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|SimpleImageFormatter.Options|any)): any;
+
+}
+
+export default SimpleImageFormatter;
+export { SimpleImageFormatter };

package/lib/formatters/es6/SimpleImageFormatter.js

@@ -0,0 +1,64 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} SimpleImageFormatter~Options
+* @description FormatterBuilder options
+* @property {(string|number)=} height
+* @property {(string|number)=} width
+*/
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+var onElementUpdated = function (element, ctx) {
+	element.src = ctx.value;
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var SimpleImageFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|SimpleImageFormatter.Options|Object)=} options
+* @return {Object}
+*/
+SimpleImageFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "img",
+		refName: "SimpleImageFormatter",
+		styles: {
+			position: "absolute",
+			maxHeight: "100%",
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0,
+			margin: "auto"
+		},
+		onElementUpdated: onElementUpdated,
+		height: "auto",
+		width: "auto"
+	};
+
+	defaultOpt.attributes = {
+		height: defaultOpt.height,
+		width: defaultOpt.width
+	};
+	if (options) {
+		if (options.height != null) {
+			defaultOpt.attributes.height = options.height;
+		}
+		if (options.width != null) {
+			defaultOpt.attributes.width = options.width;
+		}
+	}
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default SimpleImageFormatter;
+export { SimpleImageFormatter };

package/lib/formatters/es6/SimpleInputFormatter.d.ts

@@ -0,0 +1,12 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare class SimpleInputFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|any)): any;
+
+}
+
+export default SimpleInputFormatter;
+export { SimpleInputFormatter };

package/lib/formatters/es6/SimpleInputFormatter.js

@@ -0,0 +1,40 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+var onElementUpdated = function (element, ctx) {
+	element.value = ctx.value;
+};
+
+var _changeHandler = function (e, ctx) {
+	ctx.value = e.currentTarget.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var SimpleInputFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+SimpleInputFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "input",
+		refName: "SimpleInputFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "change",
+		changeHandler: _changeHandler,
+		styles: {
+			margin: "0",
+			width: "100%"
+		}
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default SimpleInputFormatter;
+export { SimpleInputFormatter };

package/lib/formatters/es6/SimpleLinkFormatter.d.ts

@@ -0,0 +1,21 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare namespace SimpleLinkFormatter {
+
+    type Options = {
+        label?: string,
+        urlField?: string
+    };
+
+}
+
+declare class SimpleLinkFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|SimpleLinkFormatter.Options|any)): any;
+
+}
+
+export default SimpleLinkFormatter;
+export { SimpleLinkFormatter };