Enabled flow on ListView.js

Reviewed By: javache

Differential Revision: D3476167

fbshipit-source-id: 25ca5fe5063c5d19a96357338235a251a5839dcd
This commit is contained in:
Nathan Azaria 2016-06-23 09:23:09 -07:00 committed by Facebook Github Bot
parent 9bd80cbc26
commit 267ccfb787
1 changed files with 26 additions and 18 deletions

View File

@ -28,6 +28,7 @@
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* *
* @providesModule ListView * @providesModule ListView
* @flow
*/ */
'use strict'; 'use strict';
@ -102,6 +103,13 @@ var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
*/ */
var ListView = React.createClass({ var ListView = React.createClass({
_childFrames: ([]: Array<Object>),
_sentEndForContentLength: (null: ?number),
_scrollComponent: (null: any),
_prevRenderedRowsCount: 0,
_visibleRows: ({}: Object),
scrollProperties: ({}: Object),
mixins: [ScrollResponder.Mixin, TimerMixin], mixins: [ScrollResponder.Mixin, TimerMixin],
statics: { statics: {
@ -148,7 +156,7 @@ var ListView = React.createClass({
* it so that the first screen worth of data appears at one time instead of * it so that the first screen worth of data appears at one time instead of
* over the course of multiple frames. * over the course of multiple frames.
*/ */
initialListSize: PropTypes.number, initialListSize: PropTypes.number.isRequired,
/** /**
* Called when all rows have been rendered and the list has been scrolled * Called when all rows have been rendered and the list has been scrolled
* to within onEndReachedThreshold of the bottom. The native scroll * to within onEndReachedThreshold of the bottom. The native scroll
@ -158,7 +166,7 @@ var ListView = React.createClass({
/** /**
* Threshold in pixels (virtual, not physical) for calling onEndReached. * Threshold in pixels (virtual, not physical) for calling onEndReached.
*/ */
onEndReachedThreshold: PropTypes.number, onEndReachedThreshold: PropTypes.number.isRequired,
/** /**
* Number of rows to render per event loop. Note: if your 'rows' are actually * Number of rows to render per event loop. Note: if your 'rows' are actually
* cells, i.e. they don't span the full width of your view (as in the * cells, i.e. they don't span the full width of your view (as in the
@ -166,7 +174,7 @@ var ListView = React.createClass({
* of the number of cells per row, otherwise you're likely to see gaps at * of the number of cells per row, otherwise you're likely to see gaps at
* the edge of the ListView as new pages are loaded. * the edge of the ListView as new pages are loaded.
*/ */
pageSize: PropTypes.number, pageSize: PropTypes.number.isRequired,
/** /**
* () => renderable * () => renderable
* *
@ -198,7 +206,7 @@ var ListView = React.createClass({
* How early to start rendering rows before they come on screen, in * How early to start rendering rows before they come on screen, in
* pixels. * pixels.
*/ */
scrollRenderAheadDistance: React.PropTypes.number, scrollRenderAheadDistance: React.PropTypes.number.isRequired,
/** /**
* (visibleRows, changedRows) => void * (visibleRows, changedRows) => void
* *
@ -223,7 +231,7 @@ var ListView = React.createClass({
* with `horizontal={true}`. * with `horizontal={true}`.
* @platform ios * @platform ios
*/ */
stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number), stickyHeaderIndices: PropTypes.arrayOf(PropTypes.number).isRequired,
/** /**
* Flag indicating whether empty section headers should be rendered. In the future release * Flag indicating whether empty section headers should be rendered. In the future release
* empty section headers will be rendered by default, and the flag will be deprecated. * empty section headers will be rendered by default, and the flag will be deprecated.
@ -260,13 +268,13 @@ var ListView = React.createClass({
* *
* See `ScrollView#scrollTo`. * See `ScrollView#scrollTo`.
*/ */
scrollTo: function(...args) { scrollTo: function(...args: Array<mixed>) {
if (this._scrollComponent && this._scrollComponent.scrollTo) { if (this._scrollComponent && this._scrollComponent.scrollTo) {
this._scrollComponent.scrollTo(...args); this._scrollComponent.scrollTo(...args);
} }
}, },
setNativeProps: function(props) { setNativeProps: function(props: Object) {
if (this._scrollComponent) { if (this._scrollComponent) {
this._scrollComponent.setNativeProps(props); this._scrollComponent.setNativeProps(props);
} }
@ -290,7 +298,7 @@ var ListView = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
curRenderedRowsCount: this.props.initialListSize, curRenderedRowsCount: this.props.initialListSize,
highlightedRow: {}, highlightedRow: ({} : Object),
}; };
}, },
@ -319,7 +327,7 @@ var ListView = React.createClass({
}); });
}, },
componentWillReceiveProps: function(nextProps) { componentWillReceiveProps: function(nextProps: Object) {
if (this.props.dataSource !== nextProps.dataSource || if (this.props.dataSource !== nextProps.dataSource ||
this.props.initialListSize !== nextProps.initialListSize) { this.props.initialListSize !== nextProps.initialListSize) {
this.setState((state, props) => { this.setState((state, props) => {
@ -343,7 +351,7 @@ var ListView = React.createClass({
}); });
}, },
_onRowHighlighted: function(sectionID, rowID) { _onRowHighlighted: function(sectionID: string, rowID: string) {
this.setState({highlightedRow: {sectionID, rowID}}); this.setState({highlightedRow: {sectionID, rowID}});
}, },
@ -489,11 +497,11 @@ var ListView = React.createClass({
); );
}, },
_setScrollComponentRef: function(scrollComponent) { _setScrollComponentRef: function(scrollComponent: Object) {
this._scrollComponent = scrollComponent; this._scrollComponent = scrollComponent;
}, },
_onContentSizeChange: function(width, height) { _onContentSizeChange: function(width: number, height: number) {
var contentLength = !this.props.horizontal ? height : width; var contentLength = !this.props.horizontal ? height : width;
if (contentLength !== this.scrollProperties.contentLength) { if (contentLength !== this.scrollProperties.contentLength) {
this.scrollProperties.contentLength = contentLength; this.scrollProperties.contentLength = contentLength;
@ -503,7 +511,7 @@ var ListView = React.createClass({
this.props.onContentSizeChange && this.props.onContentSizeChange(width, height); this.props.onContentSizeChange && this.props.onContentSizeChange(width, height);
}, },
_onLayout: function(event) { _onLayout: function(event: Object) {
var {width, height} = event.nativeEvent.layout; var {width, height} = event.nativeEvent.layout;
var visibleLength = !this.props.horizontal ? height : width; var visibleLength = !this.props.horizontal ? height : width;
if (visibleLength !== this.scrollProperties.visibleLength) { if (visibleLength !== this.scrollProperties.visibleLength) {
@ -514,7 +522,7 @@ var ListView = React.createClass({
this.props.onLayout && this.props.onLayout(event); this.props.onLayout && this.props.onLayout(event);
}, },
_maybeCallOnEndReached: function(event) { _maybeCallOnEndReached: function(event?: Object) {
if (this.props.onEndReached && if (this.props.onEndReached &&
this.scrollProperties.contentLength !== this._sentEndForContentLength && this.scrollProperties.contentLength !== this._sentEndForContentLength &&
this._getDistanceFromEnd(this.scrollProperties) < this.props.onEndReachedThreshold && this._getDistanceFromEnd(this.scrollProperties) < this.props.onEndReachedThreshold &&
@ -556,11 +564,11 @@ var ListView = React.createClass({
}); });
}, },
_getDistanceFromEnd: function(scrollProperties) { _getDistanceFromEnd: function(scrollProperties: Object) {
return scrollProperties.contentLength - scrollProperties.visibleLength - scrollProperties.offset; return scrollProperties.contentLength - scrollProperties.visibleLength - scrollProperties.offset;
}, },
_updateVisibleRows: function(updatedFrames) { _updateVisibleRows: function(updatedFrames?: Array<Object>) {
if (!this.props.onChangeVisibleRows) { if (!this.props.onChangeVisibleRows) {
return; // No need to compute visible rows if there is no callback return; // No need to compute visible rows if there is no callback
} }
@ -636,7 +644,7 @@ var ListView = React.createClass({
visibilityChanged && this.props.onChangeVisibleRows(this._visibleRows, changedRows); visibilityChanged && this.props.onChangeVisibleRows(this._visibleRows, changedRows);
}, },
_onScroll: function(e) { _onScroll: function(e: Object) {
var isVertical = !this.props.horizontal; var isVertical = !this.props.horizontal;
this.scrollProperties.visibleLength = e.nativeEvent.layoutMeasurement[ this.scrollProperties.visibleLength = e.nativeEvent.layoutMeasurement[
isVertical ? 'height' : 'width' isVertical ? 'height' : 'width'