fix onWheel preventDefault() on Chrome >= v73

reference: facebook/react#14856 https://www.chromestatus.com/features/6662647093133312
Fonger · Apr 3, 2019 · b44359c · b44359c
1 parent 55c5812
commit b44359c
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/panAndZoomHoc.tsx b/src/panAndZoomHoc.tsx
@@ -68,13 +68,24 @@ export default function panAndZoom<P>(WrappedComponent: React.SFC<P> | React.Com
             }
         }
 
+        componentRef = React.createRef<HTMLElement>();
+
+        componentDidMount() {
+            if (this.componentRef.current) {
+                this.componentRef.current.addEventListener('wheel', this.handleWheel);
+            }
+        }
+
         componentWillUnmount() {
             if (this.panning) {
                 document.removeEventListener('mousemove', this.handleMouseMove);
                 document.removeEventListener('mouseup', this.handleMouseUp);
                 document.removeEventListener('touchmove', this.handleMouseMove);
                 document.removeEventListener('touchend', this.handleMouseUp);
             }
+            if (this.componentRef.current) {
+                this.componentRef.current.removeEventListener('wheel', this.handleWheel);
+            }
         }
 
         handleWheel = (event: WheelEvent) => {
@@ -265,9 +276,9 @@ export default function panAndZoom<P>(WrappedComponent: React.SFC<P> | React.Com
                     <WrappedComponent
                         {...passedProps}
                         {...other}
+                        ref={this.componentRef}
                         onMouseDown={this.handleMouseDown}
                         onTouchStart={this.handleMouseDown}
-                        onWheel={this.handleWheel}
                     >
                         {children}
                     </WrappedComponent>