Tweak style in examples and fix warnings

examples/_dustbin-interesting/Container.js

@@ -1,20 +1,20 @@
 'use strict';
 
 var React = require('react'),
-    makeDustbin = require('./Dustbin'),
-    makeItem = require('./Item'),
+    makeDustbin = require('./makeDustbin'),
+    makeItem = require('./makeItem'),
     ItemTypes = require('./ItemTypes'),
     { NativeDragItemTypes } = require('react-dnd');
 
 var Container = React.createClass({
   renderDustbin(accepts) {
     var Dustbin = makeDustbin(accepts);
-    return <Dustbin/>;
+    return <Dustbin />;
   },
 
   renderItem(name, dropType) {
     var Item = makeItem(dropType);
-    return <Item name={name}/>;
+    return <Item name={name} />;
   },
 
   render() {

examples/_dustbin-interesting/makeDustbin.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var React = require('react'),
+    ItemTypes = require('./ItemTypes'),
+    { DragDropMixin } = require('react-dnd'),
+    { PropTypes } = React;
+
+function makeDustbin(accepts) {
+  var Dustbin = React.createClass({
+    mixins: [DragDropMixin],
+
+    getInitialState() {
+      return {
+        lastDroppedItem: null
+      };
+    },
+
+    statics: {
+      configureDragDrop(registerType) {
+        var dropTarget = {
+          acceptDrop(component, item) {
+            component.setState({
+              lastDroppedItem: item
+            });
+          }
+        };
+
+        accepts.forEach(itemType => {
+          registerType(itemType, {
+            dropTarget: dropTarget
+          });
+        });
+      }
+    },
+
+    render() {
+      var dropStates = accepts.map(this.getDropState),
+          backgroundColor = '#222';
+
+      if (dropStates.some(s => s.isHovering)) {
+        backgroundColor = 'darkgreen';
+      } else if (dropStates.some(s => s.isDragging)) {
+        backgroundColor = 'darkkhaki';
+      }
+
+      return (
+        <div {...this.dropTargetFor.apply(this, accepts)}
+             style={{
+               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: ' + accepts.join(', ')
+          }
+
+          {this.state.lastDroppedItem &&
+            <p>Last dropped: {JSON.stringify(this.state.lastDroppedItem)}</p>
+          }
+        </div>
+      );
+    }
+  });
+
+  return Dustbin;
+}
+
+module.exports = makeDustbin;

examples/_dustbin-interesting/makeItem.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var React = require('react'),
+    ItemTypes = require('./ItemTypes'),
+    { PropTypes } = React,
+    { DragDropMixin } = require('react-dnd');
+
+function makeItem(dropType) {
+  var Item = React.createClass({
+    mixins: [DragDropMixin],
+
+    propTypes: {
+      name: PropTypes.string.isRequired
+    },
+
+    getInitialState() {
+      return {
+        hasDropped: false
+      };
+    },
+
+    statics: {
+      configureDragDrop(registerType) {
+        registerType(dropType, {
+          dragSource: {
+            beginDrag(component) {
+              return {
+                item: {
+                  name: component.props.name,
+                }
+              };
+            },
+
+            endDrag(component, effect) {
+              if (effect) {
+                component.setState({
+                  hasDropped: true
+                });
+              }
+            }
+          }
+        });
+      }
+    },
+
+    render() {
+      var { hasDropped } = this.state,
+          { isDragging } = this.getDragState(dropType);
+
+      return (
+        <div {...this.dragSourceFor(dropType)}
+             style={{
+               border: '1px dashed gray',
+               backgroundColor: 'white',
+               padding: '0.5rem',
+               margin: '0.5rem',
+               opacity: isDragging ? 0.4 : 1,
+               maxWidth: 80,
+               float: 'left'
+             }}>
+
+          {hasDropped ?
+            <s>{this.props.name}</s> :
+            this.props.name
+          }
+        </div>
+      );
+    }
+  });
+
+  return Item;
+}
+
+module.exports = makeItem;