cx 24.3.2 → 24.3.4

package/src/widgets/grid/Grid.js

@@ -157,7 +157,7 @@ export class Grid extends Container {
             )
                row.hasResizableColumns = true;
 
-            if (c.aggregate && (c.aggregateField || isDefined(c.aggregateValue))) {
+            if (c.aggregate && c.aggregateAlias && (c.aggregateField || isDefined(c.aggregateValue))) {
                aggregates[c.aggregateAlias] = {
                   value: isDefined(c.aggregateValue)
                      ? c.aggregateValue
@@ -608,16 +608,15 @@ export class Grid extends Container {
       if (!header) return null;
 
       let skip = {};
-      let lineIndex = 0;
 
-      header.children.forEach((line) => {
+      header.children.forEach((line, lineIndex) => {
          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 + l}-${colIndex}`;
+               let colKey = `${lineIndex}-${colIndex}-${l}`;
 
                if (skip[colKey]) continue;
 
@@ -690,7 +689,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 + l + r}-${colIndex + c}`] = true;
+                           skip[`${lineIndex}-${colIndex + c}-${l + r}`] = true;
                   }
 
                   if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
@@ -745,7 +744,6 @@ export class Grid extends Container {
          });
 
          result = result.filter((_, i) => !empty[i]);
-         lineIndex += result.length;
 
          if (result[0]) {
             if (fixed && !fixedColumns) {
@@ -883,15 +881,22 @@ export class Grid extends Container {
                let v,
                   c = ci.widget,
                   colSpan,
-                  pad;
+                  pad,
+                  cls = "",
+                  style = null;
                if (c.caption) {
                   if (c.caption.children)
                      v = <Cx widget={c.caption.children} store={store} parentInstance={instance} subscribe />;
-                  else v = c.caption.value(data);
+                  else {
+                     v = c.caption.value(data);
+                     let fmt = c.caption.format(data);
+                     if (fmt) v = Format.value(v, fmt);
+                  }
                   pad = c.caption.pad;
                   colSpan = c.caption.colSpan;
                   empty = false;
-
+                  cls = CSS.expand(c.caption.class(data)) || "";
+                  style = parseStyle(c.caption.style(data));
                   if (c.caption.expand) {
                      colSpan = 1;
                      for (
@@ -905,19 +910,19 @@ export class Grid extends Container {
                   }
 
                   if (colSpan > 1) skip = colSpan - 1;
-               } else if (c.aggregate && c.aggregateField && c.caption !== false) {
+               } else if (c.aggregate && c.aggregateAlias && c.caption !== false) {
                   empty = false;
-                  v = group[c.aggregateField];
+                  v = group[c.aggregateAlias];
                   if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
                }
 
-               let cls = "";
+               if (cls) cls += " ";
                if (c.align) cls += CSS.state("aligned-" + c.align);
 
                if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
 
                return (
-                  <td key={i} className={cls} colSpan={colSpan}>
+                  <td key={i} className={cls} colSpan={colSpan} style={style}>
                      {v}
                   </td>
                );
@@ -988,9 +993,9 @@ export class Grid extends Container {
                }
 
                if (colSpan > 1) skip = colSpan - 1;
-            } else if (c.aggregate && c.aggregateField && c.footer !== false) {
+            } else if (c.aggregate && c.aggregateAlias && c.footer !== false) {
                empty = false;
-               v = group[c.aggregateField];
+               v = group[c.aggregateAlias];
                if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
             }
 
@@ -1240,6 +1245,7 @@ class GridComponent extends VDOM.Component {
          cursorCellIndex: 0,
          focused: widget.focused,
          dropInsertionIndex: null,
+         dropNextToTheRowAbove: null,
          start: 0,
          end: end,
       };
@@ -1333,79 +1339,68 @@ class GridComponent extends VDOM.Component {
          mod["draggable"] = draggable;
          mod["non-draggable"] = !draggable;
 
-         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}
-               >
-                  {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`,
-                              };
-                           }
-
-                           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);
-
-                           return (
-                              <td
-                                 key={key}
-                                 className={className}
-                                 style={style}
-                                 colSpan={data.colSpan}
-                                 rowSpan={data.rowSpan}
-                              >
-                                 {content}
-                              </td>
-                           );
-                        })}
-                     </tr>
-                  ))}
-               </GridRowComponent>
-            );
-         };
+         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`,
+                           };
+                        }
+
+                        if (cellWrap) content = cellWrap(content);
+
+                        return (
+                           <td
+                              key={key}
+                              className={className}
+                              style={style}
+                              colSpan={data.colSpan}
+                              rowSpan={data.rowSpan}
+                           >
+                              {content}
+                           </td>
+                        );
+                     })}
+                  </tr>
+               ))}
+            </GridRowComponent>
+         );
 
          if (!standalone) return wrap(record.vdom);
 
@@ -1597,7 +1592,25 @@ class GridComponent extends VDOM.Component {
                </tr>
             </tbody>
          );
-         children.splice(this.state.dropInsertionIndex, 0, dragInsertionRow);
+
+         let index = 0;
+         while (index < children.length && children[index]?.props?.record?.type != "data") index++;
+
+         let count = 0;
+         while (count < this.state.dropInsertionIndex) {
+            if (children[index]?.props?.record?.type == "data") count++;
+            index++;
+         }
+
+         let savedIndexPos = index;
+
+         if (!this.state.dropNextToTheRowAbove)
+            while (index < children.length && children[index]?.props?.record?.type != "data") index++;
+
+         // do not allow insertion after the last group footer
+         if (savedIndexPos < index && index == children.length) index = savedIndexPos;
+
+         children.splice(index, 0, dragInsertionRow);
       }
 
       let content = [],
@@ -1984,12 +1997,13 @@ class GridComponent extends VDOM.Component {
          let { instance } = this.props;
          let { widget } = instance;
          let { start } = this.getBufferStartEnd();
-         let { dropInsertionIndex, dropTarget } = this.state;
+         let { dropInsertionIndex, dropTarget, dropNextToTheRowAbove } = this.state;
          if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
             e.target = {
                insertionIndex: start + dropInsertionIndex,
                recordBefore: this.getRecordAt(start + dropInsertionIndex - 1),
                recordAfter: this.getRecordAt(start + dropInsertionIndex),
+               dropNextToTheRowAbove,
             };
             instance.invoke("onDrop", e, instance);
          } else if (dropTarget == "row") {
@@ -2103,6 +2117,7 @@ class GridComponent extends VDOM.Component {
       let cy = ev.cursor.clientY - parentOffset.top;
 
       let rowOverIndex = null;
+      let nextToTheRowAbove = false;
 
       while (s < e) {
          m = Math.floor((s + e) / 2);
@@ -2141,8 +2156,10 @@ class GridComponent extends VDOM.Component {
                }
             }
 
-            if (cy > (b.bottom + b.top) / 2) s = e = m + 1;
-            else s = e = m;
+            if (cy > (b.bottom + b.top) / 2) {
+               s = e = m + 1;
+               nextToTheRowAbove = true;
+            } else s = e = m;
          }
       }
 
@@ -2160,6 +2177,7 @@ class GridComponent extends VDOM.Component {
          else if (rowOverIndex != this.state.dropInsertionIndex || this.state.dropTarget != "row") {
             this.setState({
                dropInsertionIndex: rowOverIndex,
+               dropNextToTheRowAbove: false,
                dropItemHeight: ev.source.height - 1,
                dropTarget: "row",
             });
@@ -2178,6 +2196,7 @@ class GridComponent extends VDOM.Component {
          else if (s != this.state.dropInsertionIndex || this.state.dropTarget != "grid") {
             this.setState({
                dropInsertionIndex: s,
+               dropNextToTheRowAbove: nextToTheRowAbove,
                dropItemHeight: ev.source.height - 1,
                dropTarget: "grid",
             });
@@ -2186,6 +2205,7 @@ class GridComponent extends VDOM.Component {
       if (cancel) {
          this.setState({
             dropInsertionIndex: null,
+            dropNextToTheRowAbove: null,
             dropTarget: null,
          });
       }
@@ -2194,6 +2214,7 @@ class GridComponent extends VDOM.Component {
    onDragLeave(e) {
       this.setState({
          dropInsertionIndex: null,
+         dropNextToTheRowAbove: null,
          dropTarget: null,
       });
    }
@@ -3102,7 +3123,12 @@ class GridColumnHeader extends Widget {
          if (children) {
             delete this.caption.items;
             this.caption.children = Widget.create(children);
-         } else this.caption.value = getSelector(this.caption.value);
+         } else {
+            this.caption.value = getSelector(this.caption.value);
+            this.caption.class = getSelector(this.caption.class);
+            this.caption.style = getSelector(this.caption.style);
+            this.caption.format = getSelector(this.caption.format);
+         }
       }
 
       super.init();