feat: select element for page navigation

microsoft · Aug 12, 2021 · 6115bb3 · 6115bb3
1 parent ea4b3c7
commit 6115bb3
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/src/react/components/pages/editorPage/canvas.tsx b/src/react/components/pages/editorPage/canvas.tsx
@@ -360,9 +360,16 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
                     />
                 }
                 {this.shouldShowMultiPageIndicator() &&
-                    <p className="page-number">
-                        Page {this.state.currentPage} of {this.state.numPages}
-                    </p>
+                    <div className="page-number">
+                        <p>
+                            Page {this.state.currentPage} of {this.state.numPages}
+                        </p>
+                        <select onChange={(val) => this.navigateToPageNumber(Number(val.target.value))}>
+                            {
+                            Array.from(Array(this.state.numPages).keys()).map(i =><option key={i+1} value={i+1}>{i+1}</option>)
+                            };
+                        </select>
+                    </div>
                 }
                 {(this.props.isRunningOCRs || (this.state.ocrStatus !== OcrStatus.done && this.state.ocrStatus !== OcrStatus.failed)) &&
                     <div className="canvas-ocr-loading">
@@ -1469,6 +1476,13 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
         }
     }
 
+    private navigateToPageNumber = async (pageNumber: number) => {
+        if ((this.state.pdfFile !== null || this.state.tiffImages.length !== 0)  && this.state.currentPage < this.state.numPages) {
+            this.props.closeTableView("rest");
+            await this.goToPage(pageNumber);
+        }
+     }
+
     private goToPage = async (targetPage: number) => {
         if (targetPage < 1 || targetPage > this.state.numPages) {
             // invalid page number, just return