cx 25.11.1 → 26.0.1

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

@@ -1,160 +0,0 @@
-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/DropZone.d.ts

@@ -1,98 +0,0 @@
-import * as Cx from "../../core";
-
-import { Instance } from "../../ui/Instance";
-import { DragEvent } from "./ops";
-
-interface DropZoneProps extends Cx.StyledContainerProps {
-   /** CSS styles to be applied when drag cursor is over the drop zone. */
-   overStyle?: Cx.StyleProp;
-
-   /** CSS styles to be applied when drag cursor is near the drop zone. */
-   nearStyle?: Cx.StyleProp;
-
-   /** CSS styles to be applied when drag operations begin used to highlight drop zones. */
-   farStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied when drag cursor is over the drop zone. */
-   overClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied when drag cursor is near the drop zone. */
-   nearClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied when drag operations begin used to highlight drop zones. */
-   farClass?: Cx.ClassProp;
-
-   /** Distance in `px` used to determine if cursor is near the dropzone. If not configured, cursor is never considered near. */
-   nearDistance?: number;
-
-   /** Bindable data related to the DropZone that might be useful inside onDrop operations. */
-   data?: Cx.StructuredProp;
-
-   /**
-    * Inflate the drop zone's bounding box so it activates on cursor proximity.
-    * Useful for invisible drop-zones that are only a few pixels tall/wide.
-    */
-   inflate?: number;
-
-   /**
-    * Inflate the drop zone's bounding box horizontally so it activates on cursor proximity.
-    * Useful for invisible drop-zones that are only a few pixels tall/wide.
-    */
-   hinflate?: number;
-
-   /**
-    * Inflate the drop zone's bounding box vertically so it activates on cursor proximity.
-    * Useful for invisible drop-zones that are only a few pixels tall/wide.
-    */
-   vinflate?: number;
-
-   /** Base CSS class to be applied to the element. Defaults to 'dropzone'. */
-   baseClass?: string;
-
-   /** A callback method invoked when dragged item is finally dropped.
-    The callback takes two arguments:
-    * dragDropEvent - An object containing information related to the source
-    * instance
-    Return value is written into dragDropEvent.result and can be passed
-    to the source's onDragEnd callback. */
-   onDrop?: string | ((event?: DragEvent, instance?: Instance) => any);
-
-   /** A callback method used to test if dragged item (source) is compatible
-    with the drop zone. */
-   onDropTest?: string | ((event?: DragEvent, instance?: Instance) => boolean);
-
-   /** A callback method invoked when the dragged item gets close to the drop zone.
-    See also `nearDistance`. */
-   onDragNear?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item is dragged away. */
-   onDragAway?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item is dragged over the drop zone.
-    The callback is called for each `mousemove` or `touchmove` event. */
-   onDragOver?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item is dragged over the drop zone
-    for the first time. */
-   onDragEnter?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when the dragged item leaves the drop zone area. */
-   onDragLeave?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when at the beginning of the drag & drop operation. */
-   onDragStart?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** A callback method invoked when at the end of the drag & drop operation. */
-   onDragEnd?: string | ((event?: DragEvent, instance?: Instance) => void);
-
-   /** Match height of the item being dragged */
-   matchHeight?: boolean;
-
-   /** Match width of the item being dragged */
-   matchWidth?: boolean;
-
-   /** Match margin of the item being dragged */
-   matchMargin?: boolean;
-}
-
-export class DropZone extends Cx.Widget<DropZoneProps> {}

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

@@ -1,214 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
-import { parseStyle } from "../../util/parseStyle";
-import { registerDropZone, DragDropContext } from "./ops";
-import { findScrollableParent } from "../../util/findScrollableParent";
-import { isNumber } from "../../util/isNumber";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-
-export class DropZone extends Container {
-   init() {
-      this.overStyle = parseStyle(this.overStyle);
-      this.nearStyle = parseStyle(this.nearStyle);
-      this.farStyle = parseStyle(this.farStyle);
-
-      if (isNumber(this.inflate)) {
-         this.hinflate = this.inflate;
-         this.vinflate = this.inflate;
-      }
-
-      super.init();
-   }
-
-   declareData() {
-      return super.declareData(...arguments, {
-         overClass: { structured: true },
-         nearClass: { structured: true },
-         farClass: { structured: true },
-         overStyle: { structured: true },
-         nearStyle: { structured: true },
-         farStyle: { structured: true },
-         data: { structured: true },
-      });
-   }
-
-   render(context, instance, key) {
-      return (
-         <DropZoneComponent key={key} instance={instance}>
-            {this.renderChildren(context, instance)}
-         </DropZoneComponent>
-      );
-   }
-}
-
-DropZone.prototype.styled = true;
-DropZone.prototype.nearDistance = 0;
-DropZone.prototype.hinflate = 0;
-DropZone.prototype.vinflate = 0;
-DropZone.prototype.baseClass = "dropzone";
-
-Widget.alias("dropzone", DropZone);
-
-class DropZoneComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         state: false,
-      };
-   }
-
-   render() {
-      let { instance, children } = this.props;
-      let { data, widget } = instance;
-      let { CSS } = widget;
-
-      let classes = [data.classNames, CSS.state(this.state.state)];
-
-      let stateStyle;
-
-      switch (this.state.state) {
-         case "over":
-            classes.push(data.overClass);
-            stateStyle = parseStyle(data.overStyle);
-            break;
-         case "near":
-            classes.push(data.nearClass);
-            stateStyle = parseStyle(data.nearStyle);
-            break;
-         case "far":
-            classes.push(data.farClass);
-            stateStyle = parseStyle(data.farStyle);
-            break;
-      }
-
-      return (
-         <div
-            className={CSS.expand(classes)}
-            style={{ ...data.style, ...this.state.style, ...stateStyle }}
-            ref={(el) => {
-               this.el = el;
-            }}
-         >
-            {children}
-         </div>
-      );
-   }
-
-   componentDidMount() {
-      let dragDropOptions = this.context;
-      let disabled = dragDropOptions && dragDropOptions.disabled;
-      if (!disabled) this.unregister = registerDropZone(this);
-   }
-
-   componentWillUnmount() {
-      this.unregister && this.unregister();
-   }
-
-   onDropTest(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      return !widget.onDropTest || instance.invoke("onDropTest", e, instance);
-   }
-
-   onDragStart(e) {
-      this.setState({
-         state: "far",
-      });
-   }
-
-   onDragNear(e) {
-      this.setState({
-         state: "near",
-      });
-   }
-
-   onDragAway(e) {
-      this.setState({
-         state: "far",
-      });
-   }
-
-   onDragLeave(e) {
-      let { nearDistance } = this.props.instance.widget;
-      this.setState({
-         state: nearDistance ? "near" : "far",
-         style: null,
-      });
-   }
-
-   onDragMeasure(e) {
-      let rect = getTopLevelBoundingClientRect(this.el);
-
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      let { clientX, clientY } = e.cursor;
-      let distance =
-         Math.max(0, rect.left - clientX, clientX - rect.right) +
-         Math.max(0, rect.top - clientY, clientY - rect.bottom);
-
-      if (widget.hinflate > 0) {
-         rect.left -= widget.hinflate;
-         rect.right += widget.hinflate;
-      }
-
-      if (widget.vinflate > 0) {
-         rect.top -= widget.vinflate;
-         rect.bottom += widget.vinflate;
-      }
-
-      let { nearDistance } = widget;
-
-      let over = rect.left <= clientX && clientX < rect.right && rect.top <= clientY && clientY < rect.bottom;
-
-      return {
-         over:
-            over && Math.abs(clientX - (rect.left + rect.right) / 2) + Math.abs(clientY - (rect.top + rect.bottom) / 2),
-         near: nearDistance && (over || distance < nearDistance),
-      };
-   }
-
-   onDragEnter(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      let style = {};
-
-      if (widget.matchWidth) style.width = `${e.source.width}px`;
-
-      if (widget.matchHeight) style.height = `${e.source.height}px`;
-
-      if (widget.matchMargin) style.margin = e.source.margin.join(" ");
-
-      if (this.state != "over")
-         this.setState({
-            state: "over",
-            style,
-         });
-   }
-
-   onDragOver(e) {}
-
-   onGetHScrollParent() {
-      return findScrollableParent(this.el, true);
-   }
-
-   onGetVScrollParent() {
-      return findScrollableParent(this.el);
-   }
-
-   onDrop(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (this.state.state == "over" && widget.onDrop) instance.invoke("onDrop", e, instance);
-   }
-
-   onDragEnd(e) {
-      this.setState({
-         state: false,
-         style: null,
-      });
-   }
-}
-
-DropZoneComponent.contextType = DragDropContext;

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

@@ -1,4 +0,0 @@
-export * from "./DragSource";
-export * from "./DragHandle";
-export * from "./DropZone";
-export * from "./ops";

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

@@ -1,57 +0,0 @@
-import * as Cx from '../../core';
-import * as React from 'react';
-import { CursorPosition } from '../overlay/captureMouse';
-import { View } from '../../data/View';
-
-export interface DragEvent {
-   type: 'dragstart' | 'dragmove' | 'dragdrop',
-   event: React.SyntheticEvent<any>,
-   cursor: CursorPosition,
-   source: {
-      width: number,
-      height: number,
-      margin: string[],
-      data?: any,
-      store: View,
-      [other: string]: any,
-   },
-   result?: any
-}
-
-interface DragDropOptions {
-   sourceEl?: Element,
-   clone?: any,
-   source?: Cx.Config,
-}
-
-type DragEventHandler = (e: DragEvent) => void;
-
-export interface IDropZone {
-   onDropTest?: (e: DragEvent) => boolean;
-   onDragStart?: DragEventHandler;
-   onDragAway?: DragEventHandler;
-   onDragEnd?: DragEventHandler;
-   onDragMeasure?: (e: DragEvent) => { over: boolean, near: boolean };
-   onDragLeave?: DragEventHandler;
-   onDragOver?: DragEventHandler;
-   onDragEnter?: DragEventHandler;
-   onDrop?: DragEventHandler;
-}
-
-type UnregisterFunction = () => void;
-
-/** Register a drop zone. Return value is a function that can be used to unregister the drop zone. */
-export function registerDropZone(dropZone: IDropZone) : UnregisterFunction;
-
-/** Initiate a drag-drop operation. */
-export function initiateDragDrop(e: DragEvent, options?: DragDropOptions, onDragEnd?: (e?: DragEvent) => void) : void;
-
-export function ddMouseDown(e: React.SyntheticEvent<any>) : void;
-
-export function ddMouseUp() : void;
-
-export function ddDetect(e: React.SyntheticEvent<any>) : void | true;
-
-export function ddHandle(e: React.SyntheticEvent<any>) : void;
-
-export function isDragHandleEvent(e: React.SyntheticEvent<any>) : boolean;