cx 22.1.2 → 22.1.3

package/src/widgets/grid/Grid.js

@@ -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,90 +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);
+                     }
                   }
                }
 
@@ -687,6 +704,7 @@ export class Grid extends Widget {
                      {getContent(content)}
                      {sortIcon}
                      {tool}
+                     {prevColumnResizer}
                      {resizer}
                   </th>
                );

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);