Marco Pedone
6c36bb9b74
- Implemented FormEditOrder component for editing orders with validation and submission handling. - Created SchedaAnnuncioPage for displaying printable announcement details. - Added BonificoManualePage for manual bank transfer payment instructions. - Developed PagamentoPage for Stripe payment processing with PaymentIntent creation. - Introduced PreviewPurchasePage for preparing payment with service details. - Added pagamenti.controller for handling payment preparation and retrieval of payment data.
92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import "react-pdf/dist/Page/AnnotationLayer.css";
|
|
import "react-pdf/dist/Page/TextLayer.css";
|
|
|
|
import type { PDFDocumentProxy } from "pdfjs-dist";
|
|
import { LoadingPage } from "./loading";
|
|
|
|
import "pdfjs-dist/build/pdf.worker.min.mjs";
|
|
import dynamic from "next/dynamic";
|
|
|
|
const Document = dynamic(
|
|
() => import("react-pdf").then((mod) => ({ default: mod.Document })),
|
|
{ ssr: false },
|
|
);
|
|
|
|
const Page = dynamic(
|
|
() => import("react-pdf").then((mod) => ({ default: mod.Page })),
|
|
{ ssr: false },
|
|
);
|
|
|
|
//pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
|
|
|
|
// pdfjs.GlobalWorkerOptions.workerSrc = new URL(
|
|
// "pdfjs-dist/build/pdf.worker.min.mjs",
|
|
// import.meta.url,
|
|
// ).toString();
|
|
|
|
const options = {
|
|
cMapUrl: "/cmaps/",
|
|
standardFontDataUrl: "/standard_fonts/",
|
|
wasmUrl: "/wasm/",
|
|
};
|
|
|
|
export const PDFViewer = ({ url }: { url: string }) => {
|
|
const [numPages, setNumPages] = useState<number>();
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [width, setWidth] = useState(0);
|
|
const file = useMemo(() => ({ url }), [url]);
|
|
|
|
const onResize = useCallback<ResizeObserverCallback>((entries) => {
|
|
const [entry] = entries;
|
|
|
|
if (entry) {
|
|
setWidth(entry.contentRect.width);
|
|
}
|
|
}, []);
|
|
|
|
const observer = new ResizeObserver(onResize);
|
|
|
|
useEffect(() => {
|
|
if (containerRef.current) {
|
|
observer.observe(containerRef.current);
|
|
setWidth(containerRef.current.offsetWidth);
|
|
}
|
|
}, []);
|
|
|
|
function onDocumentLoadSuccess({
|
|
numPages: nextNumPages,
|
|
}: PDFDocumentProxy): void {
|
|
setNumPages(nextNumPages);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="mx-1 flex w-full justify-center overflow-clip rounded-md shadow-lg outline"
|
|
ref={containerRef}
|
|
>
|
|
<Document
|
|
className={"aspect-[1/1.4142] overflow-auto"}
|
|
file={file}
|
|
loading={<LoadingPage />}
|
|
noData={
|
|
"Errore nel caricare il documento, riprova più tardi o Scaricalo"
|
|
}
|
|
onLoadSuccess={onDocumentLoadSuccess}
|
|
options={options}
|
|
>
|
|
{Array.from(new Array(numPages), (_el, index) => (
|
|
<Page
|
|
key={`page_${
|
|
// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
|
|
index + 1
|
|
}`}
|
|
pageNumber={index + 1}
|
|
width={width}
|
|
/>
|
|
))}
|
|
</Document>
|
|
</div>
|
|
);
|
|
};
|