cx 24.4.3 → 24.4.5

package/src/ui/adapter/GroupAdapter.js

@@ -1,141 +1,141 @@
-import { ArrayAdapter } from "./ArrayAdapter";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { Grouper } from "../../data/Grouper";
-import { isArray } from "../../util/isArray";
-import { isDefined } from "../../util/isDefined";
-import { getComparer } from "../../data/comparer";
-import { Culture } from "../Culture";
-import { isObject } from "../../util/isObject";
-
-export class GroupAdapter extends ArrayAdapter {
-   init() {
-      super.init();
-
-      if (this.groupRecordsAlias) this.groupRecordsName = this.groupRecordsAlias;
-
-      if (this.groupings) this.groupBy(this.groupings);
-   }
-
-   getRecords(context, instance, records, parentStore) {
-      let result = super.getRecords(context, instance, records, parentStore);
-
-      if (this.groupings) {
-         let groupedResults = [];
-         this.processLevel([], result, groupedResults, parentStore);
-         result = groupedResults;
-      }
-
-      return result;
-   }
-
-   processLevel(keys, records, result, parentStore) {
-      let level = keys.length;
-      let inverseLevel = this.groupings.length - level;
-
-      if (inverseLevel == 0) {
-         for (let i = 0; i < records.length; i++) {
-            records[i].store.setStore(parentStore);
-            result.push(records[i]);
-         }
-         return;
-      }
-
-      let grouping = this.groupings[level];
-      let { grouper } = grouping;
-      grouper.reset();
-      grouper.processAll(records);
-      let results = grouper.getResults();
-      if (grouping.comparer) results.sort(grouping.comparer);
-
-      results.forEach((gr) => {
-         keys.push(gr.key);
-
-         let key = keys.map(serializeKey).join("|");
-
-         let $group = {
-            ...gr.key,
-            ...gr.aggregates,
-            $name: gr.name,
-            $level: inverseLevel,
-            $records: gr.records || [],
-            $key: key,
-         };
-
-         let data = {
-            [this.recordName]: gr.records.length > 0 ? gr.records[0].data : null,
-            [this.groupName]: $group,
-         };
-
-         let groupStore = new ReadOnlyDataView({
-            store: parentStore,
-            data,
-            immutable: this.immutable,
-         });
-
-         let group = {
-            key,
-            data,
-            group: $group,
-            grouping,
-            store: groupStore,
-            level: inverseLevel,
-         };
-
-         if (grouping.includeHeader !== false)
-            result.push({
-               ...group,
-               type: "group-header",
-               key: "header:" + group.key,
-            });
-
-         this.processLevel(keys, gr.records, result, groupStore);
-
-         if (grouping.includeFooter !== false)
-            result.push({
-               ...group,
-               type: "group-footer",
-               key: "footer:" + group.key,
-            });
-
-         keys.pop();
-      });
-   }
-
-   groupBy(groupings) {
-      if (!groupings) this.groupings = null;
-      else if (isArray(groupings)) {
-         this.groupings = groupings;
-         this.groupings.forEach((g) => {
-            let groupSorters = [];
-            let key = {};
-            for (let name in g.key) {
-               if (!g.key[name] || !isDefined(g.key[name].direction) || !isDefined(g.key[name].value))
-                  g.key[name] = { value: g.key[name], direction: "ASC" };
-               key[name] = g.key[name].value;
-               groupSorters.push({
-                  field: name,
-                  direction: g.key[name].direction,
-               });
-            }
-            g.grouper = new Grouper(key, { ...this.aggregates, ...g.aggregates }, (r) => r.store.getData(), g.text);
-            g.comparer = null;
-            if (groupSorters.length > 0)
-               g.comparer = getComparer(
-                  groupSorters,
-                  (x) => x.key,
-                  this.sortOptions ? Culture.getComparer(this.sortOptions) : null,
-               );
-         });
-      } else throw new Error("Invalid grouping provided.");
-   }
-}
-
-GroupAdapter.prototype.groupName = "$group";
-
-function serializeKey(data) {
-   if (isObject(data))
-      return Object.keys(data)
-         .map((k) => serializeKey(data[k]))
-         .join(":");
-   return data?.toString() ?? "";
-}
+import { ArrayAdapter } from "./ArrayAdapter";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { Grouper } from "../../data/Grouper";
+import { isArray } from "../../util/isArray";
+import { isDefined } from "../../util/isDefined";
+import { getComparer } from "../../data/comparer";
+import { Culture } from "../Culture";
+import { isObject } from "../../util/isObject";
+
+export class GroupAdapter extends ArrayAdapter {
+   init() {
+      super.init();
+
+      if (this.groupRecordsAlias) this.groupRecordsName = this.groupRecordsAlias;
+
+      if (this.groupings) this.groupBy(this.groupings);
+   }
+
+   getRecords(context, instance, records, parentStore) {
+      let result = super.getRecords(context, instance, records, parentStore);
+
+      if (this.groupings) {
+         let groupedResults = [];
+         this.processLevel([], result, groupedResults, parentStore);
+         result = groupedResults;
+      }
+
+      return result;
+   }
+
+   processLevel(keys, records, result, parentStore) {
+      let level = keys.length;
+      let inverseLevel = this.groupings.length - level;
+
+      if (inverseLevel == 0) {
+         for (let i = 0; i < records.length; i++) {
+            records[i].store.setStore(parentStore);
+            result.push(records[i]);
+         }
+         return;
+      }
+
+      let grouping = this.groupings[level];
+      let { grouper } = grouping;
+      grouper.reset();
+      grouper.processAll(records);
+      let results = grouper.getResults();
+      if (grouping.comparer) results.sort(grouping.comparer);
+
+      results.forEach((gr) => {
+         keys.push(gr.key);
+
+         let key = keys.map(serializeKey).join("|");
+
+         let $group = {
+            ...gr.key,
+            ...gr.aggregates,
+            $name: gr.name,
+            $level: inverseLevel,
+            $records: gr.records || [],
+            $key: key,
+         };
+
+         let data = {
+            [this.recordName]: gr.records.length > 0 ? gr.records[0].data : null,
+            [this.groupName]: $group,
+         };
+
+         let groupStore = new ReadOnlyDataView({
+            store: parentStore,
+            data,
+            immutable: this.immutable,
+         });
+
+         let group = {
+            key,
+            data,
+            group: $group,
+            grouping,
+            store: groupStore,
+            level: inverseLevel,
+         };
+
+         if (grouping.includeHeader !== false)
+            result.push({
+               ...group,
+               type: "group-header",
+               key: "header:" + group.key,
+            });
+
+         this.processLevel(keys, gr.records, result, groupStore);
+
+         if (grouping.includeFooter !== false)
+            result.push({
+               ...group,
+               type: "group-footer",
+               key: "footer:" + group.key,
+            });
+
+         keys.pop();
+      });
+   }
+
+   groupBy(groupings) {
+      if (!groupings) this.groupings = null;
+      else if (isArray(groupings)) {
+         this.groupings = groupings;
+         this.groupings.forEach((g) => {
+            let groupSorters = [];
+            let key = {};
+            for (let name in g.key) {
+               if (!g.key[name] || !isDefined(g.key[name].direction) || !isDefined(g.key[name].value))
+                  g.key[name] = { value: g.key[name], direction: "ASC" };
+               key[name] = g.key[name].value;
+               groupSorters.push({
+                  field: name,
+                  direction: g.key[name].direction,
+               });
+            }
+            g.grouper = new Grouper(key, { ...this.aggregates, ...g.aggregates }, (r) => r.store.getData(), g.text);
+            g.comparer = null;
+            if (groupSorters.length > 0)
+               g.comparer = getComparer(
+                  groupSorters,
+                  (x) => x.key,
+                  this.sortOptions ? Culture.getComparer(this.sortOptions) : null,
+               );
+         });
+      } else throw new Error("Invalid grouping provided.");
+   }
+}
+
+GroupAdapter.prototype.groupName = "$group";
+
+function serializeKey(data) {
+   if (isObject(data))
+      return Object.keys(data)
+         .map((k) => serializeKey(data[k]))
+         .join(":");
+   return data?.toString() ?? "";
+}

package/src/util/Format.js

@@ -124,6 +124,13 @@ let formatFactory = {
             };
       }
    },
+
+   zeroPad: function (part0, length) {
+      return (value) => {
+         let s = String(value);
+         return s.padStart(length, "0");
+      };
+   },
 };
 
 formatFactory.s = formatFactory.str = formatFactory.string;
@@ -134,6 +141,7 @@ formatFactory.ps = formatFactory.percentageSign;
 formatFactory.d = formatFactory.date;
 formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
+formatFactory.zeropad = formatFactory.zeroPad;
 
 function buildFormatter(format) {
    let formatter = defaultFormatter,

package/src/widgets/grid/Grid.d.ts

@@ -139,6 +139,8 @@ interface GridColumnConfig {
    /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
    sortOptions?: CollatorOptions;
    colSpan?: NumberProp;
+
+   mergeCells?: Prop<null | false | "same-value" | "always">;
 }
 
 interface GridRowLineConfig {
@@ -321,7 +323,7 @@ interface GridProps<T = unknown> extends StyledContainerProps {
          sortField?: string;
          sortDirection?: string;
       },
-      instance?: Instance
+      instance?: Instance,
    ) => FetchRecordsResult | Promise<FetchRecordsResult>;
 
    /** Callback function to be executed when a row is double-clicked. */
@@ -354,7 +356,7 @@ interface GridProps<T = unknown> extends StyledContainerProps {
    /** Callback to create a function that can be used to check whether a record is selectable. */
    onCreateIsRecordSelectable?: (
       params: any,
-      instance: Instance
+      instance: Instance,
    ) => (record: T, options?: { range?: boolean; toggle?: boolean }) => boolean;
 
    /** Parameters whose change will cause scroll to be reset. */

package/src/widgets/grid/Grid.js

@@ -128,6 +128,9 @@ export class Grid extends Container {
 
       row.hasSortableColumns = false;
       row.hasResizableColumns = false;
+      row.hasMergedCells = false;
+      row.mergedColumns = [];
+
       let aggregates = {};
       let showFooter = false;
       let lines = [];
@@ -146,9 +149,18 @@ export class Grid extends Container {
       });
 
       row.header.items.forEach((line) => {
-         line.items.forEach((c) => {
+         line.items.forEach((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, mode: c.mergeCells });
+               }
+            }
+
             if (
                c.resizable ||
                (c.header && c.header.resizable) ||
@@ -609,15 +621,16 @@ export class Grid extends Container {
       if (!header) return null;
 
       let skip = {};
+      let lineIndex = 0;
 
-      header.children.forEach((line, lineIndex) => {
+      header.children.forEach((line) => {
          let empty = [true, true, true];
          let result = [[], [], []];
 
          line.children.forEach((hdinst, colIndex) => {
             let hdwidget = hdinst.widget;
             for (let l = 0; l < 3; l++) {
-               let colKey = `${lineIndex}-${colIndex}-${l}`;
+               let colKey = `${lineIndex + l}-${colIndex}`;
 
                if (skip[colKey]) continue;
 
@@ -690,7 +703,7 @@ export class Grid extends Container {
 
                      for (let r = 0; r < header.data.rowSpan; r++)
                         for (let c = 0; c < header.data.colSpan; c++)
-                           skip[`${lineIndex}-${colIndex + c}-${l + r}`] = true;
+                           skip[`${lineIndex + l + r}-${colIndex + c}`] = true;
                   }
 
                   if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
@@ -745,6 +758,7 @@ export class Grid extends Container {
          });
 
          result = result.filter((_, i) => !empty[i]);
+         lineIndex += result.length;
 
          if (result[0]) {
             if (fixed && !fixedColumns) {
@@ -1054,9 +1068,7 @@ export class Grid extends Container {
 
       for (let 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 = [];
@@ -1311,11 +1323,12 @@ class GridComponent extends VDOM.Component {
 
    createRowRenderer(cellWrap) {
       let { instance, data } = this.props;
-      let { widget, isRecordSelectable, visibleColumns, isRecordDraggable } = instance;
+      let { widget, isRecordSelectable, visibleColumns, isRecordDraggable, row } = instance;
       let { CSS, baseClass } = widget;
       let { dragSource } = data;
       let { dragged, cursor, cursorCellIndex, cellEdit, dropInsertionIndex, dropTarget } = this.state;
       let { colWidth, dimensionsVersion } = instance.state;
+      let { hasMergedCells } = row;
 
       return (record, index, standalone, fixed) => {
          let { store, key, row } = record;
@@ -1341,49 +1354,58 @@ class GridComponent extends VDOM.Component {
          mod["draggable"] = draggable;
          mod["non-draggable"] = !draggable;
 
-         let wrap = (children) => (
-            <GridRowComponent
-               key={key}
-               className={CSS.state(mod)}
-               store={store}
-               dragSource={dragSource}
-               instance={row}
-               grid={instance}
-               record={record}
-               parent={this}
-               cursorIndex={index}
-               selected={row.selected}
-               isBeingDragged={dragged}
-               isDraggedOver={mod.over}
-               cursor={mod.cursor}
-               cursorCellIndex={index == cursor && cursorCellIndex}
-               cellEdit={index == cursor && cursorCellIndex != null && cellEdit}
-               shouldUpdate={row.shouldUpdate}
-               dimensionsVersion={dimensionsVersion}
-               fixed={fixed}
-            >
-               {children.content.map(({ key, data, content }, line) => (
-                  <tr key={key} className={data.classNames} style={data.style}>
-                     {content.map(({ key, data, content, uniqueColumnId }, cellIndex) => {
-                        if (Boolean(data.fixed) !== fixed) return null;
-                        let cellected =
-                           index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
-                        let className = cellected
-                           ? CSS.expand(data.classNames, CSS.state("cellected"))
-                           : data.classNames;
-                        if (cellected && cellEdit) {
-                           let column = visibleColumns[cursorCellIndex];
-                           if (column && column.editor && data.editable)
-                              return this.renderCellEditor(key, CSS, baseClass, row, column);
-                        }
-                        let width = colWidth[uniqueColumnId];
-                        let style = data.style;
-                        if (width) {
-                           style = {
-                              ...style,
-                              maxWidth: `${width}px`,
-                           };
-                        }
+         let wrap = (children) => {
+            let skipCells = {};
+            return (
+               <GridRowComponent
+                  key={key}
+                  className={CSS.state(mod)}
+                  store={store}
+                  dragSource={dragSource}
+                  instance={row}
+                  grid={instance}
+                  record={record}
+                  parent={this}
+                  cursorIndex={index}
+                  selected={row.selected}
+                  isBeingDragged={dragged}
+                  isDraggedOver={mod.over}
+                  cursor={mod.cursor}
+                  cursorCellIndex={index == cursor && cursorCellIndex}
+                  cellEdit={index == cursor && cursorCellIndex != null && cellEdit}
+                  shouldUpdate={row.shouldUpdate}
+                  dimensionsVersion={dimensionsVersion}
+                  fixed={fixed}
+                  useTrTag={hasMergedCells}
+               >
+                  {children.content.map(({ key, data, content }, line) => {
+                  var cells = content.map(({ key, data, content, uniqueColumnId, merged, mergeRowSpan }, cellIndex) => {
+                     if (Boolean(data.fixed) !== fixed) return null;
+                     if (merged) return null;
+                     let cellected =
+                        index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
+                     let className = cellected ? CSS.expand(data.classNames, CSS.state("cellected")) : data.classNames;
+                     if (cellected && cellEdit) {
+                        let column = visibleColumns[cursorCellIndex];
+                        if (column && column.editor && data.editable)
+                           return this.renderCellEditor(key, CSS, baseClass, row, column);
+                     }
+                     let width = colWidth[uniqueColumnId];
+                     let style = data.style;
+                     if (width) {
+                        style = {
+                           ...style,
+                           maxWidth: `${width}px`,
+                        };
+                     }
+
+                     if (skipCells[`${line}-${cellIndex}`]) return null;
+
+                     if (data.colSpan > 1 || data.rowSpan > 1) {
+                        for (let r = line; r < line + (data.rowSpan ?? 1); r++)
+                           for (let c = cellIndex; c < cellIndex + (data.colSpan ?? 1); c++)
+                              skipCells[`${r}-${c}`] = true;
+                     }
 
                         if (cellWrap) content = cellWrap(content);
 
@@ -1393,16 +1415,22 @@ class GridComponent extends VDOM.Component {
                               className={className}
                               style={style}
                               colSpan={data.colSpan}
-                              rowSpan={data.rowSpan}
+                              rowSpan={mergeRowSpan ?? data.rowSpan}
                            >
                               {content}
                            </td>
                         );
-                     })}
-                  </tr>
-               ))}
-            </GridRowComponent>
-         );
+                     });
+                  if (hasMergedCells) return cells;
+                  return (
+                     <tr key={key} className={data.classNames} style={data.style}>
+                        {cells}
+                        </tr>
+                     );
+               })}
+               </GridRowComponent>
+            );
+         };
 
          if (!standalone) return wrap(record.vdom);
 
@@ -1570,10 +1598,53 @@ class GridComponent extends VDOM.Component {
          });
          instance.recordInstanceCache.sweep();
       } else {
+         let { row } = instance;
+         let { hasMergedCells, mergedColumns } = row;
+         if (hasMergedCells) {
+            // merge adjacent cells with the same value in columns that are marked as merged
+            let rowSpan = {};
+            let getCellRenderInfo = (vdom, cellIndex) => vdom.content[0]?.content[cellIndex];
+            for (let index = instance.records.length - 1; index >= 0; index--) {
+               let row = instance.records[index];
+               let prevRow = instance.records[index - 1];
+               if (row.type == "data") {
+                  let stopMerge = false;
+                  for (let mi = 0; mi < mergedColumns.length; mi++) {
+                     let mergedCol = mergedColumns[mi];
+                     let cellInfo = getCellRenderInfo(row.vdom, mergedCol.index);
+                     cellInfo.merged = false;
+                     delete cellInfo.mergeRowSpan;
+                     if (prevRow?.type == "data") {
+                        let shouldMerge = false;
+                        switch (mergedCol.mode) {
+                           case "always":
+                              shouldMerge = true;
+                              break;
+                           case "same-value":
+                              let prevCellInfo = getCellRenderInfo(prevRow.vdom, mergedCol.index);
+                              shouldMerge = !stopMerge && cellInfo.data.value === prevCellInfo.data.value;
+                              break;
+                        }
+
+                        if (shouldMerge) {
+                           cellInfo.merged = true;
+                           rowSpan[mergedCol.uniqueColumnId] = (rowSpan[mergedCol.uniqueColumnId] ?? 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((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);
             }