Add (broken) nested drag source example

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>