fix onWheel preventDefault() on Chrome >= v73

reference: facebook/react#14856 https://www.chromestatus.com/features/6662647093133312
Fonger · Apr 3, 2019 · 4f8c830 · 4f8c830
1 parent 55c5812
commit 4f8c830
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/panAndZoomHoc.tsx b/src/panAndZoomHoc.tsx
@@ -39,7 +39,8 @@ export default function panAndZoom<P>(WrappedComponent: React.SFC<P> | React.Com
             onPanMove: PropTypes.func,
             onPanEnd: PropTypes.func,
             onZoom: PropTypes.func,
-            onPanAndZoom: PropTypes.func
+            onPanAndZoom: PropTypes.func,
+            ref: PropTypes.func
         };
 
         static defaultProps = {
@@ -68,13 +69,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 +277,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>