81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import cx from "clsx";
|
|
import { Text } from "@mantine/core";
|
|
import { useListState } from "@mantine/hooks";
|
|
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
|
import classes from "./DndList.module.css";
|
|
|
|
const data = [
|
|
{ position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
|
|
{ position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
|
|
{ position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
|
|
{ position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
|
|
{ position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
|
|
];
|
|
|
|
export function DndList() {
|
|
const [state, handlers] = useListState(data);
|
|
|
|
const items = (listIndex: number) =>
|
|
state.map((item, index) => (
|
|
<Draggable
|
|
key={item.symbol + `${listIndex}`}
|
|
index={index}
|
|
draggableId={item.symbol + `${listIndex}`}>
|
|
{(provided, snapshot) => (
|
|
<div
|
|
className={cx(classes.item, {
|
|
[classes.itemDragging]: snapshot.isDragging,
|
|
})}
|
|
{...provided.draggableProps}
|
|
{...provided.dragHandleProps}
|
|
ref={provided.innerRef}>
|
|
<Text className={classes.symbol}>{item.symbol}</Text>
|
|
<div>
|
|
<Text>{item.name}</Text>
|
|
<Text
|
|
c="dimmed"
|
|
size="sm">
|
|
Position: {item.position} • Mass: {item.mass}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Draggable>
|
|
));
|
|
|
|
return (
|
|
<DragDropContext
|
|
onDragEnd={({ destination, source }) =>
|
|
handlers.reorder({
|
|
from: source.index,
|
|
to: destination?.index || 0,
|
|
})
|
|
}>
|
|
<Droppable
|
|
droppableId="dnd-list"
|
|
direction="vertical">
|
|
{provided => (
|
|
<div
|
|
{...provided.droppableProps}
|
|
ref={provided.innerRef}>
|
|
{items(1)}
|
|
{provided.placeholder}
|
|
</div>
|
|
)}
|
|
</Droppable>
|
|
<Droppable
|
|
droppableId="dnd-list-2"
|
|
direction="vertical">
|
|
{provided => (
|
|
<div
|
|
{...provided.droppableProps}
|
|
ref={provided.innerRef}>
|
|
{items(2)}
|
|
{provided.placeholder}
|
|
</div>
|
|
)}
|
|
</Droppable>
|
|
</DragDropContext>
|
|
);
|
|
}
|