Include destination array in onItemClick callbacks

README.md

@@ -235,7 +235,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|`({ pageNumber, destination }) => alert('Clicked an item from page ' + pageNumber + '!')`<ul><li>`pageNumber`: The page number that the item is pointing to</li><li>`destination`: Original destination array from pdf.js, in the format `[pageRef, { name: 'XYZ' \| 'FitXXX' }, ...args]`</li></ul>|
 |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!')`|
@@ -291,7 +291,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|`({ pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')`<ul><li>`pageNumber`: The page number that the item is pointing to</li><li>`destination`: Original destination array from pdf.js, in the format `[pageRef, { name: 'XYZ' \| 'FitXXX' }, ...args]`</li></ul>|
 |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,13 +44,13 @@ export default class Document extends PureComponent {
   }
 
   viewer = {
-    scrollPageIntoView: ({ pageNumber }) => {
+    scrollPageIntoView: ({ pageNumber, destination }) => {
       // Handling jumping to internal links target
       const { onItemClick } = this.props;
 
       // First, check if custom handling of onItemClick was provided
       if (onItemClick) {
-        onItemClick({ pageNumber });
+        onItemClick({ pageNumber, destination });
         return;
       }
 

src/Document.spec.jsx

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

src/LinkService.js

@@ -87,6 +87,7 @@ export default class LinkService {
 
             this.pdfViewer.scrollPageIntoView({
               pageNumber,
+              destination: dest,
             });
           });
       });

src/Outline.jsx

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

src/OutlineItem.jsx

@@ -84,6 +84,7 @@ export class OutlineItemInternal extends PureComponent {
         onClick({
           pageIndex,
           pageNumber,
+          destination: this.destination,
         });
       });
   }

test/Test.jsx

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