Skip to content

Commit 80a5045

Browse files
committed
[ListView] Allow different types of ScrollView to be composed
This enables code like: ```js <ListView renderScrollView={(props) => <CustomScrollView {...props} />} /> ``` where CustomScrollView might be inverted or support pull-to-refresh, etc.
1 parent 4bec3fe commit 80a5045

File tree

1 file changed

+21
-15
lines changed

1 file changed

+21
-15
lines changed

Libraries/CustomComponents/ListView/ListView.js

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ var ScrollResponder = require('ScrollResponder');
3434
var StaticRenderer = require('StaticRenderer');
3535
var TimerMixin = require('react-timer-mixin');
3636

37+
var isEmpty = require('isEmpty');
3738
var logError = require('logError');
3839
var merge = require('merge');
39-
var isEmpty = require('isEmpty');
4040

4141
var PropTypes = React.PropTypes;
4242

@@ -163,6 +163,13 @@ var ListView = React.createClass({
163163
* header.
164164
*/
165165
renderSectionHeader: PropTypes.func,
166+
/**
167+
* (props) => renderable
168+
*
169+
* A function that returns the scroll view in which the list rows are
170+
* rendered. Defaults to returning a ScrollView with the given props.
171+
*/
172+
renderScrollView: React.PropTypes.func.isRequired,
166173
/**
167174
* How early to start rendering rows before they come on screen, in
168175
* pixels.
@@ -218,6 +225,7 @@ var ListView = React.createClass({
218225
return {
219226
initialListSize: DEFAULT_INITIAL_ROWS,
220227
pageSize: DEFAULT_PAGE_SIZE,
228+
renderScrollView: (props) => <ScrollView {...props} />,
221229
scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
222230
onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
223231
};
@@ -319,24 +327,22 @@ var ListView = React.createClass({
319327
}
320328
}
321329

322-
var props = merge(
323-
this.props, {
324-
onScroll: this._onScroll,
325-
stickyHeaderIndices: sectionHeaderIndices,
326-
}
327-
);
330+
var {
331+
renderScrollView,
332+
...props,
333+
} = this.props;
328334
if (!props.scrollEventThrottle) {
329335
props.scrollEventThrottle = DEFAULT_SCROLL_CALLBACK_THROTTLE;
330336
}
337+
Object.assign(props, {
338+
onScroll: this._onScroll,
339+
stickyHeaderIndices: sectionHeaderIndices,
340+
children: [header, bodyComponents, footer],
341+
});
331342

332-
return (
333-
<ScrollView {...props}
334-
ref={SCROLLVIEW_REF}>
335-
{header}
336-
{bodyComponents}
337-
{footer}
338-
</ScrollView>
339-
);
343+
return React.cloneElement(renderScrollView(props), {
344+
ref: SCROLLVIEW_REF,
345+
});
340346
},
341347

342348
/**

0 commit comments

Comments
 (0)