Skip to content

Commit

Permalink
[fix] inverted VirtualizedList supports wheel events
Browse files Browse the repository at this point in the history
  • Loading branch information
staltz authored and necolas committed Feb 18, 2022
1 parent 59fd1a1 commit b42473a
Showing 1 changed file with 37 additions and 1 deletion.
38 changes: 37 additions & 1 deletion src/vendor/react-native/VirtualizedList/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -678,6 +678,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {

state: State;

invertedWheelEventHandler: ?(ev: any) => void;

constructor(props: Props) {
super(props);
invariant(
Expand Down Expand Up @@ -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;
}

Expand All @@ -747,6 +762,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
parentDebugInfo: this.context.debugInfo,
});
}
this.setupWebWheelHandler();
}

componentWillUnmount() {
Expand All @@ -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 {
Expand Down Expand Up @@ -2092,4 +2128,4 @@ const styles = StyleSheet.create({
},
});

export default VirtualizedList;
export default VirtualizedList;

0 comments on commit b42473a

Please sign in to comment.