cx 22.1.0 → 22.1.3

package/src/widgets/grid/Grid.js

@@ -162,16 +162,16 @@ export class Grid extends Widget {
                   value: isDefined(c.aggregateValue)
                      ? c.aggregateValue
                      : isDefined(c.value)
-                        ? c.value
-                        : c.aggregateField
-                           ? { bind: this.recordName + "." + c.aggregateField }
-                           : null,
+                     ? c.value
+                     : c.aggregateField
+                     ? { bind: this.recordName + "." + c.aggregateField }
+                     : null,
                   weight:
                      c.weight != null
                         ? c.weight
                         : c.weightField && {
-                           bind: this.recordName + "." + c.weightField,
-                        },
+                             bind: this.recordName + "." + c.weightField,
+                          },
                   type: c.aggregate,
                };
             }
@@ -486,6 +486,100 @@ export class Grid extends Widget {
       );
    }
 
+   renderResizer(instance, hdinst, header, colIndex, forPreviousColumn) {
+      let { widget } = instance;
+
+      let { CSS, baseClass } = widget;
+
+      let hdwidget = hdinst.widget;
+
+      let resizerClassName = "col-resizer";
+      if (forPreviousColumn) resizerClassName += "-prev-col";
+
+      return (
+         <div
+            className={CSS.element(baseClass, resizerClassName)}
+            onClick={(e) => {
+               e.stopPropagation();
+            }}
+            onMouseDown={(e) => {
+               if (e.buttons != 1) return;
+               let resizeOverlayEl = document.createElement("div");
+               let headerCell = e.target.parentElement;
+               if (forPreviousColumn) headerCell = headerCell.previousSibling;
+
+               let scrollAreaEl = headerCell.parentElement.parentElement.parentElement.parentElement;
+               let gridEl = scrollAreaEl.parentElement;
+               let initialWidth = headerCell.offsetWidth;
+               let initialPosition = getCursorPos(e);
+               resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
+               resizeOverlayEl.style.width = `${initialWidth}px`;
+               resizeOverlayEl.style.left = `${
+                  headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
+               }px`;
+               gridEl.appendChild(resizeOverlayEl);
+               captureMouse2(e, {
+                  onMouseMove: (e) => {
+                     let cursor = getCursorPos(e);
+                     let width = Math.max(30, Math.round(initialWidth + cursor.clientX - initialPosition.clientX));
+                     resizeOverlayEl.style.width = `${width}px`;
+                  },
+                  onMouseUp: (e) => {
+                     if (!resizeOverlayEl) return; //dblclick
+                     let width = resizeOverlayEl.offsetWidth;
+                     hdinst.assignedWidth = width;
+                     gridEl.removeChild(resizeOverlayEl);
+                     resizeOverlayEl = null;
+                     if (widget.onColumnResize) instance.invoke("onColumnResize", { width, column: hdwidget }, hdinst);
+                     header.set("width", width);
+                     instance.setState({
+                        dimensionsVersion: instance.state.dimensionsVersion + 1,
+                        colWidth: {
+                           ...instance.state.colWidth,
+                           [hdwidget.uniqueColumnId]: width,
+                        },
+                     });
+                  },
+                  onDblClick: () => {
+                     let table = gridEl.querySelector("table");
+                     let parentEl = table.parentElement;
+                     let tableClone = table.cloneNode(true);
+                     tableClone.childNodes.forEach((tbody) => {
+                        tbody.childNodes.forEach((tr) => {
+                           tr.childNodes.forEach((td, index) => {
+                              if (index == colIndex) {
+                                 td.style.maxWidth = null;
+                                 td.style.minWidth = null;
+                                 td.style.width = "auto";
+                              } else {
+                                 td.style.display = "none";
+                              }
+                           });
+                        });
+                     });
+                     tableClone.style.position = "absolute";
+                     tableClone.style.visibility = "hidden";
+                     tableClone.style.top = 0;
+                     tableClone.style.left = 0;
+                     tableClone.style.width = "auto";
+                     parentEl.appendChild(tableClone);
+                     let width = tableClone.offsetWidth;
+                     parentEl.removeChild(tableClone);
+                     header.set("width", width);
+                     instance.setState({
+                        dimensionsVersion: instance.state.dimensionsVersion + 1,
+                        colWidth: {
+                           ...instance.state.colWidth,
+                           [hdwidget.uniqueColumnId]: width,
+                        },
+                     });
+                  },
+               });
+            }}
+         />
+      );
+   }
+
    renderHeader(context, instance, key, fixed, fixedColumns) {
       let { data, widget, header } = instance;
 
@@ -520,7 +614,8 @@ export class Grid extends Widget {
                   sortIcon,
                   tool;
 
-               let resizer = null;
+               let resizer = null,
+                  prevColumnResizer = null;
 
                if (header) {
                   empty[l] = false;
@@ -578,89 +673,12 @@ export class Grid extends Widget {
                   }
 
                   if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
-                     resizer = (
-                        <div
-                           className={CSS.element(baseClass, "col-resizer")}
-                           onClick={(e) => {
-                              e.stopPropagation();
-                           }}
-                           onMouseDown={(e) => {
-                              if (e.buttons != 1) return;
-                              let resizeOverlayEl = document.createElement("div");
-                              let headerCell = e.target.parentElement;
-                              let scrollAreaEl = headerCell.parentElement.parentElement.parentElement.parentElement;
-                              let gridEl = scrollAreaEl.parentElement;
-                              let initialWidth = headerCell.offsetWidth;
-                              let initialPosition = getCursorPos(e);
-                              resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
-                              resizeOverlayEl.style.width = `${initialWidth}px`;
-                              resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
-                                 }px`;
-                              gridEl.appendChild(resizeOverlayEl);
-                              captureMouse2(e, {
-                                 onMouseMove: (e) => {
-                                    let cursor = getCursorPos(e);
-                                    let width = Math.max(
-                                       30,
-                                       Math.round(initialWidth + cursor.clientX - initialPosition.clientX)
-                                    );
-                                    resizeOverlayEl.style.width = `${width}px`;
-                                 },
-                                 onMouseUp: (e) => {
-                                    if (!resizeOverlayEl) return; //dblclick
-                                    let width = resizeOverlayEl.offsetWidth;
-                                    hdinst.assignedWidth = width;
-                                    gridEl.removeChild(resizeOverlayEl);
-                                    resizeOverlayEl = null;
-                                    if (widget.onColumnResize)
-                                       instance.invoke("onColumnResize", { width, column: hdwidget }, hdinst);
-                                    header.set("width", width);
-                                    instance.setState({
-                                       dimensionsVersion: instance.state.dimensionsVersion + 1,
-                                       colWidth: {
-                                          ...instance.state.colWidth,
-                                          [hdwidget.uniqueColumnId]: width,
-                                       },
-                                    });
-                                 },
-                                 onDblClick: () => {
-                                    let table = gridEl.querySelector("table");
-                                    let parentEl = table.parentElement;
-                                    let tableClone = table.cloneNode(true);
-                                    tableClone.childNodes.forEach((tbody) => {
-                                       tbody.childNodes.forEach((tr) => {
-                                          tr.childNodes.forEach((td, index) => {
-                                             if (index == colIndex) {
-                                                td.style.maxWidth = null;
-                                                td.style.minWidth = null;
-                                                td.style.width = "auto";
-                                             } else {
-                                                td.style.display = "none";
-                                             }
-                                          });
-                                       });
-                                    });
-                                    tableClone.style.position = "absolute";
-                                    tableClone.style.visibility = "hidden";
-                                    tableClone.style.top = 0;
-                                    tableClone.style.left = 0;
-                                    tableClone.style.width = "auto";
-                                    parentEl.appendChild(tableClone);
-                                    let width = tableClone.offsetWidth;
-                                    parentEl.removeChild(tableClone);
-                                    header.set("width", width);
-                                    instance.setState({
-                                       dimensionsVersion: instance.state.dimensionsVersion + 1,
-                                       colWidth: {
-                                          ...instance.state.colWidth,
-                                          [hdwidget.uniqueColumnId]: width,
-                                       },
-                                    });
-                                 },
-                              });
-                           }}
-                        />
-                     );
+                     resizer = this.renderResizer(instance, hdinst, header, colIndex);
+                     if (colIndex > 0) {
+                        let hdinstPrev = line.children[colIndex - 1];
+                        let headerPrev = hdinstPrev.components[`header${l + 1}`];
+                        prevColumnResizer = this.renderResizer(instance, hdinstPrev, headerPrev, colIndex, true);
+                     }
                   }
                }
 
@@ -686,6 +704,7 @@ export class Grid extends Widget {
                      {getContent(content)}
                      {sortIcon}
                      {tool}
+                     {prevColumnResizer}
                      {resizer}
                   </th>
                );
@@ -743,7 +762,7 @@ export class Grid extends Widget {
                   widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
                },
             },
-            () => { }
+            () => {}
          );
       }
    }
@@ -769,14 +788,14 @@ export class Grid extends Widget {
 
          let sorters = direction
             ? [
-               {
-                  field,
-                  direction,
-                  value,
-                  comparer,
-                  sortOptions,
-               },
-            ]
+                 {
+                    field,
+                    direction,
+                    value,
+                    comparer,
+                    sortOptions,
+                 },
+              ]
             : null;
 
          instance.set("sorters", sorters);
@@ -1018,7 +1037,6 @@ export class Grid extends Widget {
                   )
                );
 
-
             if (g.showHeader) {
                record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
                if (hasFixedColumns)
@@ -1076,7 +1094,7 @@ export class Grid extends Widget {
          instance,
          record.grouping,
          record.level,
-         record.group || { "$key": "fixed-footer" },
+         record.group || { $key: "fixed-footer" },
          record.key + "-footer",
          record.store,
          true,
@@ -1089,7 +1107,7 @@ export class Grid extends Widget {
             instance,
             record.grouping,
             record.level,
-            record.group || { "$key": "fixed-footer" },
+            record.group || { $key: "fixed-footer" },
             record.key + "-footer",
             record.store,
             true,
@@ -1215,8 +1233,8 @@ class GridComponent extends VDOM.Component {
                   style={
                      this.rowHeight > 0
                         ? {
-                           height: this.rowHeight + 1,
-                        }
+                             height: this.rowHeight + 1,
+                          }
                         : null
                   }
                >
@@ -1484,8 +1502,6 @@ class GridComponent extends VDOM.Component {
                               true
                            )
                         );
-
-
                   }
                }
             }
@@ -1915,8 +1931,7 @@ class GridComponent extends VDOM.Component {
             };
             instance.invoke("onColumnDrop", e, instance);
          }
-      }
-      catch (err) {
+      } catch (err) {
          console.error("Grid drop operation failed. Please fix this error:", err);
       }
 
@@ -2483,8 +2498,26 @@ class GridComponent extends VDOM.Component {
                }
             }
 
-            if (futureState.cellEdit && !wasCellEditing)
-               this.cellEditUndoData = this.getRecordAt(futureState.cursor).data;
+            if (futureState.cellEdit && !wasCellEditing) {
+               let record = this.getRecordAt(futureState.cursor);
+               let cellEditUndoData = record.data;
+
+               if (
+                  widget.onBeforeCellEdit &&
+                  this.props.instance.invoke(
+                     "onBeforeCellEdit",
+                     {
+                        column: visibleColumns[futureState.cursorCellIndex],
+                        data: cellEditUndoData,
+                        field: visibleColumns[futureState.cursorCellIndex].field,
+                     },
+                     record
+                  ) === false
+               )
+                  return;
+
+               this.cellEditUndoData = cellEditUndoData;
+            }
 
             this.setState(newState, () => {
                if (this.state.focused && !this.state.cellEdit && wasCellEditing) FocusManager.focus(this.dom.el);
@@ -2501,7 +2534,7 @@ class GridComponent extends VDOM.Component {
                            hscroll = true;
                            item =
                               item.firstChild.children[
-                              this.state.cursorCellIndex - this.props.instance.fixedColumnCount
+                                 this.state.cursorCellIndex - this.props.instance.fixedColumnCount
                               ];
                         } else {
                            let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);
@@ -3155,7 +3188,6 @@ class AvgHeight {
    }
 }
 
-
 function getDragDropEvent(ev) {
    return {
       event: ev,
@@ -3164,7 +3196,7 @@ function getDragDropEvent(ev) {
       source: {
          width: 32,
          height: 32,
-         margin: []
-      }
+         margin: [],
+      },
    };
-}
+}

package/src/widgets/grid/Grid.scss

@@ -613,6 +613,15 @@
       cursor: col-resize;
    }
 
+   .#{$element}#{$name}-col-resizer-prev-col {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 5px;
+      cursor: col-resize;
+   }
+
    .#{$element}#{$name}-resize-overlay {
       position: absolute;
       display: block;

package/src/widgets/nav/Tab.js

@@ -1,38 +1,39 @@
-import {Widget, VDOM} from '../../ui/Widget';
-import {HtmlElement} from '../HtmlElement';
-import {preventFocusOnTouch} from '../../ui/FocusManager';
-import {isUndefined} from '../../util/isUndefined';
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import { isUndefined } from "../../util/isUndefined";
 
 export class Tab extends HtmlElement {
-
    declareData() {
-      super.declareData({
-         tab: undefined,
-         value: undefined,
-         disabled: undefined,
-         text: undefined
-      }, ...arguments);
+      super.declareData(
+         {
+            tab: undefined,
+            value: undefined,
+            disabled: undefined,
+            text: undefined,
+         },
+         ...arguments
+      );
    }
 
    prepareData(context, instance) {
-      let {data} = instance;
+      let { data } = instance;
       data.stateMods = {
          active: data.tab == data.value,
          disabled: data.disabled,
-         shape: this.shape
+         shape: this.shape,
       };
-      if (this.default && isUndefined(data.value))
-         instance.set('value', data.tab);
+      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
       super.prepareData(context, instance);
    }
 
    isValidHtmlAttribute(attrName) {
       switch (attrName) {
-         case 'value':
-         case 'tab':
-         case 'text':
-         case 'disabled':
-         case 'default':
+         case "value":
+         case "tab":
+         case "text":
+         case "disabled":
+         case "default":
             return false;
 
          default:
@@ -43,41 +44,39 @@ export class Tab extends HtmlElement {
    attachProps(context, instance, props) {
       super.attachProps(context, instance, props);
 
-      let {data} = instance;
+      let { data } = instance;
       if (!data.disabled) {
-         props.href = '#';
+         props.href = "#";
          delete props.value;
 
-         props.onMouseDown = e => {
-            if (this.onMouseDown)
-               instance.invoke('onMouseDown', e, instance);
+         props.onMouseDown = (e) => {
+            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
             preventFocusOnTouch(e);
          };
 
-         props.onClick = e => this.handleClick(e, instance);
+         props.onClick = (e) => this.handleClick(e, instance);
       }
    }
 
    handleClick(e, instance) {
-
-      if (this.onClick)
-         instance.invoke('onClick', e, instance);
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+         return;
+      }
 
       e.preventDefault();
       e.stopPropagation();
 
-      let {data} = instance;
+      let { data } = instance;
 
-      if (data.disabled)
-         return;
+      if (data.disabled) return;
 
-      instance.set('value', data.tab);
+      instance.set("value", data.tab);
    }
 }
 
 Tab.prototype.baseClass = "tab";
-Tab.prototype.tag = 'a';
+Tab.prototype.tag = "a";
 Tab.prototype.focusOnMouseDown = false;
 Tab.prototype.default = false;
 
-Widget.alias('tab', Tab);
+Widget.alias("tab", Tab);