Skip to content

Commit d7ab391

Browse files
author
Claudéric Demers
authored
Update drag-handle.js
1 parent cf44fbd commit d7ab391

File tree

1 file changed

+34
-32
lines changed

1 file changed

+34
-32
lines changed

examples/drag-handle.js

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,49 @@
11
import React, {Component} from 'react';
22
import {render} from 'react-dom';
3-
import {SortableContainer, SortableElement, SortableHandle, arrayMove} from 'react-sortable-hoc';
3+
import {
4+
SortableContainer,
5+
SortableElement,
6+
SortableHandle,
7+
arrayMove,
8+
} from 'react-sortable-hoc';
49

510
const DragHandle = SortableHandle(() => <span>::</span>); // This can be any component you want
611

712
const SortableItem = SortableElement(({value}) => {
8-
return (
9-
<li>
10-
<DragHandle />
11-
{value}
12-
</li>
13-
)
13+
return (
14+
<li>
15+
<DragHandle />
16+
{value}
17+
</li>
18+
);
1419
});
1520

1621
const SortableList = SortableContainer(({items}) => {
17-
return (
18-
<ul>
19-
{items.map((value, index) =>
20-
<SortableItem key={`item-${index}`} index={index} value={value} />
21-
)}
22-
</ul>
23-
);
22+
return (
23+
<ul>
24+
{items.map((value, index) => (
25+
<SortableItem key={`item-${index}`} index={index} value={value} />
26+
))}
27+
</ul>
28+
);
2429
});
2530

26-
2731
class SortableComponent extends Component {
28-
state = {
29-
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
30-
}
31-
onSortEnd = ({oldIndex, newIndex}) => {
32-
let {items} = this.state;
33-
34-
this.setState({
35-
items: arrayMove(items, oldIndex, newIndex)
36-
});
37-
};
38-
render() {
39-
let {items} = this.state;
40-
41-
return (
42-
<SortableList items={items} onSortEnd={this.onSortEnd} useDragHandle={true} />
43-
)
44-
}
32+
state = {
33+
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
34+
};
35+
onSortEnd = ({oldIndex, newIndex}) => {
36+
let {items} = this.state;
37+
38+
this.setState({
39+
items: arrayMove(items, oldIndex, newIndex),
40+
});
41+
};
42+
render() {
43+
let {items} = this.state;
44+
45+
return <SortableList items={items} onSortEnd={this.onSortEnd} useDragHandle={true} />;
46+
}
4547
}
4648

4749
render(<SortableComponent />, document.getElementById('root'));

0 commit comments

Comments
 (0)