cx 24.4.4 → 24.4.5

package/dist/widgets.js

@@ -14951,6 +14951,7 @@ var GridCell = /*#__PURE__*/ (function (_PureContainer) {
 					rowSpan: undefined,
 					editable: undefined,
 					fixed: undefined,
+					mergeCells: undefined,
 				},
 			]),
 		);
@@ -14975,6 +14976,7 @@ var GridCell = /*#__PURE__*/ (function (_PureContainer) {
 					editable: data.editable,
 				}),
 				(_this$CSS$state["aligned-" + this.align] = this.align),
+				(_this$CSS$state.mergable = data.merged),
 				_this$CSS$state),
 			),
 		);
@@ -15002,6 +15004,7 @@ var GridCell = /*#__PURE__*/ (function (_PureContainer) {
 GridCell.prototype.pad = true;
 GridCell.prototype.styled = true;
 GridCell.prototype.fixed = false;
+GridCell.prototype.merged = false;
 
 var GridRowLine = /*#__PURE__*/ (function (_Container) {
 	function GridRowLine() {
@@ -15107,7 +15110,9 @@ var GridRowComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			className = _this$props.className,
 			dragSource = _this$props.dragSource,
 			instance = _this$props.instance,
-			record = _this$props.record;
+			record = _this$props.record,
+			useTrTag = _this$props.useTrTag,
+			children = _this$props.children;
 		var data = instance.data,
 			widget = instance.widget;
 		var CSS = widget.CSS;
@@ -15120,23 +15125,26 @@ var GridRowComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			leave = this.onMouseLeave;
 		}
 		if (widget.onRowClick) keyDown = this.onKeyDown;
-		return /*#__PURE__*/ jsx("tbody", {
-			className: CSS.expand(data.classNames, className, this.state && this.state.hover && CSS.state("hover")),
-			style: data.style,
-			onClick: this.onClick,
-			onDoubleClick: this.onDoubleClick,
-			onTouchStart: this.onMouseDown,
-			onMouseDown: this.onMouseDown,
-			onTouchMove: move,
-			onMouseMove: move,
-			onMouseLeave: leave,
-			onTouchEnd: up,
-			onMouseUp: up,
-			onKeyDown: keyDown,
-			onContextMenu: this.onRowContextMenu,
-			"data-record-key": record.key,
-			children: this.props.children,
-		});
+		return VDOM.createElement(
+			useTrTag ? "tr" : "tbody",
+			{
+				className: CSS.expand(data.classNames, className, this.state && this.state.hover && CSS.state("hover")),
+				style: data.style,
+				onClick: this.onClick,
+				onDoubleClick: this.onDoubleClick,
+				onTouchStart: this.onMouseDown,
+				onMouseDown: this.onMouseDown,
+				onTouchMove: move,
+				onMouseMove: move,
+				onMouseLeave: leave,
+				onTouchEnd: up,
+				onMouseUp: up,
+				onKeyDown: keyDown,
+				onContextMenu: this.onRowContextMenu,
+				"data-record-key": record.key,
+			},
+			children,
+		);
 	};
 	_proto2.onMouseDown = function onMouseDown(e) {
 		var _this$props2 = this.props,
@@ -15408,6 +15416,8 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 			};
 		row.hasSortableColumns = false;
 		row.hasResizableColumns = false;
+		row.hasMergedCells = false;
+		row.mergedColumns = [];
 		var aggregates = {};
 		var showFooter = false;
 		var lines = [];
@@ -15424,8 +15434,20 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 			items: GridColumnHeaderLine.create(lines),
 		});
 		row.header.items.forEach(function (line) {
-			line.items.forEach(function (c) {
+			line.items.forEach(function (c, index) {
 				if (c.sortable) row.hasSortableColumns = true;
+				if (c.mergeCells) {
+					if (row.header.items.length > 1)
+						Console.warn("Merged columns are only supported in grids in which rows have only one line of cells.");
+					else {
+						row.hasMergedCells = true;
+						row.mergedColumns.push({
+							uniqueColumnId: c.uniqueColumnId,
+							index: index,
+							mode: c.mergeCells,
+						});
+					}
+				}
 				if (
 					c.resizable ||
 					(c.header && c.header.resizable) ||
@@ -15863,13 +15885,14 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 		var headerRows = [];
 		if (!header) return null;
 		var skip = {};
-		header.children.forEach(function (line, lineIndex) {
+		var lineIndex = 0;
+		header.children.forEach(function (line) {
 			var empty = [true, true, true];
 			var result = [[], [], []];
 			line.children.forEach(function (hdinst, colIndex) {
 				var hdwidget = hdinst.widget;
 				var _loop = function _loop(l) {
-						var colKey = lineIndex + "-" + colIndex + "-" + l;
+						var colKey = lineIndex + l + "-" + colIndex;
 						if (skip[colKey]) return 0; // continue
 						if (Boolean(hdinst.data.fixed) != fixedColumns) return 0; // continue
 						var header = hdinst.components["header" + (l + 1)];
@@ -15926,8 +15949,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 								colSpan = header.data.colSpan;
 								rowSpan = header.data.rowSpan;
 								for (var r = 0; r < header.data.rowSpan; r++)
-									for (var c = 0; c < header.data.colSpan; c++)
-										skip[lineIndex + "-" + (colIndex + c) + "-" + (l + r)] = true;
+									for (var c = 0; c < header.data.colSpan; c++) skip[lineIndex + l + r + "-" + (colIndex + c)] = true;
 							}
 							if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
 								resizer = _this3.renderResizer(instance, hdinst, header, colIndex);
@@ -15995,6 +16017,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 			result = result.filter(function (_, i) {
 				return !empty[i];
 			});
+			lineIndex += result.length;
 			if (result[0]) {
 				if (fixed && !fixedColumns) {
 					result[0].push(
@@ -16345,9 +16368,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 		var record, g;
 		for (var i = 0; i < records.length; i++) {
 			record = records[i];
-			if (record.type == "data") {
-				record.vdom = record.row.render(context, record.key);
-			}
+			if (record.type == "data") record.vdom = record.row.render(context, record.key);
 			if (record.type == "group-header") {
 				record.vdom = [];
 				record.fixedVdom = [];
@@ -16607,7 +16628,8 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var widget = instance.widget,
 			isRecordSelectable = instance.isRecordSelectable,
 			visibleColumns = instance.visibleColumns,
-			isRecordDraggable = instance.isRecordDraggable;
+			isRecordDraggable = instance.isRecordDraggable,
+			row = instance.row;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass;
 		var dragSource = data.dragSource;
@@ -16621,6 +16643,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var _instance$state = instance.state,
 			colWidth = _instance$state.colWidth,
 			dimensionsVersion = _instance$state.dimensionsVersion;
+		var hasMergedCells = row.hasMergedCells;
 		return function (record, index, standalone, fixed) {
 			var store = record.store,
 				key = record.key,
@@ -16645,6 +16668,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			mod["draggable"] = draggable;
 			mod["non-draggable"] = !draggable;
 			var wrap = function wrap(children) {
+				var skipCells = {};
 				return /*#__PURE__*/ jsx(
 					GridRowComponent,
 					{
@@ -16665,48 +16689,68 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						shouldUpdate: row.shouldUpdate,
 						dimensionsVersion: dimensionsVersion,
 						fixed: fixed,
+						useTrTag: hasMergedCells,
 						children: children.content.map(function (_ref, line) {
 							var key = _ref.key,
 								data = _ref.data,
 								content = _ref.content;
+							var cells = content.map(function (_ref2, cellIndex) {
+								var key = _ref2.key,
+									data = _ref2.data,
+									content = _ref2.content,
+									uniqueColumnId = _ref2.uniqueColumnId,
+									merged = _ref2.merged,
+									mergeRowSpan = _ref2.mergeRowSpan;
+								if (Boolean(data.fixed) !== fixed) return null;
+								if (merged) return null;
+								var cellected = index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
+								var className = cellected ? CSS.expand(data.classNames, CSS.state("cellected")) : data.classNames;
+								if (cellected && cellEdit) {
+									var column = visibleColumns[cursorCellIndex];
+									if (column && column.editor && data.editable)
+										return _this6.renderCellEditor(key, CSS, baseClass, row, column);
+								}
+								var width = colWidth[uniqueColumnId];
+								var style = data.style;
+								if (width) {
+									style = _extends({}, style, {
+										maxWidth: width + "px",
+									});
+								}
+								if (skipCells[line + "-" + cellIndex]) return null;
+								if (data.colSpan > 1 || data.rowSpan > 1) {
+									for (var r = line; r < line + ((_data$rowSpan = data.rowSpan) != null ? _data$rowSpan : 1); r++) {
+										var _data$rowSpan;
+										for (
+											var c = cellIndex;
+											c < cellIndex + ((_data$colSpan = data.colSpan) != null ? _data$colSpan : 1);
+											c++
+										) {
+											var _data$colSpan;
+											skipCells[r + "-" + c] = true;
+										}
+									}
+								}
+								if (cellWrap) content = cellWrap(content);
+								return /*#__PURE__*/ jsx(
+									"td",
+									{
+										className: className,
+										style: style,
+										colSpan: data.colSpan,
+										rowSpan: mergeRowSpan != null ? mergeRowSpan : data.rowSpan,
+										children: content,
+									},
+									key,
+								);
+							});
+							if (hasMergedCells) return cells;
 							return /*#__PURE__*/ jsx(
 								"tr",
 								{
 									className: data.classNames,
 									style: data.style,
-									children: content.map(function (_ref2, cellIndex) {
-										var key = _ref2.key,
-											data = _ref2.data,
-											content = _ref2.content,
-											uniqueColumnId = _ref2.uniqueColumnId;
-										if (Boolean(data.fixed) !== fixed) return null;
-										var cellected = index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
-										var className = cellected ? CSS.expand(data.classNames, CSS.state("cellected")) : data.classNames;
-										if (cellected && cellEdit) {
-											var column = visibleColumns[cursorCellIndex];
-											if (column && column.editor && data.editable)
-												return _this6.renderCellEditor(key, CSS, baseClass, row, column);
-										}
-										var width = colWidth[uniqueColumnId];
-										var style = data.style;
-										if (width) {
-											style = _extends({}, style, {
-												maxWidth: width + "px",
-											});
-										}
-										if (cellWrap) content = cellWrap(content);
-										return /*#__PURE__*/ jsx(
-											"td",
-											{
-												className: className,
-												style: style,
-												colSpan: data.colSpan,
-												rowSpan: data.rowSpan,
-												children: content,
-											},
-											key,
-										);
-									}),
+									children: cells,
 								},
 								key,
 							);
@@ -16890,10 +16934,58 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			});
 			instance.recordInstanceCache.sweep();
 		} else {
+			var row = instance.row;
+			var hasMergedCells = row.hasMergedCells,
+				mergedColumns = row.mergedColumns;
+			if (hasMergedCells) {
+				// merge adjacent cells with the same value in columns that are marked as merged
+				var rowSpan = {};
+				var getCellRenderInfo = function getCellRenderInfo(vdom, cellIndex) {
+					var _vdom$content$;
+					return (_vdom$content$ = vdom.content[0]) == null ? void 0 : _vdom$content$.content[cellIndex];
+				};
+				for (var index = instance.records.length - 1; index >= 0; index--) {
+					var _row = instance.records[index];
+					var prevRow = instance.records[index - 1];
+					if (_row.type == "data") {
+						var stopMerge = false;
+						for (var mi = 0; mi < mergedColumns.length; mi++) {
+							var mergedCol = mergedColumns[mi];
+							var cellInfo = getCellRenderInfo(_row.vdom, mergedCol.index);
+							cellInfo.merged = false;
+							delete cellInfo.mergeRowSpan;
+							if ((prevRow == null ? void 0 : prevRow.type) == "data") {
+								var shouldMerge = false;
+								switch (mergedCol.mode) {
+									case "always":
+										shouldMerge = true;
+										break;
+									case "same-value":
+										var prevCellInfo = getCellRenderInfo(prevRow.vdom, mergedCol.index);
+										shouldMerge = !stopMerge && cellInfo.data.value === prevCellInfo.data.value;
+										break;
+								}
+								if (shouldMerge) {
+									var _rowSpan$mergedCol$un;
+									cellInfo.merged = true;
+									rowSpan[mergedCol.uniqueColumnId] =
+										((_rowSpan$mergedCol$un = rowSpan[mergedCol.uniqueColumnId]) != null ? _rowSpan$mergedCol$un : 1) +
+										1;
+								} else {
+									if (mergedCol.mode == "same-value") stopMerge = true;
+								}
+							}
+							if (!cellInfo.merged && rowSpan[mergedCol.uniqueColumnId] > 1) {
+								cellInfo.mergeRowSpan = rowSpan[mergedCol.uniqueColumnId];
+								rowSpan[mergedCol.uniqueColumnId] = 1;
+							}
+						}
+					} else rowSpan = {};
+				}
+			}
 			instance.records.forEach(function (record, i) {
-				if (record.type == "data") {
-					addRow(record, i);
-				} else {
+				if (record.type == "data") addRow(record, i, false);
+				else {
 					children.push(record.vdom);
 					if (hasFixedColumns) fixedChildren.push(record.fixedVdom);
 				}
@@ -16934,19 +17026,20 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 							? void 0
 							: _item$props2.type;
 					};
-			var index = 0;
-			while (index < children.length && !isDataRecord(children[index])) index++;
+			var _index = 0;
+			while (_index < children.length && !isDataRecord(children[_index])) _index++;
 			var count = 0;
-			while (index < children.length && count < this.state.dropInsertionIndex) {
-				if (isDataRecord(children[index])) count++;
-				index++;
+			while (_index < children.length && count < this.state.dropInsertionIndex) {
+				if (isDataRecord(children[_index])) count++;
+				_index++;
 			}
-			var savedIndexPos = index;
-			if (!this.state.dropNextToTheRowAbove) while (index < children.length && !isDataRecord(children[index])) index++;
+			var savedIndexPos = _index;
+			if (!this.state.dropNextToTheRowAbove)
+				while (_index < children.length && !isDataRecord(children[_index])) _index++;
 
 			// do not allow insertion after the last group footer
-			if (savedIndexPos < index && index == children.length) index = savedIndexPos;
-			children.splice(index, 0, dragInsertionRow);
+			if (savedIndexPos < _index && _index == children.length) _index = savedIndexPos;
+			children.splice(_index, 0, dragInsertionRow);
 		}
 		var content = [],
 			fixedColumnsContent = [];

package/index.js

@@ -1,17 +1,17 @@
-import * as util from './util';
-import * as data from './data';
-import * as ui from './ui';
-import * as widgets from './widgets';
-import * as svg from './svg';
-import * as charts from './charts';
-import * as hooks from './hooks';
-
-export {
-   util,
-   data,
-   ui,
-   widgets,
-   svg,
-   charts,
-   hooks
-};
+import * as util from './util';
+import * as data from './data';
+import * as ui from './ui';
+import * as widgets from './widgets';
+import * as svg from './svg';
+import * as charts from './charts';
+import * as hooks from './hooks';
+
+export {
+   util,
+   data,
+   ui,
+   widgets,
+   svg,
+   charts,
+   hooks
+};

package/locale/de-de.js

@@ -1,75 +1,75 @@
-import { Localization } from 'cx/ui';
-
-var c = 'de-de';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Dieses Feld wird benötigt.',
-   validatingText: 'Wird validiert...',
-   validationExceptionText: 'Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Wird geladen...',
-   queryErrorText: 'Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.',
-   noResultsText: 'Keine Ergebnisse gefunden.',
-   minQueryLengthMessageText: 'Geben Sie mindestens {0} Zeichen ein.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Wählen Sie {0:d} oder vorher.',
-   maxExclusiveErrorText: 'Wählen Sie ein Datum vor dem {0:d}.',
-   minValueErrorText: 'Wählen Sie {0:d} oder später.',
-   minExclusiveErrorText: 'Wählen Sie ein Datum nach dem {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Heute',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Ungültiges Datum eingegeben.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Geben Sie {0} oder weniger ein.',
-   maxExclusiveErrorText: 'Geben Sie eine Zahl kleiner als {0} ein.',
-   minValueErrorText: 'Geben Sie {0} oder mehr ein.',
-   minExclusiveErrorText: 'Geben Sie eine Zahl größer als {0} ein.',
-   inputErrorText: 'Ungültige Zahl eingegeben.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'Ungültige Eingabe.',
-   minLengthValidationErrorText: 'Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.',
-   maxLengthValidationErrorText: 'Benutzen Sie {0} oder weniger Zeichen.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Wird hochgeladen...'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Ja",
-   noText: "Nein"
+import { Localization } from 'cx/ui';
+
+var c = 'de-de';
+
+// Field
+Localization.localize(c, 'cx/widgets/Field', {
+   requiredText: 'Dieses Feld wird benötigt.',
+   validatingText: 'Wird validiert...',
+   validationExceptionText: 'Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.'
+});
+
+// LookupField
+Localization.localize(c, 'cx/widgets/LookupField', {
+   loadingText: 'Wird geladen...',
+   queryErrorText: 'Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.',
+   noResultsText: 'Keine Ergebnisse gefunden.',
+   minQueryLengthMessageText: 'Geben Sie mindestens {0} Zeichen ein.'
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: 'Wählen Sie {0:d} oder vorher.',
+   maxExclusiveErrorText: 'Wählen Sie ein Datum vor dem {0:d}.',
+   minValueErrorText: 'Wählen Sie {0:d} oder später.',
+   minExclusiveErrorText: 'Wählen Sie ein Datum nach dem {0:d}.',
+};
+
+// Calendar
+Localization.localize(c, 'cx/widgets/Calendar', {
+   ...calendarErrorMessages,
+   todayButtonText: 'Heute',
+   startWithMonday: true
+});
+
+// MonthPicker
+Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: 'Ungültiges Datum eingegeben.'
+};
+
+// MonthField
+Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, 'cx/widgets/NumberField', {
+   maxValueErrorText: 'Geben Sie {0} oder weniger ein.',
+   maxExclusiveErrorText: 'Geben Sie eine Zahl kleiner als {0} ein.',
+   minValueErrorText: 'Geben Sie {0} oder mehr ein.',
+   minExclusiveErrorText: 'Geben Sie eine Zahl größer als {0} ein.',
+   inputErrorText: 'Ungültige Zahl eingegeben.'
+});
+
+// TextField
+Localization.localize(c, 'cx/widgets/TextField', {
+   validationErrorText: 'Ungültige Eingabe.',
+   minLengthValidationErrorText: 'Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.',
+   maxLengthValidationErrorText: 'Benutzen Sie {0} oder weniger Zeichen.'
+});
+
+// UploadButton
+Localization.localize(c, 'cx/widgets/UploadButton', {
+   validationErrorText: 'Wird hochgeladen...'
+});
+
+// MsgBox
+Localization.localize(c, 'cx/widgets/MsgBox', {
+   yesText: "Ja",
+   noText: "Nein"
 });