Add zoomWithScroll prop for prevent scrolling & update README (#100)

ValentinH · Feb 20, 2020 · a180f57 · a180f57
1 parent 146921a
commit a180f57
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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()