Removing createReactClass from ListView*Example.js (#21582)

Summary:
Related to #21581

Remove createReactClass from ListViewExample and ListViewGridLayoutExample

- All flow tests succeed.
- Run RNTester app, go to ListView component, scroll, expand rows, everything works.
- Run RNTester app, go to ListViewGridLayout component, scroll, click on icons, everything works.

[GENERAL] [ENHANCEMENT] [ListViewExample.js] - rm createReactClass
[GENERAL] [ENHANCEMENT] [ListViewGridLayoutExample.js] - rm createReactClass
Pull Request resolved: https://github.com/facebook/react-native/pull/21582

Differential Revision: D10274350

Pulled By: RSNara

fbshipit-source-id: 4ea505a0f9661300309d6b9457202085293333b5

RNTester/js/ListViewExample.js

@@ -10,34 +10,45 @@
 
 'use strict';
 
-var React = require('react');
-var createReactClass = require('create-react-class');
-var ReactNative = require('react-native');
-var {Image, ListView, TouchableHighlight, StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  Image,
+  ListView,
+  TouchableHighlight,
+  StyleSheet,
+  Text,
+  View,
+} = ReactNative;
+const ListViewDataSource = require('ListViewDataSource');
+const RNTesterPage = require('./RNTesterPage');
 
-var RNTesterPage = require('./RNTesterPage');
+import type {RNTesterProps} from 'RNTesterTypes';
 
-var ListViewSimpleExample = createReactClass({
-  displayName: 'ListViewSimpleExample',
-  statics: {
-    title: '<ListView>',
-    description: 'Performant, scrollable list of data.',
-  },
+type State = {|
+  dataSource: ListViewDataSource,
+|};
 
-  getInitialState: function() {
-    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-    return {
-      dataSource: ds.cloneWithRows(this._genRows({})),
-    };
-  },
+class ListViewSimpleExample extends React.Component<RNTesterProps, State> {
+  static title = '<ListView>';
+  static description = 'Performant, scrollable list of data.';
 
-  _pressData: ({}: {[key: number]: boolean}),
+  state = {
+    dataSource: this.getInitialDataSource(),
+  };
 
-  UNSAFE_componentWillMount: function() {
+  _pressData: {[key: number]: boolean} = {};
+
+  getInitialDataSource() {
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    return ds.cloneWithRows(this._genRows({}));
+  }
+
+  UNSAFE_componentWillMount() {
     this._pressData = {};
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <RNTesterPage
         title={this.props.navigator ? null : '<ListView>'}
@@ -50,14 +61,14 @@ var ListViewSimpleExample = createReactClass({
         />
       </RNTesterPage>
     );
-  },
+  }
 
-  _renderRow: function(
+  _renderRow = (
     rowData: string,
     sectionID: number,
     rowID: number,
     highlightRow: (sectionID: number, rowID: number) => void,
-  ) {
+  ) => {
     var rowHash = Math.abs(hashCode(rowData));
     var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
@@ -76,27 +87,27 @@ var ListViewSimpleExample = createReactClass({
         </View>
       </TouchableHighlight>
     );
-  },
+  };
 
-  _genRows: function(pressData: {[key: number]: boolean}): Array<string> {
+  _genRows(pressData: {[key: number]: boolean}): Array<string> {
     var dataBlob = [];
     for (var ii = 0; ii < 100; ii++) {
       var pressedText = pressData[ii] ? ' (pressed)' : '';
       dataBlob.push('Row ' + ii + pressedText);
     }
     return dataBlob;
-  },
+  }
 
-  _pressRow: function(rowID: number) {
+  _pressRow = (rowID: number) => {
     this._pressData[rowID] = !this._pressData[rowID];
     this.setState({
       dataSource: this.state.dataSource.cloneWithRows(
         this._genRows(this._pressData),
       ),
     });
-  },
+  };
 
-  _renderSeparator: function(
+  _renderSeparator(
     sectionID: number,
     rowID: number,
     adjacentRowHighlighted: boolean,
@@ -110,8 +121,8 @@ var ListViewSimpleExample = createReactClass({
         }}
       />
     );
-  },
-});
+  }
+}
 
 var THUMB_URLS = [
   require('./Thumbnails/like.png'),

RNTester/js/ListViewGridLayoutExample.js

@@ -10,10 +10,19 @@
 
 'use strict';
 
-var React = require('react');
-var createReactClass = require('create-react-class');
-var ReactNative = require('react-native');
-var {Image, ListView, TouchableHighlight, StyleSheet, Text, View} = ReactNative;
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  Image,
+  ListView,
+  TouchableHighlight,
+  StyleSheet,
+  Text,
+  View,
+} = ReactNative;
+const ListViewDataSource = require('ListViewDataSource');
+
+import type {RNTesterProps} from 'RNTesterTypes';
 
 var THUMB_URLS = [
   require('./Thumbnails/like.png'),
@@ -30,28 +39,30 @@ var THUMB_URLS = [
   require('./Thumbnails/victory.png'),
 ];
 
-var ListViewGridLayoutExample = createReactClass({
-  displayName: 'ListViewGridLayoutExample',
+type State = {|
+  dataSource: ListViewDataSource,
+|};
 
-  statics: {
-    title: '<ListView> - Grid Layout',
-    description: 'Flexbox grid layout.',
-  },
+class ListViewGridLayoutExample extends React.Component<RNTesterProps, State> {
+  static title = '<ListView> - Grid Layout';
+  static description = 'Flexbox grid layout.';
 
-  getInitialState: function() {
-    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-    return {
-      dataSource: ds.cloneWithRows(this._genRows({})),
-    };
-  },
+  state = {
+    dataSource: this.getInitialDataSource(),
+  };
 
-  _pressData: ({}: {[key: number]: boolean}),
+  getInitialDataSource() {
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    return ds.cloneWithRows(this._genRows({}));
+  }
 
-  UNSAFE_componentWillMount: function() {
+  _pressData: {[key: number]: boolean} = {};
+
+  UNSAFE_componentWillMount() {
     this._pressData = {};
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       // ListView wraps ScrollView and so takes on its properties.
       // With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.
@@ -64,9 +75,9 @@ var ListViewGridLayoutExample = createReactClass({
         renderRow={this._renderRow}
       />
     );
-  },
+  }
 
-  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
+  _renderRow = (rowData: string, sectionID: number, rowID: number) => {
     var rowHash = Math.abs(hashCode(rowData));
     var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
@@ -81,26 +92,26 @@ var ListViewGridLayoutExample = createReactClass({
         </View>
       </TouchableHighlight>
     );
-  },
+  };
 
-  _genRows: function(pressData: {[key: number]: boolean}): Array<string> {
+  _genRows(pressData: {[key: number]: boolean}): Array<string> {
     var dataBlob = [];
     for (var ii = 0; ii < 100; ii++) {
       var pressedText = pressData[ii] ? ' (X)' : '';
       dataBlob.push('Cell ' + ii + pressedText);
     }
     return dataBlob;
-  },
+  }
 
-  _pressRow: function(rowID: number) {
+  _pressRow = (rowID: number) => {
     this._pressData[rowID] = !this._pressData[rowID];
     this.setState({
       dataSource: this.state.dataSource.cloneWithRows(
         this._genRows(this._pressData),
       ),
     });
-  },
-});
+  };
+}
 
 /* eslint no-bitwise: 0 */
 var hashCode = function(str) {