Add in-progress drag handle example

TODO

@@ -10,6 +10,7 @@
 * export methods for verifying validness from dnd-core
 * make perf (shouldComponentUpdate) configurable
 * early invariants for common mistakes (e.g. missing context?)
+* fix hot reloading
 
 dnd-core
 * smarter canDrop()

examples/_customize-handles/Box.js

@@ -0,0 +1,62 @@
+'use strict';
+
+import React, { Component, PropTypes } from 'react';
+import ItemTypes from './ItemTypes';
+import { configureDragDrop } from 'react-dnd';
+
+const style = {
+  border: '1px dashed gray',
+  backgroundColor: 'white',
+  padding: '0.5rem',
+  margin: '0.5rem',
+  width: '15rem'
+};
+
+const handleStyle = {
+  backgroundColor: 'green',
+  width: '1rem',
+  height: '1rem',
+  display: 'inline-block',
+  marginRight: '0.5rem'
+};
+
+const propTypes = {
+  isDragging: PropTypes.bool.isRequired,
+  connectDragSource: PropTypes.func.isRequired
+};
+
+class Box extends Component {
+  render() {
+    const { isDragging, connectDragSource } = this.props;
+    const opacity = isDragging ? 0.4 : 1;
+
+    return (
+      <div style={{ ...style, opacity }}>
+        <div style={handleStyle}
+             ref={connectDragSource} />
+
+        Drag me by the handle
+      </div>
+    );
+  }
+}
+Box.propTypes = propTypes;
+
+const boxSource = {
+  beginDrag() {
+    return {};
+  }
+};
+
+export default configureDragDrop(Box, {
+  getHandlers(props, sourceFor) {
+    return sourceFor(ItemTypes.BOX, boxSource);
+  },
+
+  getProps(connect, monitor, source) {
+    return {
+      connectDragSource: connect(source),
+      isDragging: monitor.isDragging(source)
+    };
+  }
+});

examples/_customize-handles/Container.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import React, { PropTypes, Component } from 'react';
+import { configureDragDropContext, DragDropContext, HTML5Backend } from 'react-dnd';
+import Box from './Box';
+import shuffle from 'lodash/collection/shuffle';
+
+class Container extends Component {
+  render() {
+    return (
+      <div>
+        <div style={{ marginTop: '2rem' }}>
+          <Box />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default configureDragDropContext(Container, {
+  backend: HTML5Backend
+});

examples/_customize-handles/ItemTypes.js

@@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+  BOX: 'box'
+};

examples/_customize-handles/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+import React from 'react';
+import Container from './Container';
+
+export default class CustomizeHandles {
+  render() {
+    return (
+      <div>
+        <Container />
+        <hr />
+      </div>
+    );
+  }
+}

examples/_dustbin-simple/Container.js

@@ -7,22 +7,14 @@ import Box from './Box';
 import shuffle from 'lodash/collection/shuffle';
 
 class Container extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      boxes: ['Glass', 'Banana', 'Paper']
-    };
-  }
-
   render() {
     return (
       <div>
         <Dustbin />
         <div style={{ marginTop: '2rem' }}>
-          {this.state.boxes.map((name, index) =>
-            <Box name={name}
-                 key={index} />
-          )}
+          <Box name='Glass' />
+          <Box name='Banana' />
+          <Box name='Paper' />
         </div>
       </div>
     );

examples/index.js

@@ -7,6 +7,7 @@ import DustbinInteresting from './_dustbin-interesting';
 import DustbinStress from './_dustbin-stress';
 import NestingSources from './_nesting-sources';
 import SortableSimple from './_sortable-simple';
+import CustomizeHandles from './_customize-handles';
 
 /*
 DragAroundNaive = require('./_drag-around-naive/index'),
@@ -23,6 +24,7 @@ const App = React.createClass({
           <li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>, <Link to='dustbin-stress'>stress test</Link>)</li>
           <li>Nesting (<Link to='nesting-sources'>drag sources</Link>)</li>
           <li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
+          <li>Customize (<Link to='customize-handles'>drag handles</Link>)</li>
         </ul>
         <hr />
         <RouteHandler />
@@ -44,6 +46,7 @@ const routes = (
     <Route name='dustbin-stress' path='dustbin-stress' handler={DustbinStress} />
     <Route name='nesting-sources' path='nesting-sources' handler={NestingSources} />
     <Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
+    <Route name='customize-handles' path='customize-handles' handler={CustomizeHandles} />
     <Redirect from='/' to='dustbin-simple' />
   </Route>
 );

examples/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = {
   module: {
     loaders: [
       // TODO: temp dnd-core for npm link
-      { test: /\.js$/, loaders: ['6to5?experimental'], exclude: /node_modules|dnd-core/ }
+      { test: /\.js$/, loaders: ['react-hot', '6to5?experimental'], exclude: /node_modules|dnd-core/ }
     ]
   },
   plugins: [