@refinitiv-ui/efx-grid 6.0.42 → 6.0.43

package/lib/formatters/es6/FormatterBuilder.js

@@ -1,152 +1,235 @@
-
-
 /** @typedef {Object} FormatterBuilder~Options
 * @description FormatterBuilder options
+* @property {string=} field
 * @property {Object=} attributes
 * @property {Object=} styles
 * @property {Object=} events
+* @property {Function=} changeHandler
+* @property {Array.<Function>=} changeHandlers
+* @property {Function=} onElementRendered
 */
 
 /** Dictionary that contain reserved attribute to context element
-* @type {object}
+* @type {!Object}
 * @private
+* @constant
 */
-var _reservedAttributesDict = {
+var ReservedAttributes = {
 	"api": true,
-	"wrapper": true,
+	"wrapper": true, // wrapper is generated during runtime binding
 	"grid": true,
 	"field": true,
 	"rowIndex": true,
 	"value": true,
 	"setData": true,
 	"getData": true,
+	"disableElement": true,
+	"isElementDisabled": true,
+	"setError": true,
+	"getError": true,
 	"styles": true,
 	"attributes": true,
-	"tagName": true,
+	"tagName": true, // for internal use only
+	"refName": true, // for internal use only
 	"events": true,
-	"userEvents": true,
-	"defaultEvents": true,
-	"onContextCreated": true,
-	"onElementCreated": true,
-	"onElementUpdated": true,
-	"changeHook": true,
-	"changeHooks": true
+	"userEvents": true, // for internal use only
+	"defaultEvents": true, // for internal use only
+	"onContextCreated": true, // for internal use only
+	"onElementCreated": true, // for internal use only
+	"onElementUpdated": true, // for internal use only
+	"onElementRendered": true,
+	"changeHook": true, // for internal use only
+	"changeHooks": true, // for internal use only
+	"changeHandler": true,
+	"changeHandlers": true
 };
 
-function convertPxToString(px) {
-	return px + (typeof px === "number" ? "px" : "");
+/** Clone all non-reserved properties from master to base
+* @private
+* @function
+* @param {Object} base Base object
+* @param {Object} master Master object. There will be no modification on this object
+*/
+function _assignProperties(base, master) {
+	for (var key in master) {
+		if (!ReservedAttributes[key]) {
+			base[key] = master[key];
+		}
+	}
 }
+/** Clone a property with Object map from master to base
+* @private
+* @function
+* @param {Object} base Base object
+* @param {Object} master Master object. There will be no modification on this object
+* @returns {boolean} Returns true, if there is any change
+*/
+function _assignAttributes(base, master) {
+	var mObj = master.attributes;
+	if(!mObj) {
+		return false;
+	}
 
-function positionLocator(ctx, userFunc, e) { // eslint-disable-line
-	if (!ctx.grid.isBinding()) {
-		ctx.grid.getRelativePosition(e, ctx);
-		userFunc(e, ctx);
+	var dirty = false;
+	var bObj = base.attributes;
+	if(!bObj) {
+		bObj = {};
+	}
+	for(var key in mObj) {
+		dirty = true;
+		bObj[key] = mObj[key];
+	}
+	if(!dirty) {
+		return false;
 	}
+
+	if(!base.attributes) {
+		base.attributes = bObj;
+	}
+	return true;
 }
+/** Clone a property with Object map from master to base
+* @private
+* @function
+* @param {Object} base Base object
+* @param {Object} master Master object. There will be no modification on this object
+* @returns {boolean} Returns true, if there is any change
+*/
+function _assignStyles(base, master) {
+	var mObj = master.styles;
+	if(!mObj) {
+		return false;
+	}
 
-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
+	var dirty = false;
+	var bObj = base.styles;
+	if(!bObj) {
+		bObj = {};
+	}
+	for(var key in mObj) {
+		dirty = true;
+		var val = mObj[key];
+		if(key === "width" || key === "height") {
+			if(typeof val === "number") {
+				val = val + "px";
 			}
-			fn(name, val);
 		}
+		bObj[key] = val;
+	}
+	if(!dirty) {
+		return false;
 	}
-}
-
-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 + '");');
-	});
+	if(!base.styles) {
+		base.styles = bObj;
+	}
+	return true;
 }
 
-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 + '";');
-	});
+/** @private
+* @function
+* @param {Object} ctx
+* @param {Function} userFunc
+* @param {Object} e
+*/
+function _positionLocator(ctx, userFunc, e) {
+	if (!ctx.grid.isBinding()) {
+		ctx.grid.getRelativePosition(e, ctx);
+		userFunc(e, ctx);
+	}
 }
-
-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 + '"]));');
-		}
+/** Clone event listerners from master to base
+* @private
+* @function
+* @param {Object} base Base object
+* @param {Object} master Master object. There will be no modification on this object
+* @param {string} optionType
+* @returns {boolean} Returns true, if there is any change
+*/
+function _assignListener(base, master, optionType) {
+	var mObj = master.events;
+	if(!mObj) {
+		return false;
 	}
 
-	events = options.events || {};
-	for (name in events) {
-		if (typeof events[name] === "function") {
-			text.push('    element.addEventListener("' + name + '", positionLocator.bind(null, ctx, ctx.userEvents["' + name + '"]));');
+	var dirty = false;
+	var bObj = base[optionType];
+	if(!bObj) {
+		bObj = {};
+	}
+	for (var key in mObj) {
+		var func = mObj[key];
+		if (typeof func === "function") {
+			dirty = true;
+			bObj[key] = _positionLocator.bind(null, base, func);
 		}
 	}
+	if(!dirty) {
+		return false;
+	}
+	if(!base[optionType]) {
+		base[optionType] = bObj;
+	}
+	return true;
 }
 
-
 /** @private
-* @this ContextObject
+* @param {Object} ctx
 * @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;
+function _onInitContextObject(ctx, colDef, grid) { // Executed once per column
+	ctx.grid = grid; // WARNING: using ctx as closure variable
+	if (!ctx.field) {
+		ctx.field = colDef.field;
+		if(ctx.disablingField == null) {
+			ctx.disablingField = ctx.field ? ctx.field + "_DISABLED" : null;
 		}
-		if(this.errorField === null) {
-			this.errorField = this.field ? this.field + "_ERROR" : null;
+		if(ctx.errorField == null) {
+			ctx.errorField = ctx.field ? ctx.field + "_ERROR" : null;
 		}
 	}
 
-	this.setData = _setData;
-	this.getData = _getData;
-	this.disableElement = _disableElement;
-	this.isElementDisabled = _isElementDisabled;
-	this.setError = _setError;
-	this.getError = _getError;
+	ctx.disableElement = _disableElement;
+	ctx.isElementDisabled = _isElementDisabled;
+	ctx.setError = _setError;
+	ctx.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
+function _setRtGridData(field, value) {
+	var rowDef = this.api.getRowDefinition(this.rowIndex);
+	if(rowDef) {
+		rowDef.setStaticData(field, value);
 	}
 }
 /** @private
 * @this ContextObject
 * @param {boolean} field
-* @return {*} Value
+* @returns {*} 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);
-	}
+function _getRtGridData(field) {
+	var rowDef = this.api.getRowDefinition(this.rowIndex);
+	return rowDef ? rowDef.getData(field) : null;
+}
+/** @private
+* @this ContextObject
+* @param {string} field
+* @param {*} value
+*/
+function _setCoreGridData(field, value) {
+	this.api.getDataView().setDataAt(this.rowIndex, field, value);
+}
+/** @private
+* @this ContextObject
+* @param {boolean} field
+* @returns {*} Value
+*/
+function _getCoreGridData(field) {
+	return this.api.getDataView().getDataAt(this.rowIndex, field);
 }
 /** @private
 * @this ContextObject
@@ -159,7 +242,7 @@ function _disableElement(bool) {
 }
 /** @private
 * @this ContextObject
-* @return {boolean}
+* @returns {boolean}
 */
 function _isElementDisabled() {
 	return this.getData(this.disablingField);
@@ -175,104 +258,181 @@ function _setError(val) {
 }
 /** @private
 * @this ContextObject
-* @return {*}
+* @returns {*}
 */
 function _getError() {
 	return this.getData(this.errorField);
 }
 
+/** @private
+* @function
+* @param {Object} ctx
+* @param {Object} e
+*/
+function _predefinedBinding(ctx, e) {
+	ctx.api = e["grid"];
+	if(!ctx.wrapper) {
+		ctx.wrapper = "real-time-grid";
+		ctx.setData = _setRtGridData;
+		ctx.getData = _getRtGridData;
+	}
+	var rowData = ctx.rowData = e["rowData"];
+	if(ctx.field) {
+		ctx.value = rowData ? rowData[ctx.field] : null;
+	} else {
+		ctx.value = e["data"];
+	}
+	ctx.rowIndex = e["rowIndex"];
+	ctx.colIndex = e["colIndex"];
+	ctx.cell = e["cell"];
 
-function buildFnText(wrapper, ctx, options, defaultOpt) {
-	for (var defKey in defaultOpt) {
-		if (!_reservedAttributesDict[defKey]) {
-			ctx[defKey] = defaultOpt[defKey];
-		}
+	_commonBinding(ctx);
+}
+/** @private
+* @function
+* @param {Object} ctx
+* @param {number} rowIndex
+* @param {number} columnIndex
+* @param {*} value
+* @param {Object} cell
+* @param {Object} colDef
+* @param {Object} dataRow
+* @param {Object} dataTable
+* @param {Object} dataView
+* @param {Object} cgrid
+*/
+function _predefinedFormatter(ctx, rowIndex, columnIndex, value, cell, colDef, dataRow, dataTable, dataView, cgrid) {
+	ctx.api = cgrid;
+	if(!ctx.wrapper) {
+		ctx.wrapper = "composite-grid";
+		ctx.setData = _setCoreGridData;
+		ctx.getData = _getCoreGridData;
 	}
-	for (var optKey in options) {
-		if (!_reservedAttributesDict[optKey]) {
-			ctx[optKey] = options[optKey];
-		}
+	var rowData = ctx.rowData = dataRow;
+	if (ctx.field) {
+		ctx.value = rowData ? rowData[ctx.field] : null;
+	} else {
+		ctx.value = value;
 	}
+	ctx.rowIndex = rowIndex;
+	ctx.colIndex = columnIndex;
+	ctx.cell = cell;
 
-	if (defaultOpt.onContextCreated) {
-		defaultOpt.onContextCreated(ctx, options);
+	_commonBinding(ctx);
+}
+/** @private
+* @function
+* @param {Object} ctx
+*/
+function _commonBinding(ctx) {
+	var elem = ctx.cell.getContent();
+	if(!elem || (elem._formatterName !== ctx.refName)) {
+		elem = document.createElement(ctx.tagName);
+		elem._formatterName = ctx.refName;
+		if (ctx.onElementCreated) {
+			ctx.onElementCreated(elem, ctx);
+		}
+
+		var attrs = ctx.attributes;
+		if(attrs) {
+			for(var attrName in attrs) {
+				elem.setAttribute(attrName, attrs[attrName] || "");
+			}
+		}
+
+		var stys = ctx.styles;
+		if(stys) {
+			for(var styName in stys) {
+				elem.style[styName] = stys[styName];
+			}
+		}
+
+		var evts, evtName;
+		evts = ctx.defaultEvents;
+		if(evts) {
+			for (evtName in evts) {
+				elem.addEventListener(
+					evtName,
+					evts[evtName]
+				);
+			}
+		}
+		evts = ctx.userEvents;
+		if(evts) {
+			for (evtName in evts) {
+				elem.addEventListener(
+					evtName,
+					evts[evtName]
+				);
+			}
+		}
 	}
 
-	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];');
+	var rowData = ctx.rowData;
+	if(ctx.disablingField) {
+		if(rowData && rowData[ctx.disablingField]){
+			elem.setAttribute("disabled", "");
 		} else {
-			text.push('  ctx.value = e["data"];');
+			elem.removeAttribute("disabled");
 		}
-		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;');
+	}
+	if(ctx.errorField) {
+		if(rowData && rowData[ctx.errorField]){
+			elem.setAttribute("error", "");
 		} else {
-			text.push('  ctx.value = value;');
+			elem.removeAttribute("error");
 		}
-		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);');
+	if(ctx.onElementUpdated) {
+		ctx.onElementUpdated(elem, ctx);
+	}
+
+	if (ctx.onElementRendered) {
+		ctx.onElementRendered(elem, ctx);
 	}
 
-	assignAttribute(text, options, defaultOpt);
-	assignStyle(text, options, defaultOpt);
-	assignListener(text, options, defaultOpt);
+	ctx.cell.setContent(elem);
+}
 
-	text.push('  }\n'); // End of setup
+/** @private
+* @function
+* @param {Object} ctx Context object
+* @param {Object} userOpt User options
+* @param {Object} defaultOpt Default options
+*/
+function _buildContextObject(ctx, userOpt, defaultOpt) {
+	_assignProperties(ctx, defaultOpt);
+	_assignProperties(ctx, userOpt);
 
-	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('  }');
-	}
+	_assignAttributes(ctx, defaultOpt);
+	_assignAttributes(ctx, userOpt);
+
+	_assignStyles(ctx, defaultOpt);
+	_assignStyles(ctx, userOpt);
+
+	_assignListener(ctx, defaultOpt, "defaultEvents");
+	_assignListener(ctx, userOpt, "userEvents");
 
-	// Element binding/updating
+	ctx.field = userOpt.field || "";
+	ctx.refName = defaultOpt.refName || "_defaultFormatter";
+	ctx.tagName = defaultOpt.tagName || "div";
+
+	if (defaultOpt.onElementCreated) {
+		ctx.onElementCreated = defaultOpt.onElementCreated;
+	}
 	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);');
+	if (typeof userOpt.onElementRendered === "function") {
+		ctx.onElementRendered = userOpt.onElementRendered;
 	}
-
-	text.push('  cell.setContent(element);');
-	text.push('})');
-	return text.filter(Boolean).join('\n');
 }
 
+/** @private
+*/
+function _emptyFunc() {}
+
 /** @constructor
 * @param {*=} options
 */
@@ -288,8 +448,6 @@ var FormatterBuilder = function (options) {
 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;
@@ -307,26 +465,18 @@ FormatterBuilder.create = function (userOptions, defaultOpt) {
 		}
 	}
 
-	if (defaultOpt.events) {
-		ctx.defaultEvents = defaultOpt.events;
-	}
+	var ctx = {};
+	_buildContextObject(ctx, userOptions, defaultOpt);
 
-	if (userOptions.events) {
-		ctx.userEvents = userOptions.events;
+	if (defaultOpt.onContextCreated) {
+		defaultOpt.onContextCreated(ctx, userOptions);
 	}
 
-	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
+		render: _emptyFunc,
+		init: _onInitContextObject.bind(null, ctx),
+		bind: _predefinedFormatter.bind(null, ctx),
+		binding: _predefinedBinding.bind(null, ctx)
 	};
 };
 

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

@@ -5,7 +5,7 @@ declare class NumericInputFormatter {
 
     constructor(options?: any);
 
-    public static create(options?: (FormatterBuilder.Options|any)): any;
+    public static create(options?: (FormatterBuilder.Options|any)|null): any;
 
 }
 

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

@@ -4,11 +4,11 @@ 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)
+        alignment?: string|null,
+        movementColor?: boolean|null,
+        barColor?: string|null,
+        textHidden?: boolean|null,
+        textWidth?: (number|string)|null
     };
 
 }
@@ -17,7 +17,7 @@ declare class PercentBarFormatter {
 
     constructor(options?: any);
 
-    public static create(options?: (FormatterBuilder.Options|PercentBarFormatter.Options|any)): any;
+    public static create(options?: (FormatterBuilder.Options|PercentBarFormatter.Options|any)|null): any;
 
 }
 

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

@@ -3,8 +3,8 @@ import FormatterBuilder from "./FormatterBuilder.js";
 declare namespace SimpleImageFormatter {
 
     type Options = {
-        height?: (string|number),
-        width?: (string|number)
+        height?: (string|number)|null,
+        width?: (string|number)|null
     };
 
 }
@@ -13,7 +13,7 @@ declare class SimpleImageFormatter {
 
     constructor(options?: any);
 
-    public static create(options?: (FormatterBuilder.Options|SimpleImageFormatter.Options|any)): any;
+    public static create(options?: (FormatterBuilder.Options|SimpleImageFormatter.Options|any)|null): any;
 
 }