import type { Active, DragEndEvent } from "@dnd-kit/core"; import { DndContext, KeyboardSensor, MeasuringStrategy, PointerSensor, useSensor, useSensors } from "@dnd-kit/core"; import { SortableContext, sortableKeyboardCoordinates } from "@dnd-kit/sortable"; import React, { useMemo, useState } from "react"; import SortableItem from "./Item"; import Overlay from "./Overlay"; const ArrayMove = (array: any[], from: number, to: number) => { const newArray = [...array]; const startIndex = to < 0 ? newArray.length + to : to; const item = newArray.splice(from, 1)[0]; newArray.splice(startIndex, 0, item); return newArray; }; export interface BaseItem { id: string; } interface Props { items: T[]; update(changeItems: T[]): void; render(item: T): React.JSX.Element; } const measuringConfig = { droppable: { strategy: MeasuringStrategy.Always, }, }; export const GripIcon = (props: React.SVGProps) => ( ); export const GripIconVertical = (props: React.SVGProps) => ( ); export function ATHOSCards(props: React.HTMLAttributes & Props) { const { items, update, render } = props; const [active, setActive] = useState(null); const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]); const sensors = useSensors( useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }) ); const onDragStart = ({ active }: { active: Active }) => { setActive(active); }; const onDragEnd = ({ active, over }: DragEndEvent) => { if (over && active.id !== over?.id) { const activeIndex = items.findIndex(({ id }) => id === active.id); const overIndex = items.findIndex(({ id }) => id === over.id); update(ArrayMove(items, activeIndex, overIndex)); } setActive(null); }; const onDragCancel = () => { setActive(null); }; return (

{items.map((item) => ( {render(item)} ))}

); }