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

package/lib/formatters/es6/CoralIconFormatter.js

@@ -0,0 +1,45 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} CoralIconFormatter~Options
+* @description FormatterBuilder options
+* @property {(string|Object)=} icon
+* @property {(number|string)=} size
+*/
+
+var onElementUpdated = function (element, ctx) {
+	var icon = ctx.value;
+	if (ctx.icon != null && typeof ctx.icon === "object") {
+		icon = ctx.icon[ctx.value];
+	}
+	if (typeof ctx.icon === "string") {
+		icon = ctx.icon;
+	}
+	element.icon = icon;
+	element.size = ctx.size;
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var CoralIconFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|CoralIconFormatter.Options|Object)=} options
+* @return {Object}
+*/
+CoralIconFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-icon",
+		refName: "CoralIconFormatter",
+		onElementUpdated: onElementUpdated,
+		icon: null, // use icon from ctx.value
+		size: 15
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralIconFormatter;
+export { CoralIconFormatter };

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

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

package/lib/formatters/es6/CoralInputFormatter.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.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var CoralInputFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+CoralInputFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-input",
+		refName: "CoralInputFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "value-changed",
+		changeHandler: _changeHandler,
+		styles: {
+			margin: "0",
+			width: "100%"
+		}
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralInputFormatter;
+export { CoralInputFormatter };

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

@@ -0,0 +1,22 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare namespace CoralRadioButtonFormatter {
+
+    type Options = {
+        initialIndex?: number
+    };
+
+}
+
+declare class CoralRadioButtonFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|CoralRadioButtonFormatter.Options|any)): any;
+
+}
+
+declare function onElementCreated(): void;
+
+export default CoralRadioButtonFormatter;
+export { CoralRadioButtonFormatter };

package/lib/formatters/es6/CoralRadioButtonFormatter.js

@@ -0,0 +1,80 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} CoralRadioButtonFormatter~Options
+* @description FormatterBuilder options
+* @property {number=} initialIndex
+*/
+
+var onElementCreated = function (element, ctx) {
+	var dv = ctx.grid.getDataSource();
+	var rid = dv.getRowId(ctx.rowIndex);
+	var index = dv.getRowIndex(rid);
+	var checked = index === ctx.initialIndex;
+	if (checked) {
+		ctx.previousId = rid;
+		ctx.setData(ctx.field, checked);
+	}
+	ctx.value = checked;
+};
+
+var onElementUpdated = function (element, ctx) {
+	var dv = ctx.grid.getDataSource();
+	var rid = dv.getRowId(ctx.rowIndex);
+	var checked = (rid === ctx.previousId) && ctx.value;
+	element.checked = checked;
+};
+
+/** To bound data and view of the current focus radio button
+* @private
+* @param {*} e
+* @param {*} ctx
+*/
+var _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+
+	var dv = ctx.grid.getDataSource();
+	var rid = dv.getRowId(ctx.rowIndex);
+	if (ctx.previousId && ctx.previousId !== rid) {
+		var row = dv.getRowData(ctx.previousId);
+		if (row) {
+			if (row["ROW_DEF"]) {
+				row["ROW_DEF"].setData(ctx.field, false);
+			} else {
+				dv.setData(ctx.previousId, ctx.field, false);
+			}
+		}
+	}
+	ctx.previousId = dv.getRowId(ctx.rowIndex);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var CoralRadioButtonFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|CoralRadioButtonFormatter.Options|Object)=} options
+* @return {Object}
+*/
+CoralRadioButtonFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-radio-button",
+		refName: "CoralRadioButtonFormatter",
+		styles: {
+			margin: 0
+		},
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated,
+		changeHook: "checked-changed",
+		changeHandler: _changeHandler,
+		initialIndex: -1 // does not checked by default
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralRadioButtonFormatter;
+export { CoralRadioButtonFormatter };

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

@@ -0,0 +1,23 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import CoralItems from "../../tr-grid-util/es6/CoralItems.js";
+
+declare namespace CoralSelectFormatter {
+
+    type Options = {
+        data?: any[],
+        entries?: any[],
+        items?: any[]
+    };
+
+}
+
+declare class CoralSelectFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|CoralSelectFormatter.Options|any)): any;
+
+}
+
+export default CoralSelectFormatter;
+export { CoralSelectFormatter };

package/lib/formatters/es6/CoralSelectFormatter.js

@@ -0,0 +1,66 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import CoralItems from "../../tr-grid-util/es6/CoralItems.js";
+
+/** @typedef {Object} CoralSelectFormatter~Options
+* @description CoralSelectFormatter options
+* @property {Array=} data Item list to be displayed on the coral select. The given object should contains at least value properties. If string is given, it will be treated as the value.
+* @property {Array=} entries Alias to `data` property
+* @property {Array=} items Alias to `data` property
+*/
+
+/** @private
+* @param {Object} ctx Context object
+* @param {Object} options User options
+*/
+var onContextCreated = function (ctx, options) {
+	var userItems = options.data || options.entries || options.items;
+	ctx.data = CoralItems.create(userItems);
+};
+
+var onElementCreated = function (element, ctx) {
+	if (ctx.data) {
+		element.data = ctx.data;
+	}
+};
+
+var onElementUpdated = function (element, ctx) {
+	element.value = ctx.value;
+};
+
+var _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var CoralSelectFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|CoralSelectFormatter.Options|Object)=} options
+* @return {Object}
+*/
+CoralSelectFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-select",
+		refName: "CoralSelectFormatter",
+		styles: {
+			maxWidth: "100%",
+			margin: "0"
+		},
+		onContextCreated: onContextCreated,
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated,
+		changeHook: "value-changed",
+		changeHandler: _changeHandler,
+		data: null
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralSelectFormatter;
+export { CoralSelectFormatter };

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

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

package/lib/formatters/es6/CoralToggleFormatter.js

@@ -0,0 +1,47 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+var onElementUpdated = function (element, ctx) {
+	element.checked = ctx.value;
+};
+
+/** To bound data and view of the current ef-toggle state
+* @private
+* @function
+* @param {*} e
+* @param {*} ctx
+*/
+var _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var CoralToggleFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+CoralToggleFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-toggle",
+		refName: "CoralToggleFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "checked-changed",
+		changeHandler: _changeHandler
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralToggleFormatter;
+export { CoralToggleFormatter };

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

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

package/lib/formatters/es6/DuplexEmeraldDateTimePickerFormatter.js

@@ -0,0 +1,119 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfDate from "../../tr-grid-util/es6/ElfDate.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+var onDuplexContextCreated = function (ctx, options) {
+	ctx.ElfDate = ElfDate;
+	ctx.fromField = options.from;
+	ctx.toField = options.to;
+};
+
+var _onElementUpdated = function (element, ctx) {
+	var from = ctx.ElfDate.from(ctx.getData(ctx.fromField));
+	var to = ctx.ElfDate.from(ctx.getData(ctx.toField));
+
+	if(!ctx.ElfDate.equal(element.from, from)) {
+		element.from = from;
+	}
+	if(!ctx.ElfDate.equal(element.to, to)) {
+		element.to = to;
+	}
+};
+
+var _onElfV4ElementUpdated = function (element, ctx) {
+	var from = ctx.ElfDate.from(ctx.getData(ctx.fromField));
+	var to = ctx.ElfDate.from(ctx.getData(ctx.toField));
+
+	element.values = [ctx.ElfDate.toYMD(from), ctx.ElfDate.toYMD(to)];
+};
+
+var _onFieldFromBound = function (e, ctx) {
+	var from = ctx.ElfDate.from(e.currentTarget.from);
+	var currentData = ctx.getData(ctx.fromField);
+	if (!ctx.ElfDate.equal(currentData, from)) {
+		ctx.setData(ctx.fromField, from);
+	}
+};
+
+var _onFieldToBound = function (e, ctx) {
+	var to = ctx.ElfDate.from(e.currentTarget.to);
+	if (to == null) {
+		return;
+	}
+	var currentData = ctx.getData(ctx.toField);
+	if (!ctx.ElfDate.equal(currentData, to)) {
+		ctx.setData(ctx.toField, to);
+	}
+};
+
+/** @private
+* @param {Object} e
+* @param {Object} ctx
+*/
+var _onElfV4ValueChanged = function (e, ctx) {
+	var dates = e.currentTarget.values;
+	var from = null;
+	var to = null;
+	if(typeof dates === "string") {
+		dates = dates.split(",");
+	}
+	if(Array.isArray(dates)) {
+		from = ctx.ElfDate.from(dates[0]);
+		to = ctx.ElfDate.from(dates[1]);
+	}
+	if(!from || !to) {
+		return;
+	}
+
+	var currentData = ctx.getData(ctx.fromField);
+	if (!ctx.ElfDate.equal(currentData, from)) {
+		ctx.setData(ctx.fromField, from);
+	}
+
+	currentData = ctx.getData(ctx.toField);
+	if (!ctx.ElfDate.equal(currentData, to)) {
+		ctx.setData(ctx.toField, to);
+	}
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var DuplexEmeraldDateTimePickerFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+DuplexEmeraldDateTimePickerFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-datetime-picker",
+		refName: "DuplexEmeraldDateTimePickerFormatter",
+		onContextCreated: onDuplexContextCreated,
+		onElementUpdated: _onElementUpdated,
+		attributes: {
+			range: "",
+			duplex: ""
+		},
+		styles: {
+			margin: "0"
+		}
+	};
+
+	if(ElfUtil.getElfVersion() >= 4) {
+		defaultOpt.onElementUpdated = _onElfV4ElementUpdated;
+		defaultOpt.changeHook = "value-changed";
+		defaultOpt.changeHandler = _onElfV4ValueChanged;
+	} else {
+		defaultOpt.changeHooks = ["from-changed", "to-changed"];
+		defaultOpt.changeHandlers = [_onFieldFromBound, _onFieldToBound];
+	}
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+
+export default DuplexEmeraldDateTimePickerFormatter;
+export { DuplexEmeraldDateTimePickerFormatter };

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

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

package/lib/formatters/es6/EFButtonFormatter.js

@@ -0,0 +1,40 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} EFButtonFormatter~Options
+* @description FormatterBuilder options
+* @property {string=} label
+*/
+
+var onElementUpdated = function (element, ctx) {
+	var label = (typeof ctx.label === "string") ? ctx.label : ctx.value;
+	element.textContent = label;
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var EFButtonFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|EFButtonFormatter.Options|Object)=} options
+* @return {Object}
+*/
+EFButtonFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-button",
+		refName: "EFButtonFormatter",
+		styles: {
+			maxWidth: "100%",
+			margin: "0"
+		},
+		onElementUpdated: onElementUpdated,
+		label: null // use ctx.value by default
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default EFButtonFormatter;
+export { EFButtonFormatter };

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

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

package/lib/formatters/es6/EFCheckboxFormatter.js

@@ -0,0 +1,45 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+var onElementUpdated = function (element, ctx) {
+	element.checked = ctx.value;
+	if (ctx.labelField) {
+		var text = ctx.getData(ctx.labelField);
+		element.textContent = (text != null) ?  text : '';
+	}
+};
+
+/** To bound data and view of the current checkbox state
+* @private
+* @param {*} e
+* @param {*} ctx
+*/
+var _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+var EFCheckboxFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+EFCheckboxFormatter.create = function (options) {
+	var defaultOpt = {
+		tagName: "ef-checkbox",
+		refName: "EFCheckboxFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "checked-changed",
+		changeHandler: _changeHandler
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default EFCheckboxFormatter;
+export { EFCheckboxFormatter };

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

@@ -0,0 +1,23 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import CoralItems from "../../tr-grid-util/es6/CoralItems.js";
+
+declare namespace EFComboBoxFormatter {
+
+    type Options = {
+        data?: any[],
+        entries?: any[],
+        items?: any[]
+    };
+
+}
+
+declare class EFComboBoxFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|EFComboBoxFormatter.Options|any)): any;
+
+}
+
+export default EFComboBoxFormatter;
+export { EFComboBoxFormatter };