52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { CSS } from "@dnd-kit/utilities";
|
|
import { useSortable } from "@dnd-kit/sortable";
|
|
import { MdDragIndicator } from "react-icons/md";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../store/store";
|
|
|
|
const SortableRecipient = ({ recipient, idx, editRecipientCurrentEmail, children }: any) => {
|
|
|
|
const selectedRecipientsLen = useSelector((state: RootState) => state.selectedRecipients.recipients.length);
|
|
const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder)
|
|
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({ id: recipient.id || recipient.uuid });
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.6 : 1,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className={`relative flex flex-col lg:flex-row lg:items-center justify-between gap-3 lg:gap-0 my-3 ${(recipient.uuid || recipient.id) == editRecipientCurrentEmail ? "bg-neutral-100 opacity-40" : ""}
|
|
${isDragging ? "bg-blue-50 shadow-lg" : ""}
|
|
`}
|
|
>
|
|
{/* Drag handle only on left side */}
|
|
{selectedRecipientsLen && <div
|
|
{...attributes}
|
|
{...listeners}
|
|
className="cursor-grab text-gray-500 flex items-center pr-2 absolute top-0 left-0 z-10 h-full"
|
|
>
|
|
|
|
{signingOrder && <MdDragIndicator className="absolute top-[50%] left-[70px] transform -translate-y-1/2 text-gray-300" />}
|
|
|
|
</div>}
|
|
|
|
{/* Your card content */}
|
|
<div className="flex-1">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SortableRecipient; |