Flowtype ListView

Reviewed By: yungsters Differential Revision: D7985836 fbshipit-source-id: 6e0944a8d2fb85aabc34dfd3125a07b208749f21
facebook · May 14, 2018 · 4b1ecb6 · 4b1ecb6
1 parent af6e2eb
commit 4b1ecb6
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 5 deletions.
diff --git 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
@@ -117,9 +117,11 @@ class SwipeableListView extends React.Component<Props, State> {
 
   render(): React.Node {
     return (
+      // $FlowFixMe Found when typing ListView
       <ListView
         {...this.props}
         ref={ref => {
+          // $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
@@ -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}
         />
       </View>

diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
@@ -346,6 +346,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     viewPosition?: number,
   }) {
     if (this._listRef) {
+      // $FlowFixMe Found when typing ListView
       this._listRef.scrollToIndex(params);
     }
   }
@@ -362,6 +363,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     viewPosition?: number,
   }) {
     if (this._listRef) {
+      // $FlowFixMe Found when typing ListView
       this._listRef.scrollToItem(params);
     }
   }
@@ -373,6 +375,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, 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<ItemT> extends React.PureComponent<Props<ItemT>, void> {
    */
   recordInteraction() {
     if (this._listRef) {
+      // $FlowFixMe Found when typing ListView
       this._listRef.recordInteraction();
     }
   }
@@ -395,6 +399,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
    */
   flashScrollIndicators() {
     if (this._listRef) {
+      // $FlowFixMe Found when typing ListView
       this._listRef.flashScrollIndicators();
     }
   }
@@ -404,12 +409,14 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, 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<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _hasWarnedLegacy = false;
-  _listRef: null | VirtualizedList | ListView;
+  _listRef: null | VirtualizedList | ListView | MetroListView;
   _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
 
   _captureRef = ref => {

diff --git a/Libraries/Lists/ListView/InternalListViewType.js 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<Props> extends React.Component<Props> {
+  static DataSource = ListViewDataSource;
+  setNativeProps(props: Object) {}
+  flashScrollIndicators() {}
+  getScrollResponder(): any {}
+  getScrollableNode(): any {}
+  // $FlowFixMe
+  getMetrics(): Object {}
+  scrollTo(...args: Array<mixed>) {}
+  scrollToEnd(options?: ?{animated?: ?boolean}) {}
+}
+
+module.exports = InternalListViewType;
diff --git 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<number>,
+  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<Object>),
   _sentEndForContentLength: (null: ?number),
-  _scrollComponent: (null: any),
+  _scrollComponent: (null: ?React.ElementRef<typeof ScrollView>),
   _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<InternalListViewType<Props>>);
diff --git a/Libraries/Lists/MetroListView.js b/Libraries/Lists/MetroListView.js
@@ -138,6 +138,7 @@ class MetroListView extends React.Component<Props, $FlowFixMeState> {
   }
   render() {
     return (
+      // $FlowFixMe Found when typing ListView
       <ListView
         {...this.props}
         dataSource={this.state.ds}
@@ -170,6 +171,7 @@ class MetroListView extends React.Component<Props, $FlowFixMeState> {
     } 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
@@ -284,6 +284,7 @@ class SectionList<SectionT: SectionBase<any>> extends React.PureComponent<
    */
   recordInteraction() {
     const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    // $FlowFixMe Found when typing ListView
     listRef && listRef.recordInteraction();
   }