Properly clear openRowID when a row is swiped to closed position.

Summary:
If a SwipeableRow does not have background color defined, QuickAction is rendered below the row. In such case, you can leverage openRowID defined in dataSource. For instance, one can render quickAction only for the open row. The openRowID, however, does not clear when the row is closed. It only clears when the ListView is scrolled. This is s small PR to fix address it.
Closes https://github.com/facebook/react-native/pull/11380

Differential Revision: D4500952

Pulled By: mkonicek

fbshipit-source-id: a965dfb45b77cc1669de405b627d13e2cee59420
This commit is contained in:
Jonathan Koo 2017-02-02 04:47:49 -08:00 committed by Facebook Github Bot
parent 5938e16248
commit 2edd455c65
2 changed files with 10 additions and 0 deletions

View File

@ -196,6 +196,7 @@ class SwipeableListView extends React.Component {
maxSwipeDistance={this._getMaxSwipeDistance(rowData, sectionID, rowID)}
key={rowID}
onOpen={() => this._onOpen(rowData.id)}
onClose={() => this._onClose(rowData.id)}
onSwipeEnd={() => this._setListViewScrollable(true)}
onSwipeStart={() => this._setListViewScrollable(false)}
shouldBounceOnMount={shouldBounceOnMount}>
@ -209,6 +210,12 @@ class SwipeableListView extends React.Component {
dataSource: this.state.dataSource.setOpenRowID(rowID),
});
}
_onClose(rowID: string): void {
this.setState({
dataSource: this.state.dataSource.setOpenRowID(null),
});
}
}
module.exports = SwipeableListView;

View File

@ -85,6 +85,7 @@ const SwipeableRow = React.createClass({
isOpen: PropTypes.bool,
maxSwipeDistance: PropTypes.number.isRequired,
onOpen: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
onSwipeEnd: PropTypes.func.isRequired,
onSwipeStart: PropTypes.func.isRequired,
// Should bounce the row on mount
@ -120,6 +121,7 @@ const SwipeableRow = React.createClass({
isOpen: false,
maxSwipeDistance: 0,
onOpen: emptyFunction,
onClose: emptyFunction,
onSwipeEnd: emptyFunction,
onSwipeStart: emptyFunction,
swipeThreshold: 30,
@ -369,6 +371,7 @@ const SwipeableRow = React.createClass({
this._animateToOpenPositionWith(gestureState.vx, horizontalDistance);
} else {
// Swiped right
this.props.onClose();
this._animateToClosedPosition();
}
} else {