react-dnd - npm Package Compare versions

Comparing version 0.9.8 to 1.0.0-alpha

bower.json

 {
   "name": "react-dnd",
-  "version": "0.9.8",
+  "version": "1.0.0-alpha",
   "homepage": "https://github.com/gaearon/react-dnd",
@@ -11,3 +11,3 @@ "authors": [
   "dependencies": {
-    "react": "0.12.x"
+    "react": ">=0.13.0 <0.15.0"
   },
@@ -14,0 +14,0 @@ "moduleType": [

docs/API.md

@@ -138,6 +138,3 @@ # API
   initialOffset: { x, y },
-  currentOffset: { x, y },
-  currentOffsetFromClient: { x, y },
-  initialOffsetFromClient: { x, y },
-  initialOffsetFromContainer: { x, y }
+  currentOffset: { x, y }
 }
@@ -144,0 +141,0 @@ ```

modules/backends/HTML5.js

 'use strict';
 
-var DragDropActionCreators = require('../actions/DragDropActionCreators'),
-    DragOperationStore = require('../stores/DragOperationStore'),
-    NativeDragItemTypes = require('../constants/NativeDragItemTypes'),
-    EnterLeaveMonitor = require('../utils/EnterLeaveMonitor'),
-    isFileDragDropEvent = require('../utils/isFileDragDropEvent'),
-    isUrlDragDropEvent = require('../utils/isUrlDragDropEvent'),
-    isNativeDraggedItemType = require('../utils/isNativeDraggedItemType'),
-    configureDataTransfer = require('../utils/configureDataTransfer'),
-    shallowEqual = require('react/lib/shallowEqual'),
-    isWebkit = require('../utils/isWebkit');
+var _interopRequireWildcard = function (obj) { return obj && obj.__esModule ? obj : { 'default': obj }; };
 
-const ELEMENT_NODE = 1;
+var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
 
-// Store global state for browser-specific fixes and workarounds
-var _monitor = new EnterLeaveMonitor(),
-    _currentDragTarget,
-    _currentComponent,
-    _initialDragTargetRect,
-    _dragTargetRectDidChange,
-    _currentDropEffect;
+var _inherits = function (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
 
-function getElementRect(el) {
-  if (el.nodeType !== ELEMENT_NODE) {
-    el = el.parentElement;
-  }
+exports.__esModule = true;
+exports['default'] = createHTML5Backend;
 
-  if (!el) {
-    return null;
-  }
+var _DragSource3 = require('dnd-core');
 
-  var rect = el.getBoundingClientRect();
-  // Copy so object doesn't get reused
-  return { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
-}
+var _EnterLeaveCounter = require('../utils/EnterLeaveCounter');
 
-function getClientOffset(e) {
-  return {
-    x: e.clientX,
-    y: e.clientY
-  };
-}
+var _EnterLeaveCounter2 = _interopRequireWildcard(_EnterLeaveCounter);
 
-function checkIfCurrentDragTargetRectChanged() {
-  if (!_dragTargetRectDidChange) {
-    var currentRect = getElementRect(_currentDragTarget);
-    _dragTargetRectDidChange = !shallowEqual(_initialDragTargetRect, currentRect);
-  }
+var _isFirefox = require('../utils/BrowserDetector');
 
-  return _dragTargetRectDidChange;
-}
+var _isUrlDataTransfer$isFileDataTransfer = require('../utils/DataTransfer');
 
-function triggerDragEndIfDragSourceWasRemovedFromDOM() {
-  if (!_currentComponent || document.body.contains(_currentDragTarget)) {
-    return;
-  }
+var _getElementClientOffset$getEventClientOffset$getDragPreviewOffset = require('../utils/OffsetHelpers');
 
-  var type = DragOperationStore.getDraggedItemType();
-  _currentComponent.handleDragEnd(type, null);
-}
+var _shallowEqual = require('../utils/shallowEqual');
 
-function isDraggingNativeItem() {
-  var itemType = DragOperationStore.getDraggedItemType();
-  return isNativeDraggedItemType(itemType);
-}
+var _shallowEqual2 = _interopRequireWildcard(_shallowEqual);
 
-function handleTopDragStart(e) {
-  if (DragOperationStore.isDragging()) {
-    return;
-  }
+var _defaults = require('lodash/object/defaults');
 
-  if (isUrlDragDropEvent(e)) {
-    // URL dragged from inside the document
-    DragDropActionCreators.startDragging(NativeDragItemTypes.URL, null);
-  } else {
-    // If by this time no drag source reacted, tell browser not to drag.
-    e.preventDefault();
-  }
-}
+var _defaults2 = _interopRequireWildcard(_defaults);
 
-function handleTopDragEnterCapture(e) {
-  // IE requires this to not show a nodrag icon over the container
-  e.preventDefault();
+var _invariant = require('invariant');
 
-  var isFirstEnter = _monitor.enter(e.target);
-  if (!isFirstEnter || DragOperationStore.isDragging()) {
-    return;
-  }
+var _invariant2 = _interopRequireWildcard(_invariant);
 
-  // It is important to try to catch these at capture phase.
-  // This is currently the only way to have drop zones recognize
-  // they're being hovered if they fill the screen completely.
+var FileDragSource = (function (_DragSource) {
+  function FileDragSource() {
+    _classCallCheck(this, FileDragSource);
 
-  if (isFileDragDropEvent(e)) {
-    // File dragged from outside the document
-    DragDropActionCreators.startDragging(NativeDragItemTypes.FILE, null);
-  } else if (isUrlDragDropEvent(e)) {
-    // URL dragged from outside the document
-    DragDropActionCreators.startDragging(NativeDragItemTypes.URL, null);
+    _DragSource.call(this);
+    this.item = Object.defineProperties({}, {
+      files: {
+        get: function () {
+          console.warn('Browser doesn\'t allow reading file information until the files are dropped.');
+          return null;
+        },
+        configurable: true,
+        enumerable: true
+      }
+    });
   }
-}
 
-function handleTopDragOver(e) {
-  if (isDraggingNativeItem()) {
-    e.preventDefault();
-  }
+  _inherits(FileDragSource, _DragSource);
 
-  var offsetFromClient = getClientOffset(e);
-  DragDropActionCreators.drag(offsetFromClient);
+  FileDragSource.prototype.mutateItemByReadingDataTransfer = function mutateItemByReadingDataTransfer(dataTransfer) {
+    delete this.item.files;
+    this.item.files = Array.prototype.slice.call(dataTransfer.files);
+  };
 
-  // At the top level of event bubbling, use previously set drop effect and reset it.
-  if (_currentDropEffect) {
-    e.dataTransfer.dropEffect = _currentDropEffect;
-    _currentDropEffect = null;
-  }
+  FileDragSource.prototype.beginDrag = function beginDrag() {
+    return this.item;
+  };
 
-  if (_currentDragTarget && isWebkit() && checkIfCurrentDragTargetRectChanged()) {
-    // Prevent animating to incorrect position
-    e.preventDefault();
-  }
-}
+  return FileDragSource;
+})(_DragSource3.DragSource);
 
-function handleTopDragLeaveCapture(e) {
-  if (isDraggingNativeItem()) {
-    e.preventDefault();
-  }
+var UrlDragSource = (function (_DragSource2) {
+  function UrlDragSource() {
+    _classCallCheck(this, UrlDragSource);
 
-  var isLastLeave = _monitor.leave(e.target);
-  if (!isLastLeave || !isDraggingNativeItem()) {
-    return;
+    _DragSource2.call(this);
+    this.item = Object.defineProperties({}, {
+      urls: {
+        get: function () {
+          console.warn('Browser doesn\'t allow reading URL information until the link is dropped.');
+          return null;
+        },
+        configurable: true,
+        enumerable: true
+      }
+    });
   }
 
-  DragDropActionCreators.endDragging();
-}
+  _inherits(UrlDragSource, _DragSource2);
 
-function handleTopDrop(e) {
-  if (isDraggingNativeItem()) {
-    e.preventDefault();
-  }
+  UrlDragSource.prototype.mutateItemByReadingDataTransfer = function mutateItemByReadingDataTransfer(dataTransfer) {
+    delete this.item.urls;
+    this.item.urls = (dataTransfer.getData('Url') || dataTransfer.getData('text/uri-list') || '').split('\n');
+  };
 
-  _monitor.reset();
+  UrlDragSource.prototype.beginDrag = function beginDrag() {
+    return this.item;
+  };
 
-  if (isDraggingNativeItem()) {
-    DragDropActionCreators.endDragging();
+  return UrlDragSource;
+})(_DragSource3.DragSource);
+
+var NativeTypes = {
+  FILE: '__NATIVE_FILE__',
+  URL: '__NATIVE_URL__'
+};
+
+exports.NativeTypes = NativeTypes;
+
+var HTML5Backend = (function () {
+  function HTML5Backend(manager) {
+    _classCallCheck(this, HTML5Backend);
+
+    this.actions = manager.getActions();
+    this.monitor = manager.getMonitor();
+    this.registry = manager.getRegistry();
+
+    this.sourcePreviewNodes = {};
+    this.sourcePreviewNodeOptions = {};
+    this.sourceNodes = {};
+    this.sourceNodeOptions = {};
+    this.enterLeaveCounter = new _EnterLeaveCounter2['default']();
+
+    this.getSourceClientOffset = this.getSourceClientOffset.bind(this);
+    this.handleTopDragStart = this.handleTopDragStart.bind(this);
+    this.handleTopDragStartCapture = this.handleTopDragStartCapture.bind(this);
+    this.handleTopDragEndCapture = this.handleTopDragEndCapture.bind(this);
+    this.handleTopDragEnter = this.handleTopDragEnter.bind(this);
+    this.handleTopDragEnterCapture = this.handleTopDragEnterCapture.bind(this);
+    this.handleTopDragLeaveCapture = this.handleTopDragLeaveCapture.bind(this);
+    this.handleTopDragOver = this.handleTopDragOver.bind(this);
+    this.handleTopDragOverCapture = this.handleTopDragOverCapture.bind(this);
+    this.handleTopDrop = this.handleTopDrop.bind(this);
+    this.handleTopDropCapture = this.handleTopDropCapture.bind(this);
+    this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(this);
   }
 
-  triggerDragEndIfDragSourceWasRemovedFromDOM();
-}
+  HTML5Backend.prototype.setup = function setup() {
+    _invariant2['default'](!this.constructor.isSetUp, 'Cannot have two HTML5 backends at the same time.');
+    this.constructor.isSetUp = true;
 
-var HTML5 = {
-  setup() {
     if (typeof window === 'undefined') {
@@ -157,10 +141,17 @@ return;
 
-    window.addEventListener('dragstart', handleTopDragStart);
-    window.addEventListener('dragenter', handleTopDragEnterCapture, true);
-    window.addEventListener('dragleave', handleTopDragLeaveCapture, true);
-    window.addEventListener('dragover', handleTopDragOver);
-    window.addEventListener('drop', handleTopDrop);
-  },
+    window.addEventListener('dragstart', this.handleTopDragStart);
+    window.addEventListener('dragstart', this.handleTopDragStartCapture, true);
+    window.addEventListener('dragend', this.handleTopDragEndCapture, true);
+    window.addEventListener('dragenter', this.handleTopDragEnter);
+    window.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
+    window.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+    window.addEventListener('dragover', this.handleTopDragOver);
+    window.addEventListener('dragover', this.handleTopDragOverCapture, true);
+    window.addEventListener('drop', this.handleTopDrop);
+    window.addEventListener('drop', this.handleTopDropCapture, true);
+  };
 
-  teardown() {
+  HTML5Backend.prototype.teardown = function teardown() {
+    this.constructor.isSetUp = false;
+
     if (typeof window === 'undefined') {
@@ -170,62 +161,417 @@ return;
 
-    window.removeEventListener('dragstart', handleTopDragStart);
-    window.removeEventListener('dragenter', handleTopDragEnterCapture, true);
-    window.removeEventListener('dragleave', handleTopDragLeaveCapture, true);
-    window.removeEventListener('dragover', handleTopDragOver);
-    window.removeEventListener('drop', handleTopDrop);
-  },
+    window.removeEventListener('dragstart', this.handleTopDragStart);
+    window.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
+    window.removeEventListener('dragend', this.handleTopDragEndCapture, true);
+    window.removeEventListener('dragenter', this.handleTopDragEnter);
+    window.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
+    window.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+    window.removeEventListener('dragover', this.handleTopDragOver);
+    window.removeEventListener('dragover', this.handleTopDragOverCapture, true);
+    window.removeEventListener('drop', this.handleTopDrop);
+    window.removeEventListener('drop', this.handleTopDropCapture, true);
 
-  beginDrag(component, e, containerNode, dragPreview, dragAnchors, offsetFromContainer, effectsAllowed) {
-    var { nativeEvent: { dataTransfer, target } } = e;
-    configureDataTransfer(dataTransfer, containerNode, dragPreview, dragAnchors, offsetFromContainer, effectsAllowed);
+    this.clearCurrentDragSourceNode();
+  };
 
-    _currentComponent = component;
-    _currentDragTarget = target;
-    _initialDragTargetRect = getElementRect(target);
-    _dragTargetRectDidChange = false;
+  HTML5Backend.prototype.connectDragSource = function connectDragSource(sourceId) {
+    var _this = this;
 
-    // Mouse event tell us that dragging has ended but `dragend` didn't fire.
-    // This may happen if source DOM was removed while dragging.
+    return {
+      connect: function connect(node, options) {
+        return _this.connectSourceNode(sourceId, node, options);
+      },
+      connectPreview: function connectPreview(node, options) {
+        return _this.connectSourcePreviewNode(sourceId, node, options);
+      }
+    };
+  };
 
-    window.addEventListener('mousemove', triggerDragEndIfDragSourceWasRemovedFromDOM, true);
-  },
+  HTML5Backend.prototype.connectDropTarget = function connectDropTarget(targetId) {
+    var _this2 = this;
 
-  endDrag() {
-    _currentDragTarget = null;
-    _currentComponent = null;
-    _initialDragTargetRect = null;
-    _dragTargetRectDidChange = false;
+    return {
+      connect: function connect(node) {
+        return _this2.connectTargetNode(targetId, node);
+      }
+    };
+  };
 
-    window.removeEventListener('mousemove', triggerDragEndIfDragSourceWasRemovedFromDOM, true);
-  },
+  HTML5Backend.prototype.connectSourcePreviewNode = function connectSourcePreviewNode(sourceId, node, options) {
+    var _this3 = this;
 
-  dragOver(component, e, dropEffect) {
-    // As event bubbles top-down, first specified effect will be used
-    if (!_currentDropEffect) {
-      _currentDropEffect = dropEffect;
-    }
-  },
+    this.sourcePreviewNodeOptions[sourceId] = options;
+    this.sourcePreviewNodes[sourceId] = node;
 
-  getDragSourceProps(component, type) {
-    return {
-      draggable: true,
-      onDragStart: component.handleDragStart.bind(component, type),
-      onDragEnd: component.handleDragEnd.bind(component, type)
+    return function () {
+      delete _this3.sourcePreviewNodes[sourceId];
+      delete _this3.sourcePreviewNodeOptions[sourceId];
     };
-  },
+  };
 
-  getDropTargetProps(component, types) {
-    return {
-      onDragEnter: component.handleDragEnter.bind(component, types),
-      onDragOver: component.handleDragOver.bind(component, types),
-      onDragLeave: component.handleDragLeave.bind(component, types),
-      onDrop: component.handleDrop.bind(component, types)
+  HTML5Backend.prototype.connectSourceNode = function connectSourceNode(sourceId, node, options) {
+    var _this4 = this;
+
+    this.sourceNodes[sourceId] = node;
+    this.sourceNodeOptions[sourceId] = options;
+
+    var handleDragStart = function handleDragStart(e) {
+      return _this4.handleDragStart(e, sourceId);
     };
-  },
 
-  getOffsetFromClient(component, e) {
-    return getClientOffset(e);
-  }
-};
+    node.setAttribute('draggable', true);
+    node.addEventListener('dragstart', handleDragStart);
 
-module.exports = HTML5;
+    return function () {
+      delete _this4.sourceNodes[sourceId];
+      delete _this4.sourceNodeOptions[sourceId];
+
+      node.removeEventListener('dragstart', handleDragStart);
+      node.setAttribute('draggable', false);
+    };
+  };
+
+  HTML5Backend.prototype.connectTargetNode = function connectTargetNode(targetId, node) {
+    var _this5 = this;
+
+    var handleDragEnter = function handleDragEnter(e) {
+      return _this5.handleDragEnter(e, targetId);
+    };
+    var handleDragOver = function handleDragOver(e) {
+      return _this5.handleDragOver(e, targetId);
+    };
+    var handleDrop = function handleDrop(e) {
+      return _this5.handleDrop(e, targetId);
+    };
+
+    node.addEventListener('dragenter', handleDragEnter);
+    node.addEventListener('dragover', handleDragOver);
+    node.addEventListener('drop', handleDrop);
+
+    return function () {
+      node.removeEventListener('dragenter', handleDragEnter);
+      node.removeEventListener('dragover', handleDragOver);
+      node.removeEventListener('drop', handleDrop);
+    };
+  };
+
+  HTML5Backend.prototype.getSpecifiedDropEffect = function getSpecifiedDropEffect() {
+    var sourceId = this.monitor.getSourceId();
+    var sourceNodeOptions = this.sourceNodeOptions[sourceId];
+
+    return _defaults2['default'](sourceNodeOptions || {}, {
+      dropEffect: 'move'
+    }).dropEffect;
+  };
+
+  HTML5Backend.prototype.getSpecifiedAnchorPoint = function getSpecifiedAnchorPoint() {
+    var sourceId = this.monitor.getSourceId();
+    var sourcePreviewNodeOptions = this.sourcePreviewNodeOptions[sourceId];
+
+    return _defaults2['default'](sourcePreviewNodeOptions || {}, {
+      anchorX: 0.5,
+      anchorY: 0.5
+    });
+  };
+
+  HTML5Backend.prototype.getSourceClientOffset = function getSourceClientOffset(sourceId) {
+    return _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getElementClientOffset(this.sourceNodes[sourceId]);
+  };
+
+  HTML5Backend.prototype.isDraggingNativeItem = function isDraggingNativeItem() {
+    switch (this.monitor.getItemType()) {
+      case NativeTypes.FILE:
+      case NativeTypes.URL:
+        return true;
+      default:
+        return false;
+    }
+  };
+
+  HTML5Backend.prototype.beginDragNativeUrl = function beginDragNativeUrl() {
+    this.clearCurrentDragSourceNode();
+
+    this.currentNativeSource = new UrlDragSource();
+    this.currentNativeHandle = this.registry.addSource(NativeTypes.URL, this.currentNativeSource);
+    this.actions.beginDrag([this.currentNativeHandle]);
+  };
+
+  HTML5Backend.prototype.beginDragNativeFile = function beginDragNativeFile() {
+    this.clearCurrentDragSourceNode();
+
+    this.currentNativeSource = new FileDragSource();
+    this.currentNativeHandle = this.registry.addSource(NativeTypes.FILE, this.currentNativeSource);
+    this.actions.beginDrag([this.currentNativeHandle]);
+  };
+
+  HTML5Backend.prototype.endDragNativeItem = function endDragNativeItem() {
+    this.actions.endDrag();
+    this.registry.removeSource(this.currentNativeHandle);
+    this.currentNativeHandle = null;
+    this.currentNativeSource = null;
+  };
+
+  HTML5Backend.prototype.endDragIfSourceWasRemovedFromDOM = function endDragIfSourceWasRemovedFromDOM() {
+    var node = this.currentDragSourceNode;
+    if (document.body.contains(node)) {
+      return;
+    }
+
+    this.actions.endDrag();
+    this.clearCurrentDragSourceNode();
+  };
+
+  HTML5Backend.prototype.setCurrentDragSourceNode = function setCurrentDragSourceNode(node) {
+    this.clearCurrentDragSourceNode();
+    this.currentDragSourceNode = node;
+    this.currentDragSourceNodeOffset = _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getElementClientOffset(node);
+    this.currentDragSourceNodeOffsetChanged = false;
+
+    // Receiving a mouse event in the middle of a dragging operation
+    // means it has ended and the drag source node disappeared from DOM,
+    // so the browser didn't dispatch the dragend event.
+    window.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+  };
+
+  HTML5Backend.prototype.clearCurrentDragSourceNode = function clearCurrentDragSourceNode() {
+    if (this.currentDragSourceNode) {
+      this.currentDragSourceNode = null;
+      this.currentDragSourceNodeOffset = null;
+      this.currentDragSourceNodeOffsetChanged = false;
+      window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  HTML5Backend.prototype.checkIfCurrentDragSourceRectChanged = function checkIfCurrentDragSourceRectChanged() {
+    var node = this.currentDragSourceNode;
+    if (!node) {
+      return false;
+    }
+
+    if (this.currentDragSourceNodeOffsetChanged) {
+      return true;
+    }
+
+    this.currentDragSourceNodeOffsetChanged = !_shallowEqual2['default'](_getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getElementClientOffset(node), this.currentDragSourceNodeOffset);
+
+    return this.currentDragSourceNodeOffsetChanged;
+  };
+
+  HTML5Backend.prototype.handleTopDragStartCapture = function handleTopDragStartCapture() {
+    this.clearCurrentDragSourceNode();
+    this.dragStartSourceIds = [];
+  };
+
+  HTML5Backend.prototype.handleDragStart = function handleDragStart(e, sourceId) {
+    this.dragStartSourceIds.unshift(sourceId);
+  };
+
+  HTML5Backend.prototype.handleTopDragStart = function handleTopDragStart(e) {
+    var _this6 = this;
+
+    var dragStartSourceIds = this.dragStartSourceIds;
+
+    this.dragStartSourceIds = null;
+
+    var clientOffset = _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getEventClientOffset(e);
+
+    // Keep drag source unpublished.
+    // We will publish it in the next tick so browser
+    // has time to screenshot current state and doesn't
+    // cancel drag if the source DOM node is removed.
+    this.actions.beginDrag(dragStartSourceIds, {
+      publishSource: false,
+      getSourceClientOffset: this.getSourceClientOffset,
+      clientOffset: clientOffset
+    });
+
+    var dataTransfer = e.dataTransfer;
+
+    if (this.monitor.isDragging()) {
+      // Use custom drag image if user specifies it.
+      // If child drag source refuses drag but parent agrees,
+      // use parent's node as drag image. Neither works in IE though.
+      var sourceId = this.monitor.getSourceId();
+      var sourceNode = this.sourceNodes[sourceId];
+      var dragPreview = this.sourcePreviewNodes[sourceId] || sourceNode;
+      var anchorPoint = this.getSpecifiedAnchorPoint();
+      var dragPreviewOffset = _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint);
+      dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
+
+      try {
+        // Firefox won't drag without setting data
+        dataTransfer.setData('application/json', {});
+      } catch (err) {}
+
+      // Store drag source node so we can check whether
+      // it is removed from DOM and trigger endDrag manually.
+      this.setCurrentDragSourceNode(e.target);
+
+      setTimeout(function () {
+        // By now, the browser has taken drag screenshot
+        // and we can safely let the drag source know it's active.
+        _this6.actions.publishDragSource();
+      });
+    } else if (_isUrlDataTransfer$isFileDataTransfer.isUrlDataTransfer(dataTransfer)) {
+      // URL dragged from inside the document
+      this.beginDragNativeUrl();
+    } else {
+      // If by this time no drag source reacted, tell browser not to drag.
+      e.preventDefault();
+    }
+  };
+
+  HTML5Backend.prototype.handleTopDragEndCapture = function handleTopDragEndCapture() {
+    if (this.clearCurrentDragSourceNode()) {
+      // Firefox can dispatch this event in an infinite loop
+      // if dragend handler does something like showing an alert.
+      // Only proceed if we have not handled it already.
+      this.actions.endDrag();
+    }
+  };
+
+  HTML5Backend.prototype.handleTopDragEnterCapture = function handleTopDragEnterCapture(e) {
+    this.dragEnterTargetIds = [];
+
+    var isFirstEnter = this.enterLeaveCounter.enter(e.target);
+    if (!isFirstEnter || this.monitor.isDragging()) {
+      return;
+    }
+
+    var dataTransfer = e.dataTransfer;
+
+    if (_isUrlDataTransfer$isFileDataTransfer.isFileDataTransfer(dataTransfer)) {
+      // File dragged from outside the document
+      this.beginDragNativeFile();
+    } else if (_isUrlDataTransfer$isFileDataTransfer.isUrlDataTransfer(dataTransfer)) {
+      // URL dragged from outside the document
+      this.beginDragNativeUrl();
+    }
+  };
+
+  HTML5Backend.prototype.handleDragEnter = function handleDragEnter(e, targetId) {
+    this.dragEnterTargetIds.unshift(targetId);
+  };
+
+  HTML5Backend.prototype.handleTopDragEnter = function handleTopDragEnter(e) {
+    var _this7 = this;
+
+    var dragEnterTargetIds = this.dragEnterTargetIds;
+
+    this.dragEnterTargetIds = [];
+
+    if (!_isFirefox.isFirefox()) {
+      // Don't emit hover in `dragenter` on Firefox due to an edge case.
+      // If the target changes position as the result of `dragenter`, Firefox
+      // will still happily dispatch `dragover` despite target being no longer
+      // there. The easy solution is to only fire `hover` in `dragover` on FF.
+      this.actions.hover(dragEnterTargetIds, {
+        clientOffset: _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getEventClientOffset(e)
+      });
+    }
+
+    var canDrop = dragEnterTargetIds.some(function (targetId) {
+      return _this7.monitor.canDropOnTarget(targetId);
+    });
+
+    if (canDrop) {
+      // IE requires this to fire dragover events
+      e.preventDefault();
+      e.dataTransfer.dropEffect = this.getSpecifiedDropEffect();
+    }
+  };
+
+  HTML5Backend.prototype.handleTopDragOverCapture = function handleTopDragOverCapture() {
+    this.dragOverTargetIds = [];
+  };
+
+  HTML5Backend.prototype.handleDragOver = function handleDragOver(e, targetId) {
+    this.dragOverTargetIds.unshift(targetId);
+  };
+
+  HTML5Backend.prototype.handleTopDragOver = function handleTopDragOver(e) {
+    var _this8 = this;
+
+    var dragOverTargetIds = this.dragOverTargetIds;
+
+    this.dragOverTargetIds = [];
+    this.actions.hover(dragOverTargetIds, {
+      clientOffset: _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getEventClientOffset(e)
+    });
+
+    var canDrop = dragOverTargetIds.some(function (targetId) {
+      return _this8.monitor.canDropOnTarget(targetId);
+    });
+
+    if (canDrop) {
+      // Show user-specified drop effect.
+      e.preventDefault();
+      e.dataTransfer.dropEffect = this.getSpecifiedDropEffect();
+    } else if (this.isDraggingNativeItem()) {
+      // Don't show a nice cursor but still prevent default
+      // "drop and blow away the whole document" action.
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'none';
+    } else if (this.checkIfCurrentDragSourceRectChanged()) {
+      // Prevent animating to incorrect position.
+      // Drop effect must be other than 'none' to prevent animation.
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+    }
+  };
+
+  HTML5Backend.prototype.handleTopDragLeaveCapture = function handleTopDragLeaveCapture(e) {
+    if (this.isDraggingNativeItem()) {
+      e.preventDefault();
+    }
+
+    var isLastLeave = this.enterLeaveCounter.leave(e.target);
+    if (!isLastLeave || !this.isDraggingNativeItem()) {
+      return;
+    }
+
+    this.endDragNativeItem();
+  };
+
+  HTML5Backend.prototype.handleTopDropCapture = function handleTopDropCapture(e) {
+    this.dropTargetIds = [];
+
+    if (this.isDraggingNativeItem()) {
+      e.preventDefault();
+      this.currentNativeSource.mutateItemByReadingDataTransfer(e.dataTransfer);
+    }
+
+    this.enterLeaveCounter.reset();
+  };
+
+  HTML5Backend.prototype.handleDrop = function handleDrop(e, targetId) {
+    this.dropTargetIds.unshift(targetId);
+  };
+
+  HTML5Backend.prototype.handleTopDrop = function handleTopDrop(e) {
+    var dropTargetIds = this.dropTargetIds;
+
+    this.dropTargetIds = [];
+
+    this.actions.hover(dropTargetIds, {
+      clientOffset: _getElementClientOffset$getEventClientOffset$getDragPreviewOffset.getEventClientOffset(e)
+    });
+    this.actions.drop();
+
+    if (this.isDraggingNativeItem()) {
+      this.endDragNativeItem();
+    } else {
+      this.endDragIfSourceWasRemovedFromDOM();
+    }
+  };
+
+  return HTML5Backend;
+})();
+
+function createHTML5Backend(manager) {
+  return new HTML5Backend(manager);
+}
+
+// IE doesn't support MIME types in setData

modules/index.js

 'use strict';
 
-var { HTML5 } = require('./backends'),
-    createDragDropMixin = require('./utils/createDragDropMixin');
+var _interopRequire = function (obj) { return obj && obj.__esModule ? obj['default'] : obj; };
 
-module.exports = {
-  DragDropMixin: createDragDropMixin(HTML5),
-  ImagePreloaderMixin: require('./mixins/ImagePreloaderMixin'),
-  DragLayerMixin: require('./mixins/DragLayerMixin'),
-  HorizontalDragAnchors: require('./constants/HorizontalDragAnchors'),
-  VerticalDragAnchors: require('./constants/VerticalDragAnchors'),
-  NativeDragItemTypes: require('./constants/NativeDragItemTypes'),
-  DropEffects: require('./constants/DropEffects')
-};
+exports.__esModule = true;
+
+var _default = require('./configureDragDropContext');
+
+exports.configureDragDropContext = _interopRequire(_default);
+
+var _default2 = require('./configureDragDropLayer');
+
+exports.configureDragDropLayer = _interopRequire(_default2);
+
+var _default3 = require('./configureDragDrop');
+
+exports.configureDragDrop = _interopRequire(_default3);

package.json

 {
   "name": "react-dnd",
-  "version": "0.9.8",
+  "version": "1.0.0-alpha",
   "description": "Drag and drop for React with full DOM control",
-  "main": "dist-modules/index.js",
+  "main": "modules/index.js",
   "scripts": {
     "start": "./scripts/run-examples",
-    "build": "./scripts/build"
+    "build": "./scripts/build",
+    "prepublish": "npm run build"
   },
@@ -34,20 +35,23 @@ "repository": {
   "dependencies": {
-    "flux": "^2.0.1",
+    "disposables": "^1.0.1",
+    "dnd-core": "^1.0.0",
+    "invariant": "^2.0.0",
     "lodash": "^3.1.0"
   },
   "peerDependencies": {
-    "react": ">=0.12.0 <0.14.0"
+    "react": ">=0.13.0 <0.15.0"
   },
   "devDependencies": {
-    "6to5": "^3.5.3",
-    "6to5-core": "^3.5.3",
-    "6to5-loader": "^3.0.0",
-    "path": "0.4.9",
-    "react": "0.12.x",
-    "react-hot-loader": "^1.1.4",
-    "react-router": "0.12.x",
+    "animation-frame": "^0.2.4",
+    "babel": "^5.1.10",
+    "babel-core": "^5.1.10",
+    "babel-loader": "^5.0.0",
+    "faker": "2.1.2",
+    "react": "~0.13.0",
+    "react-hot-loader": "^1.2.3",
+    "react-router": "~0.13.2",
     "request": "2.46.0",
-    "webpack": "1.5.3",
-    "webpack-dev-server": "1.7.0"
+    "webpack": "^1.7.3",
+    "webpack-dev-server": "^1.7.0"
   }
 }

README.md

@@ -10,3 +10,3 @@ React DnD
 
->If your company uses React DnD and would like to speed up its development, consider sponsoring the project. I'm currently doing it in the spare time but I would be happy to work on it part-time. Drop me an email at <a href='mailto:[e-mail]'>[e-mail]</a>. Exciting new features take time.
+>**If your company uses React DnD and would like to speed up its development, consider sponsoring the project. I'm currently doing it in the spare time but I would be happy to work on it part-time. Drop me an email at <a href='mailto:[e-mail]'>[e-mail]</a>. Exciting new features take time.**
 
@@ -20,5 +20,2 @@ ## Philosophy
 
-You can also read **[The Future of Drag and Drop APIs](https://medium.com/@dan_abramov/the-future-of-drag-and-drop-apis-249dfea7a15f)** to get an idea of where we're heading.
-
-
 ## Live Demo
@@ -25,0 +22,0 @@

webpack.config.js

 var webpack = require('webpack');
 
 module.exports = {
-  entry: './modules/index',
+  entry: './src/index',
   module: {
     loaders: [
-      { test: /\.js$/, loader: '6to5', exclude: /node_modules/ }
+      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
     ]
   },
+  externals: [{
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react'
+    }
+  }],
   output: {
@@ -11,0 +19,0 @@ filename: 'dist/ReactDND.min.js',

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

96340

decreased by-95.87%

Dependency count

5

increased by66.67%

Dev dependency count

11

increased by10%

Number of package files

33

decreased by-73.6%

Lines of code

1508

decreased by-67.93%

Number of lines in readme file

107

decreased by-2.73%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeddisposables@^1.0.1

• + Addeddnd-core@^1.0.0

• + Addedinvariant@^2.0.0

• + Addeddisposables@1.0.2(transitive)

• + Addeddnd-core@1.3.0(transitive)

• + Addedfbjs@0.6.1(transitive)

• + Addedinvariant@2.2.4(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlodash-es@4.17.21(transitive)

• + Addedreact@0.14.10(transitive)

• + Addedredux@3.7.2(transitive)

• + Addedsymbol-observable@1.2.0(transitive)

• - Removedflux@^2.0.1

• - Removedencoding@0.1.13(transitive)

• - Removedfbemitter@2.1.1(transitive)

• - Removedfbjs@0.1.0-alpha.70.8.18(transitive)

• - Removedflux@2.1.1(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedimmutable@3.8.2(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@0.13.3(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)