Skip to content

Commit 8dc0d73

Browse files
committed
Add (broken) nested drag source example
1 parent 0489848 commit 8dc0d73

File tree

6 files changed

+215
-1
lines changed

6 files changed

+215
-1
lines changed

examples/_nesting-sources/Colors.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
3+
module.exports = {
4+
YELLOW: 'yellow',
5+
BLUE: 'blue'
6+
};
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
'use strict';
2+
3+
var React = require('react'),
4+
makeSource = require('./makeSource'),
5+
Colors = require('./Colors'),
6+
Target = require('./Target');
7+
8+
var Container = React.createClass({
9+
render() {
10+
var Yellow = makeSource(Colors.YELLOW),
11+
BlueSource = makeSource(Colors.BLUE);
12+
13+
return (
14+
<div style={{ height: 320 }}>
15+
<div style={{ float: 'left' }}>
16+
<BlueSource>
17+
<Yellow>
18+
<Yellow />
19+
<BlueSource />
20+
</Yellow>
21+
<BlueSource>
22+
<Yellow />
23+
</BlueSource>
24+
</BlueSource>
25+
</div>
26+
27+
<div style={{ float: 'left', marginLeft: 100, marginTop: 50 }}>
28+
<Target />
29+
</div>
30+
</div>
31+
);
32+
}
33+
});
34+
35+
module.exports = Container;

examples/_nesting-sources/Target.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
'use strict';
2+
3+
var React = require('react'),
4+
Colors = require('./Colors'),
5+
{ DragDropMixin } = require('react-dnd');
6+
7+
function makeDropTarget(color) {
8+
return {
9+
acceptDrop(component) {
10+
component.setState({
11+
lastDroppedColor: color
12+
});
13+
}
14+
};
15+
}
16+
17+
var Target = React.createClass({
18+
mixins: [DragDropMixin],
19+
20+
statics: {
21+
configureDragDrop(register) {
22+
register(Colors.YELLOW, {
23+
dropTarget: makeDropTarget(Colors.YELLOW)
24+
});
25+
26+
register(Colors.BLUE, {
27+
dropTarget: makeDropTarget(Colors.BLUE)
28+
});
29+
}
30+
},
31+
32+
getInitialState() {
33+
return {
34+
lastDroppedColor: null
35+
};
36+
},
37+
38+
render() {
39+
var { lastDroppedColor } = this.state,
40+
blueDropState = this.getDropState(Colors.BLUE),
41+
yellowDropState = this.getDropState(Colors.YELLOW),
42+
isDragging = blueDropState.isDragging || yellowDropState.isDragging,
43+
isHovering = blueDropState.isHovering || yellowDropState.isHovering,
44+
backgroundColor = '#fff',
45+
opacity = isHovering ? 1 : 0.7;
46+
47+
if (blueDropState.isDragging) {
48+
backgroundColor = 'lightblue';
49+
} else if (yellowDropState.isDragging) {
50+
backgroundColor = 'lightgoldenrodyellow';
51+
}
52+
53+
return (
54+
<div {...this.dropTargetFor(Colors.YELLOW, Colors.BLUE)}
55+
style={{
56+
backgroundColor: backgroundColor,
57+
opacity: opacity,
58+
border: '1px dashed gray',
59+
height: '12rem',
60+
width: '12rem',
61+
padding: '2rem',
62+
textAlign: 'center'
63+
}}>
64+
65+
<p>Drop here.</p>
66+
67+
{!isDragging && lastDroppedColor &&
68+
<p>Last dropped: {lastDroppedColor}</p>
69+
}
70+
</div>
71+
);
72+
}
73+
});
74+
75+
module.exports = Target;

examples/_nesting-sources/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use strict';
2+
3+
var React = require('react'),
4+
Container = require('./Container');
5+
6+
var NestingSources = React.createClass({
7+
render() {
8+
return (
9+
<div>
10+
<Container />
11+
<hr />
12+
<p>
13+
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.
14+
</p>
15+
</div>
16+
);
17+
}
18+
});
19+
20+
module.exports = NestingSources;
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
'use strict';
2+
3+
var React = require('react'),
4+
Colors = require('./Colors'),
5+
LinkedStateMixin = require('react/lib/LinkedStateMixin'),
6+
{ DragDropMixin } = require('react-dnd');
7+
8+
function makeSource(sourceColor) {
9+
var dragSource = {
10+
canDrag(component) {
11+
return !component.state.forbidDrag;
12+
},
13+
14+
beginDrag() {
15+
return {
16+
item: { }
17+
};
18+
}
19+
};
20+
21+
var Source = React.createClass({
22+
mixins: [DragDropMixin, LinkedStateMixin],
23+
24+
statics: {
25+
configureDragDrop(register) {
26+
register(sourceColor, {
27+
dragSource: dragSource
28+
});
29+
}
30+
},
31+
32+
getInitialState() {
33+
return {
34+
forbidDrag: false
35+
};
36+
},
37+
38+
render() {
39+
var { isDragging } = this.getDragState(sourceColor),
40+
backgroundColor;
41+
42+
switch (sourceColor) {
43+
case Colors.YELLOW:
44+
backgroundColor = 'lightgoldenrodyellow';
45+
break;
46+
case Colors.BLUE:
47+
backgroundColor = 'lightblue';
48+
break;
49+
}
50+
51+
return (
52+
<div {...this.dragSourceFor(sourceColor)}
53+
style={{
54+
border: '1px dashed gray',
55+
backgroundColor: backgroundColor,
56+
padding: '0.5rem',
57+
margin: '0.5rem',
58+
opacity: isDragging ? 0.4 : 1
59+
}}>
60+
61+
<input type='checkbox'
62+
checkedLink={this.linkState('forbidDrag')}>
63+
Forbid drag
64+
</input>
65+
66+
{this.props.children}
67+
</div>
68+
);
69+
}
70+
});
71+
72+
return Source;
73+
}
74+
75+
module.exports = makeSource;

examples/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ var React = require('react'),
77
DragAroundCustom = require('./_drag-around-custom/index'),
88
DustbinSimple = require('./_dustbin-simple'),
99
DustbinInteresting = require('./_dustbin-interesting'),
10-
SortableSimple = require('./_sortable-simple');
10+
SortableSimple = require('./_sortable-simple'),
11+
NestingSources = require('./_nesting-sources');
1112

1213
var App = React.createClass({
1314
render() {
@@ -17,6 +18,7 @@ var App = React.createClass({
1718
<ul>
1819
<li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>)</li>
1920
<li>Drag Around (<Link to='drag-around-naive'>naive</Link>, <Link to='drag-around-custom'>custom</Link>)</li>
21+
<li>Nesting (<Link to='nesting-sources'>drag sources</Link>)</li>
2022
<li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
2123
</ul>
2224
<hr />
@@ -32,6 +34,7 @@ var routes = (
3234
<Route name='drag-around-custom' path='drag-around-custom' handler={DragAroundCustom} />
3335
<Route name='dustbin-simple' path='dustbin-simple' handler={DustbinSimple} />
3436
<Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
37+
<Route name='nesting-sources' path='nesting-sources' handler={NestingSources} />
3538
<Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
3639
<Redirect from='/' to='dustbin-simple' />
3740
</Route>

0 commit comments

Comments
 (0)