Fixed Zoomout & Zoomin button disable issue

Author: ansuman-ghosh-infrrd

dist/pdf-viewer-reactjs.js

@@ -61,7 +61,7 @@
     },
     "husky": {
         "hooks": {
-            "pre-commit": "npm run lint && npm run build"
+            "pre-commit": "npm run lint && npm run build && git add -A"
         }
     }
 }

package.json

@@ -41,6 +41,7 @@ const Navigation = ({
                     <ZoomOut
                         scale={scale}
                         minScale={minScale}
+                        defaultScale={defaultScale}
                         css={css.zoomOutBtn}
                         handleZoomOut={handleZoomOut}
                     />
@@ -53,6 +54,7 @@ const Navigation = ({
                     <ZoomIn
                         scale={scale}
                         maxScale={maxScale}
+                        defaultScale={defaultScale}
                         css={css.zoomInBtn}
                         handleZoomIn={handleZoomIn}
                     />

src/components/NavigationBar.js

@@ -6,7 +6,7 @@ const ResetZoom = ({ css, scale, defaultScale, handleResetZoom }) => {
         css ||
         'button is-black is-marginless has-margin-left-5 has-margin-right-5'
 
-    if (scale === defaultScale) {
+    if (scale.toFixed(2) === defaultScale.toFixed(2)) {
         return (
             <button className={resetZoomClass} disabled>
                 <span className='icon is-small'>

src/components/navigationComponents/ResetZoom.js

@@ -1,12 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const ZoomIn = ({ css, scale, maxScale, handleZoomIn }) => {
+const ZoomIn = ({ css, scale, defaultScale, maxScale, handleZoomIn }) => {
     const zoomInClass =
         css ||
         'button is-black is-marginless has-margin-left-5 has-margin-right-5'
 
-    if (scale === maxScale) {
+    let checkScale = maxScale
+    if (defaultScale > maxScale) {
+        checkScale = defaultScale
+    }
+
+    if (scale.toFixed(2) === checkScale.toFixed(2)) {
         return (
             <button className={zoomInClass} disabled>
                 <span className='icon is-small'>
@@ -28,6 +33,7 @@ const ZoomIn = ({ css, scale, maxScale, handleZoomIn }) => {
 ZoomIn.propTypes = {
     css: PropTypes.string,
     scale: PropTypes.number.isRequired,
+    defaultScale: PropTypes.number.isRequired,
     maxScale: PropTypes.number.isRequired,
     handleZoomIn: PropTypes.func.isRequired,
 }

src/components/navigationComponents/ZoomIn.js

@@ -1,12 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const ZoomOut = ({ css, scale, minScale, handleZoomOut }) => {
+const ZoomOut = ({ css, scale, defaultScale, minScale, handleZoomOut }) => {
     const zoomOutClass =
         css ||
         'button is-black is-marginless has-margin-left-5 has-margin-right-5'
 
-    if (scale === minScale) {
+    let checkScale = minScale
+    if (defaultScale < minScale) {
+        checkScale = defaultScale
+    }
+
+    if (scale.toFixed(2) === checkScale.toFixed(2)) {
         return (
             <button className={zoomOutClass} disabled>
                 <span className='icon is-small'>
@@ -28,6 +33,7 @@ const ZoomOut = ({ css, scale, minScale, handleZoomOut }) => {
 ZoomOut.propTypes = {
     css: PropTypes.string,
     scale: PropTypes.number.isRequired,
+    defaultScale: PropTypes.number.isRequired,
     minScale: PropTypes.number.isRequired,
     handleZoomOut: PropTypes.func.isRequired,
 }

src/components/navigationComponents/ZoomOut.js

@@ -61,7 +61,12 @@ class PDFViewer extends React.Component {
     }
 
     handleZoomIn() {
-        if (this.state.scale < this.props.maxScale) {
+        let checkScale = this.props.maxScale
+        if (this.state.defaultScale > this.props.maxScale) {
+            checkScale = this.state.defaultScale
+        }
+
+        if (this.state.scale < checkScale) {
             this.setState({
                 scale: this.state.scale + this.props.scaleStep,
             })
@@ -83,7 +88,12 @@ class PDFViewer extends React.Component {
     }
 
     handleZoomOut() {
-        if (this.state.scale > this.props.minScale) {
+        let checkScale = this.props.minScale
+        if (this.state.defaultScale < this.props.minScale) {
+            checkScale = this.state.defaultScale
+        }
+
+        if (this.state.scale > checkScale) {
             this.setState({
                 scale: this.state.scale - this.props.scaleStep,
             })