Spaces:
Runtime error
Runtime error
File size: 2,027 Bytes
56b6519 |
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import {
DragDropContext,
Draggable,
Droppable,
DropResult,
} from '@hello-pangea/dnd';
import React from 'react';
type DraggableListProps<T> = {
items: T[];
onOrderChange: (items: T[]) => void;
renderItem: (item: T, index: number) => React.ReactNode;
isDisabled?: boolean;
};
/**
* Implementa la lógica del drag and drop.
*
* Se puede "deshabilitar", y al hacer algún cambio en el orden,
* llama a una función (del componente padre) que actualiza la lista de elementos.
*/
const DraggableList = <T extends { id: string }>({
items,
onOrderChange,
renderItem,
isDisabled = false,
}: DraggableListProps<T>) => {
const handleDragEnd = (result: DropResult) => {
if (!result.destination) {
return;
}
const updatedItems = Array.from(items);
const [movedItem] = updatedItems.splice(result.source.index, 1);
updatedItems.splice(result.destination.index, 0, movedItem);
onOrderChange(updatedItems);
};
return (
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="droppable">
{provided => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{items.map((item, index) => (
<Draggable
draggableId={item.id}
index={index}
isDragDisabled={isDisabled}
key={item.id}
>
{provided => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
marginBottom: '8px',
...provided.draggableProps.style,
}}
>
{renderItem(item, index)}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};
export default DraggableList;
|