Skip to content

Commit 8bcdb95

Browse files
gaearongaearon
committed
simplify example
1 parent 1129ca7 commit 8bcdb95

File tree

9 files changed

+108
-118
lines changed

9 files changed

+108
-118
lines changed

‎examples/_dustbin-interesting/makeDustbin.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function makeDustbin(accepts) {
3737
var dropStates = accepts.map(this.getDropState),
3838
backgroundColor = '#222';
3939

40-
if (dropStates.some(s => s.isHovering)) {
40+
if (dropStates.some(s => s.isOver)) {
4141
backgroundColor = 'darkgreen';
4242
} else if (dropStates.some(s => s.isDragging)) {
4343
backgroundColor = 'darkkhaki';
@@ -56,7 +56,7 @@ function makeDustbin(accepts) {
5656
float: 'left'
5757
}}>
5858

59-
{dropStates.some(s => s.isHovering) ?
59+
{dropStates.some(s => s.isOver) ?
6060
'Release to drop' :
6161
'This dustbin accepts: ' + accepts.join(', ')
6262
}

‎examples/_dustbin-nested/Box.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use strict';
2+
3+
var React = require('react'),
4+
ItemTypes = require('./ItemTypes'),
5+
{ PropTypes } = React,
6+
{ DragDropMixin, DropEffects } = require('react-dnd');
7+
8+
var Box = React.createClass({
9+
mixins: [DragDropMixin],
10+
11+
statics: {
12+
configureDragDrop(register) {
13+
register(ItemTypes.BOX, {
14+
dragSource: {
15+
beginDrag(component) {
16+
return {
17+
item: {}
18+
};
19+
}
20+
}
21+
});
22+
}
23+
},
24+
25+
render() {
26+
var { isDragging } = this.getDragState(ItemTypes.BOX);
27+
28+
return (
29+
<div {...this.dragSourceFor(ItemTypes.BOX)}
30+
style={{
31+
display: 'inline-block',
32+
border: '1px dashed gray',
33+
padding: '0.5rem',
34+
backgroundColor: 'white'
35+
}}>
36+
Drag me
37+
</div>
38+
);
39+
}
40+
});
41+
42+
module.exports = Box;

‎examples/_dustbin-nested/Container.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
11
'use strict';
22

33
var React = require('react'),
4-
OuterDustbin = require('./OuterDustbin'),
5-
InnerDustbin = require('./InnerDustbin'),
6-
makeItem = require('../_dustbin-interesting/makeItem'),
4+
Dustbin = require('./Dustbin'),
5+
Box = require('./Box'),
76
ItemTypes = require('./ItemTypes'),
87
{ NativeDragItemTypes } = require('react-dnd');
98

109
var Container = React.createClass({
11-
renderItem(name, dropType) {
12-
var Item = makeItem(dropType);
13-
return <Item name={name} />;
14-
},
15-
1610
render() {
1711
return (
1812
<div>
1913
<div style={{minHeight: '14rem', overflow: 'auto'}}>
20-
<OuterDustbin>
21-
<InnerDustbin />
22-
</OuterDustbin>
14+
<Dustbin greedy>
15+
<Dustbin greedy>
16+
<Dustbin greedy>
17+
<Dustbin greedy />
18+
</Dustbin>
19+
</Dustbin>
20+
</Dustbin>
2321

24-
<OuterDustbin checkIsHandled
25-
stopDeepHover>
26-
<InnerDustbin />
27-
</OuterDustbin>
22+
<Dustbin>
23+
<Dustbin>
24+
<Dustbin>
25+
<Dustbin />
26+
</Dustbin>
27+
</Dustbin>
28+
</Dustbin>
2829
</div>
2930

3031
<div style={{ minHeight: '2rem' }}>
31-
{this.renderItem('Glass', ItemTypes.GLASS)}
32+
<Box />
3233
</div>
3334
</div>
3435
);

‎examples/_dustbin-nested/OuterDustbin.js‎ renamed to ‎examples/_dustbin-nested/Dustbin.js‎

Lines changed: 37 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,70 @@ var React = require('react'),
55
{ DragDropMixin } = require('react-dnd'),
66
{ PropTypes } = React;
77

8-
var OuterDustbin = React.createClass({
8+
var Dustbin = React.createClass({
99
mixins: [DragDropMixin],
1010

11+
propTypes: {
12+
greedy: PropTypes.bool
13+
},
14+
1115
getInitialState() {
1216
return {
13-
lastDroppedItem: null
17+
didDrop: null,
18+
didDropOnCurrent: null
1419
};
1520
},
1621

1722
statics: {
1823
configureDragDrop(register) {
1924
var dropTarget = {
25+
enter() {
26+
// TODO
27+
},
28+
29+
over() {
30+
// TODO
31+
},
32+
33+
leave() {
34+
// TODO
35+
},
36+
2037
acceptDrop(component, item, e, isHandled) {
21-
if (component.props.checkIsHandled && isHandled) {
22-
return false;
38+
if (!component.props.greedy && isHandled) {
39+
return;
2340
}
2441

2542
component.setState({
26-
lastDroppedItem: item
43+
didDrop: true,
44+
didDropOnCurrent: !isHandled
2745
});
2846
}
2947
};
3048

31-
register(ItemTypes.GLASS, {
49+
register(ItemTypes.BOX, {
3250
dropTarget: dropTarget
3351
});
3452
}
3553
},
3654

3755
render() {
38-
var dropStates = [ItemTypes.GLASS].map(this.getDropState),
56+
var { isOver, isOverCurrent, isDragging } = this.getDropState(ItemTypes.BOX),
57+
{ greedy } = this.props,
58+
{ didDrop, didDropOnCurrent } = this.state,
3959
backgroundColor = 'rgba(0, 0, 0, .5)',
40-
prop = this.props.stopDeepHover ? 'isOverCurrent' : 'isHovering';
60+
text = greedy ? 'greedy' : 'lazy';
4161

42-
if (dropStates.some(s => s[prop])) {
62+
if (isOverCurrent || isOver && greedy) {
4363
backgroundColor = 'darkgreen';
44-
} else if (dropStates.some(s => s.isDragging)) {
64+
text = greedy ? 'active (greedy)' : 'active (lazy)';
65+
} else if (isDragging) {
4566
backgroundColor = 'darkkhaki';
67+
text = 'dragging';
4668
}
4769

4870
return (
49-
<div {...this.dropTargetFor.apply(this, [ItemTypes.GLASS])}
71+
<div {...this.dropTargetFor(ItemTypes.BOX)}
5072
style={{
5173
border: '2px solid green',
5274
minHeight: '12rem',
@@ -59,13 +81,10 @@ var OuterDustbin = React.createClass({
5981
float: 'left'
6082
}}>
6183

62-
{dropStates.some(s => s.isHovering) ?
63-
'Release to drop' :
64-
'This dustbin accepts: ' + [ItemTypes.GLASS].join(', ')
65-
}
84+
{text}
6685

67-
{this.state.lastDroppedItem &&
68-
<p>Last dropped: {JSON.stringify(this.state.lastDroppedItem)}</p>
86+
{didDrop &&
87+
<span> &middot; did drop {didDropOnCurrent && ' (on current)'}</span>
6988
}
7089

7190
<div>
@@ -76,4 +95,4 @@ var OuterDustbin = React.createClass({
7695
}
7796
});
7897

79-
module.exports = OuterDustbin;
98+
module.exports = Dustbin;

‎examples/_dustbin-nested/InnerDustbin.js‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎examples/_dustbin-nested/ItemTypes.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
'use strict';
22

33
module.exports = {
4-
FOOD: 'food',
5-
GLASS: 'glass',
6-
PAPER: 'paper'
4+
BOX: 'box'
75
};

‎examples/_dustbin-simple/Dustbin.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ var Dustbin = React.createClass({
2323
var dropState = this.getDropState(ItemTypes.ITEM),
2424
backgroundColor = '#222';
2525

26-
if (dropState.isHovering) {
26+
if (dropState.isOver) {
2727
backgroundColor = 'darkgreen';
2828
} else if (dropState.isDragging) {
2929
backgroundColor = 'darkkhaki';
@@ -40,7 +40,7 @@ var Dustbin = React.createClass({
4040
textAlign: 'center'
4141
}}>
4242

43-
{dropState.isHovering ?
43+
{dropState.isOver ?
4444
'Release to drop' :
4545
'Drag item here'
4646
}

‎examples/index.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,18 @@ 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'),
11-
NestedDropzones = require('./_dustbin-nested');
10+
DustbinNested = require('./_dustbin-nested'),
11+
SortableSimple = require('./_sortable-simple');
1212

1313
var App = React.createClass({
1414
render() {
1515
return (
1616
<div>
1717
<h1>react-dnd examples (<a target='_href' href='https://github.com/gaearon/react-dnd/blob/master/examples'>source</a>)</h1>
1818
<ul>
19-
<li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>)</li>
19+
<li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>, <Link to='dustbin-nested'>nested</Link>)</li>
2020
<li>Drag Around (<Link to='drag-around-naive'>naive</Link>, <Link to='drag-around-custom'>custom</Link>)</li>
2121
<li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
22-
<li>Nested dropzones (<Link to='nested-dropzones'>nested dropzones</Link>)</li>
2322
</ul>
2423
<hr />
2524
<RouteHandler />
@@ -35,7 +34,7 @@ var routes = (
3534
<Route name='dustbin-simple' path='dustbin-simple' handler={DustbinSimple} />
3635
<Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
3736
<Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
38-
<Route name='nested-dropzones' path='nested-dropzones' handler={NestedDropzones} />
37+
<Route name='dustbin-nested' path='dustbin-nested' handler={DustbinNested} />
3938
<Redirect from='/' to='dustbin-simple' />
4039
</Route>
4140
);

‎modules/utils/createDragDropMixin.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,12 @@ function createDragDropMixin(backend) {
132132
checkDropTargetDefined(this, type);
133133

134134
var isDragging = this.getActiveDropTargetType() === type,
135-
isHovering = !!this.state.currentDropEffect;
135+
isOver = !!this.state.currentDropEffect;
136136

137137
return {
138138
isDragging: isDragging,
139-
isHovering: isDragging && isHovering
139+
isOver: isDragging && isOver,
140+
isOverCurrent: false // TODO
140141
};
141142
},
142143

0 commit comments

Comments
 (0)