113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
import { useState, useRef, useEffect } from "react";
|
|
import { FaSignature, FaDownload, FaUserEdit, FaTimesCircle } from "react-icons/fa";
|
|
import { BsThreeDotsVertical } from "react-icons/bs";
|
|
|
|
interface Props {
|
|
transparentTags?: boolean;
|
|
hideTags?: boolean;
|
|
handleFormSubmit: () => void;
|
|
onDownloadClick?: () => void;
|
|
onDeclineClick?: () => void;
|
|
onReassignClick?: () => void;
|
|
}
|
|
|
|
export default function SignButton({
|
|
transparentTags,
|
|
hideTags,
|
|
handleFormSubmit,
|
|
onDownloadClick,
|
|
onDeclineClick,
|
|
onReassignClick,
|
|
}: Props) {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Close menu on outside click
|
|
useEffect(() => {
|
|
function handleClickOutside(e: MouseEvent) {
|
|
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
|
setMenuOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative inline-block" ref={menuRef}>
|
|
{(!transparentTags && !hideTags) ? (
|
|
<div className="flex items-center">
|
|
{/* Sign Button */}
|
|
<button
|
|
onClick={handleFormSubmit}
|
|
className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-md bg-[var(--primary)] hover:opacity-90 transition text-white outline-none"
|
|
>
|
|
<span id="sign-client-side-btn" className="tracking-wide">
|
|
Sign
|
|
</span>
|
|
<FaSignature className="text-md" />
|
|
</button>
|
|
|
|
{/* Three Dots Dropdown Trigger */}
|
|
<button
|
|
onClick={() => setMenuOpen((prev) => !prev)}
|
|
className="ml-2 p-2 rounded-full hover:bg-gray-100 focus:outline-none transition"
|
|
>
|
|
<BsThreeDotsVertical className="text-gray-600 text-lg cursor-pointer" />
|
|
</button>
|
|
|
|
{/* Dropdown Menu */}
|
|
{menuOpen && (
|
|
<div
|
|
tabIndex={0}
|
|
onBlur={() => setMenuOpen(false)} // close on blur
|
|
className="absolute right-0 top-10 w-56 bg-white border border-gray-200 rounded-lg shadow-lg z-10"
|
|
>
|
|
<ul className="py-1 text-sm text-gray-700">
|
|
<li>
|
|
<button
|
|
onClick={() => {
|
|
onDownloadClick?.();
|
|
setMenuOpen(false);
|
|
}}
|
|
className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
|
|
>
|
|
<FaDownload className="text-blue-500" />
|
|
<span>Download Document</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
onClick={() => {
|
|
onReassignClick?.();
|
|
setMenuOpen(false);
|
|
}}
|
|
className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
|
|
>
|
|
<FaUserEdit className="text-yellow-500" />
|
|
<span>Reassign</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
onClick={() => {
|
|
onDeclineClick?.();
|
|
setMenuOpen(false);
|
|
}}
|
|
className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100 text-red-500 border-t border-gray-200"
|
|
>
|
|
<FaTimesCircle />
|
|
<span>Decline</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-green-600 font-medium">Signed Successfully</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|