From 33e42909158de4c957c08b153474d654d6f84335 Mon Sep 17 00:00:00 2001
From: David Rieman <david.rieman@warnermedia.com>
Date: Wed, 2 Mar 2022 14:11:09 -0800
Subject: [PATCH] Restore customization patch of VirtualizedList which inverts
 mouse wheel scroll position while list is inverted. Added loud comments to
 make it clear this code intends to live on in RNW even though not present in
 RN.

---
 .../react-native/VirtualizedList/index.js     | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
index 7e727a1360..180ec22aca 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
@@ -680,6 +680,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 
   state: State;
 
+  // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+  invertedWheelEventHandler: ?(ev: any) => void;
+
   constructor(props: Props) {
     super(props);
     invariant(
@@ -733,6 +736,20 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       }
     }
 
+    // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+    // 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;
   }
 
@@ -749,6 +766,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         parentDebugInfo: this.context.debugInfo,
       });
     }
+
+    // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+    this.setupWebWheelHandler();
   }
 
   componentWillUnmount() {
@@ -768,6 +788,30 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       tuple.viewabilityHelper.dispose();
     });
     this._fillRateHelper.deactivateAndFlush();
+
+    // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+    this.teardownWebWheelHandler();
+  }
+
+  // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+  setupWebWheelHandler() {
+    if (this._scrollRef && this._scrollRef.getScrollableNode) {
+      this._scrollRef.getScrollableNode().addEventListener('wheel',
+          this.invertedWheelEventHandler
+      );
+    } else {
+      setTimeout(() => this.setupWebWheelHandler(), 50);
+      return
+    }
+  }
+
+  // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+  teardownWebWheelHandler() {
+    if (this._scrollRef && this._scrollRef.getScrollableNode) {
+      this._scrollRef.getScrollableNode().removeEventListener('wheel',
+          this.invertedWheelEventHandler
+      );
+    }
   }
 
   static getDerivedStateFromProps(newProps: Props, prevState: State): State {