42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useSortable } from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import CounterCard, { Counter } from './CounterCard';
|
|
|
|
interface Props {
|
|
counter: Counter;
|
|
onIncrement: (id: number) => void;
|
|
onDecrement: (id: number) => void;
|
|
onEdit: (counter: Counter) => void;
|
|
onHistory: (id: number) => void;
|
|
onPrefetch?: (id: number) => void;
|
|
editMode: boolean;
|
|
}
|
|
|
|
export default function SortableCounter({ counter, editMode, ...handlers }: Props) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
id: counter.id,
|
|
data: { type: 'counter', groupId: counter.group_id },
|
|
disabled: !editMode,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.4 : 1,
|
|
zIndex: isDragging ? 50 : undefined,
|
|
};
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style}>
|
|
<CounterCard
|
|
{...handlers}
|
|
counter={counter}
|
|
editMode={editMode}
|
|
dragHandleProps={editMode ? { ...attributes, ...listeners } : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|