simplify example

Author: gaearon

examples/_dustbin-interesting/makeDustbin.js

@@ -37,7 +37,7 @@ function makeDustbin(accepts) {
       var dropStates = accepts.map(this.getDropState),
           backgroundColor = '#222';
 
-      if (dropStates.some(s => s.isHovering)) {
+      if (dropStates.some(s => s.isOver)) {
         backgroundColor = 'darkgreen';
       } else if (dropStates.some(s => s.isDragging)) {
         backgroundColor = 'darkkhaki';
@@ -56,7 +56,7 @@ function makeDustbin(accepts) {
                float: 'left'
              }}>
 
-          {dropStates.some(s => s.isHovering) ?
+          {dropStates.some(s => s.isOver) ?
             'Release to drop' :
             'This dustbin accepts: ' + accepts.join(', ')
           }

examples/_dustbin-nested/Box.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react'),
+    ItemTypes = require('./ItemTypes'),
+    { PropTypes } = React,
+    { DragDropMixin, DropEffects } = require('react-dnd');
+
+var Box = React.createClass({
+  mixins: [DragDropMixin],
+
+  statics: {
+    configureDragDrop(register) {
+      register(ItemTypes.BOX, {
+        dragSource: {
+          beginDrag(component) {
+            return {
+              item: {}
+            };
+          }
+        }
+      });
+    }
+  },
+
+  render() {
+    var { isDragging } = this.getDragState(ItemTypes.BOX);
+
+    return (
+      <div {...this.dragSourceFor(ItemTypes.BOX)}
+           style={{
+            display: 'inline-block',
+            border: '1px dashed gray',
+            padding: '0.5rem',
+            backgroundColor: 'white'
+           }}>
+        Drag me
+      </div>
+    );
+  }
+});
+
+module.exports = Box;

examples/_dustbin-nested/Container.js

@@ -1,34 +1,35 @@
 'use strict';
 
 var React = require('react'),
-    OuterDustbin = require('./OuterDustbin'),
-    InnerDustbin = require('./InnerDustbin'),
-    makeItem = require('../_dustbin-interesting/makeItem'),
+    Dustbin = require('./Dustbin'),
+    Box = require('./Box'),
     ItemTypes = require('./ItemTypes'),
     { NativeDragItemTypes } = require('react-dnd');
 
 var Container = React.createClass({
-  renderItem(name, dropType) {
-    var Item = makeItem(dropType);
-    return <Item name={name} />;
-  },
-
   render() {
     return (
       <div>
         <div style={{minHeight: '14rem', overflow: 'auto'}}>
-          <OuterDustbin>
-            <InnerDustbin />
-          </OuterDustbin>
+          <Dustbin greedy>
+            <Dustbin greedy>
+              <Dustbin greedy>
+                <Dustbin greedy />
+              </Dustbin>
+            </Dustbin>
+          </Dustbin>
 
-          <OuterDustbin checkIsHandled
-                        stopDeepHover>
-            <InnerDustbin />
-          </OuterDustbin>
+          <Dustbin>
+            <Dustbin>
+              <Dustbin>
+                <Dustbin />
+              </Dustbin>
+            </Dustbin>
+          </Dustbin>
         </div>
 
         <div style={{ minHeight: '2rem' }}>
-          {this.renderItem('Glass', ItemTypes.GLASS)}
+          <Box />
         </div>
       </div>
     );

examples/_dustbin-nested/OuterDustbin.js renamed to examples/_dustbin-nested/Dustbin.js

@@ -5,48 +5,70 @@ var React = require('react'),
     { DragDropMixin } = require('react-dnd'),
     { PropTypes } = React;
 
-var OuterDustbin = React.createClass({
+var Dustbin = React.createClass({
   mixins: [DragDropMixin],
 
+  propTypes: {
+    greedy: PropTypes.bool
+  },
+
   getInitialState() {
     return {
-      lastDroppedItem: null
+      didDrop: null,
+      didDropOnCurrent: null
     };
   },
 
   statics: {
     configureDragDrop(register) {
       var dropTarget = {
+        enter() {
+          // TODO
+        },
+
+        over() {
+          // TODO
+        },
+
+        leave() {
+          // TODO
+        },
+
         acceptDrop(component, item, e, isHandled) {
-          if (component.props.checkIsHandled && isHandled) {
-            return false;
+          if (!component.props.greedy && isHandled) {
+            return;
           }
 
           component.setState({
-            lastDroppedItem: item
+            didDrop: true,
+            didDropOnCurrent: !isHandled
           });
         }
       };
 
-      register(ItemTypes.GLASS, {
+      register(ItemTypes.BOX, {
         dropTarget: dropTarget
       });
     }
   },
 
   render() {
-    var dropStates = [ItemTypes.GLASS].map(this.getDropState),
+    var { isOver, isOverCurrent, isDragging } = this.getDropState(ItemTypes.BOX),
+        { greedy } = this.props,
+        { didDrop, didDropOnCurrent } = this.state,
         backgroundColor = 'rgba(0, 0, 0, .5)',
-        prop = this.props.stopDeepHover ? 'isOverCurrent' : 'isHovering';
+        text = greedy ? 'greedy' : 'lazy';
 
-    if (dropStates.some(s => s[prop])) {
+    if (isOverCurrent || isOver && greedy) {
       backgroundColor = 'darkgreen';
-    } else if (dropStates.some(s => s.isDragging)) {
+      text = greedy ? 'active (greedy)' : 'active (lazy)';
+    } else if (isDragging) {
       backgroundColor = 'darkkhaki';
+      text = 'dragging';
     }
 
     return (
-      <div {...this.dropTargetFor.apply(this, [ItemTypes.GLASS])}
+      <div {...this.dropTargetFor(ItemTypes.BOX)}
            style={{
              border: '2px solid green',
              minHeight: '12rem',
@@ -59,13 +81,10 @@ var OuterDustbin = React.createClass({
              float: 'left'
            }}>
 
-        {dropStates.some(s => s.isHovering) ?
-          'Release to drop' :
-          'This dustbin accepts: ' + [ItemTypes.GLASS].join(', ')
-        }
+        {text}
 
-        {this.state.lastDroppedItem &&
-          <p>Last dropped: {JSON.stringify(this.state.lastDroppedItem)}</p>
+        {didDrop &&
+          <span> &middot; did drop {didDropOnCurrent && ' (on current)'}</span>
         }
 
         <div>
@@ -76,4 +95,4 @@ var OuterDustbin = React.createClass({
   }
 });
 
-module.exports = OuterDustbin;
+module.exports = Dustbin;

examples/_dustbin-nested/InnerDustbin.js

@@ -1,7 +1,5 @@
 'use strict';
 
 module.exports = {
-  FOOD: 'food',
-  GLASS: 'glass',
-  PAPER: 'paper'
+  BOX: 'box'
 };

examples/_dustbin-nested/ItemTypes.js

@@ -23,7 +23,7 @@ var Dustbin = React.createClass({
     var dropState = this.getDropState(ItemTypes.ITEM),
         backgroundColor = '#222';
 
-    if (dropState.isHovering) {
+    if (dropState.isOver) {
       backgroundColor = 'darkgreen';
     } else if (dropState.isDragging) {
       backgroundColor = 'darkkhaki';
@@ -40,7 +40,7 @@ var Dustbin = React.createClass({
              textAlign: 'center'
            }}>
 
-        {dropState.isHovering ?
+        {dropState.isOver ?
           'Release to drop' :
           'Drag item here'
         }

examples/_dustbin-simple/Dustbin.js

@@ -7,19 +7,18 @@ var React = require('react'),
     DragAroundCustom = require('./_drag-around-custom/index'),
     DustbinSimple = require('./_dustbin-simple'),
     DustbinInteresting = require('./_dustbin-interesting'),
-    SortableSimple = require('./_sortable-simple'),
-    NestedDropzones = require('./_dustbin-nested');
+    DustbinNested = require('./_dustbin-nested'),
+    SortableSimple = require('./_sortable-simple');
 
 var App = React.createClass({
   render() {
     return (
       <div>
         <h1>react-dnd examples (<a target='_href' href='https://github.com/gaearon/react-dnd/blob/master/examples'>source</a>)</h1>
         <ul>
-          <li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>)</li>
+          <li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>, <Link to='dustbin-nested'>nested</Link>)</li>
           <li>Drag Around (<Link to='drag-around-naive'>naive</Link>, <Link to='drag-around-custom'>custom</Link>)</li>
           <li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
-          <li>Nested dropzones (<Link to='nested-dropzones'>nested dropzones</Link>)</li>
         </ul>
         <hr />
         <RouteHandler />
@@ -35,7 +34,7 @@ var routes = (
     <Route name='dustbin-simple' path='dustbin-simple' handler={DustbinSimple} />
     <Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
     <Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
-    <Route name='nested-dropzones' path='nested-dropzones' handler={NestedDropzones} />
+    <Route name='dustbin-nested' path='dustbin-nested' handler={DustbinNested} />
     <Redirect from='/' to='dustbin-simple' />
   </Route>
 );

examples/index.js

@@ -132,11 +132,12 @@ function createDragDropMixin(backend) {
       checkDropTargetDefined(this, type);
 
       var isDragging = this.getActiveDropTargetType() === type,
-          isHovering = !!this.state.currentDropEffect;
+          isOver = !!this.state.currentDropEffect;
 
       return {
         isDragging: isDragging,
-        isHovering: isDragging && isHovering
+        isOver: isDragging && isOver,
+        isOverCurrent: false // TODO
       };
     },