Add (broken) nested drag source example

Author: gaearon

examples/_nesting-sources/Colors.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  YELLOW: 'yellow',
+  BLUE: 'blue'
+};

examples/_nesting-sources/Container.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react'),
+    makeSource = require('./makeSource'),
+    Colors = require('./Colors'),
+    Target = require('./Target');
+
+var Container = React.createClass({
+  render() {
+    var Yellow = makeSource(Colors.YELLOW),
+        BlueSource = makeSource(Colors.BLUE);
+
+    return (
+      <div style={{ height: 320 }}>
+        <div style={{ float: 'left' }}>
+          <BlueSource>
+            <Yellow>
+              <Yellow />
+              <BlueSource />
+            </Yellow>
+            <BlueSource>
+              <Yellow />
+            </BlueSource>
+          </BlueSource>
+        </div>
+
+        <div style={{ float: 'left', marginLeft: 100, marginTop: 50 }}>
+          <Target />
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = Container;

examples/_nesting-sources/Target.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var React = require('react'),
+    Colors = require('./Colors'),
+    { DragDropMixin } = require('react-dnd');
+
+function makeDropTarget(color) {
+  return {
+    acceptDrop(component) {
+      component.setState({
+        lastDroppedColor: color
+      });
+    }
+  };
+}
+
+var Target = React.createClass({
+  mixins: [DragDropMixin],
+
+  statics: {
+    configureDragDrop(register) {
+      register(Colors.YELLOW, {
+        dropTarget: makeDropTarget(Colors.YELLOW)
+      });
+
+      register(Colors.BLUE, {
+        dropTarget: makeDropTarget(Colors.BLUE)
+      });
+    }
+  },
+
+  getInitialState() {
+    return {
+      lastDroppedColor: null
+    };
+  },
+
+  render() {
+    var { lastDroppedColor } = this.state,
+        blueDropState = this.getDropState(Colors.BLUE),
+        yellowDropState = this.getDropState(Colors.YELLOW),
+        isDragging = blueDropState.isDragging || yellowDropState.isDragging,
+        isHovering = blueDropState.isHovering || yellowDropState.isHovering,
+        backgroundColor = '#fff',
+        opacity = isHovering ? 1 : 0.7;
+
+    if (blueDropState.isDragging) {
+      backgroundColor = 'lightblue';
+    } else if (yellowDropState.isDragging) {
+      backgroundColor = 'lightgoldenrodyellow';
+    }
+
+    return (
+      <div {...this.dropTargetFor(Colors.YELLOW, Colors.BLUE)}
+           style={{
+             backgroundColor: backgroundColor,
+             opacity: opacity,
+             border: '1px dashed gray',
+             height: '12rem',
+             width: '12rem',
+             padding: '2rem',
+             textAlign: 'center'
+           }}>
+
+        <p>Drop here.</p>
+
+        {!isDragging && lastDroppedColor &&
+          <p>Last dropped: {lastDroppedColor}</p>
+        }
+      </div>
+    );
+  }
+});
+
+module.exports = Target;

examples/_nesting-sources/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react'),
+    Container = require('./Container');
+
+var NestingSources = React.createClass({
+  render() {
+    return (
+      <div>
+        <Container />
+        <hr />
+        <p>
+          You can nest drag sources in one another. If a nested drag source returns false in <code>canDrag</code>, its parent will be asked, until a draggable source is found and activated.
+        </p>
+      </div>
+    );
+  }
+});
+
+module.exports = NestingSources;

examples/_nesting-sources/makeSource.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var React = require('react'),
+    Colors = require('./Colors'),
+    LinkedStateMixin = require('react/lib/LinkedStateMixin'),
+    { DragDropMixin } = require('react-dnd');
+
+function makeSource(sourceColor) {
+  var dragSource = {
+    canDrag(component) {
+      return !component.state.forbidDrag;
+    },
+
+    beginDrag() {
+      return {
+        item: { }
+      };
+    }
+  };
+
+  var Source = React.createClass({
+    mixins: [DragDropMixin, LinkedStateMixin],
+
+    statics: {
+      configureDragDrop(register) {
+        register(sourceColor, {
+          dragSource: dragSource
+        });
+      }
+    },
+
+    getInitialState() {
+      return {
+        forbidDrag: false
+      };
+    },
+
+    render() {
+      var { isDragging } = this.getDragState(sourceColor),
+          backgroundColor;
+
+      switch (sourceColor) {
+      case Colors.YELLOW:
+        backgroundColor = 'lightgoldenrodyellow';
+        break;
+      case Colors.BLUE:
+        backgroundColor = 'lightblue';
+        break;
+      }
+
+      return (
+        <div {...this.dragSourceFor(sourceColor)}
+             style={{
+               border: '1px dashed gray',
+               backgroundColor: backgroundColor,
+               padding: '0.5rem',
+               margin: '0.5rem',
+               opacity: isDragging ? 0.4 : 1
+             }}>
+
+          <input type='checkbox'
+                 checkedLink={this.linkState('forbidDrag')}>
+            Forbid drag
+          </input>
+
+          {this.props.children}
+        </div>
+      );
+    }
+  });
+
+  return Source;
+}
+
+module.exports = makeSource;

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'),
+    NestingSources = require('./_nesting-sources');
 
 var App = React.createClass({
   render() {
@@ -17,6 +18,7 @@ var App = React.createClass({
         <ul>
           <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>Nesting (<Link to='nesting-sources'>drag sources</Link>)</li>
           <li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
         </ul>
         <hr />
@@ -32,6 +34,7 @@ var routes = (
     <Route name='drag-around-custom' path='drag-around-custom' handler={DragAroundCustom} />
     <Route name='dustbin-simple' path='dustbin-simple' handler={DustbinSimple} />
     <Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
+    <Route name='nesting-sources' path='nesting-sources' handler={NestingSources} />
     <Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
     <Redirect from='/' to='dustbin-simple' />
   </Route>