Added onZoom and onRotation functions

ansuman-ghosh-infrrd · ansuman-ghosh-infrrd · commit 36b46ee0791e · 2019-07-30T11:00:52.000+05:30
diff --git a/README.md b/README.md
@@ -112,43 +112,55 @@ React component prop. types:
     -   Required: **false**
     -   Description: A function that will be called on clicking on the next page button, page number can be accessed in the function.
 
--   `css`:
+-   `onZoom`:
+
+    -   Type: _Function_
+    -   Required: **false**
+    -   Description: A function that will be called on clicking on Zoom controls, zoom scale can be accessed in the function.
+
+-   `onRotation`:
+
+    -   Type: _Function_
+    -   Required: **false**
+    -   Description: A function that will be called on clicking on Rotation controls, rotation angle can be accessed in the function.
+
+*   `css`:
 
     -   Type: _String_
     -   Required: **false**
     -   Description: CSS classes that will be setted for the component wrapper
 
--   `canvasCss`:
+*   `canvasCss`:
 
     -   Type: _String_
     -   Required: **false**
     -   Description: CSS classes that will be setted for the PDF page
 
--   `hideNavbar`:
+*   `hideNavbar`:
 
     -   Type: _Boolean_
     -   Required: **false**
     -   Description: By default navbar is displayed, but can be hidden by passing this prop
 
--   `navbarOnTop`:
+*   `navbarOnTop`:
 
     -   Type: _Boolean_
     -   Required: **false**
     -   Description: By default navbar is displayed on bottom, but can be placed on top by passing this prop
 
--   `hideZoom`:
+*   `hideZoom`:
 
     -   Type: _Boolean_
     -   Required: **false**
     -   Description: By default zoom buttons are displayed, but can be hidden by passing this prop
 
--   `hideRotation`:
+*   `hideRotation`:
 
     -   Type: _Boolean_
     -   Required: **false**
     -   Description: By default rotation buttons are displayed, but can be hidden by passing this prop
 
--   `navigation`:
+*   `navigation`:
 
     -   Type:
 
diff --git a/dist/pdf-viewer-reactjs.js b/dist/pdf-viewer-reactjs.js
@@ -126,10 +126,11 @@ ZoomOut.propTypes = {
 };
 
 var ResetZoom = function ResetZoom(_ref) {
-    var css = _ref.css,
+    var scale = _ref.scale,
+        css = _ref.css,
         handleResetZoom = _ref.handleResetZoom;
 
-    var resetZoomClass = css ? css : 'btn btn-sm btn-link text-white px-2';
+    var resetZoomClass = (css ? css : 'btn btn-sm btn-link text-white px-2') + '\n    ' + (scale === 1 ? ' disabled' : '');
 
     return React.createElement(
         'button',
@@ -266,6 +267,7 @@ var Navigation = function Navigation(_ref) {
                         handleZoomOut: handleZoomOut
                     }),
                     React.createElement(ResetZoom, {
+                        scale: scale,
                         css: css.resetZoomBtn,
                         handleResetZoom: handleResetZoom
                     }),
@@ -523,48 +525,78 @@ var PDFViewer = function (_React$Component) {
             _this.setState({
                 page: _this.state.page - 1
             });
-            _this.props.onPrevBtnClick(_this.state.page - 1);
+
+            if (_this.props.onPrevBtnClick) {
+                _this.props.onPrevBtnClick(_this.state.page - 1);
+            }
         }, _this.handleNextClick = function () {
             if (_this.state.page === _this.state.pages) return;
 
             _this.setState({
                 page: _this.state.page + 1
             });
-            _this.props.onNextBtnClick(_this.state.page + 1);
+
+            if (_this.props.onNextBtnClick) {
+                _this.props.onNextBtnClick(_this.state.page + 1);
+            }
         }, _this.handleZoomIn = function () {
             if (_this.state.scale < _this.state.maxScale) {
                 _this.setState({
                     scale: _this.state.scale + _this.state.scaleStep
                 });
             }
+
+            if (_this.props.onZoom) {
+                _this.props.onZoom(_this.state.scale + _this.state.scaleStep);
+            }
         }, _this.handleResetZoom = function () {
             _this.setState({
                 scale: 1
             });
+
+            if (_this.props.onZoom) {
+                _this.props.onZoom(1);
+            }
         }, _this.handleZoomOut = function () {
             if (_this.state.scale > 1) {
                 _this.setState({
                     scale: _this.state.scale - _this.state.scaleStep
                 });
             }
+
+            if (_this.props.onZoom) {
+                _this.props.onZoom(_this.state.scale - _this.state.scaleStep);
+            }
         }, _this.handleRotateLeft = function () {
             if (_this.state.rotationAngle !== -90) {
                 _this.setState({
                     rotationAngle: -90
                 });
             }
+
+            if (_this.props.onZoom) {
+                _this.props.onRotation(-90);
+            }
         }, _this.handleResetRotation = function () {
             if (_this.state.rotationAngle !== 0 || _this.state.rotationAngle !== 360) {
                 _this.setState({
                     rotationAngle: 360
                 });
             }
+
+            if (_this.props.onZoom) {
+                _this.props.onRotation(0);
+            }
         }, _this.handleRotateRight = function () {
             if (_this.state.rotationAngle !== 90) {
                 _this.setState({
                     rotationAngle: 90
                 });
             }
+
+            if (_this.props.onZoom) {
+                _this.props.onRotation(90);
+            }
         }, _temp), possibleConstructorReturn(_this, _ret);
     }
 
@@ -721,6 +753,8 @@ PDFViewer.propTypes = {
     onDocumentClick: PropTypes.func,
     onPrevBtnClick: PropTypes.func,
     onNextBtnClick: PropTypes.func,
+    onZoom: PropTypes.func,
+    onRotation: PropTypes.func,
     hideNavbar: PropTypes.bool,
     navbarOnTop: PropTypes.bool,
     hideZoom: PropTypes.bool,
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/src/App.js b/example/src/App.js
@@ -127,16 +127,19 @@ const WithCustomNavigation = () => (
 const WithOnDocumentClick = () => (
     <div className="col-md-auto text-center">
         <h1 className="text-white bg-info rounded">
-            With onDocumentClick, onPrevBtnClick and onNextBtnClick handler
+            With onDocumentClick, onPrevBtnClick, onNextBtnClick, onZoom and
+            onRotation handler
         </h1>
         <div className="border rounded">
             <PDFViewer
                 document={{
                     url: sources.url
                 }}
                 onDocumentClick={() => alert('Document was clicked')}
-                onPrevBtnClick={page => alert(`Page ${page} was selected`)}
-                onNextBtnClick={page => alert(`Page ${page} was selected`)}
+                onPrevBtnClick={page => alert(`Page ${page} selected`)}
+                onNextBtnClick={page => alert(`Page ${page} selected`)}
+                onZoom={scale => alert(`Zoom scale is ${scale}`)}
+                onRotation={angle => alert(`Page angle is ${angle}`)}
             />
         </div>
     </div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Navigation/ResetZoom.js b/src/Navigation/ResetZoom.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ResetZoom = ({ css, handleResetZoom }) => {
-    const resetZoomClass = css ? css : 'btn btn-sm btn-link text-white px-2';
+const ResetZoom = ({ scale, css, handleResetZoom }) => {
+    const resetZoomClass = `${css ? css : 'btn btn-sm btn-link text-white px-2'}
+    ${scale === 1 ? ' disabled' : ''}`;
 
     return (
         <button
diff --git a/src/Navigation/index.js b/src/Navigation/index.js
@@ -47,6 +47,7 @@ const Navigation = ({
                                 handleZoomOut={handleZoomOut}
                             />
                             <ResetZoom
+                                scale={scale}
                                 css={css.resetZoomBtn}
                                 handleResetZoom={handleResetZoom}
                             />
diff --git a/src/index.js b/src/index.js
@@ -42,7 +42,10 @@ class PDFViewer extends React.Component {
         this.setState({
             page: this.state.page - 1
         });
-        this.props.onPrevBtnClick(this.state.page - 1);
+
+        if (this.props.onPrevBtnClick) {
+            this.props.onPrevBtnClick(this.state.page - 1);
+        }
     };
 
     handleNextClick = () => {
@@ -51,7 +54,10 @@ class PDFViewer extends React.Component {
         this.setState({
             page: this.state.page + 1
         });
-        this.props.onNextBtnClick(this.state.page + 1);
+
+        if (this.props.onNextBtnClick) {
+            this.props.onNextBtnClick(this.state.page + 1);
+        }
     };
 
     handleZoomIn = () => {
@@ -60,12 +66,20 @@ class PDFViewer extends React.Component {
                 scale: this.state.scale + this.state.scaleStep
             });
         }
+
+        if (this.props.onZoom) {
+            this.props.onZoom(this.state.scale + this.state.scaleStep);
+        }
     };
 
     handleResetZoom = () => {
         this.setState({
             scale: 1
         });
+
+        if (this.props.onZoom) {
+            this.props.onZoom(1);
+        }
     };
 
     handleZoomOut = () => {
@@ -74,6 +88,10 @@ class PDFViewer extends React.Component {
                 scale: this.state.scale - this.state.scaleStep
             });
         }
+
+        if (this.props.onZoom) {
+            this.props.onZoom(this.state.scale - this.state.scaleStep);
+        }
     };
 
     handleRotateLeft = () => {
@@ -82,6 +100,10 @@ class PDFViewer extends React.Component {
                 rotationAngle: -90
             });
         }
+
+        if (this.props.onZoom) {
+            this.props.onRotation(-90);
+        }
     };
 
     handleResetRotation = () => {
@@ -93,6 +115,10 @@ class PDFViewer extends React.Component {
                 rotationAngle: 360
             });
         }
+
+        if (this.props.onZoom) {
+            this.props.onRotation(0);
+        }
     };
 
     handleRotateRight = () => {
@@ -101,6 +127,10 @@ class PDFViewer extends React.Component {
                 rotationAngle: 90
             });
         }
+
+        if (this.props.onZoom) {
+            this.props.onRotation(90);
+        }
     };
 
     render() {
@@ -232,6 +262,8 @@ PDFViewer.propTypes = {
     onDocumentClick: PropTypes.func,
     onPrevBtnClick: PropTypes.func,
     onNextBtnClick: PropTypes.func,
+    onZoom: PropTypes.func,
+    onRotation: PropTypes.func,
     hideNavbar: PropTypes.bool,
     navbarOnTop: PropTypes.bool,
     hideZoom: PropTypes.bool,
