Skip to content

[ListView] Allow different types of ScrollView to be composed #785

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

[ListView] Allow different types of ScrollView to be composed #785

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 24 additions & 15 deletions Libraries/CustomComponents/ListView/ListView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ var ScrollResponder = require('ScrollResponder');
var StaticRenderer = require('StaticRenderer');
var TimerMixin = require('react-timer-mixin');

var isEmpty = require('isEmpty');
var logError = require('logError');
var merge = require('merge');
var isEmpty = require('isEmpty');

var PropTypes = React.PropTypes;

Expand Down Expand Up @@ -173,6 +173,13 @@ var ListView = React.createClass({
* header.
*/
renderSectionHeader: PropTypes.func,
/**
* (props) => renderable
*
* A function that returns the scrollable component in which the list rows
* are rendered. Defaults to returning a ScrollView with the given props.
*/
renderScrollComponent: React.PropTypes.func.isRequired,
/**
* How early to start rendering rows before they come on screen, in
* pixels.
Expand Down Expand Up @@ -228,6 +235,7 @@ var ListView = React.createClass({
return {
initialListSize: DEFAULT_INITIAL_ROWS,
pageSize: DEFAULT_PAGE_SIZE,
renderScrollComponent: props => <ScrollView {...props} />,
scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
};
Expand Down Expand Up @@ -363,23 +371,24 @@ var ListView = React.createClass({
}
}

var props = merge(
this.props, {
onScroll: this._onScroll,
stickyHeaderIndices: sectionHeaderIndices,
}
);
var {
renderScrollComponent,
...props,
} = this.props;
if (!props.scrollEventThrottle) {
props.scrollEventThrottle = DEFAULT_SCROLL_CALLBACK_THROTTLE;
}
return (
<ScrollView {...props}
ref={SCROLLVIEW_REF}>
{header}
{bodyComponents}
{footer}
</ScrollView>
);
Object.assign(props, {
onScroll: this._onScroll,
stickyHeaderIndices: sectionHeaderIndices,
children: [header, bodyComponents, footer],
});

// TODO(ide): Use function refs so we can compose with the scroll
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ide - any plan to update the PR for this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer a separate commit so it's easy to bisect & revert if some product at fb is relying on this detail.

// component's original ref instead of clobbering it
return React.cloneElement(renderScrollComponent(props), {
ref: SCROLLVIEW_REF,
});
},

/**
Expand Down