|
1 | 1 | import React, {Component} from 'react'; |
2 | 2 | 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'; |
4 | 9 |
|
5 | 10 | const DragHandle = SortableHandle(() => <span>::</span>); // This can be any component you want |
6 | 11 |
|
7 | 12 | 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 | + ); |
14 | 19 | }); |
15 | 20 |
|
16 | 21 | 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 | + ); |
24 | 29 | }); |
25 | 30 |
|
26 | | - |
27 | 31 | 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 | + } |
45 | 47 | } |
46 | 48 |
|
47 | 49 | render(<SortableComponent />, document.getElementById('root')); |
0 commit comments