From 2edd455c652a2b84dd9f4f4b1ee9de805171822a Mon Sep 17 00:00:00 2001 From: Jonathan Koo Date: Thu, 2 Feb 2017 04:47:49 -0800 Subject: [PATCH] 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 --- Libraries/Experimental/SwipeableRow/SwipeableListView.js | 7 +++++++ Libraries/Experimental/SwipeableRow/SwipeableRow.js | 3 +++ 2 files changed, 10 insertions(+) diff --git a/Libraries/Experimental/SwipeableRow/SwipeableListView.js b/Libraries/Experimental/SwipeableRow/SwipeableListView.js index acc7289cc..9687666f2 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableListView.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableListView.js @@ -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; diff --git a/Libraries/Experimental/SwipeableRow/SwipeableRow.js b/Libraries/Experimental/SwipeableRow/SwipeableRow.js index 060cec9a8..85030becd 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableRow.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableRow.js @@ -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 {