45 lines
892 B
TypeScript
45 lines
892 B
TypeScript
// ShipmentItem.tsx
|
|
import { useDraggable } from "@dnd-kit/core";
|
|
|
|
interface ShipmentItemProps {
|
|
shipment: any;
|
|
index?: number;
|
|
perm?: boolean;
|
|
}
|
|
|
|
export function ShipmentItem({
|
|
shipment,
|
|
index = 0,
|
|
perm = true,
|
|
}: ShipmentItemProps) {
|
|
const { setNodeRef, listeners, attributes, transform } = useDraggable({
|
|
id: shipment.orderNumber,
|
|
data: shipment,
|
|
});
|
|
|
|
const offsetX = index * 10;
|
|
|
|
const style: React.CSSProperties = {
|
|
transform: transform
|
|
? `translate(${transform.x}px, ${transform.y}px)`
|
|
: `translateX(${offsetX}px)`,
|
|
transition: transform ? "none" : "transform 0.2s ease",
|
|
zIndex: 10 + index,
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
cursor: "grab",
|
|
};
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
{...listeners}
|
|
{...attributes}
|
|
style={style}
|
|
className="w-[160px] p-2 text-xs rounded shadow select-none "
|
|
>
|
|
{shipment.orderNumber}
|
|
</div>
|
|
);
|
|
}
|