From 2132ad14414f51ee41c359249245cdcae5b3ecf2 Mon Sep 17 00:00:00 2001 From: Fred Liu Date: Thu, 5 May 2016 20:44:48 -0700 Subject: [PATCH] Swipeable list view enhancements Summary: - Removes "flickering" on first load - Takes in Map to display customs slideout view in `SwipeableRowListView` Reviewed By: furdei Differential Revision: D3267262 fb-gh-sync-id: a89806138b9172b3c184cc117504e205632a36d0 fbshipit-source-id: a89806138b9172b3c184cc117504e205632a36d0 --- .../Experimental/SwipeableRow/SwipeableRow.js | 19 +++++++++++++++++-- .../SwipeableRow/SwipeableRowListView.js | 15 +++++++++++---- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/Libraries/Experimental/SwipeableRow/SwipeableRow.js b/Libraries/Experimental/SwipeableRow/SwipeableRow.js index d480a4143..0e409241d 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableRow.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableRow.js @@ -41,6 +41,13 @@ const HORIZONTAL_SWIPE_DISTANCE_THRESHOLD = 15; * on the item hidden behind the row */ const SwipeableRow = React.createClass({ + /** + * In order to render component A beneath component B, A must be rendered + * before B. However, this will cause "flickering", aka we see A briefly then + * B. To counter this, _isSwipeableViewRendered flag is used to set component + * A to be transparent until component B is loaded. + */ + _isSwipeableViewRendered: false, _panResponder: {}, _previousLeft: CLOSED_LEFT_POSITION, @@ -112,6 +119,7 @@ const SwipeableRow = React.createClass({ {slideOutView} - {mainView} + {swipeableView} ); }, + _onSwipeableViewLayout(event: Object): void { + if (!this._isSwipeableViewRendered) { + this._isSwipeableViewRendered = true; + } + }, + _handlePanResponderTerminationRequest( event: Object, gestureState: Object, diff --git a/Libraries/Experimental/SwipeableRow/SwipeableRowListView.js b/Libraries/Experimental/SwipeableRow/SwipeableRowListView.js index 47336dd1b..b9f2c3e03 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableRowListView.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableRowListView.js @@ -26,7 +26,6 @@ const ListViewDataSource = require('ListViewDataSource'); const React = require('React'); const SwipeableRow = require('SwipeableRow'); -const View = require('View'); const {PropTypes} = React; @@ -45,7 +44,10 @@ const SwipeableRowListView = React.createClass({ */ listView: PropTypes.func.isRequired, maxSwipeDistance: PropTypes.number, - renderRow: PropTypes.func.isRequired, + // Callback method to render the view that will be unveiled on swipe + renderRowSlideout: PropTypes.func.isRequired, + // Callback method to render the swipeable view + renderRowSwipeable: PropTypes.func.isRequired, rowIDs: PropTypes.array.isRequired, sectionIDs: PropTypes.array.isRequired, }, @@ -82,12 +84,17 @@ const SwipeableRowListView = React.createClass({ _renderRow(rowData: Object, sectionID: string, rowID: string): ReactElement { return ( } + slideoutView={this.props.renderRowSlideout(rowData, sectionID, rowID)} isOpen={rowData.isOpen} maxSwipeDistance={this.props.maxSwipeDistance} key={rowID} onOpen={() => this._onRowOpen(rowID)}> - {this.props.renderRow(rowData, sectionID, rowID, this.state.dataSource)} + {this.props.renderRowSwipeable( + rowData, + sectionID, + rowID, + this.state.dataSource, + )} ); },