diff --git a/GiftedListView.js b/GiftedListView.js index 565eedf..986897f 100644 --- a/GiftedListView.js +++ b/GiftedListView.js @@ -10,6 +10,7 @@ var { Text } = React; + // small helper function which merged two objects into one function MergeRecursive(obj1, obj2) { for (var p in obj2) { @@ -31,39 +32,8 @@ var GiftedSpinner = require('react-native-gifted-spinner'); var GiftedListView = React.createClass({ getDefaultProps() { - var customStyles = { - separator: { - height: 1, - backgroundColor: '#CCC' - }, - refreshableView: { - height: 50, - backgroundColor: '#DDD', - justifyContent: 'center', - alignItems: 'center', - }, - actionsLabel: { - fontSize: 20, - }, - paginationView: { - height: 44, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#FFF', - }, - defaultView: { - justifyContent: 'center', - alignItems: 'center', - padding: 20, - }, - defaultViewTitle: { - fontSize: 16, - fontWeight: 'bold', - marginBottom: 15, - }, - }; - return { + customStyles: {}, initialListSize: 10, firstLoader: true, pagination: true, @@ -74,100 +44,39 @@ var GiftedListView = React.createClass({ withSections: false, onFetch(page, callback, options) { callback([]); }, - paginationFetchigView() { - return ( - - - - ); - }, - paginationAllLoadedView() { - return ( - - - ~ - - - ); - }, - paginationWaitingView(paginateCallback) { - return ( - - - + - - - ); - }, - refreshableFetchingView() { - return ( - - - - ); - }, - refreshableWillRefreshView() { - return ( - - - ↻ - - - ); - }, - refreshableWaitingView(refreshCallback) { - if (Platform.OS !== 'android') { - return ( - - - ↓ - - - ); - } else { - return ( - - - ↻ - - - ); - } - }, - emptyView(refreshCallback) { - return ( - - - Sorry, there is no content to display - - - - - ↻ - - - - ); - }, - renderSeparator() { - return ( - - ); - }, + paginationFetchigView: null, + paginationAllLoadedView: null, + paginationWaitingView: null, + refreshableFetchingView: null, + refreshableWillRefreshView: null, + refreshableWaitingView: null, + emptyView: null, + renderSeparator: null, }; }, + propTypes: { + customStyles: React.PropTypes.object, + initialListSize: React.PropTypes.number, + firstLoader: React.PropTypes.bool, + pagination: React.PropTypes.bool, + refreshable: React.PropTypes.bool, + refreshableViewHeight: React.PropTypes.number, + refreshableDistance: React.PropTypes.number, + sectionHeaderView: React.PropTypes.func, + withSections: React.PropTypes.bool, + onFetch: React.PropTypes.func, + + paginationFetchigView: React.PropTypes.func, + paginationAllLoadedView: React.PropTypes.func, + paginationWaitingView: React.PropTypes.func, + refreshableFetchingView: React.PropTypes.func, + refreshableWillRefreshView: React.PropTypes.func, + refreshableWaitingView: React.PropTypes.func, + emptyView: React.PropTypes.func, + renderSeparator: React.PropTypes.func, + }, + _setY(y) { this._y = y; }, _getY(y) { return this._y; }, _setPage(page) { this._page = page; }, @@ -176,6 +85,130 @@ var GiftedListView = React.createClass({ _getRows() { return this._rows; }, + paginationFetchigView() { + if (this.props.paginationFetchigView) { + return this.props.paginationFetchigView(); + } + + return ( + + + + ); + }, + paginationAllLoadedView() { + if (this.props.paginationAllLoadedView) { + return this.props.paginationAllLoadedView(); + } + + return ( + + + ~ + + + ); + }, + paginationWaitingView(paginateCallback) { + if (this.props.paginationWaitingView) { + return this.props.paginationWaitingView(paginateCallback); + } + + return ( + + + + + + + ); + }, + refreshableFetchingView() { + if (this.props.refreshableFetchingView) { + return this.props.refreshableFetchingView(); + } + + return ( + + + + ); + }, + refreshableWillRefreshView() { + if (this.props.refreshableWillRefreshView) { + return this.props.refreshableWillRefreshView(); + } + + return ( + + + ↻ + + + ); + }, + refreshableWaitingView(refreshCallback) { + if (this.props.refreshableWaitingView) { + return this.props.refreshableWaitingView(refreshCallback); + } + + if (Platform.OS !== 'android') { + return ( + + + ↓ + + + ); + } else { + return ( + + + ↻ + + + ); + } + }, + emptyView(refreshCallback) { + if (this.props.emptyView) { + return this.props.emptyView(refreshCallback); + } + + return ( + + + Sorry, there is no content to display + + + + + ↻ + + + + ); + }, + renderSeparator() { + if (this.props.renderSeparator) { + return this.props.renderSeparator(); + } + + return ( + + ); + }, + getInitialState() { if (this.props.refreshable === true && Platform.OS !== 'android') { @@ -306,25 +339,25 @@ var GiftedListView = React.createClass({ _renderRefreshView() { switch (this.state.refreshStatus) { case 'fetching': - return this.props.refreshableFetchingView(); + return this.refreshableFetchingView(); break; case 'willRefresh': - return this.props.refreshableWillRefreshView(); + return this.refreshableWillRefreshView(); break; default: - return this.props.refreshableWaitingView(this._onRefresh); + 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.props.paginationFetchigView(); + return this.paginationFetchigView(); } else if (this.state.paginationStatus === 'waiting' && this.props.pagination === true && (this.props.withSections === true || this._getRows().length > 0)) { - return this.props.paginationWaitingView(this._onPaginate); + return this.paginationWaitingView(this._onPaginate); } else if (this.state.paginationStatus === 'allLoaded' && this.props.pagination === true) { - return this.props.paginationAllLoadedView(); + return this.paginationAllLoadedView(); } else if (this._getRows().length === 0) { - return this.props.emptyView(this._onRefresh); + return this.emptyView(this._onRefresh); } else { return null; } @@ -370,10 +403,44 @@ var GiftedListView = React.createClass({ scrollEnabled={true} canCancelContentTouches={true} + renderSeparator={this.renderSeparator} + {...this.props} /> ); }, + + defaultStyles: { + separator: { + height: 1, + backgroundColor: '#CCC' + }, + refreshableView: { + height: 50, + backgroundColor: '#DDD', + justifyContent: 'center', + alignItems: 'center', + }, + actionsLabel: { + fontSize: 20, + }, + paginationView: { + height: 44, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#FFF', + }, + defaultView: { + justifyContent: 'center', + alignItems: 'center', + padding: 20, + }, + defaultViewTitle: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 15, + }, + }, });