-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.js
48 lines (39 loc) · 1.64 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React, { useContext } from 'react';
import {
SortableContainer,
SortableElement,
SortableHandle,
arrayMove
} from 'react-sortable-hoc';
import Store from '../../context';
import Item from './item';
import Handle from './handle';
export default function Queue() {
const { state, dispatch } = useContext(Store);
const DragHandle = SortableHandle(() => <Handle />);
const SortableItem = SortableElement(({value, ind}) => {
return <Item index={ind} {...value}>
<DragHandle />
</Item>;
});
const SortableList = SortableContainer(({items}) => {
return <ul className="list-group playlist-content tab-pane fade show active" id="queue" role="tabpanel" aria-labelledby="queue-tab">
{items.map((item, index) => <SortableItem key={index} ind={index} index={index} value={item} />)}
</ul>;
});
function onSortEnd({oldIndex, newIndex}) {
if (oldIndex === newIndex) return;
const newQueue = arrayMove(state.queue, oldIndex, newIndex);
let newQueuePosition = state.queue_position;
if (oldIndex === newQueuePosition) {
newQueuePosition = newIndex;
} else if (oldIndex > newIndex && (newQueuePosition === newIndex || newQueuePosition === oldIndex)) {
newQueuePosition++;
} else if (oldIndex < newIndex && (newQueuePosition === newIndex || newQueuePosition === oldIndex)) {
newQueuePosition--;
}
dispatch({ type: 'updateQueue', payload: newQueue });
dispatch({ type: 'updateQueuePosition', payload: newQueuePosition });
}
return <SortableList getContainer={() => document.querySelector('.tab-content')} items={state.queue} useDragHandle={true} onSortEnd={onSortEnd} />;
}