1 | import React, {Component} from 'react';
|
2 | import {render} from 'react-dom';
|
3 | import {sortableContainer, sortableElement} from 'react-sortable-hoc';
|
4 | import arrayMove from 'array-move';
|
5 | import Infinite from 'react-infinite';
|
6 |
|
7 | const SortableItem = sortableElement(({height, value}) => {
|
8 | return <li style={{height}}>{value}</li>;
|
9 | });
|
10 |
|
11 | const SortableInfiniteList = sortableContainer(({items}) => {
|
12 | return (
|
13 | <Infinite
|
14 | containerHeight={600}
|
15 | elementHeight={items.map(({height}) => height)}
|
16 | >
|
17 | {items.map(({value, height}, index) => (
|
18 | <SortableItem
|
19 | key={`item-${index}`}
|
20 | index={index}
|
21 | value={value}
|
22 | height={height}
|
23 | />
|
24 | ))}
|
25 | </Infinite>
|
26 | );
|
27 | });
|
28 |
|
29 | class App extends Component {
|
30 | state = {
|
31 | items: [
|
32 | {value: 'Item 1', height: 89},
|
33 | {value: 'Item 2', height: 59},
|
34 | {value: 'Item 3', height: 130},
|
35 | {value: 'Item 4', height: 59},
|
36 | {value: 'Item 5', height: 200},
|
37 | {value: 'Item 6', height: 150},
|
38 | ],
|
39 | };
|
40 |
|
41 | onSortEnd = ({oldIndex, newIndex}) => {
|
42 | this.setState(({items}) => ({
|
43 | items: arrayMove(items, oldIndex, newIndex),
|
44 | }));
|
45 | };
|
46 |
|
47 | render() {
|
48 | const {items} = this.state;
|
49 |
|
50 | return <SortableInfiniteList items={items} onSortEnd={this.onSortEnd} />;
|
51 | }
|
52 | }
|
53 |
|
54 | render(<App />, document.getElementById('root'));
|
55 |
|
\ | No newline at end of file |