From a180f57946122b71a2b51bdeaacce33f2d8aca8d Mon Sep 17 00:00:00 2001
From: Michal-Sh <58683426+Michal-Sh@users.noreply.github.com>
Date: Thu, 20 Feb 2020 22:03:31 +0200
Subject: [PATCH] Add zoomWithScroll prop for prevent scrolling & update README
 (#100)

---
 README.md     |  1 +
 src/index.tsx | 22 +++++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 9c828f4..46e3b23 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,7 @@ class App extends React.Component {
 | `aspect`    | number                              |          | Aspect of the cropper. The value is the ratio between its width and its height. The default value is `4/3`                                                                                                                                                                                                                                |
 | `minZoom`   | number                              |          | Minimum zoom of the media. Defaults to 1.                                                                                                                                                                                                                                                                                                 |
 | `maxZoom`   | number                              |          | Maximum zoom of the media. Defaults to 3.                                                                                                                                                                                                                                                                                                 |
+| `zoomWithScroll`   | boolean                              |          | Enable zoom by scrolling. Defaults to `true`                                                                                                                                                                                                                                                                                                 |
 | `cropShape` | 'rect' \| 'round'                   |          | Shape of the crop area. Defaults to 'rect'.                                                                                                                                                                                                                                                                                               |
 | `cropSize`  | `{ width: number, height: number }` |          | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size. _Warning_: this cannot be changed once the component is displayed. If you need to change it (based on some user inputs for instance), you can force the component to be reset by using a `key`. |
 | `showGrid`  | boolean                             |          | Whether to show or not the grid (third-lines). Defaults to `true`.                                                                                                                                                                                                                                                                        |
diff --git a/src/index.tsx b/src/index.tsx
index 7187029..7227914 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -24,6 +24,7 @@ type Props = {
   cropSize?: Size
   showGrid?: boolean
   zoomSpeed: number
+  zoomWithScroll?: boolean
   onCropChange: (location: Point) => void
   onZoomChange?: (zoom: number) => void
   onRotationChange?: (rotation: number) => void
@@ -68,6 +69,7 @@ class Cropper extends React.Component<Props, State> {
     mediaProps: {},
     zoomSpeed: 1,
     restrictPosition: true,
+    zoomWithScroll: true,
   }
 
   imageRef: HTMLImageElement | null = null
@@ -91,7 +93,8 @@ class Cropper extends React.Component<Props, State> {
   componentDidMount() {
     window.addEventListener('resize', this.computeSizes)
     if (this.containerRef) {
-      this.containerRef.addEventListener('wheel', this.onWheel, { passive: false })
+      this.props.zoomWithScroll &&
+        this.containerRef.addEventListener('wheel', this.onWheel, { passive: false })
       this.containerRef.addEventListener('gesturestart', this.preventZoomSafari)
       this.containerRef.addEventListener('gesturechange', this.preventZoomSafari)
     }
@@ -105,14 +108,11 @@ class Cropper extends React.Component<Props, State> {
   componentWillUnmount() {
     window.removeEventListener('resize', this.computeSizes)
     if (this.containerRef) {
-      this.containerRef.removeEventListener('wheel', this.onWheel)
       this.containerRef.removeEventListener('gesturestart', this.preventZoomSafari)
       this.containerRef.removeEventListener('gesturechange', this.preventZoomSafari)
     }
     this.cleanEvents()
-    if (this.wheelTimer) {
-      clearTimeout(this.wheelTimer)
-    }
+    this.props.zoomWithScroll && this.clearScrollEvent()
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -124,6 +124,11 @@ class Cropper extends React.Component<Props, State> {
     } else if (prevProps.zoom !== this.props.zoom) {
       this.recomputeCropPosition()
     }
+    if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {
+      this.props.zoomWithScroll
+        ? this.containerRef.addEventListener('wheel', this.onWheel, { passive: false })
+        : this.clearScrollEvent()
+    }
   }
 
   // this is to prevent Safari on iOS >= 10 to zoom the page
@@ -136,6 +141,13 @@ class Cropper extends React.Component<Props, State> {
     document.removeEventListener('touchend', this.onDragStopped)
   }
 
+  clearScrollEvent = () => {
+    if (this.containerRef) this.containerRef.removeEventListener('wheel', this.onWheel)
+    if (this.wheelTimer) {
+      clearTimeout(this.wheelTimer)
+    }
+  }
+
   onMediaLoad = () => {
     this.computeSizes()
     this.emitCropData()