Add dest and pageIndex to onItemClick callback

Builds on top of #814

Closes #812

README.md

@@ -268,7 +268,7 @@ Loads a document passed using `file` prop.
 |inputRef|A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Document>` component.|n/a|<ul><li>Function:<br />`(ref) => { this.myDocument = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul>|
 |loading|What the component should display while loading.|`"Loading PDF…"`|<ul><li>String:<br />`"Please wait!"`</li><li>React element:<br />`<div>Please wait!</div>`</li><li>Function:<br />`this.renderLoader`</li></ul>|
 |noData|What the component should display in case of no data.|`"No PDF file specified."`|<ul><li>String:<br />`"Please select a file."`</li><li>React element:<br />`<div>Please select a file.</div>`</li><li>Function:<br />`this.renderNoData`</li></ul>|
-|onItemClick|Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.|n/a|`({ pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')`|
+|onItemClick|Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.|n/a|`({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')`|
 |onLoadError|Function called in case of an error while loading a document.|n/a|`(error) => alert('Error while loading document! ' + error.message)`|
 |onLoadProgress|Function called, potentially multiple times, as the loading progresses.|n/a|`({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%');`|
 |onLoadSuccess|Function called when the document is successfully loaded.|n/a|`(pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')`|
@@ -325,7 +325,7 @@ Displays an outline (table of contents). Should be placed inside `<Document />`.
 |----|----|----|----|
 |className|Class name(s) that will be added to rendered element along with the default `react-pdf__Outline`.|n/a|<ul><li>String:<br />`"custom-class-name-1 custom-class-name-2"`</li><li>Array of strings:<br />`["custom-class-name-1", "custom-class-name-2"]`</li></ul>|
 |inputRef|A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Outline>` component.|n/a|<ul><li>Function:<br />`(ref) => { this.myOutline = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul>|
-|onItemClick|Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.|n/a|`({ pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')`|
+|onItemClick|Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to.|n/a|`({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')`|
 |onLoadError|Function called in case of an error while retrieving the outline.|n/a|`(error) => alert('Error while retrieving the outline! ' + error.message)`|
 |onLoadSuccess|Function called when the outline is successfully retrieved.|n/a|`(outline) => alert('The outline has been successfully retrieved.')`|
 

src/Document.jsx

@@ -44,18 +44,18 @@ export default class Document extends PureComponent {
   }
 
   viewer = {
-    scrollPageIntoView: ({ pageNumber }) => {
+    scrollPageIntoView: ({ dest, pageIndex, pageNumber }) => {
       // Handling jumping to internal links target
       const { onItemClick } = this.props;
 
       // First, check if custom handling of onItemClick was provided
       if (onItemClick) {
-        onItemClick({ pageNumber });
+        onItemClick({ dest, pageIndex, pageNumber });
         return;
       }
 
       // If not, try to look for target page within the <Document>.
-      const page = this.pages[pageNumber - 1];
+      const page = this.pages[pageIndex];
 
       if (page) {
         // Scroll to the page automatically

src/Document.spec.jsx

@@ -462,13 +462,15 @@ describe('Document', () => {
 
       await onLoadSuccessPromise;
 
+      const dest = [];
+      const pageIndex = 5;
       const pageNumber = 6;
 
       // Simulate clicking on an outline item
-      component.instance().viewer.scrollPageIntoView({ pageNumber });
+      component.instance().viewer.scrollPageIntoView({ dest, pageIndex, pageNumber });
 
       expect(onItemClick).toHaveBeenCalledTimes(1);
-      expect(onItemClick).toHaveBeenCalledWith({ pageNumber });
+      expect(onItemClick).toHaveBeenCalledWith({ dest, pageIndex, pageNumber });
     });
 
     it('attempts to find a page and scroll it into view if onItemClick is not given', async () => {
@@ -486,13 +488,16 @@ describe('Document', () => {
       await onLoadSuccessPromise;
 
       const scrollIntoView = jest.fn();
+
+      const dest = [];
+      const pageIndex = 5;
       const pageNumber = 6;
 
       // Register fake page in Document viewer
-      component.instance().pages[pageNumber - 1] = { scrollIntoView };
+      component.instance().pages[pageIndex] = { scrollIntoView };
 
       // Simulate clicking on an outline item
-      component.instance().viewer.scrollPageIntoView({ pageNumber });
+      component.instance().viewer.scrollPageIntoView({ dest, pageIndex, pageNumber });
 
       expect(scrollIntoView).toHaveBeenCalledTimes(1);
     });

src/LinkService.js

@@ -71,23 +71,27 @@ export default class LinkService {
           if (destRef instanceof Object) {
             this.pdfDocument.getPageIndex(destRef)
               .then((pageIndex) => {
-                resolve(pageIndex + 1);
+                resolve(pageIndex);
               })
               .catch(() => {
                 throw new Error(`"${destRef}" is not a valid page reference.`);
               });
           } else if (typeof destRef === 'number') {
-            resolve(destRef + 1);
+            resolve(destRef);
           } else {
             throw new Error(`"${destRef}" is not a valid destination reference.`);
           }
         })
-          .then((pageNumber) => {
+          .then((pageIndex) => {
+            const pageNumber = pageIndex + 1;
+
             if (!pageNumber || pageNumber < 1 || pageNumber > this.pagesCount) {
               throw new Error(`"${pageNumber}" is not a valid page number.`);
             }
 
             this.pdfViewer.scrollPageIntoView({
+              dest,
+              pageIndex,
               pageNumber,
             });
           });

src/Outline.jsx

@@ -104,11 +104,12 @@ export class OutlineInternal extends PureComponent {
     if (onLoadError) onLoadError(error);
   }
 
-  onItemClick = ({ pageIndex, pageNumber }) => {
+  onItemClick = ({ dest, pageIndex, pageNumber }) => {
     const { onItemClick } = this.props;
 
     if (onItemClick) {
       onItemClick({
+        dest,
         pageIndex,
         pageNumber,
       });

src/OutlineItem.jsx

@@ -79,9 +79,10 @@ export class OutlineItemInternal extends PureComponent {
       return false;
     }
 
-    return Promise.all([this.getPageIndex(), this.getPageNumber()])
-      .then(([pageIndex, pageNumber]) => {
+    return Promise.all([this.getDestination(), this.getPageIndex(), this.getPageNumber()])
+      .then(([dest, pageIndex, pageNumber]) => {
         onClick({
+          dest,
           pageIndex,
           pageNumber,
         });

test/Test.jsx

@@ -88,10 +88,11 @@ export default function Test() {
 
   const onPageRenderSuccess = useCallback((page) => console.log('Rendered a page', page), []);
 
-  const onItemClick = useCallback(
-    ({ pageNumber: nextPageNumber }) => setPageNumber(nextPageNumber),
-    [],
-  );
+  const onItemClick = useCallback((args) => {
+    console.log('Clicked an item', args);
+    const { pageNumber: nextPageNumber } = args;
+    setPageNumber(nextPageNumber);
+  }, []);
 
   useEffect(() => {
     (async () => {