cx 25.6.0 → 25.6.1

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> {}

package/src/widgets/grid/TreeNode.scss

@@ -1,88 +1,88 @@
-@mixin cx-treenode(
-   $name: "treenode",
-   $icon-size: $cx-default-icon-size,
-   $handle-size: $cx-default-input-tool-size,
-   $handle-state-style-map: $cx-input-right-icon-state-style-map,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}#{$name} {
-      padding-left: $handle-size + $icon-size * 0.25;
-      position: relative;
-
-      &.#{$state}icon {
-         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
-      }
-
-      @for $i from 1 through 20 {
-         &.#{$state}level-#{$i} {
-            margin-left: #{($i * 20)}px;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-
-      @include cx-add-state-rules($handle-state-style-map, default);
-
-      left: 0;
-      top: 50%;
-      margin-top: -$handle-size * 0.5;
-      bottom: 0;
-      width: $handle-size + $icon-size;
-      height: $handle-size;
-
-      &:hover {
-         @include cx-add-state-rules($handle-state-style-map, hover);
-      }
-
-      &:active {
-         @include cx-add-state-rules($handle-state-style-map, active);
-      }
-   }
-
-   .#{$element}#{$name}-arrow {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size - $icon-size) * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-      transform: rotate(-90deg);
-      transition: transform 0.2s;
-
-      .#{$state}expanded & {
-         transform: rotate(0);
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size + $icon-size) * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-   }
-
-   .#{$block}grid.#{$mod}tree {
-      td {
-         border-top: none;
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/TreeNode")) {
-   @include cx-treenode();
-}
+@mixin cx-treenode(
+   $name: "treenode",
+   $icon-size: $cx-default-icon-size,
+   $handle-size: $cx-default-input-tool-size,
+   $handle-state-style-map: $cx-input-right-icon-state-style-map,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}#{$name} {
+      padding-left: $handle-size + $icon-size * 0.25;
+      position: relative;
+
+      &.#{$state}icon {
+         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
+      }
+
+      @for $i from 1 through 20 {
+         &.#{$state}level-#{$i} {
+            margin-left: #{($i * 20)}px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+
+      @include cx-add-state-rules($handle-state-style-map, default);
+
+      left: 0;
+      top: 50%;
+      margin-top: -$handle-size * 0.5;
+      bottom: 0;
+      width: $handle-size + $icon-size;
+      height: $handle-size;
+
+      &:hover {
+         @include cx-add-state-rules($handle-state-style-map, hover);
+      }
+
+      &:active {
+         @include cx-add-state-rules($handle-state-style-map, active);
+      }
+   }
+
+   .#{$element}#{$name}-arrow {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size - $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      transform: rotate(-90deg);
+      transition: transform 0.2s;
+
+      .#{$state}expanded & {
+         transform: rotate(0);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size + $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+   }
+
+   .#{$block}grid.#{$mod}tree {
+      td {
+         border-top: none;
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/TreeNode")) {
+   @include cx-treenode();
+}