cx 24.6.2 → 24.6.4

package/src/widgets/drag-drop/DragHandle.js

@@ -1,37 +1,37 @@
-import { Widget, VDOM } from '../../ui/Widget';
-import { Container } from '../../ui/Container';
-import { ddHandle } from '../drag-drop/ops';
-import {isArray} from '../../util/isArray';
-
-export class DragHandle extends Container {
-
-   explore(context, instance) {
-      if (isArray(context.dragHandles))
-         context.dragHandles.push(instance);
-      super.explore(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data} = instance;
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onTouchStart={ddHandle}
-            onMouseDown={ddHandle}
-            onTouchMove={ddHandle}
-            onMouseMove={ddHandle}
-            onTouchEnd={ddHandle}
-            onMouseUp={ddHandle}
-         >
-            {this.renderChildren(context, instance)}
-         </div>
-      )
-   }
-}
-
-DragHandle.prototype.styled = true;
-DragHandle.prototype.baseClass = 'draghandle';
-
-Widget.alias('draghandle', DragHandle);
+import { Widget, VDOM } from '../../ui/Widget';
+import { Container } from '../../ui/Container';
+import { ddHandle } from '../drag-drop/ops';
+import {isArray} from '../../util/isArray';
+
+export class DragHandle extends Container {
+
+   explore(context, instance) {
+      if (isArray(context.dragHandles))
+         context.dragHandles.push(instance);
+      super.explore(context, instance);
+   }
+
+   render(context, instance, key) {
+      let {data} = instance;
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onTouchStart={ddHandle}
+            onMouseDown={ddHandle}
+            onTouchMove={ddHandle}
+            onMouseMove={ddHandle}
+            onTouchEnd={ddHandle}
+            onMouseUp={ddHandle}
+         >
+            {this.renderChildren(context, instance)}
+         </div>
+      )
+   }
+}
+
+DragHandle.prototype.styled = true;
+DragHandle.prototype.baseClass = 'draghandle';
+
+Widget.alias('draghandle', DragHandle);

package/src/widgets/drag-drop/DragHandle.scss

@@ -1,17 +1,17 @@
-@mixin cx-draghandle(
-   $name: 'draghandle',
-   $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} {
-      touch-action: none;
-   }
-}
-
-@if (cx-should-include('cx/widgets/DragHandle')) {
-   @include cx-draghandle();
+@mixin cx-draghandle(
+   $name: 'draghandle',
+   $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} {
+      touch-action: none;
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragHandle')) {
+   @include cx-draghandle();
 }

package/src/widgets/drag-drop/DragSource.d.ts

@@ -1,45 +1,45 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-
-interface DragSourceProps extends Cx.StyledContainerProps {
-   /**
-    * Data about the drag source that can be used by drop zones to test if
-    * drag source is acceptable and to perform drop operations.
-    */
-   data?: any;
-
-   /**
-    * Set to true to hide the element while being dragged.
-    * Use if drop zones are configured to expand to indicate where drop will occur.
-    */
-   hideOnDrag?: boolean;
-
-   /** Set to true to indicate that this drag source can be dragged only by using an inner DragHandle. */
-   handled?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to 'dragsource'. */
-   baseClass?: string;
-
-   onDragStart?: (e, instance: Instance) => any;
-
-   onDragEnd?: (e, instance: Instance) => void;
-
-   id?: Cx.StringProp;
-
-   /** Custom contents to be displayed during drag & drop operation. */
-   clone?: Cx.Config;
-
-   /** CSS styles to be applied to the clone of the element being dragged. */
-   cloneStyle?: Cx.StyleProp;
-
-   /** CSS styles to be applied to the element being dragged. */
-   draggedStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied to the clone of the element being dragged. */
-   cloneClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the element being dragged. */
-   draggedClass?: Cx.ClassProp;
-}
-
-export class DragSource extends Cx.Widget<DragSourceProps> {}
+import * as Cx from "../../core";
+import { Instance } from "../../ui/Instance";
+
+interface DragSourceProps extends Cx.StyledContainerProps {
+   /**
+    * Data about the drag source that can be used by drop zones to test if
+    * drag source is acceptable and to perform drop operations.
+    */
+   data?: any;
+
+   /**
+    * Set to true to hide the element while being dragged.
+    * Use if drop zones are configured to expand to indicate where drop will occur.
+    */
+   hideOnDrag?: boolean;
+
+   /** Set to true to indicate that this drag source can be dragged only by using an inner DragHandle. */
+   handled?: boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to 'dragsource'. */
+   baseClass?: string;
+
+   onDragStart?: (e, instance: Instance) => any;
+
+   onDragEnd?: (e, instance: Instance) => void;
+
+   id?: Cx.StringProp;
+
+   /** Custom contents to be displayed during drag & drop operation. */
+   clone?: Cx.Config;
+
+   /** CSS styles to be applied to the clone of the element being dragged. */
+   cloneStyle?: Cx.StyleProp;
+
+   /** CSS styles to be applied to the element being dragged. */
+   draggedStyle?: Cx.StyleProp;
+
+   /** Additional CSS class to be applied to the clone of the element being dragged. */
+   cloneClass?: Cx.ClassProp;
+
+   /** Additional CSS class to be applied to the element being dragged. */
+   draggedClass?: Cx.ClassProp;
+}
+
+export class DragSource extends Cx.Widget<DragSourceProps> {}

package/src/widgets/drag-drop/DragSource.js

@@ -1,160 +1,160 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
-import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent } from "./ops";
-import { preventFocus } from "../../ui/FocusManager";
-import { parseStyle } from "../../util/parseStyle";
-
-export class DragSource extends Container {
-   init() {
-      this.cloneStyle = parseStyle(this.cloneStyle);
-      this.draggedStyle = parseStyle(this.draggedStyle);
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         id: undefined,
-         data: { structured: true },
-         cloneStyle: { structured: true },
-         cloneClass: { structured: true },
-         draggedClass: { structured: true },
-         draggedStyle: { structured: true },
-      });
-   }
-
-   explore(context, instance) {
-      context.push("dragHandles", (instance.dragHandles = []));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("dragHandles");
-   }
-
-   render(context, instance, key) {
-      return (
-         <DragSourceComponent key={key} instance={instance} handled={this.handled || instance.dragHandles.length > 0}>
-            {this.renderChildren(context, instance)}
-         </DragSourceComponent>
-      );
-   }
-}
-
-DragSource.prototype.styled = true;
-DragSource.prototype.baseClass = "dragsource";
-DragSource.prototype.hideOnDrag = false;
-DragSource.prototype.handled = false;
-
-Widget.alias("dragsource", DragSource);
-
-class DragSourceComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = { dragged: false };
-      this.beginDragDrop = this.beginDragDrop.bind(this);
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseDown = this.onMouseDown.bind(this);
-      this.setRef = (el) => {
-         this.el = el;
-      };
-   }
-
-   render() {
-      let { instance, children, handled } = this.props;
-      let { data, widget } = instance;
-      let { CSS } = widget;
-
-      if (this.state.dragged && widget.hideOnDrag) return null;
-
-      let classes = [
-         data.classNames,
-         CSS.state({
-            dragged: this.state.dragged,
-            draggable: !handled,
-         }),
-      ];
-
-      let style = data.style;
-
-      if (this.state.dragged) {
-         if (data.draggedClass) classes.push(data.draggedClass);
-         if (data.draggedStyle)
-            style = {
-               ...style,
-               ...data.draggedStyle,
-            };
-      }
-
-      let eventHandlers = {
-         ...instance.getJsxEventProps(),
-         onTouchStart: this.onMouseDown,
-         onMouseDown: this.onMouseDown,
-         onTouchMove: this.onMouseMove,
-         onMouseMove: this.onMouseMove,
-         onTouchEnd: ddMouseUp,
-         onMouseUp: ddMouseUp,
-      };
-
-      delete eventHandlers.onDragStart;
-      delete eventHandlers.onDragEnd;
-
-      return (
-         <div id={data.id} ref={this.setRef} className={CSS.expand(classes)} style={style} {...eventHandlers}>
-            {children}
-         </div>
-      );
-   }
-
-   onMouseDown(e) {
-      ddMouseDown(e);
-      if (isDragHandleEvent(e) || !this.props.handled) {
-         preventFocus(e); //disables text selection in Firefox
-         e.stopPropagation();
-      }
-   }
-
-   onMouseMove(e) {
-      if (ddDetect(e)) {
-         if (isDragHandleEvent(e) || !this.props.handled) {
-            this.beginDragDrop(e);
-         }
-      }
-   }
-
-   beginDragDrop(e) {
-      let { instance } = this.props;
-      let { data, widget, store } = instance;
-
-      if (widget.onDragStart && instance.invoke("onDragStart", e, instance) === false) return;
-
-      initiateDragDrop(
-         e,
-         {
-            sourceEl: this.el,
-            source: {
-               store: store,
-               data: data.data,
-            },
-            clone: {
-               widget: widget.clone || widget,
-               store,
-               class: data.cloneClass,
-               style: data.cloneStyle,
-               cloneContent: !widget.clone,
-               matchSize: !widget.clone,
-               matchCursorOffset: !widget.clone,
-            },
-         },
-         (e) => {
-            this.setState({
-               dragged: false,
-            });
-            if (widget.onDragEnd) instance.invoke("onDragEnd", e, instance);
-         }
-      );
-
-      this.setState({
-         dragged: true,
-      });
-   }
-}
+import { Widget, VDOM } from "../../ui/Widget";
+import { Container } from "../../ui/Container";
+import { ddMouseDown, ddDetect, ddMouseUp, initiateDragDrop, isDragHandleEvent } from "./ops";
+import { preventFocus } from "../../ui/FocusManager";
+import { parseStyle } from "../../util/parseStyle";
+
+export class DragSource extends Container {
+   init() {
+      this.cloneStyle = parseStyle(this.cloneStyle);
+      this.draggedStyle = parseStyle(this.draggedStyle);
+      super.init();
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         id: undefined,
+         data: { structured: true },
+         cloneStyle: { structured: true },
+         cloneClass: { structured: true },
+         draggedClass: { structured: true },
+         draggedStyle: { structured: true },
+      });
+   }
+
+   explore(context, instance) {
+      context.push("dragHandles", (instance.dragHandles = []));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      context.pop("dragHandles");
+   }
+
+   render(context, instance, key) {
+      return (
+         <DragSourceComponent key={key} instance={instance} handled={this.handled || instance.dragHandles.length > 0}>
+            {this.renderChildren(context, instance)}
+         </DragSourceComponent>
+      );
+   }
+}
+
+DragSource.prototype.styled = true;
+DragSource.prototype.baseClass = "dragsource";
+DragSource.prototype.hideOnDrag = false;
+DragSource.prototype.handled = false;
+
+Widget.alias("dragsource", DragSource);
+
+class DragSourceComponent extends VDOM.Component {
+   constructor(props) {
+      super(props);
+      this.state = { dragged: false };
+      this.beginDragDrop = this.beginDragDrop.bind(this);
+      this.onMouseMove = this.onMouseMove.bind(this);
+      this.onMouseDown = this.onMouseDown.bind(this);
+      this.setRef = (el) => {
+         this.el = el;
+      };
+   }
+
+   render() {
+      let { instance, children, handled } = this.props;
+      let { data, widget } = instance;
+      let { CSS } = widget;
+
+      if (this.state.dragged && widget.hideOnDrag) return null;
+
+      let classes = [
+         data.classNames,
+         CSS.state({
+            dragged: this.state.dragged,
+            draggable: !handled,
+         }),
+      ];
+
+      let style = data.style;
+
+      if (this.state.dragged) {
+         if (data.draggedClass) classes.push(data.draggedClass);
+         if (data.draggedStyle)
+            style = {
+               ...style,
+               ...data.draggedStyle,
+            };
+      }
+
+      let eventHandlers = {
+         ...instance.getJsxEventProps(),
+         onTouchStart: this.onMouseDown,
+         onMouseDown: this.onMouseDown,
+         onTouchMove: this.onMouseMove,
+         onMouseMove: this.onMouseMove,
+         onTouchEnd: ddMouseUp,
+         onMouseUp: ddMouseUp,
+      };
+
+      delete eventHandlers.onDragStart;
+      delete eventHandlers.onDragEnd;
+
+      return (
+         <div id={data.id} ref={this.setRef} className={CSS.expand(classes)} style={style} {...eventHandlers}>
+            {children}
+         </div>
+      );
+   }
+
+   onMouseDown(e) {
+      ddMouseDown(e);
+      if (isDragHandleEvent(e) || !this.props.handled) {
+         preventFocus(e); //disables text selection in Firefox
+         e.stopPropagation();
+      }
+   }
+
+   onMouseMove(e) {
+      if (ddDetect(e)) {
+         if (isDragHandleEvent(e) || !this.props.handled) {
+            this.beginDragDrop(e);
+         }
+      }
+   }
+
+   beginDragDrop(e) {
+      let { instance } = this.props;
+      let { data, widget, store } = instance;
+
+      if (widget.onDragStart && instance.invoke("onDragStart", e, instance) === false) return;
+
+      initiateDragDrop(
+         e,
+         {
+            sourceEl: this.el,
+            source: {
+               store: store,
+               data: data.data,
+            },
+            clone: {
+               widget: widget.clone || widget,
+               store,
+               class: data.cloneClass,
+               style: data.cloneStyle,
+               cloneContent: !widget.clone,
+               matchSize: !widget.clone,
+               matchCursorOffset: !widget.clone,
+            },
+         },
+         (e) => {
+            this.setState({
+               dragged: false,
+            });
+            if (widget.onDragEnd) instance.invoke("onDragEnd", e, instance);
+         }
+      );
+
+      this.setState({
+         dragged: true,
+      });
+   }
+}

package/src/widgets/drag-drop/DragSource.scss

@@ -1,25 +1,25 @@
-@mixin cx-dragsource(
-   $name: 'dragsource',
-   $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} {
-      box-sizing: border-box;
-
-      &.#{$state}dragged {
-         opacity: 0.3;
-      }
-
-      &.#{$state}draggable {
-         touch-action: none;
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/DragSource')) {
-   @include cx-dragsource();
+@mixin cx-dragsource(
+   $name: 'dragsource',
+   $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} {
+      box-sizing: border-box;
+
+      &.#{$state}dragged {
+         opacity: 0.3;
+      }
+
+      &.#{$state}draggable {
+         touch-action: none;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragSource')) {
+   @include cx-dragsource();
 }