46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useSortable } from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import GroupSection from './GroupSection';
|
|
import { Counter } from './CounterCard';
|
|
import { Group } from './CounterModal';
|
|
|
|
interface Props {
|
|
group: Group;
|
|
counters: Counter[];
|
|
onIncrement: (id: number) => void;
|
|
onDecrement: (id: number) => void;
|
|
onEdit: (counter: Counter) => void;
|
|
onHistory: (id: number) => void;
|
|
onPrefetch?: (id: number) => void;
|
|
editMode: boolean;
|
|
onRenameGroup: (group: Group) => void;
|
|
onDeleteGroup: (id: number) => void;
|
|
}
|
|
|
|
export default function SortableGroupSection({ group, editMode, ...props }: Props) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
id: `grp-${group.id}`,
|
|
data: { type: 'group' },
|
|
disabled: !editMode,
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.4 : 1,
|
|
};
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style}>
|
|
<GroupSection
|
|
group={group}
|
|
editMode={editMode}
|
|
dragHandleProps={editMode ? { ...attributes, ...listeners } : undefined}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|