1
|
import { memo } from 'react'
|
2
|
import {
|
3
|
DragDropContext,
|
4
|
Droppable,
|
5
|
OnDragEndResponder,
|
6
|
} from 'react-beautiful-dnd'
|
7
|
import { MapPoint } from '../trackingToolUtils'
|
8
|
import MapPointDraggableListItem from './MapPointDraggableListItem'
|
9
|
|
10
|
export interface DraggableListProps {
|
11
|
items: MapPoint[]
|
12
|
onDragEnd: OnDragEndResponder
|
13
|
}
|
14
|
|
15
|
window.addEventListener('error', (e) => {
|
16
|
if (
|
17
|
e.message ===
|
18
|
'ResizeObserver loop completed with undelivered notifications.' ||
|
19
|
e.message === 'ResizeObserver loop limit exceeded'
|
20
|
) {
|
21
|
e.stopImmediatePropagation()
|
22
|
}
|
23
|
})
|
24
|
|
25
|
const DragDropCtxWrapper = memo(({ items, onDragEnd }: DraggableListProps) => {
|
26
|
return (
|
27
|
<DragDropContext onDragEnd={onDragEnd}>
|
28
|
<Droppable droppableId="droppable-list">
|
29
|
{(provided) => (
|
30
|
<div ref={provided.innerRef} {...provided.droppableProps}>
|
31
|
{items.map((item, index) => (
|
32
|
<MapPointDraggableListItem
|
33
|
list={items}
|
34
|
idx={index}
|
35
|
key={item.id}
|
36
|
/>
|
37
|
))}
|
38
|
{provided.placeholder}
|
39
|
</div>
|
40
|
)}
|
41
|
</Droppable>
|
42
|
</DragDropContext>
|
43
|
)
|
44
|
})
|
45
|
|
46
|
export default DragDropCtxWrapper
|