Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix inverted flatlist #2

Merged
merged 1 commit into from
Nov 3, 2021
Merged

Fix inverted flatlist #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 28 additions & 15 deletions packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,14 @@ type State = {
class VirtualizedList extends React.PureComponent<Props, State> {
static contextType: typeof VirtualizedListContext = VirtualizedListContext;

pushOrUnshift(input: Array<any>, item: Item) {
if (this.props.inverted) {
input.unshift(item)
} else {
input.push(item)
}
}

// scrollToEnd may be janky without getItemLayout prop
scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
const animated = params ? params.animated : true;
Expand Down Expand Up @@ -707,7 +715,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
);
} else if (this.props.onViewableItemsChanged) {
const onViewableItemsChanged = this.props.onViewableItemsChanged
this._viewabilityTuples.push({
this.pushOrUnshift(this._viewabilityTuples, {
viewabilityHelper: new ViewabilityHelper(this.props.viewabilityConfig),
onViewableItemsChanged,
});
Expand Down Expand Up @@ -807,9 +815,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const key = keyExtractor(item, ii);
this._indicesToKeys.set(ii, key);
if (stickyIndicesFromProps.has(ii + stickyOffset)) {
stickyHeaderIndices.push(cells.length);
this.pushOrUnshift(stickyHeaderIndices, cells.length);
}
cells.push(
this.pushOrUnshift(cells,
<CellRenderer
CellRendererComponent={CellRendererComponent}
ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
Expand Down Expand Up @@ -879,15 +887,15 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const stickyHeaderIndices = [];
if (ListHeaderComponent) {
if (stickyIndicesFromProps.has(0)) {
stickyHeaderIndices.push(0);
this.pushOrUnshift(stickyHeaderIndices, 0);
}
const element = React.isValidElement(ListHeaderComponent) ? (
ListHeaderComponent
) : (
// $FlowFixMe
<ListHeaderComponent />
);
cells.push(
this.pushOrUnshift(cells,
<VirtualizedListCellContextProvider
cellKey={this._getCellKey() + '-header'}
key="$header">
Expand Down Expand Up @@ -936,7 +944,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
stickyBlock.offset -
initBlock.offset -
(this.props.initialScrollIndex ? 0 : initBlock.length);
cells.push(
this.pushOrUnshift(cells,
/* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
* suppresses an error found when Flow v0.111 was deployed. To
* see the error, delete this comment and run Flow. */
Expand All @@ -953,7 +961,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const trailSpace =
this._getFrameMetricsApprox(first).offset -
(stickyBlock.offset + stickyBlock.length);
cells.push(
this.pushOrUnshift(cells,
/* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
* suppresses an error found when Flow v0.111 was deployed. To
* see the error, delete this comment and run Flow. */
Expand All @@ -969,7 +977,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const firstSpace =
this._getFrameMetricsApprox(first).offset -
(initBlock.offset + initBlock.length);
cells.push(
this.pushOrUnshift(cells,
/* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment
* suppresses an error found when Flow v0.111 was deployed. To see
* the error, delete this comment and run Flow. */
Expand Down Expand Up @@ -1006,7 +1014,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
endFrame.offset +
endFrame.length -
(lastFrame.offset + lastFrame.length);
cells.push(
this.pushOrUnshift(cells,
/* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
* an error found when Flow v0.111 was deployed. To see the error,
* delete this comment and run Flow. */
Expand All @@ -1022,7 +1030,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
// $FlowFixMe
<ListEmptyComponent />
)): any);
cells.push(
this.pushOrUnshift(cells,
React.cloneElement(element, {
key: '$empty',
onLayout: event => {
Expand All @@ -1042,7 +1050,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
// $FlowFixMe
<ListFooterComponent />
);
cells.push(
this.pushOrUnshift(cells,
<VirtualizedListCellContextProvider
cellKey={this._getFooterCellKey()}
key="$footer">
Expand Down Expand Up @@ -1367,7 +1375,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
* error found when Flow v0.68 was deployed. To see the error delete this
* comment and run Flow. */
if (frame.inLayout) {
framesInLayout.push(frame);
this.pushOrUnshift(framesInLayout, frame);
}
}
const windowTop = this._getFrameMetricsApprox(this.state.first).offset;
Expand Down Expand Up @@ -1505,6 +1513,11 @@ class VirtualizedList extends React.PureComponent<Props, State> {
};

_onScroll = (e: Object) => {
var contentOffset = (this.props.inverted) ? {
x: - e.nativeEvent.contentOffset.x,
y: - e.nativeEvent.contentOffset.y,
} : e.nativeEvent.contentOffset

this._nestedChildLists.forEach(childList => {
childList.ref && childList.ref._onScroll(e);
});
Expand All @@ -1514,7 +1527,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const timestamp = e.timeStamp;
let visibleLength = this._selectLength(e.nativeEvent.layoutMeasurement);
let contentLength = this._selectLength(e.nativeEvent.contentSize);
let offset = this._selectOffset(e.nativeEvent.contentOffset);
let offset = this._selectOffset(contentOffset);
let dOffset = offset - this._scrollMetrics.offset;

if (this._isNestedWithSameOrientation()) {
Expand Down Expand Up @@ -2048,10 +2061,10 @@ function describeNestedLists(childList: {

const styles = StyleSheet.create({
verticallyInverted: {
transform: [{scaleY: -1}],
flexDirection: 'column-reverse',
},
horizontallyInverted: {
transform: [{scaleX: -1}],
flexDirection: 'row-reverse',
},
row: {
flexDirection: 'row',
Expand Down