[fix] inverted VirtualizedList supports wheel events

Close #2223
Close #1241
Fix #995

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -678,6 +678,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   state: State;
 
+  invertedWheelEventHandler: ?(ev: any) => void;
+
   constructor(props: Props) {
     super(props);
     invariant(
@@ -731,6 +733,19 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       }
     }
 
+    // For issue https://github.com/necolas/react-native-web/issues/995
+    this.invertedWheelEventHandler = (ev: any) => {
+      if (this.props.inverted && this._scrollRef && this._scrollRef.getScrollableNode) {
+        const node = (this._scrollRef: any).getScrollableNode();
+        if (this.props.horizontal) {
+          node.scrollLeft -= ev.deltaX || ev.wheelDeltaX
+        } else {
+          node.scrollTop -= ev.deltaY || ev.wheelDeltaY
+        }
+        ev.preventDefault();
+      }
+    };
+
     this.state = initialState;
   }
 
@@ -747,6 +762,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         parentDebugInfo: this.context.debugInfo,
       });
     }
+    this.setupWebWheelHandler();
   }
 
   componentWillUnmount() {
@@ -766,6 +782,26 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       tuple.viewabilityHelper.dispose();
     });
     this._fillRateHelper.deactivateAndFlush();
+    this.teardownWebWheelHandler();
+  }
+
+  setupWebWheelHandler() {
+    if (this._scrollRef && this._scrollRef.getScrollableNode) {
+      this._scrollRef.getScrollableNode().addEventListener('wheel',
+        this.invertedWheelEventHandler
+      );
+    } else {
+      setTimeout(() => this.setupWebWheelHandler(), 50);
+      return
+    }
+  }
+
+  teardownWebWheelHandler() {
+    if (this._scrollRef && this._scrollRef.getScrollableNode) {
+      this._scrollRef.getScrollableNode().removeEventListener('wheel',
+        this.invertedWheelEventHandler
+      );
+    }
   }
 
   static getDerivedStateFromProps(newProps: Props, prevState: State): State {
@@ -2092,4 +2128,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default VirtualizedList;
+export default VirtualizedList;