109 lines
5.9 KiB
TypeScript
109 lines
5.9 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md';
|
|
import { DocumentType } from './SignDocument';
|
|
import { GrFormPrevious } from 'react-icons/gr';
|
|
|
|
interface DocumentPagesInterface {
|
|
selectedDocuments: DocumentType[] | null;
|
|
setDropDownTogglePage: React.Dispatch<React.SetStateAction<string>>;
|
|
dropDownTogglePage: string;
|
|
}
|
|
|
|
const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
|
|
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
|
|
return (
|
|
<div className='p-4'>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
|
return (
|
|
<div
|
|
key={indx}
|
|
// tabIndex={1}
|
|
// onBlur={() => setDropDownTogglePage('')}
|
|
>
|
|
<div
|
|
onClick={() => {
|
|
setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)
|
|
}
|
|
}
|
|
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
|
|
{
|
|
document.pages != undefined && <img
|
|
key={indx}
|
|
className='rounded-sm shadow'
|
|
src={"data:image/png;base64," + document.thumbnail}
|
|
alt="" />
|
|
}
|
|
|
|
<div
|
|
className={`flex items-center justify-between w-full text-xs rounded-sm cursor-pointer ${(dropDownTogglePage === 'pageDropDown' + indx) ? "text-slate-100" : "text-slate-600"}`}>
|
|
<p className={`whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]`}>{document.name}</p>
|
|
<MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{
|
|
dropDownTogglePage === 'pageDropDown' + indx &&
|
|
<div className="my-1 flex justify-center items-center gap-2 flex-wrap">
|
|
{/* Prev Button */}
|
|
<a
|
|
href={"#" + document.documentId + (currentPage - 1)}
|
|
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
|
|
}`}
|
|
onClick={(e) => {
|
|
if (currentPage === 0) e.preventDefault();
|
|
else setCurrentPage(currentPage - 1);
|
|
}}
|
|
>
|
|
<GrFormPrevious />
|
|
</a>
|
|
|
|
{/* Page Selector */}
|
|
<select
|
|
className="w-[58px] py-1 text-xs text-slate-400 outline-none"
|
|
value={currentPage}
|
|
onChange={(e) => {
|
|
const newPage = Number(e.target.value);
|
|
setCurrentPage(newPage);
|
|
window.location.hash = document.documentId + "" + newPage;
|
|
}}
|
|
>
|
|
{document.pages != undefined && document.pages.map((_, pageIndex) => (
|
|
<option key={pageIndex} value={pageIndex}>
|
|
{pageIndex + 1}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<span className="text-xs text-slate-600">
|
|
/ {document.pages?.length}
|
|
</span>
|
|
|
|
{/* Next Button */}
|
|
<a
|
|
href={"#" + document.documentId + (currentPage + 1)}
|
|
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
|
|
}`}
|
|
onClick={(e) => {
|
|
if (currentPage === document.pages?.length - 1) e.preventDefault();
|
|
else setCurrentPage(currentPage + 1);
|
|
}}
|
|
>
|
|
<MdOutlineNavigateNext />
|
|
</a>
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DocumentPages |