status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

enable variable size slideoutView with swipeableListView 

Summary:
Currently, swipeableList expects maxSwipeoutDistance to be a number. This breaks when you want each row to have a variable width slideoutView.

This PR add support for passing maxSwipeoutDistance as a number(as before) or a function which gets the current rowData for conditionally returning the distance based on the row data.
Closes https://github.com/facebook/react-native/pull/10189

Differential Revision: D4168561

Pulled By: hramos

fbshipit-source-id: b78564f83279cab3bf04297034ca78edfff74be7
This commit is contained in:
Chirag Jain 2016-11-14 11:56:09 -08:00 committed by Facebook Github Bot
parent ec6e274172
commit 07c5882a38
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Libraries/Experimental/SwipeableRow/SwipeableListView.js
View File

@ -33,7 +33,7 @@ const {PropTypes} = React;
type Props = {
bounceFirstRowOnMount: boolean,
dataSource: SwipeableListViewDataSource,
maxSwipeDistance: number,
maxSwipeDistance: number | (rowData: any, sectionID: string, rowID: string) => number,
onScroll: ?Function,
renderRow: Function,
renderQuickActions: Function,
@ -89,7 +89,10 @@ class SwipeableListView extends React.Component {
*/
dataSource: PropTypes.instanceOf(SwipeableListViewDataSource).isRequired,
// Maximum distance to open to after a swipe
maxSwipeDistance: PropTypes.number.isRequired,
maxSwipeDistance: PropTypes.oneOfType([
PropTypes.number,
PropTypes.func,
]).isRequired,
// Callback method to render the swipeable view
renderRow: PropTypes.func.isRequired,
// Callback method to render the view that will be unveiled on swipe
@ -163,6 +166,15 @@ class SwipeableListView extends React.Component {
}
}
// This enables rows having variable width slideoutView.
_getMaxSwipeDistance = (rowData: Object, sectionID: string, rowID: string): number => {
if (typeof this.props.maxSwipeDistance === 'function') {
return this.props.maxSwipeDistance(rowData, sectionID, rowID);
}
return this.props.maxSwipeDistance;
};
_renderRow = (rowData: Object, sectionID: string, rowID: string): React.Element<any> => {
const slideoutView = this.props.renderQuickActions(rowData, sectionID, rowID);
@ -181,7 +193,7 @@ class SwipeableListView extends React.Component {
<SwipeableRow
slideoutView={slideoutView}
isOpen={rowData.id === this.props.dataSource.getOpenRowID()}
maxSwipeDistance={this.props.maxSwipeDistance}
maxSwipeDistance={this._getMaxSwipeDistance(rowData, sectionID, rowID)}
key={rowID}
onOpen={() => this._onOpen(rowData.id)}
onSwipeEnd={() => this._setListViewScrollable(true)}