From 4b1ecb62045fbb78764d1f51030f2253be705c5c Mon Sep 17 00:00:00 2001 From: Eli White Date: Mon, 14 May 2018 00:09:10 -0700 Subject: [PATCH] Flowtype ListView Reviewed By: yungsters Differential Revision: D7985836 fbshipit-source-id: 6e0944a8d2fb85aabc34dfd3125a07b208749f21 --- Libraries/Components/ScrollView/ScrollView.js | 2 +- .../SwipeableRow/SwipeableListView.js | 2 ++ Libraries/Inspector/NetworkOverlay.js | 1 + Libraries/Lists/FlatList.js | 9 +++++- .../Lists/ListView/InternalListViewType.js | 30 ++++++++++++++++++ Libraries/Lists/ListView/ListView.js | 31 +++++++++++++++++-- Libraries/Lists/MetroListView.js | 2 ++ Libraries/Lists/SectionList.js | 1 + 8 files changed, 73 insertions(+), 5 deletions(-) create mode 100644 Libraries/Lists/ListView/InternalListViewType.js diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 09928bf047d7a1..4b1b76848c7a7f 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -99,7 +99,7 @@ type VRProps = $ReadOnly<{| scrollBarThumbImage?: ?($ReadOnly<{||}> | number), |}>; -type Props = $ReadOnly<{| +export type Props = $ReadOnly<{| ...ViewProps, ...TouchableProps, ...IOSProps, diff --git a/Libraries/Experimental/SwipeableRow/SwipeableListView.js b/Libraries/Experimental/SwipeableRow/SwipeableListView.js index e449501c71835f..bae4eb5f2ff846 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableListView.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableListView.js @@ -117,9 +117,11 @@ class SwipeableListView extends React.Component { render(): React.Node { return ( + // $FlowFixMe Found when typing ListView { + // $FlowFixMe Found when typing ListView this._listViewRef = ref; }} dataSource={this.state.dataSource.getDataSource()} diff --git a/Libraries/Inspector/NetworkOverlay.js b/Libraries/Inspector/NetworkOverlay.js index 46628eccca7183..ee60a7e004928b 100644 --- a/Libraries/Inspector/NetworkOverlay.js +++ b/Libraries/Inspector/NetworkOverlay.js @@ -497,6 +497,7 @@ class NetworkOverlay extends React.Component< renderRow={this._renderRow} enableEmptySections={true} renderSeparator={this._renderSeperator} + // $FlowFixMe Found when typing ListView onLayout={this._listViewOnLayout} /> diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js index 5a0827be1df830..cb909bbe74c1bc 100644 --- a/Libraries/Lists/FlatList.js +++ b/Libraries/Lists/FlatList.js @@ -346,6 +346,7 @@ class FlatList extends React.PureComponent, void> { viewPosition?: number, }) { if (this._listRef) { + // $FlowFixMe Found when typing ListView this._listRef.scrollToIndex(params); } } @@ -362,6 +363,7 @@ class FlatList extends React.PureComponent, void> { viewPosition?: number, }) { if (this._listRef) { + // $FlowFixMe Found when typing ListView this._listRef.scrollToItem(params); } } @@ -373,6 +375,7 @@ class FlatList extends React.PureComponent, void> { */ scrollToOffset(params: {animated?: ?boolean, offset: number}) { if (this._listRef) { + // $FlowFixMe Found when typing ListView this._listRef.scrollToOffset(params); } } @@ -384,6 +387,7 @@ class FlatList extends React.PureComponent, void> { */ recordInteraction() { if (this._listRef) { + // $FlowFixMe Found when typing ListView this._listRef.recordInteraction(); } } @@ -395,6 +399,7 @@ class FlatList extends React.PureComponent, void> { */ flashScrollIndicators() { if (this._listRef) { + // $FlowFixMe Found when typing ListView this._listRef.flashScrollIndicators(); } } @@ -404,12 +409,14 @@ class FlatList extends React.PureComponent, void> { */ getScrollResponder() { if (this._listRef) { + // $FlowFixMe Found when typing ListView return this._listRef.getScrollResponder(); } } getScrollableNode() { if (this._listRef) { + // $FlowFixMe Found when typing ListView return this._listRef.getScrollableNode(); } } @@ -472,7 +479,7 @@ class FlatList extends React.PureComponent, void> { } _hasWarnedLegacy = false; - _listRef: null | VirtualizedList | ListView; + _listRef: null | VirtualizedList | ListView | MetroListView; _virtualizedListPairs: Array = []; _captureRef = ref => { diff --git a/Libraries/Lists/ListView/InternalListViewType.js b/Libraries/Lists/ListView/InternalListViewType.js new file mode 100644 index 00000000000000..1df93fd565d997 --- /dev/null +++ b/Libraries/Lists/ListView/InternalListViewType.js @@ -0,0 +1,30 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +const React = require('React'); +const ListViewDataSource = require('ListViewDataSource'); + +// This class is purely a facsimile of ListView so that we can +// properly type it with Flow before migrating ListView off of +// createReactClass. If there are things missing here that are in +// ListView, that is unintentional. +class InternalListViewType extends React.Component { + static DataSource = ListViewDataSource; + setNativeProps(props: Object) {} + flashScrollIndicators() {} + getScrollResponder(): any {} + getScrollableNode(): any {} + // $FlowFixMe + getMetrics(): Object {} + scrollTo(...args: Array) {} + scrollToEnd(options?: ?{animated?: ?boolean}) {} +} + +module.exports = InternalListViewType; diff --git a/Libraries/Lists/ListView/ListView.js b/Libraries/Lists/ListView/ListView.js index 8a1753d2d60ac1..10ab9aef3101e9 100644 --- a/Libraries/Lists/ListView/ListView.js +++ b/Libraries/Lists/ListView/ListView.js @@ -9,6 +9,7 @@ */ 'use strict'; +const InternalListViewType = require('InternalListViewType'); const ListViewDataSource = require('ListViewDataSource'); const Platform = require('Platform'); const React = require('React'); @@ -25,12 +26,36 @@ const createReactClass = require('create-react-class'); const isEmpty = require('isEmpty'); const merge = require('merge'); +import type {Props as ScrollViewProps} from 'ScrollView'; + const DEFAULT_PAGE_SIZE = 1; const DEFAULT_INITIAL_ROWS = 10; const DEFAULT_SCROLL_RENDER_AHEAD = 1000; const DEFAULT_END_REACHED_THRESHOLD = 1000; const DEFAULT_SCROLL_CALLBACK_THROTTLE = 50; +type Props = $ReadOnly<{| + ...ScrollViewProps, + + dataSource: ListViewDataSource, + renderSeparator?: ?Function, + renderRow: Function, + initialListSize?: ?number, + onEndReached?: ?Function, + onEndReachedThreshold?: ?number, + pageSize?: ?number, + renderFooter?: ?Function, + renderHeader?: ?Function, + renderSectionHeader?: ?Function, + renderScrollComponent?: ?Function, + scrollRenderAheadDistance?: ?number, + onChangeVisibleRows?: ?Function, + removeClippedSubviews?: ?boolean, + stickySectionHeadersEnabled?: ?boolean, + stickyHeaderIndices?: ?$ReadOnlyArray, + enableEmptySections?: ?boolean, +|}>; + /** * DEPRECATED - use one of the new list components, such as [`FlatList`](docs/flatlist.html) * or [`SectionList`](docs/sectionlist.html) for bounded memory use, fewer bugs, @@ -92,7 +117,7 @@ const ListView = createReactClass({ displayName: 'ListView', _childFrames: ([]: Array), _sentEndForContentLength: (null: ?number), - _scrollComponent: (null: any), + _scrollComponent: (null: ?React.ElementRef), _prevRenderedRowsCount: 0, _visibleRows: ({}: Object), scrollProperties: ({}: Object), @@ -555,7 +580,7 @@ const ListView = createReactClass({ ); }, - _setScrollComponentRef: function(scrollComponent: Object) { + _setScrollComponentRef: function(scrollComponent) { this._scrollComponent = scrollComponent; }, @@ -752,4 +777,4 @@ const ListView = createReactClass({ }, }); -module.exports = ListView; +module.exports = ((ListView: any): Class>); diff --git a/Libraries/Lists/MetroListView.js b/Libraries/Lists/MetroListView.js index c8d7a45a662a2c..1d59dba8d16582 100644 --- a/Libraries/Lists/MetroListView.js +++ b/Libraries/Lists/MetroListView.js @@ -138,6 +138,7 @@ class MetroListView extends React.Component { } render() { return ( + // $FlowFixMe Found when typing ListView { } else { invariant(!props.sections, 'Cannot have both sections and items props.'); return { + // $FlowFixMe Found when typing ListView ds: state.ds.cloneWithRows(props.items), sectionHeaderData, }; diff --git a/Libraries/Lists/SectionList.js b/Libraries/Lists/SectionList.js index 17a4f84711e0ab..9d7d2eb8195d54 100644 --- a/Libraries/Lists/SectionList.js +++ b/Libraries/Lists/SectionList.js @@ -284,6 +284,7 @@ class SectionList> extends React.PureComponent< */ recordInteraction() { const listRef = this._wrapperListRef && this._wrapperListRef.getListRef(); + // $FlowFixMe Found when typing ListView listRef && listRef.recordInteraction(); }