Skip to content

Commit

Permalink
Support auto pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
Yangfan Huang committed Dec 29, 2015
1 parent 7b4bfe0 commit 7877d2b
Showing 1 changed file with 61 additions and 46 deletions.
107 changes: 61 additions & 46 deletions GiftedListView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function MergeRecursive(obj1, obj2) {
var GiftedSpinner = require('react-native-gifted-spinner');

var GiftedListView = React.createClass({

getDefaultProps() {
return {
customStyles: {},
Expand All @@ -44,8 +44,9 @@ var GiftedListView = React.createClass({
headerView: null,
sectionHeaderView: null,
withSections: false,
autoPaginate: false,
onFetch(page, callback, options) { callback([]); },

paginationFetchigView: null,
paginationAllLoadedView: null,
paginationWaitingView: null,
Expand All @@ -60,7 +61,7 @@ var GiftedListView = React.createClass({
},
};
},

propTypes: {
customStyles: React.PropTypes.object,
initialListSize: React.PropTypes.number,
Expand All @@ -72,8 +73,9 @@ var GiftedListView = React.createClass({
headerView: React.PropTypes.func,
sectionHeaderView: React.PropTypes.func,
withSections: React.PropTypes.bool,
autoPaginate: React.PropTypes.bool,
onFetch: React.PropTypes.func,

paginationFetchigView: React.PropTypes.func,
paginationAllLoadedView: React.PropTypes.func,
paginationWaitingView: React.PropTypes.func,
Expand All @@ -84,20 +86,20 @@ var GiftedListView = React.createClass({
renderSeparator: React.PropTypes.func,
PullToRefreshViewAndroidProps: React.PropTypes.object,
},

_setY(y) { this._y = y; },
_getY(y) { return this._y; },
_setPage(page) { this._page = page; },
_getPage() { return this._page; },
_setRows(rows) { this._rows = rows; },
_getRows() { return this._rows; },


paginationFetchigView() {
if (this.props.paginationFetchigView) {
return this.props.paginationFetchigView();
}

return (
<View style={[this.defaultStyles.paginationView, this.props.customStyles.paginationView]}>
<GiftedSpinner />
Expand All @@ -108,7 +110,7 @@ var GiftedListView = React.createClass({
if (this.props.paginationAllLoadedView) {
return this.props.paginationAllLoadedView();
}

return (
<View style={[this.defaultStyles.paginationView, this.props.customStyles.paginationView]}>
<Text style={[this.defaultStyles.actionsLabel, this.props.customStyles.actionsLabel]}>
Expand All @@ -121,9 +123,9 @@ var GiftedListView = React.createClass({
if (this.props.paginationWaitingView) {
return this.props.paginationWaitingView(paginateCallback);
}

return (
<TouchableHighlight
<TouchableHighlight
underlayColor='#c8c7cc'
onPress={paginateCallback}
style={[this.defaultStyles.paginationView, this.props.customStyles.paginationView]}
Expand Down Expand Up @@ -157,7 +159,7 @@ var GiftedListView = React.createClass({
if (this.props.refreshableWillRefreshView) {
return this.props.refreshableWillRefreshView();
}

return (
<View>
<View style={[this.defaultStyles.refreshableView, this.props.customStyles.refreshableView]}>
Expand All @@ -173,7 +175,7 @@ var GiftedListView = React.createClass({
if (this.props.refreshableWaitingView) {
return this.props.refreshableWaitingView(refreshCallback);
}

return (
<View>
<View style={[this.defaultStyles.refreshableView, this.props.customStyles.refreshableView]}>
Expand All @@ -189,14 +191,14 @@ var GiftedListView = React.createClass({
if (this.props.emptyView) {
return this.props.emptyView(refreshCallback);
}

return (
<View style={[this.defaultStyles.defaultView, this.props.customStyles.defaultView]}>
<Text style={[this.defaultStyles.defaultViewTitle, this.props.customStyles.defaultViewTitle]}>
Sorry, there is no content to display
</Text>
<TouchableHighlight

<TouchableHighlight
underlayColor='#c8c7cc'
onPress={refreshCallback}
>
Expand All @@ -211,12 +213,20 @@ var GiftedListView = React.createClass({
if (this.props.renderSeparator) {
return this.props.renderSeparator();
}

return (
<View style={[this.defaultStyles.separator, this.props.customStyles.separator]} />
);
},

onEndReached() {
if (this.props.autoPaginate) {
this._onPaginate();
}
if (this.props.onEndReached) {
this.props.onEndReached();
}
},

getInitialState() {

if (this.props.refreshable === true && Platform.OS !== 'android') {
Expand All @@ -243,7 +253,7 @@ var GiftedListView = React.createClass({
} else {
ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
});
return {
dataSource: ds.cloneWithRows(this._getRows()),
refreshStatus: 'waiting',
Expand All @@ -265,7 +275,7 @@ var GiftedListView = React.createClass({
_refresh() {
this._onRefresh({external: true});
},

_onRefresh(options = {}) {
this._scrollResponder.scrollTo(0);
this.setState({
Expand All @@ -275,23 +285,26 @@ var GiftedListView = React.createClass({
this._setPage(1);
this.props.onFetch(this._getPage(), this._postRefresh, options);
},

_postRefresh(rows = [], options = {}) {
this._updateRows(rows, options);
if (this.props.refreshable === true) {
// @issue
// if a scrolling is already in progress, this scroll will not be executed
this._scrollResponder.scrollTo(this.props.refreshableViewHeight);
this._scrollResponder.scrollTo(this.props.refreshableViewHeight);
}
},

_onPaginate() {
this.setState({
paginationStatus: 'fetching',
});
this.props.onFetch(this._getPage() + 1, this._postPaginate, {});
if (this.state.paginationStatus === 'firstLoad'
|| this.state.paginationStatus === 'waiting') {
this.setState({
paginationStatus: 'fetching',
});
this.props.onFetch(this._getPage() + 1, this._postPaginate, {});
}
},

_postPaginate(rows = [], options = {}) {
this._setPage(this._getPage() + 1);
var mergedRows = null;
Expand All @@ -302,7 +315,7 @@ var GiftedListView = React.createClass({
}
this._updateRows(mergedRows, options);
},

_updateRows(rows = [], options = {}) {
this._setRows(rows);
if (this.props.withSections === true) {
Expand All @@ -318,10 +331,10 @@ var GiftedListView = React.createClass({
refreshStatus: 'waiting',
isRefreshing: false,
paginationStatus: (options.allLoaded === true ? 'allLoaded' : 'waiting'),
});
});
}
},

_onResponderRelease() {
if (this.props.refreshable === true) {
if (Platform.OS !== 'android') {
Expand All @@ -331,12 +344,12 @@ var GiftedListView = React.createClass({
}
}
},

_onScroll(e) {
this._setY(e.nativeEvent.contentOffset.y);
if (this.props.refreshable === true) {
if (Platform.OS !== 'android') {
if (this._getY() < this.props.refreshableViewHeight - this.props.refreshableDistance
if (this._getY() < this.props.refreshableViewHeight - this.props.refreshableDistance
&& this.state.refreshStatus === 'waiting'
&& this._scrollResponder.scrollResponderHandleScrollShouldSetResponder() === true
) {
Expand All @@ -348,7 +361,7 @@ var GiftedListView = React.createClass({
}
}
},

_renderRefreshView() {
switch (this.state.refreshStatus) {
case 'fetching':
Expand All @@ -361,7 +374,7 @@ var GiftedListView = React.createClass({
return this.refreshableWaitingView(this._onRefresh);
}
},

_renderPaginationView() {
if ((this.state.paginationStatus === 'fetching' && this.props.pagination === true) || (this.state.paginationStatus === 'firstLoad' && this.props.firstLoader === true)) {
return this.paginationFetchigView();
Expand All @@ -383,16 +396,16 @@ var GiftedListView = React.createClass({
return {top: 0, bottom: 0, left: 0, right: 0};
}
},

_calculateContentOffset() {
if (this.props.refreshable === true && Platform.OS !== 'android') {
return {x: 0, y: this.props.refreshableViewHeight};
} else {
return {x: 0, y: 0};
}
},


renderListView(style = {}) {
return (
<ListView
Expand All @@ -403,23 +416,25 @@ var GiftedListView = React.createClass({

renderHeader={this.props.refreshable === true && Platform.OS !== 'android' ? this._renderRefreshView : this.headerView}
renderFooter={this._renderPaginationView}

onScroll={this.props.refreshable === true && Platform.OS !== 'android' ? this._onScroll : null}
onResponderRelease={this.props.refreshable === true && Platform.OS !== 'android' ? this._onResponderRelease : null}

scrollEventThrottle={200}

contentInset={this._calculateContentInset()}
contentOffset={this._calculateContentOffset()}

automaticallyAdjustContentInsets={false}
scrollEnabled={true}
canCancelContentTouches={true}

renderSeparator={this.renderSeparator}


onEndReached={this.onEndReached}

{...this.props}

style={[this.props.style, style]}
/>
);
Expand All @@ -433,7 +448,7 @@ var GiftedListView = React.createClass({
onRefresh={this._onRefresh}

{...this.props.PullToRefreshViewAndroidProps}

style={[this.props.PullToRefreshViewAndroidProps.style, {flex: 1}]}
>
{this.renderListView({flex: 1})}
Expand All @@ -443,7 +458,7 @@ var GiftedListView = React.createClass({
return this.renderListView();
}
},

defaultStyles: {
separator: {
height: 1,
Expand Down

0 comments on commit 7877d2b

Please sign in to comment.