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

Jump to bottom

[Bugfix][SwipeableFlatList] Fix SwipeableFlatList on close #16682

Closed
wants to merge 2 commits into from
Closed

[Bugfix][SwipeableFlatList] Fix SwipeableFlatList on close #16682

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
711edcf
fix_SwipeableFlatList_onClose
kesha-antonov Nov 5, 2017
d50cbaa
refactor
kesha-antonov Nov 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 27 additions & 15 deletions Libraries/Experimental/SwipeableRow/SwipeableFlatList.js
View file
Open in desktop
Expand Up @@ -35,7 +35,9 @@ type SwipableListProps = {
type Props<ItemT> = SwipableListProps & FlatListProps<ItemT>;

type State = {
openRowKey: ?string,
extraData: {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need extra object inside state? isn't it simpler keep it as before but put into flat list extraData={this.state} ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kesha-antonov

Following the example in https://facebook.github.io/react-native/docs/flatlist.html

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

openRowKey: ?string,
}
};

/**
Expand Down Expand Up @@ -88,31 +90,37 @@ class SwipeableFlatList<ItemT> extends React.Component<Props<ItemT>, State> {
constructor(props: Props<ItemT>, context: any): void {
super(props, context);
this.state = {
openRowKey: null,
extraData: {
openRowKey: null,
}
};

this._shouldBounceFirstRowOnMount = this.props.bounceFirstRowOnMount;

this.onRefFlatList = this.onRefFlatList.bind(this);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code works faster than fat arrow.
In render we should avoid create function every time
@tomasreimers

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kesha-antonov totally get that -- I meant why .bind(this) in the initializer instead of using class fields (like _onScroll)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ping

this._onClose = this._onClose.bind(this);
}

render(): React.Node {
return (
<FlatList
{...this.props}
ref={ref => {
this._flatListRef = ref;
}}
ref={this.onRefFlatList}
onScroll={this._onScroll}
renderItem={this._renderItem}
extraData={this.state.extraData}
/>
);
}

_onScroll = (e): void => {
onRefFlatList(_flatListRef) {
this._flatListRef = _flatListRef;
}

_onScroll = (): void => {
// Close any opens rows on ListView scroll
if (this.state.openRowKey) {
this.setState({
openRowKey: null,
});
if (this.state.extraData.openRowKey) {
this._onClose();
}

this.props.onScroll && this.props.onScroll(e);
Expand All @@ -136,10 +144,10 @@ class SwipeableFlatList<ItemT> extends React.Component<Props<ItemT>, State> {
return (
<SwipeableRow
slideoutView={slideoutView}
isOpen={key === this.state.openRowKey}
isOpen={key === this.state.extraData.openRowKey}
maxSwipeDistance={this._getMaxSwipeDistance(info)}
onOpen={() => this._onOpen(key)}
onClose={() => this._onClose(key)}
onClose={this._onClose}
shouldBounceOnMount={shouldBounceOnMount}
onSwipeEnd={this._setListViewScrollable}
onSwipeStart={this._setListViewNotScrollable}>
Expand Down Expand Up @@ -175,13 +183,17 @@ class SwipeableFlatList<ItemT> extends React.Component<Props<ItemT>, State> {

_onOpen(key: any): void {
this.setState({
openRowKey: key,
extraData: {
openRowKey: key,
}
});
}

_onClose(key: any): void {
_onClose(): void {
this.setState({
openRowKey: null,
extraData: {
openRowKey: null,
}
});
}
}
Expand Down