cx 25.6.3 → 25.7.0

package/src/widgets/grid/Grid.js

@@ -102,6 +102,7 @@ export class Grid extends Container {
          colWidth: {},
          lockedColWidth: {},
          dimensionsVersion: 0,
+         disableDefaultSort: false
       };
       instance.v = 0;
       if (this.infinite)
@@ -182,16 +183,16 @@ export class Grid extends Container {
                   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,
                };
             } else if (c.footer && !showFooter) {
@@ -295,7 +296,8 @@ export class Grid extends Container {
          data.sorters = [sorter];
       }
 
-      if (!isNonEmptyArray(data.sorters) && this.defaultSortField) {
+      let skipDefaultSorting = this.clearableSort && instance.state.disableDefaultSort;
+      if (!skipDefaultSorting && !isNonEmptyArray(data.sorters) && this.defaultSortField) {
          let sorter = {
             field: this.defaultSortField,
             direction: this.defaultSortDirection || "ASC",
@@ -553,9 +555,8 @@ export class Grid extends Container {
                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`;
+               resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left
+                  }px`;
                gridEl.appendChild(resizeOverlayEl);
                captureMouse2(e, {
                   onMouseMove: (e) => {
@@ -817,7 +818,7 @@ export class Grid extends Container {
                   widget: () => <div className={CSS.element(baseClass, "col-header-drag-clone")}>{data.text}</div>,
                },
             },
-            () => {},
+            () => { },
          );
       }
    }
@@ -852,19 +853,22 @@ export class Grid extends Container {
             if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC")) direction = "DESC";
             else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
                direction = "ASC";
-            else direction = null;
+            else {
+               direction = null;
+               instance.state.disableDefaultSort = true;
+            }
          }
 
          let sorters = direction
             ? [
-                 {
-                    field,
-                    direction,
-                    value,
-                    comparer,
-                    sortOptions,
-                 },
-              ]
+               {
+                  field,
+                  direction,
+                  value,
+                  comparer,
+                  sortOptions,
+               },
+            ]
             : null;
 
          if (sorters == null) field = null;
@@ -1315,8 +1319,8 @@ class GridComponent extends VDOM.Component {
                   style={
                      this.rowHeight > 0
                         ? {
-                             height: this.rowHeight + 1,
-                          }
+                           height: this.rowHeight + 1,
+                        }
                         : null
                   }
                >
@@ -2598,6 +2602,7 @@ class GridComponent extends VDOM.Component {
                instance.buffer.totalRecordCount = 0;
                instance.buffer.page = 1;
                this.prevFetchRecordsState = null;
+               this.loading = false;
             }
          }
 
@@ -2726,7 +2731,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}"]`);

package/src/widgets/grid/GridRow.js

@@ -1,228 +1,228 @@
-import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
-import { VDOM } from "../../ui/Widget";
-import { closest } from "../../util/DOM";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { KeyCode } from "../../util/KeyCode";
-import { ValidationGroup } from "../../widgets/form/ValidationGroup";
-import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
-import { GridRowLine } from "./GridRowLine";
-
-export class GridRow extends ValidationGroup {
-   declareData(...args) {
-      super.declareData(...args, {
-         hoverId: undefined,
-      });
-   }
-
-   init() {
-      this.items = [];
-      for (let i = 0; i < 10; i++) {
-         if (this["line" + i])
-            this.items.push(
-               GridRowLine.create(this["line" + i], {
-                  recordName: this.recordName,
-               }),
-            );
-      }
-      super.init();
-   }
-
-   explore(context, instance) {
-      context.push("dragHandles", (instance.dragHandles = []));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      super.exploreCleanup(context, instance);
-      context.pop("dragHandles");
-   }
-}
-
-GridRow.prototype.styled = true; //styles used on the wrapper component
-
-export class GridRowComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseDown = this.onMouseDown.bind(this);
-      this.onMouseLeave = this.onMouseLeave.bind(this);
-      this.onClick = this.onClick.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-
-      let { grid, instance } = props;
-
-      if (grid.widget.onRowDoubleClick)
-         this.onDoubleClick = (e) => {
-            grid.invoke("onRowDoubleClick", e, instance);
-         };
-
-      if (grid.widget.cellEditable)
-         this.onDoubleClick = (e) => {
-            this.props.parent.moveCursor(this.props.cursorIndex, {
-               cellEdit: true,
-            });
-            e.preventDefault(); //prevent text selection
-         };
-
-      if (grid.widget.onRowContextMenu)
-         this.onRowContextMenu = (e) => {
-            grid.invoke("onRowContextMenu", e, instance);
-         };
-   }
-
-   render() {
-      let { className, dragSource, instance, record, useTrTag, children } = this.props;
-      let { data, widget } = instance;
-      let { CSS } = widget;
-      let move, up, keyDown, leave;
-
-      if (dragSource || data.hoverId != null) {
-         move = this.onMouseMove;
-         up = ddMouseUp;
-      }
-
-      if (data.hoverId != null) {
-         leave = this.onMouseLeave;
-      }
-
-      if (widget.onRowClick) keyDown = this.onKeyDown;
-
-      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,
-      );
-   }
-
-   onMouseDown(e) {
-      let { grid, record, instance, parent, cursorIndex } = this.props;
-
-      if (this.props.dragSource) {
-         ddMouseDown(e);
-         if (isDragHandleEvent(e) || instance.dragHandles.length == 0) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            //close context menu
-            unfocusElement(e.target, false);
-         }
-      }
-
-      let { store, widget } = grid;
-
-      if (widget.selectable) preventFocusOnTouch(e);
-
-      parent.moveCursor(cursorIndex, {
-         select:
-            !isTouchEvent() &&
-            (e.shiftKey || e.ctrlKey || !widget.selection.isSelected(store, record.data, record.index)),
-         selectRange: e.shiftKey,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         cellIndex: this.getCellIndex(e),
-      });
-
-      if (e.shiftKey && !isTouchEvent()) e.preventDefault();
-   }
-
-   onMouseMove(e) {
-      let { grid, instance, parent, record } = this.props;
-      if (ddDetect(e) && (isDragHandleEvent(e) || instance.dragHandles.length == 0)) parent.beginDragDrop(e, record);
-      if (grid.hoverSync && instance.data.hoverId != null)
-         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, true);
-   }
-
-   onMouseLeave(e) {
-      let { grid, instance } = this.props;
-      if (grid.hoverSync && instance.data.hoverId != null)
-         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, false);
-   }
-
-   getCellIndex(e) {
-      let td = closest(e.target, (node) => node.tagName == "TD");
-      if (td)
-         return (
-            (this.props.fixed ? 0 : this.props.grid.fixedColumnCount) +
-            Array.from(td.parentElement.children).indexOf(td)
-         );
-      return -1;
-   }
-
-   onKeyDown(e) {
-      let { grid, instance } = this.props;
-
-      if (e.keyCode == KeyCode.enter && grid.invoke("onRowClick", e, instance) === false) {
-         e.stopPropagation();
-      }
-   }
-
-   onClick(e) {
-      let { grid, record, instance, parent, cursorIndex } = this.props;
-      let { store, widget } = grid;
-
-      if (grid.widget.onRowClick) {
-         if (grid.invoke("onRowClick", e, instance) === false) return;
-      }
-
-      e.stopPropagation();
-
-      parent.moveCursor(cursorIndex, {
-         select:
-            isTouchEvent() ||
-            (!e.shiftKey && !e.ctrlKey && widget.selection.isSelected(store, record.data, record.index)),
-         selectRange: e.shiftKey,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         cellIndex: this.getCellIndex(e),
-      });
-   }
-
-   shouldComponentUpdate(props, state) {
-      return (
-         props.shouldUpdate !== false ||
-         props.record != this.props.record ||
-         props.cursor != this.props.cursor ||
-         props.selected != this.props.selected ||
-         props.isBeingDragged != this.props.isBeingDragged ||
-         props.cursorIndex !== this.props.cursorIndex ||
-         props.cursorCellIndex !== this.props.cursorCellIndex ||
-         props.cellEdit !== this.props.cellEdit ||
-         props.dimensionsVersion !== this.props.dimensionsVersion ||
-         props.isDraggedOver !== this.props.isDraggedOver ||
-         state !== this.state
-      );
-   }
-
-   compontentWillUnmount() {
-      this.unsubscribeHoverSync && this.unsubscribeHoverSync();
-   }
-
-   componentDidMount() {
-      let { grid } = this.props;
-      if (grid.hoverSync) {
-         this.unsubscribeHoverSync = grid.hoverSync.subscribe(grid.widget.hoverChannel, (hoverId) => {
-            let hover = hoverId === this.props.instance.data.hoverId;
-            if (!this.state || hover !== this.state.hover) this.setState({ hover });
-         });
-      }
-   }
-}
+import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
+import { VDOM } from "../../ui/Widget";
+import { closest } from "../../util/DOM";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { KeyCode } from "../../util/KeyCode";
+import { ValidationGroup } from "../../widgets/form/ValidationGroup";
+import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
+import { GridRowLine } from "./GridRowLine";
+
+export class GridRow extends ValidationGroup {
+   declareData(...args) {
+      super.declareData(...args, {
+         hoverId: undefined,
+      });
+   }
+
+   init() {
+      this.items = [];
+      for (let i = 0; i < 10; i++) {
+         if (this["line" + i])
+            this.items.push(
+               GridRowLine.create(this["line" + i], {
+                  recordName: this.recordName,
+               }),
+            );
+      }
+      super.init();
+   }
+
+   explore(context, instance) {
+      context.push("dragHandles", (instance.dragHandles = []));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      super.exploreCleanup(context, instance);
+      context.pop("dragHandles");
+   }
+}
+
+GridRow.prototype.styled = true; //styles used on the wrapper component
+
+export class GridRowComponent extends VDOM.Component {
+   constructor(props) {
+      super(props);
+      this.onMouseMove = this.onMouseMove.bind(this);
+      this.onMouseDown = this.onMouseDown.bind(this);
+      this.onMouseLeave = this.onMouseLeave.bind(this);
+      this.onClick = this.onClick.bind(this);
+      this.onKeyDown = this.onKeyDown.bind(this);
+
+      let { grid, instance } = props;
+
+      if (grid.widget.onRowDoubleClick)
+         this.onDoubleClick = (e) => {
+            grid.invoke("onRowDoubleClick", e, instance);
+         };
+
+      if (grid.widget.cellEditable)
+         this.onDoubleClick = (e) => {
+            this.props.parent.moveCursor(this.props.cursorIndex, {
+               cellEdit: true,
+            });
+            e.preventDefault(); //prevent text selection
+         };
+
+      if (grid.widget.onRowContextMenu)
+         this.onRowContextMenu = (e) => {
+            grid.invoke("onRowContextMenu", e, instance);
+         };
+   }
+
+   render() {
+      let { className, dragSource, instance, record, useTrTag, children } = this.props;
+      let { data, widget } = instance;
+      let { CSS } = widget;
+      let move, up, keyDown, leave;
+
+      if (dragSource || data.hoverId != null) {
+         move = this.onMouseMove;
+         up = ddMouseUp;
+      }
+
+      if (data.hoverId != null) {
+         leave = this.onMouseLeave;
+      }
+
+      if (widget.onRowClick) keyDown = this.onKeyDown;
+
+      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,
+      );
+   }
+
+   onMouseDown(e) {
+      let { grid, record, instance, parent, cursorIndex } = this.props;
+
+      if (this.props.dragSource) {
+         ddMouseDown(e);
+         if (isDragHandleEvent(e) || instance.dragHandles.length == 0) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            //close context menu
+            unfocusElement(e.target, false);
+         }
+      }
+
+      let { store, widget } = grid;
+
+      if (widget.selectable) preventFocusOnTouch(e);
+
+      parent.moveCursor(cursorIndex, {
+         select:
+            !isTouchEvent() &&
+            (e.shiftKey || e.ctrlKey || !widget.selection.isSelected(store, record.data, record.index)),
+         selectRange: e.shiftKey,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         cellIndex: this.getCellIndex(e),
+      });
+
+      if (e.shiftKey && !isTouchEvent()) e.preventDefault();
+   }
+
+   onMouseMove(e) {
+      let { grid, instance, parent, record } = this.props;
+      if (ddDetect(e) && (isDragHandleEvent(e) || instance.dragHandles.length == 0)) parent.beginDragDrop(e, record);
+      if (grid.hoverSync && instance.data.hoverId != null)
+         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, true);
+   }
+
+   onMouseLeave(e) {
+      let { grid, instance } = this.props;
+      if (grid.hoverSync && instance.data.hoverId != null)
+         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, false);
+   }
+
+   getCellIndex(e) {
+      let td = closest(e.target, (node) => node.tagName == "TD");
+      if (td)
+         return (
+            (this.props.fixed ? 0 : this.props.grid.fixedColumnCount) +
+            Array.from(td.parentElement.children).indexOf(td)
+         );
+      return -1;
+   }
+
+   onKeyDown(e) {
+      let { grid, instance } = this.props;
+
+      if (e.keyCode == KeyCode.enter && grid.invoke("onRowClick", e, instance) === false) {
+         e.stopPropagation();
+      }
+   }
+
+   onClick(e) {
+      let { grid, record, instance, parent, cursorIndex } = this.props;
+      let { store, widget } = grid;
+
+      if (grid.widget.onRowClick) {
+         if (grid.invoke("onRowClick", e, instance) === false) return;
+      }
+
+      e.stopPropagation();
+
+      parent.moveCursor(cursorIndex, {
+         select:
+            isTouchEvent() ||
+            (!e.shiftKey && !e.ctrlKey && widget.selection.isSelected(store, record.data, record.index)),
+         selectRange: e.shiftKey,
+         selectOptions: {
+            toggle: e.ctrlKey && !e.shiftKey,
+            add: e.ctrlKey && e.shiftKey,
+         },
+         cellIndex: this.getCellIndex(e),
+      });
+   }
+
+   shouldComponentUpdate(props, state) {
+      return (
+         props.shouldUpdate !== false ||
+         props.record != this.props.record ||
+         props.cursor != this.props.cursor ||
+         props.selected != this.props.selected ||
+         props.isBeingDragged != this.props.isBeingDragged ||
+         props.cursorIndex !== this.props.cursorIndex ||
+         props.cursorCellIndex !== this.props.cursorCellIndex ||
+         props.cellEdit !== this.props.cellEdit ||
+         props.dimensionsVersion !== this.props.dimensionsVersion ||
+         props.isDraggedOver !== this.props.isDraggedOver ||
+         state !== this.state
+      );
+   }
+
+   compontentWillUnmount() {
+      this.unsubscribeHoverSync && this.unsubscribeHoverSync();
+   }
+
+   componentDidMount() {
+      let { grid } = this.props;
+      if (grid.hoverSync) {
+         this.unsubscribeHoverSync = grid.hoverSync.subscribe(grid.widget.hoverChannel, (hoverId) => {
+            let hover = hoverId === this.props.instance.data.hoverId;
+            if (!this.state || hover !== this.state.hover) this.setState({ hover });
+         });
+      }
+   }
+}

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

@@ -1,23 +1,23 @@
-import * as Cx from "../../core";
-
-interface TreeNodeProps extends Cx.WidgetProps {
-   level?: Cx.NumberProp;
-   expanded?: Cx.BooleanProp;
-   leaf?: Cx.BooleanProp;
-   text?: Cx.StringProp;
-   loading?: Cx.BooleanProp;
-   icon?: Cx.StringProp;
-
-   itemIcon?: Cx.StringProp;
-   leafIcon?: Cx.StringProp;
-   loadingIcon?: string;
-   folderIcon?: Cx.StringProp;
-   openFolderIcon?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to 'treenode'. */
-   baseClass?: string;
-   hideIcon?: boolean;
-   hideArrow?: Cx.BooleanProp;
-}
-
-export class TreeNode extends Cx.Widget<TreeNodeProps> {}
+import * as Cx from "../../core";
+
+interface TreeNodeProps extends Cx.WidgetProps {
+   level?: Cx.NumberProp;
+   expanded?: Cx.BooleanProp;
+   leaf?: Cx.BooleanProp;
+   text?: Cx.StringProp;
+   loading?: Cx.BooleanProp;
+   icon?: Cx.StringProp;
+
+   itemIcon?: Cx.StringProp;
+   leafIcon?: Cx.StringProp;
+   loadingIcon?: string;
+   folderIcon?: Cx.StringProp;
+   openFolderIcon?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to 'treenode'. */
+   baseClass?: string;
+   hideIcon?: boolean;
+   hideArrow?: Cx.BooleanProp;
+}
+
+export class TreeNode extends Cx.Widget<TreeNodeProps> {}