Skip to content

Commit 3764e2b

Browse files
gaearongaearon
committed
Add sortable
1 parent b29eae2 commit 3764e2b

File tree

8 files changed

+72
-92
lines changed

8 files changed

+72
-92
lines changed

‎examples/_sortable-simple/Card.js‎

Lines changed: 40 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,7 @@
22

33
import React, { PropTypes } from 'react';
44
import ItemTypes from './ItemTypes';
5-
import { DragSource, DropTarget, ObservePolyfill } from 'react-dnd';
6-
7-
class CardDragSource extends DragSource {
8-
beginDrag() {
9-
return {
10-
item: {
11-
id: this.component.props.id
12-
}
13-
};
14-
}
15-
}
16-
17-
class CardDropTarget extends DropTarget {
18-
over(monitor) {
19-
const item = monitor.getItem();
20-
this.component.props.moveCard(item.id, this.component.props.id);
21-
}
22-
}
5+
import { configureDragDrop } from 'react-dnd';
236

247
const style = {
258
border: '1px dashed gray',
@@ -28,48 +11,55 @@ const style = {
2811
margin: '0.5rem'
2912
};
3013

31-
const Card = React.createClass({
32-
contextTypes: {
33-
dragDrop: PropTypes.object.isRequired
34-
},
35-
36-
mixins: [ObservePolyfill({
37-
constructor() {
38-
this.dragSource = new CardDragSource(this);
39-
//this.dropTarget = new CardDropTarget(this);
40-
},
14+
const propTypes = {
15+
id: PropTypes.any.isRequired,
16+
text: PropTypes.string.isRequired,
17+
isDragging: PropTypes.bool.isRequired,
18+
overlappingCardId: PropTypes.bool.isRequired,
19+
moveCard: PropTypes.func.isRequired,
20+
connectDragDrop: PropTypes.func.isRequired
21+
};
4122

42-
observe() {
43-
return {
44-
dragSource: this.dragSource.connectTo(this.context.dragDrop, ItemTypes.CARD),
45-
//dropTarget: this.dropTarget.connectTo(this.context.dragDrop, ItemTypes.CARD)
46-
};
23+
class Card {
24+
componentWillReceiveProps(nextProps) {
25+
if (!this.props.overlappingCardId && nextProps.overlappingCardId) {
26+
const { id, overlappingCardId } = nextProps;
27+
if (overlappingCardId !== id) {
28+
this.props.moveCard(overlappingCardId, id);
29+
}
4730
}
48-
})],
49-
50-
propTypes: {
51-
id: PropTypes.any.isRequired,
52-
text: PropTypes.string.isRequired,
53-
moveCard: PropTypes.func.isRequired
54-
},
31+
}
5532

5633
render() {
57-
const { text } = this.props;
58-
59-
// TODO: refs totally suck here.
60-
// Need to rethink this.
61-
62-
const { isDragging, ref: sourceRef } = this.state.data.dragSource;
63-
//const { ref: targetRef } = this.state.data.dropTarget;
34+
const { text, isDragging, connectDragDrop } = this.props;
6435
const opacity = isDragging ? 0 : 1;
6536

6637
return (
67-
<div ref={sourceRef}
38+
<div ref={connectDragDrop}
6839
style={{ ...style, opacity }}>
6940
{text}
7041
</div>
7142
);
7243
}
73-
});
44+
}
7445

75-
export default Card;
46+
export default configureDragDrop(Card, {
47+
getHandlers(props, sourceFor, targetFor) {
48+
return {
49+
cardSource: sourceFor(ItemTypes.CARD, {
50+
beginDrag(props) {
51+
return { id: props.id };
52+
}
53+
}),
54+
cardTarget: targetFor(ItemTypes.CARD)
55+
};
56+
},
57+
58+
getProps(connect, monitor, handlers) {
59+
return {
60+
isDragging: monitor.isDragging(handlers.cardSource),
61+
overlappingCardId: monitor.isOver(handlers.cardTarget) && monitor.getItem().id || null,
62+
connectDragDrop: connect(handlers.cardSource, handlers.cardTarget)
63+
};
64+
}
65+
});

‎examples/_sortable-simple/Container.js‎

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

3-
import React from 'react';
3+
import React, { Component } from 'react';
44
import update from 'react/lib/update';
55
import Card from './Card';
6-
import { DragDropContext, HTML5Backend } from 'react-dnd';
6+
import { configureDragDropContext, HTML5Backend } from 'react-dnd';
77

8-
const Container = React.createClass({
9-
mixins: [DragDropContext({
10-
dragDrop: HTML5Backend
11-
})],
12-
13-
getInitialState() {
14-
return {
8+
class Container extends Component {
9+
constructor(props) {
10+
super(props);
11+
this.state = {
1512
cards: [{
1613
id: 1,
1714
text: 'Write a cool JS library'
@@ -35,7 +32,7 @@ const Container = React.createClass({
3532
text: 'PROFIT'
3633
}]
3734
};
38-
},
35+
}
3936

4037
moveCard(id, afterId) {
4138
const { cards } = this.state;
@@ -53,7 +50,7 @@ const Container = React.createClass({
5350
]
5451
}
5552
}));
56-
},
53+
}
5754

5855
render() {
5956
const { cards } = this.state;
@@ -65,12 +62,14 @@ const Container = React.createClass({
6562
<Card key={card.id}
6663
id={card.id}
6764
text={card.text}
68-
moveCard={this.moveCard} />
65+
moveCard={(id, afterId) => this.moveCard(id, afterId)} />
6966
);
7067
})}
7168
</div>
7269
);
7370
}
74-
});
71+
}
7572

76-
export default Container;
73+
export default configureDragDropContext(Container, {
74+
backend: HTML5Backend
75+
});

‎examples/index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Router, { Route, Link, Redirect, RouteHandler } from 'react-router';
55
import DustbinSimple from './_dustbin-simple';
66
import DustbinInteresting from './_dustbin-interesting';
77
import NestingSources from './_nesting-sources';
8-
//import SortableSimple from './_sortable-simple';
8+
import SortableSimple from './_sortable-simple';
99

1010
/*
1111
DragAroundNaive = require('./_drag-around-naive/index'),
@@ -21,6 +21,7 @@ const App = React.createClass({
2121
<ul>
2222
<li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>)</li>
2323
<li>Nesting (<Link to='nesting-sources'>drag sources</Link>)</li>
24+
<li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
2425
</ul>
2526
<hr />
2627
<RouteHandler />
@@ -31,7 +32,6 @@ const App = React.createClass({
3132

3233
/*
3334
<ul>
34-
<li>Sortable (<Link to='sortable-simple'>simple</Link>)</li>
3535
<li>Drag Around (<Link to='drag-around-naive'>naive</Link>, <Link to='drag-around-custom'>custom</Link>)</li>
3636
</ul>
3737
*/
@@ -41,14 +41,11 @@ const routes = (
4141
<Route name='dustbin-simple' path='dustbin-simple' handler={DustbinSimple} />
4242
<Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
4343
<Route name='nesting-sources' path='nesting-sources' handler={NestingSources} />
44+
<Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
4445
<Redirect from='/' to='dustbin-simple' />
4546
</Route>
4647
);
4748

48-
/*
49-
<Route name='sortable-simple' path='sortable-simple' handler={SortableSimple} />
50-
*/
51-
5249
Router.run(routes,
5350
process.env.NODE_ENV === 'production' ? Router.HashLocation : Router.HistoryLocation,
5451
(Handler) => React.render(<Handler/>, document.body)

‎examples/webpack.config.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@ module.exports = {
1010
modulesDirectories: ['node_modules']
1111
},
1212
resolve: {
13-
extensions: ['', '.js', '.jsx'],
14-
alias: {
15-
// TODO: temporary to work on unreleased 0.13-compat branch
16-
'react-router': 'react-router/build/npm'
17-
}
13+
extensions: ['', '.js', '.jsx']
1814
},
1915
module: {
2016
loaders: [

‎examples/webpack.config.production.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,7 @@ module.exports = {
1212
modulesDirectories: ['node_modules']
1313
},
1414
resolve: {
15-
extensions: ['', '.js', '.jsx'],
16-
alias: {
17-
// TODO: temporary to work on unreleased 0.13-compat branch
18-
'react-router': 'react-router/build/npm'
19-
}
15+
extensions: ['', '.js', '.jsx']
2016
},
2117
module: {
2218
loaders: [

‎modules/ComponentDropTarget.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import isArray from 'lodash/lang/isArray';
55
import isObject from 'lodash/lang/isObject';
66

77
export default class ComponentDropTarget extends DropTarget {
8-
constructor(type, spec, props) {
8+
constructor(type, spec = {}, props) {
99
invariant(isString(type) || isArray(type), 'Expected type to be a string or an array.');
1010
invariant(isObject(spec), 'Expected spec to be an object.');
1111

‎modules/configureDragDrop.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function configureDragDrop(InnerComponent, { getHandlers, getProp
1313
super(props);
1414

1515
this.handleChange = this.handleChange.bind(this);
16-
this.connectTo = this.connectTo.bind(this);
16+
this.connectRefTo = this.connectRefTo.bind(this);
1717

1818
this.manager = context[managerName];
1919
this.handles = {};
@@ -149,21 +149,23 @@ export default function configureDragDrop(InnerComponent, { getHandlers, getProp
149149
this.attachHandler(key, nextHandler);
150150
}
151151

152-
connectTo(handle) {
152+
connectRefTo(...handles) {
153153
const manager = this.manager;
154154

155155
return function (ref) {
156156
const node = findDOMNode(ref);
157157
const backend = manager.getBackend();
158158
const registry = manager.getRegistry();
159159

160-
if (registry.isSourceHandle(handle)) {
161-
backend.updateSourceNode(handle, node);
162-
} else if (registry.isTargetHandle(handle)) {
163-
backend.updateTargetNode(handle, node);
164-
} else {
165-
invariant(false, 'Handle is neither a source nor a target.');
166-
}
160+
handles.forEach(handle => {
161+
if (registry.isSourceHandle(handle)) {
162+
backend.updateSourceNode(handle, node);
163+
} else if (registry.isTargetHandle(handle)) {
164+
backend.updateTargetNode(handle, node);
165+
} else {
166+
invariant(false, 'Handle is neither a source nor a target.');
167+
}
168+
});
167169
}
168170
}
169171

@@ -175,7 +177,7 @@ export default function configureDragDrop(InnerComponent, { getHandlers, getProp
175177
handles = handles[DEFAULT_KEY];
176178
}
177179

178-
return getProps(this.connectTo, monitor, handles);
180+
return getProps(this.connectRefTo, monitor, handles);
179181
}
180182

181183
render() {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"dependencies": {
3434
"dnd-core": "^0.5.5",
3535
"flux": "^2.0.1",
36-
"lodash": "^3.1.0",
36+
"lodash": "^3.1.0"
3737
},
3838
"peerDependencies": {
3939
"react": ">=0.12.0 <0.14.0"

0 commit comments

Comments
 (0)