More nasty example

TODO

@@ -3,4 +3,7 @@
 * rethink TYPES
 * check symbols
 * helpers for test context
-* drag offsets and alignments
+* drag offsets and alignments
+
+dnd-core
+* smarter canDrop()

examples/_dustbin-interesting/Box.js

@@ -10,13 +10,15 @@ class BoxDragSource extends DragSource {
     };
   }
 
-  endDrag(monitor) {
-    const didDrop = monitor.didDrop();
+  isDragging(monitor) {
+    const item = monitor.getItem();
+    return this.component.props.name === item.name;
+  }
 
-    if (didDrop) {
-      this.component.setState({
-        hasDropped: true
-      });
+  endDrag(monitor) {
+    if (monitor.didDrop()) {
+      const item = monitor.getItem();
+      this.component.props.onDrop(item.name);
     }
   }
 }
@@ -33,7 +35,9 @@ const style = {
 const Box = createClass({
   propTypes: {
     name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired
+    type: PropTypes.string.isRequired,
+    isDropped: PropTypes.bool.isRequired,
+    onDrop: PropTypes.func.isRequired
   },
 
   contextTypes: {
@@ -52,22 +56,15 @@ const Box = createClass({
     }
   })],
 
-  getInitialState() {
-    return {
-      hasDropped: false
-    };
-  },
-
   render() {
-    const { name } = this.props;
-    const { hasDropped } = this.state;
+    const { name, isDropped } = this.props;
     const { isDragging, dragEventHandlers } = this.state.data.dragSource;
     const opacity = isDragging ? 0.4 : 1;
 
     return (
       <div {...dragEventHandlers}
            style={{ ...style, opacity }}>
-        {hasDropped ?
+        {isDropped ?
           <s>{name}</s> :
           name
         }

examples/_dustbin-interesting/Container.js

@@ -5,6 +5,8 @@ import Dustbin from './Dustbin';
 import Box from './Box';
 import ItemTypes from './ItemTypes';
 import { DragDropContext, HTML5Backend } from 'react-dnd';
+import shuffle from 'lodash/collection/shuffle';
+import update from 'react/lib/update';
 
 const Container = createClass({
   mixins: [DragDropContext({
@@ -13,7 +15,17 @@ const Container = createClass({
 
   getInitialState() {
     return {
-      tick: true
+      dustbins: [
+        [ItemTypes.GLASS],
+        [ItemTypes.FOOD],
+        [ItemTypes.PAPER, ItemTypes.GLASS]
+      ],
+      boxes: [
+        { name: 'Bottle', type: ItemTypes.GLASS },
+        { name: 'Banana', type: ItemTypes.FOOD },
+        { name: 'Magazine', type: ItemTypes.PAPER }
+      ],
+      droppedBoxNames: []
     };
   },
 
@@ -23,37 +35,52 @@ const Container = createClass({
 
   tickTock() {
     this.setState({
-      tick: !this.state.tick
+      boxes: shuffle(this.state.boxes),
+      dustbins: shuffle(this.state.dustbins)
     });
   },
 
   componentWillUnmount() {
     clearInterval(this.interval);
   },
 
+  isDropped(boxName) {
+    return this.state.droppedBoxNames.indexOf(boxName) > -1;
+  },
+
   render() {
-    const { tick } = this.state;
+    const { boxes, dustbins } = this.state;
 
     return (
       <div>
         <div style={{minHeight: '14rem'}}>
-          <Dustbin accepts={tick ? [ItemTypes.GLASS] : [ItemTypes.FOOD]} />
-          <Dustbin accepts={tick ? [ItemTypes.FOOD] : [ItemTypes.PAPER]} />
-          <Dustbin accepts={tick ? [ItemTypes.PAPER] : [ItemTypes.GLASS]} />
-          {/*
-          {this.renderDustbin([NativeDragItemTypes.FILE, NativeDragItemTypes.URL])}
-          */}
+          {dustbins.map(accepts =>
+            <Dustbin accepts={accepts} />
+          )}
         </div>
 
         <div style={{ minHeight: '2rem' }}>
-          <Box name='Glass' type={ItemTypes.GLASS} />
-          <Box name='Banana' type={ItemTypes.FOOD} />
-          <Box name='Bottle' type={ItemTypes.GLASS} />
-          <Box name='Burger' type={ItemTypes.FOOD} />
-          <Box name='Paper' type={ItemTypes.PAPER} />
+          {boxes.map(({ name, type }) =>
+            <Box name={name}
+                 type={type}
+                 isDropped={this.isDropped(name)}
+                 onDrop={this.handleDrop} />
+          )}
         </div>
       </div>
     );
+  },
+
+  handleDrop(boxName) {
+    if (this.isDropped(boxName)) {
+      return;
+    }
+
+    this.setState(update(this.state, {
+      droppedBoxNames: {
+        $push: [boxName]
+      }
+    }));
   }
 });
 

modules/MonitorObservable.js

@@ -41,8 +41,8 @@ export default class MonitorObservable {
     }
   }
 
-  replaceType(newType) {
-    if (this.handle) {
+  receiveType(newType) {
+    if (this.handle && this.type !== newType) {
       this.adapter.removeHandler(this.handle);
       this.handle = this.adapter.addHandler(newType);
     }

modules/ReactDragSource.js

@@ -66,10 +66,7 @@ export default class ReactDragSource extends DragSource {
       this.manager = manager;
     }
 
-    if (this.type !== type) {
-      this.observable.replaceType(type);
-    }
-
+    this.observable.receiveType(type);
     return this.observable;
   }
 }

modules/ReactDropTarget.js

@@ -68,10 +68,7 @@ export default class ReactDropTarget extends DropTarget {
       this.manager = manager;
     }
 
-    if (this.type !== type) {
-      this.observable.replaceType(type);
-    }
-
+    this.observable.receiveType(type);
     return this.observable;
   }
 }

modules/backends/HTML5.js

@@ -126,12 +126,12 @@ export default class HTML5Backend {
 
   handleDragOver(e, targetHandle) {
     this.dragOverTargetHandles.unshift(targetHandle);
+    this.actions.hover(this.dragEnterTargetHandles);
   }
 
   handleTopDragOver(e) {
     const { dragOverTargetHandles } = this;
     this.dragOverTargetHandles = [];
-
     this.actions.hover(dragOverTargetHandles);
 
     const canDrop = dragOverTargetHandles.some(
@@ -145,11 +145,27 @@ export default class HTML5Backend {
   }
 
   handleTopDragEnterCapture(e) {
-    // IE requires this to fire dragover events
-    e.preventDefault();
+    this.dragEnterTargetHandles = [];
+  }
+
+  handleDragEnter(e, targetHandle) {
+    this.dragEnterTargetHandles.unshift(targetHandle);
+    this.actions.hover(this.dragEnterTargetHandles);
   }
 
   handleTopDragEnter(e) {
+    const { dragEnterTargetHandles } = this;
+    this.dragEnterTargetHandles = [];
+    this.actions.hover(dragEnterTargetHandles);
+
+    const canDrop = dragEnterTargetHandles.some(
+      targetHandle => this.monitor.canDrop(targetHandle)
+    );
+
+    if (canDrop) {
+      // IE requires this to fire dragover events
+      e.preventDefault();
+    }
   }
 
   handleTopDragLeaveCapture(e) {
@@ -183,6 +199,7 @@ export default class HTML5Backend {
 
   getTargetProps(targetHandle) {
     return {
+      onDragEnter: (e) => this.handleDragEnter(e, targetHandle),
       onDragOver: (e) => this.handleDragOver(e, targetHandle),
       onDrop: (e) => this.handleDrop(e, targetHandle)
     };