Merge branch 'development' into 7499-update-react-router-dom

Author: Zasa-san

app/react/Viewer/PDFView.js

@@ -79,12 +79,12 @@ class PDFViewComponent extends Component {
     }
   }
 
-  changePage(nextPage) {
+  changePage(nextPage, force = false) {
     const { raw = 'false' } = searchParamsFromSearchParams(this.props.searchParams);
 
     const notRaw = String(raw).toLowerCase() === 'false';
     if (notRaw) {
-      return scrollToPage(nextPage);
+      return scrollToPage(nextPage, 50, force);
     }
 
     return this.changeBrowserHistoryPage(nextPage, notRaw);

app/react/Viewer/actions/specs/uiActions.spec.js

@@ -262,6 +262,19 @@ describe('Viewer uiActions', () => {
     });
   });
 
+  describe('scrollToPage', () => {
+    it('should scroll to the page passed forcing the load', async () => {
+      spyOn(scroller, 'to').and.callFake(async () => Promise.resolve());
+      actions.scrollToPage(3, 1, true);
+      expect(scroller.to).toHaveBeenCalledWith('.document-viewer div#page-3', '.document-viewer', {
+        dividerOffset: 1,
+        duration: 1,
+        force: true,
+        offset: 50,
+      });
+    });
+  });
+
   describe('highlightSnippet', () => {
     it('should unmark all and mark snippets passed only once (only the ones for the pages being rendered)', () => {
       const container = document.createElement('div');

app/react/Viewer/actions/uiActions.js

@@ -114,11 +114,12 @@ export function highlightSnippet(snippet) {
   });
 }
 
-export function scrollToPage(page, duration = 50) {
+export function scrollToPage(page, duration = 50, force = false) {
   scroller.to(`.document-viewer div#page-${page}`, '.document-viewer', {
     duration,
     dividerOffset: 1,
     offset: 50,
+    force,
   });
 }
 

app/react/Viewer/components/Paginator.js

@@ -20,7 +20,7 @@ const Paginator = ({ page = 1, totalPages = 1, onPageChange = () => {} }) => {
         queryParams={{ page: prevPage }}
         onClick={e => {
           e.preventDefault();
-          onPageChange(prevPage);
+          onPageChange(prevPage, true);
         }}
         {...disableButton(page, 1)}
       >
@@ -31,7 +31,7 @@ const Paginator = ({ page = 1, totalPages = 1, onPageChange = () => {} }) => {
         queryParams={{ page: nextPage }}
         onClick={e => {
           e.preventDefault();
-          onPageChange(nextPage);
+          onPageChange(nextPage, true);
         }}
         {...disableButton(page, totalPages)}
       >

app/react/Viewer/components/specs/Paginator.spec.js

@@ -77,7 +77,7 @@ describe('Paginator', () => {
   });
 
   describe('when passing onPageChange callback', () => {
-    it('should execute callback on prev/next passing the page selecte', () => {
+    it('should execute callback on prev/next passing the adjacent page forcing navigation for partially visible pages', () => {
       page = 5;
       const props = {
         totalPages: 25,
@@ -91,13 +91,13 @@ describe('Paginator', () => {
         .find(CurrentLocationLink)
         .at(0)
         .simulate('click', { preventDefault: () => {} });
-      expect(props.onPageChange).toHaveBeenCalledWith(4);
+      expect(props.onPageChange).toHaveBeenCalledWith(4, true);
 
       component
         .find(CurrentLocationLink)
         .at(1)
         .simulate('click', { preventDefault: () => {} });
-      expect(props.onPageChange).toHaveBeenCalledWith(6);
+      expect(props.onPageChange).toHaveBeenCalledWith(6, true);
     });
   });
 });

app/react/Viewer/specs/PDFView.spec.js

@@ -271,7 +271,7 @@ describe('PDFView', () => {
         render();
         component.find({ page: 15 }).at(0).props().changePage(16);
         expect(mockNavigate).not.toHaveBeenCalled();
-        expect(uiActions.scrollToPage).toHaveBeenCalledWith(16);
+        expect(uiActions.scrollToPage).toHaveBeenCalledWith(16, 50, false);
       });
     });
   });