Open jcarlo-vs opened 1 month ago
'use client';
import { useContext, useState } from 'react'; import { Document, Page, pdfjs } from 'react-pdf'; import { DownloadIcon } from '@heroicons/react/outline'; import { ConfigurationContext } from '../contexts/configuration/context'; import { DEFAULT_TERMS_AND_CONDITIONS_PDF_URL } from '../constants'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import { LoadingDivComponent } from '../common-components/loading-div'; import { parseTextColor } from '../utils/colors'; import { ColorNames } from '../contexts/configuration/config';
pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.js', import.meta.url ).toString();
export interface TermsAndConditionsStandaloneComponentProps { showHeader: boolean; headerName: string; }
export const TermsAndConditionsStandaloneComponent = ({ showHeader, headerName, }: TermsAndConditionsStandaloneComponentProps) => { const [pages, setPages] = useState(1); const [isLoading, setIsLoading] = useState(true); const [showDownloadButton, setShowDownloadButton] = useState(false); const [isError, setIsError] = useState(false);
const { configuration } = useContext(ConfigurationContext); const headerColor = configuration?.colorScheme?.headerColor as ColorNames; const pdfUrl = configuration.termsAndConditionsPdfUrl || DEFAULT_TERMS_AND_CONDITIONS_PDF_URL;
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setShowDownloadButton(true); setPages(numPages); setIsLoading(false); setIsError(false); };
const loadError = () => { setIsLoading(false); setIsError(true); };
const renderPages = () => { const pdfPages = []; for (let i = 1; i <= pages; i++) { pdfPages.push( <Page key={i} pageNumber={i} scale={2} renderTextLayer={false} renderAnnotationLayer={true} className="mb-8" /> ); } console.log(pdfPages); return pdfPages; };
const handleDownloadPdf = () => { const link = document.createElement('a'); link.href = pdfUrl; link.download = 'TermsAndConditions.pdf'; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); };
return ( <div className={${isError ? 'h-full' : 'h-[600px]'} overflow-y-auto} // style={{ width: '-webkit-fill-available' }}
${isError ? 'h-full' : 'h-[600px]'} overflow-y-auto
<div className={`w-full mx-auto mb-10 relative max-w-screen-lg flex flex-col items-center`} > {showDownloadButton && ( <div className="absolute top-2 left-2 bg-black bg-opacity-10 flex justify-center items-center"> <button type="button" title="button" onClick={handleDownloadPdf} className="bg-primary text-white p-2 rounded cursor-pointer flex items-center z-50" > <DownloadIcon className="h-6 w-6" /> </button> </div> )} {isLoading && <LoadingDivComponent />} <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess} onLoadError={loadError} noData="" loading={isLoading} > {renderPages()} </Document> </div> </div> </div> ); }; Steps to reproduce NA Expected behavior I expect that when I hover I see yellow overlay thing and clickable Actual behavior I don't see any yellow ,and the link is not clickable inside the pdf Additional information No response Environment Browser (if applicable): React-PDF version: React version: Webpack version (if applicable):
<div className={`w-full mx-auto mb-10 relative max-w-screen-lg flex flex-col items-center`} > {showDownloadButton && ( <div className="absolute top-2 left-2 bg-black bg-opacity-10 flex justify-center items-center"> <button type="button" title="button" onClick={handleDownloadPdf} className="bg-primary text-white p-2 rounded cursor-pointer flex items-center z-50" > <DownloadIcon className="h-6 w-6" /> </button> </div> )} {isLoading && <LoadingDivComponent />} <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess} onLoadError={loadError} noData="" loading={isLoading} > {renderPages()} </Document> </div> </div> </div>
); };
NA
I expect that when I hover I see yellow overlay thing and clickable
I don't see any yellow ,and the link is not clickable inside the pdf
No response
Before you start - checklist
Description
'use client';
import { useContext, useState } from 'react'; import { Document, Page, pdfjs } from 'react-pdf'; import { DownloadIcon } from '@heroicons/react/outline'; import { ConfigurationContext } from '../contexts/configuration/context'; import { DEFAULT_TERMS_AND_CONDITIONS_PDF_URL } from '../constants'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import { LoadingDivComponent } from '../common-components/loading-div'; import { parseTextColor } from '../utils/colors'; import { ColorNames } from '../contexts/configuration/config';
pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.js', import.meta.url ).toString();
export interface TermsAndConditionsStandaloneComponentProps { showHeader: boolean; headerName: string; }
export const TermsAndConditionsStandaloneComponent = ({ showHeader, headerName, }: TermsAndConditionsStandaloneComponentProps) => { const [pages, setPages] = useState(1);
const [isLoading, setIsLoading] = useState(true);
const [showDownloadButton, setShowDownloadButton] = useState(false);
const [isError, setIsError] = useState(false);
const { configuration } = useContext(ConfigurationContext); const headerColor = configuration?.colorScheme?.headerColor as ColorNames; const pdfUrl = configuration.termsAndConditionsPdfUrl || DEFAULT_TERMS_AND_CONDITIONS_PDF_URL;
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setShowDownloadButton(true); setPages(numPages); setIsLoading(false); setIsError(false); };
const loadError = () => { setIsLoading(false); setIsError(true); };
const renderPages = () => { const pdfPages = []; for (let i = 1; i <= pages; i++) { pdfPages.push( <Page key={i} pageNumber={i} scale={2} renderTextLayer={false} renderAnnotationLayer={true} className="mb-8" /> ); } console.log(pdfPages); return pdfPages; };
const handleDownloadPdf = () => { const link = document.createElement('a'); link.href = pdfUrl; link.download = 'TermsAndConditions.pdf'; link.target = '_blank'; document.body.appendChild(link); link.click(); document.body.removeChild(link); };
return ( <div className={
${isError ? 'h-full' : 'h-[600px]'} overflow-y-auto
} // style={{ width: '-webkit-fill-available' }}