SwipeableListView: Remove PropTypes (#21298)

Summary:
This PR removes the remaining proptypes from `SwipeableListView`, and cleans up its flow types a bit. Its RNTester example has also been cleaned up, and turned into an ES6 class.

`ListView`'s props have been exported so this can use it.
Pull Request resolved: https://github.com/facebook/react-native/pull/21298

Reviewed By: TheSavior

Differential Revision: D10085505

Pulled By: RSNara

fbshipit-source-id: 20300d582f33b83dfc13cc5ddc71de5ab44bb90b

Libraries/Experimental/SwipeableRow/SwipeableListView.js

@@ -11,30 +11,53 @@
 'use strict';
 
 const ListView = require('ListView');
-const PropTypes = require('prop-types');
 const React = require('React');
 const SwipeableListViewDataSource = require('SwipeableListViewDataSource');
 const SwipeableRow = require('SwipeableRow');
 
-type DefaultProps = {
-  bounceFirstRowOnMount: boolean,
-  renderQuickActions: Function,
-};
+type ListViewProps = React.ElementConfig<typeof ListView>;
 
-type Props = {
+type Props = $ReadOnly<{|
+  ...ListViewProps,
+
+  /**
+   * To alert the user that swiping is possible, the first row can bounce
+   * on component mount.
+   */
   bounceFirstRowOnMount: boolean,
+  /**
+   * Use `SwipeableListView.getNewDataSource()` to get a data source to use,
+   * then use it just like you would a normal ListView data source
+   */
   dataSource: SwipeableListViewDataSource,
+  /**
+   * Maximum distance to open to after a swipe
+   */
   maxSwipeDistance:
     | number
-    | ((rowData: any, sectionID: string, rowID: string) => number),
+    | ((rowData: Object, sectionID: string, rowID: string) => number),
   onScroll?: ?Function,
-  renderRow: Function,
-  renderQuickActions: Function,
-};
+  /**
+   * Callback method to render the swipeable view
+   */
+  renderRow: (
+    rowData: Object,
+    sectionID: string,
+    rowID: string,
+  ) => React.Element<any>,
+  /**
+   * Callback method to render the view that will be unveiled on swipe
+   */
+  renderQuickActions: (
+    rowData: Object,
+    sectionID: string,
+    rowID: string,
+  ) => React.Element<any>,
+|}>;
 
-type State = {
+type State = {|
   dataSource: Object,
-};
+|};
 
 /**
  * A container component that renders multiple SwipeableRow's in a ListView
@@ -70,26 +93,6 @@ class SwipeableListView extends React.Component<Props, State> {
     });
   }
 
-  static propTypes = {
-    /**
-     * To alert the user that swiping is possible, the first row can bounce
-     * on component mount.
-     */
-    bounceFirstRowOnMount: PropTypes.bool.isRequired,
-    /**
-     * Use `SwipeableListView.getNewDataSource()` to get a data source to use,
-     * then use it just like you would a normal ListView data source
-     */
-    dataSource: PropTypes.instanceOf(SwipeableListViewDataSource).isRequired,
-    // Maximum distance to open to after a swipe
-    maxSwipeDistance: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
-      .isRequired,
-    // Callback method to render the swipeable view
-    renderRow: PropTypes.func.isRequired,
-    // Callback method to render the view that will be unveiled on swipe
-    renderQuickActions: PropTypes.func.isRequired,
-  };
-
   static defaultProps = {
     bounceFirstRowOnMount: false,
     renderQuickActions: () => null,

RNTester/js/Shared/RNTesterTypes.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {ComponentType} from 'React';
+
+export type RNTesterProps = $ReadOnly<{|
+  navigator?: ?$ReadOnlyArray<
+    $ReadOnly<{|
+      title: string,
+      component: ComponentType<any>,
+      backButtonTitle: string,
+      passProps: any,
+    |}>,
+  >,
+|}>;

RNTester/js/SwipeableListViewExample.js

@@ -10,10 +10,8 @@
 
 'use strict';
 
-var React = require('react');
-var createReactClass = require('create-react-class');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const {
   Image,
   SwipeableListView,
   TouchableHighlight,
@@ -21,31 +19,33 @@ var {
   Text,
   View,
   Alert,
-} = ReactNative;
+} = require('react-native');
 
-var RNTesterPage = require('./RNTesterPage');
+const RNTesterPage = require('./RNTesterPage');
 
-var SwipeableListViewSimpleExample = createReactClass({
-  displayName: 'SwipeableListViewSimpleExample',
-  statics: {
-    title: '<SwipeableListView>',
-    description: 'Performant, scrollable, swipeable list of data.',
-  },
+import type {RNTesterProps} from 'RNTesterTypes';
+import type {SwipeableListViewDataSource} from 'SwipeableListViewDataSource';
 
-  getInitialState: function() {
-    var ds = SwipeableListView.getNewDataSource();
-    return {
-      dataSource: ds.cloneWithRowsAndSections(...this._genDataSource({})),
-    };
-  },
+type State = {|
+  dataSource: SwipeableListViewDataSource,
+|};
 
-  _pressData: ({}: {[key: number]: boolean}),
+class SwipeableListViewSimpleExample extends React.Component<
+  RNTesterProps,
+  State,
+> {
+  static title = '<SwipeableListView>';
+  static description = 'Performant, scrollable, swipeable list of data.';
 
-  UNSAFE_componentWillMount: function() {
-    this._pressData = {};
-  },
+  state = {
+    dataSource: SwipeableListView.getNewDataSource().cloneWithRowsAndSections(
+      ...this._genDataSource({}),
+    ),
+  };
 
-  render: function() {
+  _pressData: {[key: number]: boolean} = {};
+
+  render(): React.Node {
     return (
       <RNTesterPage
         title={this.props.navigator ? null : '<SwipeableListView>'}
@@ -78,16 +78,11 @@ var SwipeableListViewSimpleExample = createReactClass({
         />
       </RNTesterPage>
     );
-  },
+  }
 
-  _renderRow: function(
-    rowData: Object,
-    sectionID: number,
-    rowID: number,
-    highlightRow: (sectionID: number, rowID: number) => void,
-  ) {
-    var rowHash = Math.abs(hashCode(rowData.id));
-    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
+  _renderRow(rowData: Object, sectionID: string, rowID: string) {
+    const rowHash = Math.abs(hashCode(rowData.id));
+    const imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
       <TouchableHighlight onPress={() => {}}>
         <View>
@@ -100,31 +95,32 @@ var SwipeableListViewSimpleExample = createReactClass({
         </View>
       </TouchableHighlight>
     );
-  },
+  }
 
-  _genDataSource: function(pressData: {[key: number]: boolean}): Array<any> {
-    var dataBlob = {};
-    var sectionIDs = ['Section 0'];
-    var rowIDs = [[]];
+  _genDataSource(pressData: {[key: number]: boolean}) {
+    const dataBlob = {};
+    const sectionIDs = ['Section 0'];
+    const rowIDs = [[]];
     /**
      * dataBlob example below:
-      {
-        'Section 0': {
-          'Row 0': {
-            id: '0',
-            text: 'row 0 text'
-          },
-          'Row 1': {
-            id: '1',
-            text: 'row 1 text'
-          }
-        }
-      }
-    */
-    // only one section in this example
+     *   {
+     *     'Section 0': {
+     *       'Row 0': {
+     *         id: '0',
+     *         text: 'row 0 text'
+     *       },
+     *       'Row 1': {
+     *         id: '1',
+     *         text: 'row 1 text'
+     *       }
+     *     }
+     *   }
+     */
+
+    // Only one section in this example
     dataBlob['Section 0'] = {};
-    for (var ii = 0; ii < 100; ii++) {
-      var pressedText = pressData[ii] ? ' (pressed)' : '';
+    for (let ii = 0; ii < 100; ii++) {
+      const pressedText = pressData[ii] ? ' (pressed)' : '';
       dataBlob[sectionIDs[0]]['Row ' + ii] = {
         id: 'Row ' + ii,
         text: 'Row ' + ii + pressedText,
@@ -132,11 +128,11 @@ var SwipeableListViewSimpleExample = createReactClass({
       rowIDs[0].push('Row ' + ii);
     }
     return [dataBlob, sectionIDs, rowIDs];
-  },
+  }
 
-  _renderSeperator: function(
-    sectionID: number,
-    rowID: number,
+  _renderSeperator(
+    sectionID: string,
+    rowID: string,
     adjacentRowHighlighted: boolean,
   ) {
     return (
@@ -148,10 +144,10 @@ var SwipeableListViewSimpleExample = createReactClass({
         }}
       />
     );
-  },
-});
+  }
+}
 
-var THUMB_URLS = [
+const THUMB_URLS = [
   require('./Thumbnails/like.png'),
   require('./Thumbnails/dislike.png'),
   require('./Thumbnails/call.png'),
@@ -165,19 +161,27 @@ var THUMB_URLS = [
   require('./Thumbnails/superlike.png'),
   require('./Thumbnails/victory.png'),
 ];
-var LOREM_IPSUM =
-  'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
 
-/* eslint no-bitwise: 0 */
-var hashCode = function(str) {
-  var hash = 15;
-  for (var ii = str.length - 1; ii >= 0; ii--) {
+const LOREM_IPSUM = [
+  'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix ',
+  'civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi ',
+  'adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ',
+  'ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam ',
+  'intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, ',
+  'putant invidunt reprehendunt ne qui.',
+].join('');
+
+/* eslint-disable no-bitwise */
+const hashCode = str => {
+  let hash = 15;
+  for (let ii = str.length - 1; ii >= 0; ii--) {
     hash = (hash << 5) - hash + str.charCodeAt(ii);
   }
   return hash;
 };
+/* eslint-enable no-bitwise */
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     justifyContent: 'center',