Add nested example

examples/_dustbin-nested/Container.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react'),
+    OuterDustbin = require('./OuterDustbin'),
+    InnerDustbin = require('./InnerDustbin'),
+    makeItem = require('../_dustbin-interesting/makeItem'),
+    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>
+
+          <OuterDustbin checkIsHandled
+                        stopDeepHover>
+            <InnerDustbin />
+          </OuterDustbin>
+        </div>
+
+        <div style={{ minHeight: '2rem' }}>
+          {this.renderItem('Glass', ItemTypes.GLASS)}
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = Container;

examples/_dustbin-nested/InnerDustbin.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var React = require('react'),
+    ItemTypes = require('./ItemTypes'),
+    { DragDropMixin } = require('react-dnd'),
+    { PropTypes } = React;
+
+var InnerDustbin = React.createClass({
+  mixins: [DragDropMixin],
+
+  getInitialState() {
+    return {
+      lastDroppedItem: null
+    };
+  },
+
+  statics: {
+    configureDragDrop(register) {
+      var dropTarget = {
+        acceptDrop(component, item) {
+          component.setState({
+            lastDroppedItem: item
+          });
+        }
+      };
+
+      register(ItemTypes.GLASS, {
+        dropTarget: dropTarget
+      });
+    }
+  },
+
+  render() {
+    var dropStates = [ItemTypes.GLASS].map(this.getDropState),
+        backgroundColor = 'rgba(0, 0, 0, 1)';
+
+    if (dropStates.some(s => s.isHovering)) {
+      backgroundColor = 'darkgreen';
+    } else if (dropStates.some(s => s.isDragging)) {
+      backgroundColor = 'darkkhaki';
+    }
+
+    return (
+      <div {...this.dropTargetFor.apply(this, [ItemTypes.GLASS])}
+           style={{
+             border: '2px solid green',
+             height: '12rem',
+             width: '12rem',
+             color: 'white',
+             backgroundColor: backgroundColor,
+             padding: '2rem',
+             margin: '0.5rem',
+             textAlign: 'center',
+             float: 'left'
+           }}>
+
+        {dropStates.some(s => s.isHovering) ?
+          'Release to drop' :
+          'This dustbin accepts: ' + [ItemTypes.GLASS].join(', ')
+        }
+
+        {this.state.lastDroppedItem &&
+          <p>Last dropped: {JSON.stringify(this.state.lastDroppedItem)}</p>
+        }
+      </div>
+    );
+  }
+});
+
+module.exports = InnerDustbin;

examples/_dustbin-nested/ItemTypes.js

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

examples/_dustbin-nested/OuterDustbin.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var React = require('react'),
+    ItemTypes = require('./ItemTypes'),
+    { DragDropMixin } = require('react-dnd'),
+    { PropTypes } = React;
+
+var OuterDustbin = React.createClass({
+  mixins: [DragDropMixin],
+
+  getInitialState() {
+    return {
+      lastDroppedItem: null
+    };
+  },
+
+  statics: {
+    configureDragDrop(register) {
+      var dropTarget = {
+        acceptDrop(component, item, e, isHandled) {
+          if (component.props.checkIsHandled && isHandled) {
+            return false;
+          }
+
+          component.setState({
+            lastDroppedItem: item
+          });
+        }
+      };
+
+      register(ItemTypes.GLASS, {
+        dropTarget: dropTarget
+      });
+    }
+  },
+
+  render() {
+    var dropStates = [ItemTypes.GLASS].map(this.getDropState),
+        backgroundColor = 'rgba(0, 0, 0, .5)',
+        prop = this.props.stopDeepHover ? 'isOverCurrent' : 'isHovering';
+
+    if (dropStates.some(s => s[prop])) {
+      backgroundColor = 'darkgreen';
+    } else if (dropStates.some(s => s.isDragging)) {
+      backgroundColor = 'darkkhaki';
+    }
+
+    return (
+      <div {...this.dropTargetFor.apply(this, [ItemTypes.GLASS])}
+           style={{
+             border: '2px solid green',
+             minHeight: '12rem',
+             minWidth: '12rem',
+             color: 'white',
+             backgroundColor: backgroundColor,
+             padding: '2rem',
+             margin: '0.5rem',
+             textAlign: 'center',
+             float: 'left'
+           }}>
+
+        {dropStates.some(s => s.isHovering) ?
+          'Release to drop' :
+          'This dustbin accepts: ' + [ItemTypes.GLASS].join(', ')
+        }
+
+        {this.state.lastDroppedItem &&
+          <p>Last dropped: {JSON.stringify(this.state.lastDroppedItem)}</p>
+        }
+
+        <div>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = OuterDustbin;

examples/_dustbin-nested/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react'),
+    Container = require('./Container');
+
+var DustbinNested = React.createClass({
+  render() {
+    return (
+      <div>
+        <Container />
+        <hr />
+        <p>
+          Showcase how dropzones can react on hover
+        </p>
+      </div>
+    );
+  }
+});
+
+module.exports = DustbinNested;

examples/index.js

@@ -7,7 +7,8 @@ var React = require('react'),
     DragAroundCustom = require('./_drag-around-custom/index'),
     DustbinSimple = require('./_dustbin-simple'),
     DustbinInteresting = require('./_dustbin-interesting'),
-    SortableSimple = require('./_sortable-simple');
+    SortableSimple = require('./_sortable-simple'),
+    NestedDropzones = require('./_dustbin-nested');
 
 var App = React.createClass({
   render() {
@@ -18,6 +19,7 @@ var App = React.createClass({
           <li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</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 />
@@ -33,6 +35,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} />
     <Redirect from='/' to='dustbin-simple' />
   </Route>
 );