26 lines
698 B
TypeScript
26 lines
698 B
TypeScript
|
import { useDraggable } from '@dnd-kit/core';
|
||
|
|
import { KanbanColumn, KanbanColumnProps } from './KanbanColumn';
|
||
|
|
|
||
|
|
export function SortableKanbanColumn(props: KanbanColumnProps) {
|
||
|
|
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
||
|
|
id: `COLUMN_${props.list.id}`,
|
||
|
|
data: {
|
||
|
|
type: 'column',
|
||
|
|
columnId: props.list.id,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const style = transform
|
||
|
|
? {
|
||
|
|
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
||
|
|
opacity: isDragging ? 0.5 : 1,
|
||
|
|
}
|
||
|
|
: undefined;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={setNodeRef} style={style}>
|
||
|
|
<KanbanColumn {...props} dragHandleProps={{ attributes, listeners }} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|