From 135de79f35236247be2253eba3126ef569a94ddc Mon Sep 17 00:00:00 2001
From: Vaibhav <vaibhav@bluesapling.com>
Date: Wed, 10 Apr 2019 17:23:49 +0530
Subject: [PATCH] Fix error due to preventing default wheel action

- When onWheel is used on the "viewerCore" div, event propagated cannot
  be prevented in the event handler as the event is set to passive by
  default by chrome. A warning is shown in console when scroll event
  occurs on the div

- Fixes #53
---
 src/ViewerCore.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index c60a390..adb022f 100644
--- a/src/ViewerCore.tsx
+++ b/src/ViewerCore.tsx
@@ -7,7 +7,7 @@ import ViewerProps, { ImageDecorator, ToolbarConfig } from './ViewerProps';
 import Icon, { ActionType } from './Icon';
 import * as constants from './constants';
 
-function noop() {}
+function noop() { }
 
 const transitionDuration = 300;
 
@@ -124,6 +124,14 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       this.handleTransitionEnd,
       false
     );
+
+    // Though onWheel can be directly used on the div "viewerCore", to be able to
+    // prevent default action, a listener is added here instead
+    (this.refs['viewerCore'] as HTMLDivElement).addEventListener(
+      'mousewheel',
+      this.handleMouseScroll,
+      false
+    );
     this.startVisible(this.state.activeIndex);
   }
 
@@ -156,7 +164,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       realImgWidth = activeImage.defaultSize.width;
       realImgHeight = activeImage.defaultSize.height;
     }
-    let [ width, height ] = this.getImgWidthHeight(realImgWidth, realImgHeight);
+    let [width, height] = this.getImgWidthHeight(realImgWidth, realImgHeight);
     let left = (this.containerWidth - width) / 2;
     let top = (this.containerHeight - height - this.footerHeight) / 2;
     let scaleX = this.props.defaultScale;
@@ -589,7 +597,6 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         ref="viewerCore"
         className={className}
         style={viewerStryle}
-        onWheel={this.handleMouseScroll}
       >
         <div className={`${this.prefixCls}-mask`} style={{ zIndex: zIndex }} />
         {this.props.noClose || (