feat: add state change event to DocumentPreview component (#320)

watson-developer-cloud · Mar 11, 2022 · 08b2c1a · 08b2c1a
1 parent b46e8db
commit 08b2c1a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/packages/discovery-react-components/src/components/DocumentPreview/DocumentPreview.tsx b/packages/discovery-react-components/src/components/DocumentPreview/DocumentPreview.tsx
@@ -54,6 +54,10 @@ interface Props extends WithErrorBoundaryProps {
    * React component rendered as a fallback when no preview is available
    */
   fallbackComponent?: ComponentProps<typeof SimpleDocument>['fallbackComponent'];
+  /**
+   * Callback to receive changes in document preview state
+   */
+  onChange?: (state: { currentPage?: number }) => void;
 }
 
 const SCALE_FACTOR = 1.2;
@@ -66,7 +70,8 @@ const DocumentPreview: FC<Props> = ({
   highlight,
   messages = defaultMessages,
   didCatch,
-  fallbackComponent
+  fallbackComponent,
+  onChange
 }) => {
   const { selectedResult } = useContext(SearchContext);
 
@@ -96,6 +101,11 @@ const DocumentPreview: FC<Props> = ({
 
   const [pdfPageCount, setPdfPageCount] = useState(0);
 
+  // notify state change
+  useEffect(() => {
+    onChange?.({ currentPage });
+  }, [currentPage, onChange]);
+
   const base = `${settings.prefix}--document-preview`;
 
   if (isFetching) {

diff --git a/...y-react-components/src/components/DocumentPreview/__stories__/DocumentPreview.stories.tsx b/...y-react-components/src/components/DocumentPreview/__stories__/DocumentPreview.stories.tsx
@@ -1,6 +1,7 @@
 import React, { ComponentType, FC } from 'react';
 import { storiesOf } from '@storybook/react';
 import { radios, boolean, number } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
 import { QueryResult, QueryResultPassage } from 'ibm-watson/discovery/v2';
 import { SearchContext } from 'components/DiscoverySearch/DiscoverySearch';
 import DocumentPreview from '../DocumentPreview';
@@ -26,7 +27,7 @@ storiesOf('DocumentPreview', module)
     const [file, doc] = docSelection();
     return (
       <Wrapper>
-        <DocumentPreview document={doc} file={file} />
+        <DocumentPreview document={doc} file={file} onChange={action('change')} />
       </Wrapper>
     );
   })
@@ -38,7 +39,12 @@ storiesOf('DocumentPreview', module)
 
     return (
       <Wrapper>
-        <DocumentPreview document={docWithPassage} highlight={highlight} file={file} />
+        <DocumentPreview
+          document={docWithPassage}
+          highlight={highlight}
+          file={file}
+          onChange={action('change')}
+        />
       </Wrapper>
     );
   })
@@ -49,7 +55,12 @@ storiesOf('DocumentPreview', module)
 
     return (
       <Wrapper>
-        <DocumentPreview file={file} document={docWithTable} highlight={highlight} />
+        <DocumentPreview
+          file={file}
+          document={docWithTable}
+          highlight={highlight}
+          onChange={action('change')}
+        />
       </Wrapper>
     );
   })
@@ -92,7 +103,11 @@ storiesOf('DocumentPreview', module)
             } as any
           }
         >
-          <DocumentPreview document={docArtEffects} fileFetchTimeout={fileFetchTimeout} />
+          <DocumentPreview
+            document={docArtEffects}
+            fileFetchTimeout={fileFetchTimeout}
+            onChange={action('change')}
+          />
         </SearchContext.Provider>
       </Wrapper>
     );

diff --git a/yarn.lock b/yarn.lock
@@ -2163,7 +2163,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ibm-watson/discovery-react-components@^1.5.0-beta.26, @ibm-watson/discovery-react-components@workspace:packages/discovery-react-components":
+"@ibm-watson/discovery-react-components@^1.5.0-beta.27, @ibm-watson/discovery-react-components@workspace:packages/discovery-react-components":
   version: 0.0.0-use.local
   resolution: "@ibm-watson/discovery-react-components@workspace:packages/discovery-react-components"
   dependencies:
@@ -10664,7 +10664,7 @@ __metadata:
   dependencies:
     "@carbon/icons": ^10.5.0
     "@cypress/webpack-preprocessor": ^5.11.0
-    "@ibm-watson/discovery-react-components": ^1.5.0-beta.26
+    "@ibm-watson/discovery-react-components": ^1.5.0-beta.27
     "@ibm-watson/discovery-styles": ^1.5.0-beta.24
     "@testing-library/cypress": ^7.0.7
     "@types/proper-url-join": ^2