mirror of
https://github.com/status-im/react-native.git
synced 2025-02-23 14:48:25 +00:00
Update network inspector to have smarter scroll stickiness (#21952)
Summary: When making use of the network inspector on a react-native app, it can be quite annoying that as new requests come in the network inspector instantly sticks to the bottom. This PR makes this logic smarter by allowing the user to be scrolled away from the bottom by two rows to override this automatic scrolling to the bottom logic. Pull Request resolved: https://github.com/facebook/react-native/pull/21952 Differential Revision: D14162762 Pulled By: cpojer fbshipit-source-id: ad49858509dd74a817ebabab54fdacc99773bf22
This commit is contained in:
parent
c40a938ead
commit
57dc37ec5b
@ -88,6 +88,16 @@ class NetworkOverlay extends React.Component<Props, State> {
|
||||
_requestsListView: ?React.ElementRef<typeof FlatList>;
|
||||
_detailScrollView: ?React.ElementRef<typeof ScrollView>;
|
||||
|
||||
// Metrics are used to decide when if the request list should be sticky, and
|
||||
// scroll to the bottom as new network requests come in, or if the user has
|
||||
// intentionally scrolled away from the bottom - to instead flash the scroll bar
|
||||
// and keep the current position
|
||||
_requestsListViewScrollMetrics = {
|
||||
offset: 0,
|
||||
visibleLength: 0,
|
||||
contentLength: 0,
|
||||
};
|
||||
|
||||
// Map of `socketId` -> `index in `this.state.requests`.
|
||||
_socketIdMap = {};
|
||||
// Map of `xhr._index` -> `index in `this.state.requests`.
|
||||
@ -121,7 +131,7 @@ class NetworkOverlay extends React.Component<Props, State> {
|
||||
{
|
||||
requests: this.state.requests.concat(_xhr),
|
||||
},
|
||||
this._scrollRequestsToBottom,
|
||||
this._indicateAdditionalRequests,
|
||||
);
|
||||
});
|
||||
|
||||
@ -214,7 +224,7 @@ class NetworkOverlay extends React.Component<Props, State> {
|
||||
{
|
||||
requests: this.state.requests.concat(_webSocket),
|
||||
},
|
||||
this._scrollRequestsToBottom,
|
||||
this._indicateAdditionalRequests,
|
||||
);
|
||||
},
|
||||
);
|
||||
@ -383,11 +393,35 @@ class NetworkOverlay extends React.Component<Props, State> {
|
||||
);
|
||||
}
|
||||
|
||||
_scrollRequestsToBottom(): void {
|
||||
_indicateAdditionalRequests = (): void => {
|
||||
if (this._requestsListView) {
|
||||
const distanceFromEndThreshold = LISTVIEW_CELL_HEIGHT * 2;
|
||||
const {
|
||||
offset,
|
||||
visibleLength,
|
||||
contentLength,
|
||||
} = this._requestsListViewScrollMetrics;
|
||||
const distanceFromEnd = contentLength - visibleLength - offset;
|
||||
const isCloseToEnd = distanceFromEnd <= distanceFromEndThreshold;
|
||||
if (isCloseToEnd) {
|
||||
this._requestsListView.scrollToEnd();
|
||||
} else {
|
||||
this._requestsListView.flashScrollIndicators();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_captureRequestsListView = (listRef: ?FlatList<NetworkRequestInfo>): void => {
|
||||
this._requestsListView = listRef;
|
||||
};
|
||||
|
||||
_requestsListViewOnScroll = (e: Object): void => {
|
||||
this._requestsListViewScrollMetrics.offset = e.nativeEvent.contentOffset.y;
|
||||
this._requestsListViewScrollMetrics.visibleLength =
|
||||
e.nativeEvent.layoutMeasurement.height;
|
||||
this._requestsListViewScrollMetrics.contentLength =
|
||||
e.nativeEvent.contentSize.height;
|
||||
};
|
||||
|
||||
/**
|
||||
* Popup a scrollView to dynamically show detailed information of
|
||||
@ -446,7 +480,8 @@ class NetworkOverlay extends React.Component<Props, State> {
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
ref={listRef => (this._requestsListView = listRef)}
|
||||
ref={this._captureRequestsListView}
|
||||
onScroll={this._requestsListViewOnScroll}
|
||||
style={styles.listView}
|
||||
data={requests}
|
||||
renderItem={this._renderItem}
|
||||
|
Loading…
x
Reference in New Issue
Block a user