Add API for effectsAllowed and getDropEffect with sane defaults

Author: gaearon

modules/actions/DragDropActionCreators.js

@@ -4,17 +4,19 @@ var DragDropDispatcher = require('../dispatcher/DragDropDispatcher'),
     DragDropActionTypes = require('../constants/DragDropActionTypes');
 
 var DragDropActionCreators = {
-  startDragging(itemType, item) {
+  startDragging(itemType, item, effectsAllowed) {
     DragDropDispatcher.handleAction({
       type: DragDropActionTypes.DRAG_START,
       itemType: itemType,
-      item: item
+      item: item,
+      effectsAllowed: effectsAllowed
     });
   },
 
-  recordDrop() {
+  recordDrop(dropEffect) {
     DragDropDispatcher.handleAction({
-      type: DragDropActionTypes.DROP
+      type: DragDropActionTypes.DROP,
+      dropEffect: dropEffect
     });
   },
 

modules/constants/DropEffects.js

@@ -3,8 +3,7 @@
 var DropEffects = {
   COPY: 'copy',
   MOVE: 'move',
-  LINK: 'link',
-  NONE: 'none'
+  LINK: 'link'
 };
 
 module.exports = DropEffects;

modules/mixins/DragDropMixin.js

@@ -5,6 +5,7 @@ var DragDropActionCreators = require('../actions/DragDropActionCreators'),
     NativeDragDropSupport = require('../utils/NativeDragDropSupport'),
     EnterLeaveMonitor = require('../utils/EnterLeaveMonitor'),
     MemoizeBindMixin = require('./MemoizeBindMixin'),
+    DropEffects = require('../constants/DropEffects'),
     configureDataTransfer = require('../utils/configureDataTransfer'),
     isFileDragDropEvent = require('../utils/isFileDragDropEvent'),
     bindAll = require('../utils/bindAll'),
@@ -13,6 +14,7 @@ var DragDropActionCreators = require('../actions/DragDropActionCreators'),
     defaults = require('lodash-node/modern/objects/defaults'),
     union = require('lodash-node/modern/arrays/union'),
     without = require('lodash-node/modern/arrays/without'),
+    isArray = require('lodash-node/modern/objects/isArray'),
     isObject = require('lodash-node/modern/objects/isObject'),
     noop = require('lodash-node/modern/utilities/noop');
 
@@ -75,6 +77,10 @@ var DefaultDropTarget = {
     return true;
   },
 
+  getDropEffect(allowedEffects) {
+    return allowedEffects[0];
+  },
+
   enter: noop,
   over: noop,
   leave: noop,
@@ -90,7 +96,7 @@ var DragDropMixin = {
   getInitialState() {
     var state = {
       ownDraggedItemType: null,
-      hasDragEntered: false
+      currentDropEffect: null
     };
 
     return merge(state, this.getStateFromDragDropStore());
@@ -137,11 +143,11 @@ var DragDropMixin = {
     checkDropTargetDefined(this, type);
 
     var isDragging = this.getActiveDropTargetType() === type,
-        hasDragEntered = this.state.hasDragEntered;
+        isHovering = !!this.state.currentDropEffect;
 
     return {
       isDragging: isDragging,
-      isHovering: isDragging && hasDragEntered
+      isHovering: isDragging && isHovering
     };
   },
 
@@ -191,7 +197,9 @@ var DragDropMixin = {
   },
 
   handleDragDropStoreChange() {
-    this.setState(this.getStateFromDragDropStore());
+    if (this.isMounted()) {
+      this.setState(this.getStateFromDragDropStore());
+    }
   },
 
   dragSourceFor(type) {
@@ -221,12 +229,17 @@ var DragDropMixin = {
     );
 
     var dragOptions = beginDrag(e),
-        { item } = dragOptions;
+        { item, dragPreview, dragAnchors, effectsAllowed } = dragOptions;
+
+    if (!effectsAllowed) {
+      effectsAllowed = [DropEffects.MOVE];
+    }
 
-    configureDataTransfer(this.getDOMNode(), e.nativeEvent, dragOptions);
+    invariant(isArray(effectsAllowed) && effectsAllowed.length > 0, 'Expected effectsAllowed to be non-empty array');
     invariant(isObject(item), 'Expected return value of beginDrag to contain "item" object');
 
-    DragDropActionCreators.startDragging(type, item);
+    configureDataTransfer(this.getDOMNode(), e.nativeEvent, dragPreview, dragAnchors, effectsAllowed);
+    DragDropActionCreators.startDragging(type, item, effectsAllowed);
 
     // Delay setting own state by a tick so `getDragState(type).isDragging`
     // doesn't return `true` yet. Otherwise browser will capture dragged state
@@ -245,7 +258,7 @@ var DragDropMixin = {
     NativeDragDropSupport.handleDragEnd();
 
     var { endDrag } = this._dragSources[type],
-        didDrop = DragDropStore.didDrop();
+        recordedDropEffect = DragDropStore.getDropEffect();
 
     DragDropActionCreators.endDragging();
 
@@ -261,7 +274,7 @@ var DragDropMixin = {
       ownDraggedItemType: null
     });
 
-    endDrag(didDrop, e);
+    endDrag(recordedDropEffect, e);
   },
 
   dropTargetFor(...types) {
@@ -278,17 +291,6 @@ var DragDropMixin = {
     };
   },
 
-  handleDragOver(types, e) {
-    if (!this.isAnyDropTargetActive(types)) {
-      return;
-    }
-
-    e.preventDefault();
-
-    var { over } = this._dropTargets[this.state.draggedItemType];
-    over(this.state.draggedItem, e);
-  },
-
   handleDragEnter(types, e) {
     if (!this.isAnyDropTargetActive(types)) {
       return;
@@ -298,14 +300,40 @@ var DragDropMixin = {
       return;
     }
 
+    var { enter, getDropEffect } = this._dropTargets[this.state.draggedItemType],
+        effectsAllowed = DragDropStore.getEffectsAllowed(),
+        dropEffect = getDropEffect(effectsAllowed);
+
+    if (dropEffect && !isFileDragDropEvent(e)) {
+      invariant(
+        effectsAllowed.indexOf(dropEffect) > -1,
+        'Effect %s supplied by drop target is not one of the effects allowed by drag source: %s',
+        dropEffect,
+        effectsAllowed.join(', ')
+      );
+    }
+
     this.setState({
-      hasDragEntered: true
+      currentDropEffect: dropEffect
     });
 
-    var { enter } = this._dropTargets[this.state.draggedItemType];
     enter(this.state.draggedItem, e);
   },
 
+  handleDragOver(types, e) {
+    if (!this.isAnyDropTargetActive(types)) {
+      return;
+    }
+
+    e.preventDefault();
+
+    var { over, getDropEffect } = this._dropTargets[this.state.draggedItemType];
+    over(this.state.draggedItem, e);
+
+    // Don't use `none` because this will prevent browser from firing `dragend`
+    NativeDragDropSupport.handleDragOver(e, this.state.currentDropEffect || 'move');
+  },
+
   handleDragLeave(types, e) {
     if (!this.isAnyDropTargetActive(types)) {
       return;
@@ -316,7 +344,7 @@ var DragDropMixin = {
     }
 
     this.setState({
-      hasDragEntered: false
+      currentDropEffect: null
     });
 
     var { leave } = this._dropTargets[this.state.draggedItemType];
@@ -331,7 +359,9 @@ var DragDropMixin = {
     e.preventDefault();
 
     var item = this.state.draggedItem,
-        { acceptDrop } = this._dropTargets[this.state.draggedItemType];
+        { acceptDrop } = this._dropTargets[this.state.draggedItemType],
+        { currentDropEffect } = this.state,
+        recordedDropEffect = DragDropStore.getDropEffect();
 
     if (isFileDragDropEvent(e)) {
       // We don't know file list until the `drop` event,
@@ -343,13 +373,15 @@ var DragDropMixin = {
 
     this._monitor.reset();
 
+    if (!recordedDropEffect && currentDropEffect) {
+      DragDropActionCreators.recordDrop(currentDropEffect);
+    }
+
     this.setState({
-      hasDragEntered: false
+      currentDropEffect: null
     });
 
-    if (acceptDrop(item, e) !== false) {
-      DragDropActionCreators.recordDrop();
-    }
+    acceptDrop(item, e, recordedDropEffect);
   }
 };
 

modules/stores/DragDropStore.js

@@ -6,15 +6,20 @@ var DragDropDispatcher = require('../dispatcher/DragDropDispatcher'),
 
 var _draggedItem = null,
     _draggedItemType = null,
-    _didDrop = false;
+    _effectsAllowed = null,
+    _dropEffect = null;
 
 var DragDropStore = createStore({
   isDragging() {
     return !!_draggedItem;
   },
 
-  didDrop() {
-    return _didDrop;
+  getEffectsAllowed() {
+    return _effectsAllowed;
+  },
+
+  getDropEffect() {
+    return _dropEffect;
   },
 
   getDraggedItem() {
@@ -31,21 +36,23 @@ DragDropDispatcher.register(function (payload) {
 
   switch (action.type) {
   case DragDropActionTypes.DRAG_START:
-    _didDrop = false;
+    _dropEffect = null;
     _draggedItem = action.item;
     _draggedItemType = action.itemType;
+    _effectsAllowed = action.effectsAllowed;
     DragDropStore.emitChange();
     break;
 
   case DragDropActionTypes.DROP:
-    _didDrop = true;
+    _dropEffect = action.dropEffect;
     DragDropStore.emitChange();
     break;
 
   case DragDropActionTypes.DRAG_END:
-    _didDrop = false;
     _draggedItem = null;
     _draggedItemType = null;
+    _effectsAllowed = null;
+    _dropEffect = null;
     DragDropStore.emitChange();
     break;
   }

modules/utils/NativeDragDropSupport.js

@@ -2,6 +2,7 @@
 
 var DragDropActionCreators = require('../actions/DragDropActionCreators'),
     NativeDragItemTypes = require('../constants/NativeDragItemTypes'),
+    DropEffects = require('../constants/DropEffects'),
     EnterLeaveMonitor = require('../utils/EnterLeaveMonitor'),
     isFileDragDropEvent = require('./isFileDragDropEvent'),
     shallowEqual = require('react/lib/shallowEqual'),
@@ -16,7 +17,8 @@ var _monitor = new EnterLeaveMonitor(),
     _initialDragTargetRect,
     _imitateCurrentDragEnd,
     _dragTargetRectDidChange,
-    _lastDragSourceCheckTimeout;
+    _lastDragSourceCheckTimeout,
+    _currentDropEffect;
 
 function getElementRect(el) {
   var rect = el.getBoundingClientRect();
@@ -52,6 +54,10 @@ if (typeof window !== 'undefined') {
   });
 
   window.addEventListener('dragover', function (e) {
+    // At the top level of event bubbling, use previously set drop effect and reset it.
+    e.dataTransfer.dropEffect = _currentDropEffect;
+    _currentDropEffect = null;
+
     if (!_currentDragTarget) {
       return;
     }
@@ -106,6 +112,13 @@ var NativeDragDropSupport = {
     _initialDragTargetRect = null;
     _dragTargetRectDidChange = false;
     _imitateCurrentDragEnd = null;
+  },
+
+  handleDragOver(e, dropEffect) {
+    // As event bubbles top-down, first specified effect will be used
+    if (!_currentDropEffect) {
+      _currentDropEffect = dropEffect;
+    }
   }
 };
 

modules/utils/configureDataTransfer.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var shouldUseDragPreview = require('./shouldUseDragPreview'),
-    getDragImageOffset = require('./getDragImageOffset');
+    getDragImageOffset = require('./getDragImageOffset'),
+    getBrowserEffectAllowed = require('./getBrowserEffectAllowed');
 
-function configureDataTransfer(containerNode, nativeEvent, dragOptions) {
-  var { dataTransfer } = nativeEvent,
-      { dragPreview, effectAllowed, dragAnchors } = dragOptions;
+function configureDataTransfer(containerNode, nativeEvent, dragPreview, dragAnchors, effectsAllowed) {
+  var { dataTransfer } = nativeEvent;
 
   try {
     // Firefox won't drag without setting data
@@ -19,7 +19,7 @@ function configureDataTransfer(containerNode, nativeEvent, dragOptions) {
     dataTransfer.setDragImage(dragPreview, dragOffset.x, dragOffset.y);
   }
 
-  dataTransfer.effectAllowed = effectAllowed;
+  dataTransfer.effectAllowed = getBrowserEffectAllowed(effectsAllowed);
 }
 
 module.exports = configureDataTransfer;

modules/utils/getBrowserEffectAllowed.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var DropEffects = require('../constants/DropEffects');
+
+function getBrowserEffectAllowed(effectsAllowed) {
+  var allowCopy = effectsAllowed.indexOf(DropEffects.COPY) > -1,
+      allowMove = effectsAllowed.indexOf(DropEffects.MOVE) > -1,
+      allowLink = effectsAllowed.indexOf(DropEffects.LINK) > -1;
+
+  if (allowCopy && allowMove && allowLink) {
+    return 'all';
+  } else if (allowCopy && allowMove) {
+    return 'copyMove';
+  } else if (allowLink && allowMove) {
+    return 'linkMove';
+  } else if (allowCopy && allowLink) {
+    return 'copyLink';
+  } else if (allowCopy) {
+    return 'copy';
+  } else if (allowMove) {
+    return 'move';
+  } else if (allowLink) {
+    return 'link';
+  } else {
+    return 'none';
+  }
+}
+
+module.exports = getBrowserEffectAllowed;