diff --git a/packages/react-pdf/src/Document.spec.tsx b/packages/react-pdf/src/Document.spec.tsx index 9e7d986bc..f765bd527 100644 --- a/packages/react-pdf/src/Document.spec.tsx +++ b/packages/react-pdf/src/Document.spec.tsx @@ -224,9 +224,11 @@ describe('Document', () => { const { container } = await render(); const noData = container.querySelector('.react-pdf__message'); + const wrapper = container.querySelector('.react-pdf__Document'); expect(noData).toBeInTheDocument(); expect(noData).toHaveTextContent('No PDF file specified.'); + expect(wrapper).toHaveClass('react-pdf__Document--no-data'); }); it('renders custom no data message when given nothing and noData prop is given', async () => { @@ -251,11 +253,30 @@ describe('Document', () => { const { container } = await render(); const loading = container.querySelector('.react-pdf__message'); + const wrapper = container.querySelector('.react-pdf__Document'); expect(loading).toBeInTheDocument(); + expect(wrapper).toHaveClass('react-pdf__Document--loading'); await expect.element(page.getByText('Loading PDF…')).toBeInTheDocument(); }); + it('removes its state modifier class after loading a file', async () => { + const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback(); + + const { container } = await render( + , + ); + + const wrapper = container.querySelector('.react-pdf__Document'); + + await onLoadSuccessPromise; + await waitForAsync(); + + expect(wrapper).not.toHaveClass('react-pdf__Document--no-data'); + expect(wrapper).not.toHaveClass('react-pdf__Document--loading'); + expect(wrapper).not.toHaveClass('react-pdf__Document--error'); + }); + it('renders custom loading message when loading a file and loading prop is given', async () => { const { container } = await render(); @@ -284,15 +305,17 @@ describe('Document', () => { const { container } = await render(); - expect.assertions(2); + expect.assertions(3); await onLoadErrorPromise; await waitForAsync(); const error = container.querySelector('.react-pdf__message'); + const wrapper = container.querySelector('.react-pdf__Document'); expect(error).toBeInTheDocument(); + expect(wrapper).toHaveClass('react-pdf__Document--error'); await expect.element(page.getByText('Failed to load PDF file.')).toBeInTheDocument(); restoreConsole(); diff --git a/packages/react-pdf/src/Document.tsx b/packages/react-pdf/src/Document.tsx index 3f3a2bbed..d9f336f22 100644 --- a/packages/react-pdf/src/Document.tsx +++ b/packages/react-pdf/src/Document.tsx @@ -605,6 +605,14 @@ const Document: React.ForwardRefExoticComponent< [otherProps, pdf], ); + const documentState = !file + ? 'no-data' + : pdf === undefined || pdf === null + ? 'loading' + : pdf === false + ? 'error' + : undefined; + function renderChildren() { function isFulfilledContext(context: DocumentContextType): context is DocumentRenderProps { return Boolean(context?.pdf); @@ -623,17 +631,17 @@ const Document: React.ForwardRefExoticComponent< } function renderContent() { - if (!file) { + if (documentState === 'no-data') { return {typeof noData === 'function' ? noData() : noData}; } - if (pdf === undefined || pdf === null) { + if (documentState === 'loading') { return ( {typeof loading === 'function' ? loading() : loading} ); } - if (pdf === false) { + if (documentState === 'error') { return {typeof error === 'function' ? error() : error}; } @@ -642,7 +650,11 @@ const Document: React.ForwardRefExoticComponent< return (
} {...eventProps}