Convert from React.createClass to ES6 classes

Reviewed By: cpojer

Differential Revision: D3619143

fbshipit-source-id: e14e81468d467437ee3d79c34c34b7780a46ca1c

ReactAndroid/src/androidTest/js/CatalystRootViewTestModule.js

@@ -15,14 +15,15 @@ var React = require('React');
 var Recording = require('NativeModules').Recording;
 var View = require('View');
 
-var CatalystRootViewTestApp = React.createClass({
-  componentWillUnmount: function() {
+class CatalystRootViewTestApp extends React.Component {
+  componentWillUnmount() {
     Recording.record('RootComponentWillUnmount');
-  },
-  render: function() {
+  }
+
+  render() {
     return <View collapsable={false} style={{alignSelf: 'stretch'}} />;
-  },
-});
+  }
+}
 
 module.exports = {
   CatalystRootViewTestApp: CatalystRootViewTestApp,

ReactAndroid/src/androidTest/js/DatePickerDialogTestModule.js

@@ -17,11 +17,11 @@ var React = require('React');
 var RecordingModule = require('NativeModules').DatePickerDialogRecordingModule;
 var View = require('View');
 
-var DatePickerDialogTestApp = React.createClass({
-  render: function() {
+class DatePickerDialogTestApp extends React.Component {
+  render() {
     return (<View />);
-  },
-});
+  }
+}
 
 var DatePickerDialogTestModule = {
   DatePickerDialogTestApp: DatePickerDialogTestApp,

ReactAndroid/src/androidTest/js/InitialPropsTestApp.js

@@ -15,13 +15,14 @@ var React = require('React');
 var RecordingModule = require('NativeModules').InitialPropsRecordingModule;
 var Text = require('Text');
 
-var InitialPropsTestApp = React.createClass({
-  componentDidMount: function() {
+class InitialPropsTestApp extends React.Component {
+  componentDidMount() {
     RecordingModule.recordProps(this.props);
-  },
-  render: function() {
+  }
+
+  render() {
     return <Text>dummy</Text>;
   }
-});
+}
 
 module.exports = InitialPropsTestApp;

ReactAndroid/src/androidTest/js/JSResponderTestApp.js

@@ -17,16 +17,18 @@ var Text = require('Text');
 var PanResponder = require('PanResponder');
 var ScrollView = require('ScrollView');
 
-var JSResponderTestApp = React.createClass({
-  _handleMoveShouldSetPanResponder: function(e, gestureState) {
+class JSResponderTestApp extends React.Component {
+  _handleMoveShouldSetPanResponder = (e, gestureState) => {
     return Math.abs(gestureState.dx) > 30;
-  },
-  componentWillMount: function() {
+  };
+
+  componentWillMount() {
     this.panGesture = PanResponder.create({
       onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
     });
-  },
-  render: function() {
+  }
+
+  render() {
     var views = [];
     for (var i = 0; i < 100; i++) {
       views[i] = (
@@ -45,8 +47,8 @@ var JSResponderTestApp = React.createClass({
         </ScrollView>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

ReactAndroid/src/androidTest/js/LayoutEventsTestApp.js

@@ -16,20 +16,20 @@ var View = require('View');
 
 var RecordingModule = require('NativeModules').Recording;
 
-var LayoutEventsTestApp = React.createClass({
-  handleOnLayout: function(e) {
+class LayoutEventsTestApp extends React.Component {
+  handleOnLayout = (e) => {
     var layout = e.nativeEvent.layout;
     RecordingModule.record(layout.x + ',' + layout.y + '-' + layout.width + 'x' + layout.height);
-  },
+  };
 
-  render: function() {
+  render() {
     return (
         <View
             onLayout={this.handleOnLayout}
             testID="container"
             style={{left: 10, top: 10, width: 100, height: 100}}/>
     );
-  },
-});
+  }
+}
 
 module.exports = LayoutEventsTestApp;

ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js

@@ -50,14 +50,15 @@ var styles = StyleSheet.create({
 
 var A, B, C, D;
 
-var MeasureLayoutTestApp = React.createClass({
-  componentDidMount: function() {
+class MeasureLayoutTestApp extends React.Component {
+  componentDidMount() {
     A = ReactNative.findNodeHandle(this.refs.A);
     B = ReactNative.findNodeHandle(this.refs.B);
     C = ReactNative.findNodeHandle(this.refs.C);
     D = ReactNative.findNodeHandle(this.refs.D);
-  },
-  render: function() {
+  }
+
+  render() {
     return (
       <View ref="A" style={styles.A} collapsable={false}>
         <View ref="B" style={styles.B} collapsable={false}>
@@ -66,8 +67,8 @@ var MeasureLayoutTestApp = React.createClass({
         <View ref="D" style={styles.D} collapsable={false} />
       </View>
     );
-  },
-});
+  }
+}
 
 function shouldNotCallThisCallback() {
   assertEquals(false, true);

ReactAndroid/src/androidTest/js/MultitouchHandlingTestAppModule.js

@@ -17,31 +17,35 @@ var StyleSheet = require('StyleSheet');
 var TouchEventUtils = require('fbjs/lib/TouchEventUtils');
 var View = require('View');
 
-var TouchTestApp = React.createClass({
-  handleStartShouldSetResponder: function(e) {
+class TouchTestApp extends React.Component {
+  handleStartShouldSetResponder = (e) => {
     return true;
-  },
-  handleOnResponderMove: function(e) {
+  };
+
+  handleOnResponderMove = (e) => {
     e = TouchEventUtils.extractSingleTouch(e.nativeEvent);
     Recording.record('move;' + e.touches.length);
-  },
-  handleResponderStart: function(e) {
+  };
+
+  handleResponderStart = (e) => {
     e = TouchEventUtils.extractSingleTouch(e.nativeEvent);
     if (e.touches) {
       Recording.record('start;' + e.touches.length);
     } else {
       Recording.record('start;ExtraPointer');
     }
-  },
-  handleResponderEnd: function(e) {
+  };
+
+  handleResponderEnd = (e) => {
     e = TouchEventUtils.extractSingleTouch(e.nativeEvent);
     if (e.touches) {
       Recording.record('end;' + e.touches.length);
     } else {
       Recording.record('end;ExtraPointer');
     }
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <View
         style={styles.container}
@@ -52,8 +56,8 @@ var TouchTestApp = React.createClass({
         collapsable={false}
       />
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

ReactAndroid/src/androidTest/js/PickerAndroidTestModule.js

@@ -20,18 +20,19 @@ var View = require('View');
 var Item = Picker.Item;
 
 var appInstance;
-var PickerAndroidTestApp = React.createClass({
-  componentWillMount: function() {
+
+class PickerAndroidTestApp extends React.Component {
+  state = {
+    selected: 1,
+    mode: 'dropdown',
+    style: {},
+  };
+
+  componentWillMount() {
     appInstance = this;
-  },
-  getInitialState: function() {
-    return {
-      selected: 1,
-      mode: 'dropdown',
-      style: {},
-    };
-  },
-  render: function() {
+  }
+
+  render() {
     return (
       <View collapsable={false}>
         <Picker
@@ -62,12 +63,13 @@ var PickerAndroidTestApp = React.createClass({
         </Picker>
       </View>
     );
-  },
-  onValueChange: function(value) {
+  }
+
+  onValueChange = (value) => {
     this.setState({selected: value});
     RecordingModule.recordSelection(value);
-  },
-});
+  };
+}
 
 var PickerAndroidTestModule = {
   PickerAndroidTestApp: PickerAndroidTestApp,

ReactAndroid/src/androidTest/js/ProgressBarTestModule.js

@@ -18,8 +18,10 @@ var View = require('View');
 
 var renderApplication = require('renderApplication');
 
-var ProgressBarSampleApp = React.createClass({
-  render: function() {
+class ProgressBarSampleApp extends React.Component {
+  state = {};
+
+  render() {
     return (
       <View>
         <ProgressBar styleAttr="Horizontal" testID="Horizontal"/>
@@ -34,11 +36,8 @@ var ProgressBarSampleApp = React.createClass({
         </View>
       </View>
     );
-  },
-  getInitialState: function() {
-    return {};
-  },
-});
+  }
+}
 
 var ProgressBarTestModule = {
   renderProgressBarApplication: function(rootTag) {

ReactAndroid/src/androidTest/js/ScrollViewTestModule.js

@@ -26,8 +26,8 @@ var NUM_ITEMS = 100;
 
 var scrollViewApp;
 
-var Item = React.createClass({
-  render: function() {
+class Item extends React.Component {
+  render() {
     return (
       <TouchableWithoutFeedback onPress={this.props.onPress}>
         <View style={styles.item_container}>
@@ -35,8 +35,8 @@ var Item = React.createClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
-});
+  }
+}
 
 var getInitialState = function() {
   var data = [];

ReactAndroid/src/androidTest/js/ShareTestModule.js

@@ -17,11 +17,11 @@ var RecordingModule = require('NativeModules').ShareRecordingModule;
 var Share = require('Share');
 var View = require('View');
 
-var ShareTestApp = React.createClass({
-  render: function() {
+class ShareTestApp extends React.Component {
+  render() {
     return (<View />);
-  },
-});
+  }
+}
 
 var ShareTestModule = {
   ShareTestApp: ShareTestApp,

ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js

@@ -22,8 +22,8 @@ var requireNativeComponent = require('requireNativeComponent');
 
 var ClippableView = requireNativeComponent('ClippableView', null);
 
-var ClippingSample1 = React.createClass({
-  render: function() {
+class ClippingSample1 extends React.Component {
+  render() {
     var styles = sample1Styles;
     return (
       <View>
@@ -37,7 +37,7 @@ var ClippingSample1 = React.createClass({
       </View>
     );
   }
-});
+}
 
 var sample1Styles = StyleSheet.create({
   outer: {
@@ -73,8 +73,8 @@ var sample1Styles = StyleSheet.create({
   },
 });
 
-var ClippingSample2 = React.createClass({
-  render: function() {
+class ClippingSample2 extends React.Component {
+  render() {
     var styles = sample2Styles;
     return (
       <View>
@@ -92,7 +92,7 @@ var ClippingSample2 = React.createClass({
       </View>
     );
   }
-});
+}
 
 var sample2Styles = StyleSheet.create({
   outer: {
@@ -132,8 +132,8 @@ var sample2Styles = StyleSheet.create({
   },
 });
 
-var UpdatingSample1 = React.createClass({
-  render: function() {
+class UpdatingSample1 extends React.Component {
+  render() {
     var styles = updating1Styles;
     var inner1Styles = [styles.inner1, {height: this.props.update1 ? 200 : 100}];
     var inner2Styles = [styles.inner2, {top: this.props.update2 ? 200 : 50}];
@@ -146,7 +146,7 @@ var UpdatingSample1 = React.createClass({
       </View>
     );
   }
-});
+}
 
 var updating1Styles = StyleSheet.create({
   outer: {
@@ -172,8 +172,8 @@ var updating1Styles = StyleSheet.create({
   }
 });
 
-var UpdatingSample2 = React.createClass({
-  render: function() {
+class UpdatingSample2 extends React.Component {
+  render() {
     var styles = updating2Styles;
     var outerStyles = [styles.outer, {height: this.props.update ? 200 : 100}];
     return (
@@ -184,7 +184,7 @@ var UpdatingSample2 = React.createClass({
       </View>
     );
   }
-});
+}
 
 var updating2Styles = StyleSheet.create({
   outer: {
@@ -201,8 +201,8 @@ var updating2Styles = StyleSheet.create({
   },
 });
 
-var ScrollViewTest = React.createClass({
-  render: function() {
+class ScrollViewTest extends React.Component {
+  render() {
     var styles = scrollTestStyles;
     var children = [];
     for (var i = 0; i < 4; i++) {
@@ -230,7 +230,7 @@ var ScrollViewTest = React.createClass({
       </ScrollView>
     );
   }
-});
+}
 
 var scrollTestStyles = StyleSheet.create({
   scrollView: {
@@ -263,25 +263,27 @@ var scrollTestStyles = StyleSheet.create({
 
 
 var appInstance = null;
-var SubviewsClippingTestApp = React.createClass({
-  componentWillMount: function() {
+
+class SubviewsClippingTestApp extends React.Component {
+  state = {};
+
+  componentWillMount() {
     appInstance = this;
-  },
-  setComponent: function(component) {
+  }
+
+  setComponent = (component) => {
     this.setState({component: component});
-  },
-  getInitialState: function() {
-    return {};
-  },
-  render: function() {
+  };
+
+  render() {
     var component = this.state.component;
     return (
       <View>
         {component}
       </View>
     );
-  },
-});
+  }
+}
 
 var SubviewsClippingTestModule = {
   App: SubviewsClippingTestApp,

ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js

@@ -20,14 +20,12 @@ var Text = require('Text');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 var View = require('View');
 
-var Row = React.createClass({
-  getInitialState: function() {
-    return {
-      clicks: 0,
-    };
-  },
+class Row extends React.Component {
+  state = {
+    clicks: 0,
+  };
 
-  render: function() {
+  render() {
     return (
       <TouchableWithoutFeedback onPress={this._onPress}>
         <View>
@@ -37,26 +35,25 @@ var Row = React.createClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
+  }
 
-  _onPress: function() {
+  _onPress = () => {
     this.setState({clicks: this.state.clicks + 1});
-  },
-});
+  };
+}
 
 var app = null;
-var SwipeRefreshLayoutTestApp = React.createClass({
-  getInitialState: function() {
-    return {
-      rows: 2,
-    };
-  },
 
-  componentDidMount: function() {
+class SwipeRefreshLayoutTestApp extends React.Component {
+  state = {
+    rows: 2,
+  };
+
+  componentDidMount() {
     app = this;
-  },
+  }
 
-  render: function() {
+  render() {
     var rows = [];
     for (var i = 0; i < this.state.rows; i++) {
       rows.push(<Row key={i} />);
@@ -74,8 +71,8 @@ var SwipeRefreshLayoutTestApp = React.createClass({
         {rows}
       </ScrollView>
     );
-  },
-});
+  }
+}
 
 var SwipeRefreshLayoutTestModule = {
   SwipeRefreshLayoutTestApp,

ReactAndroid/src/androidTest/js/TestIdTestModule.js

@@ -34,8 +34,8 @@ var WebView = require('WebView');
  * - The app renders fine
  * - The testID property is passed to the native views
  */
-var TestIdTestApp = React.createClass({
-  render: function() {
+class TestIdTestApp extends React.Component {
+  render() {
     return (
       <View>
 
@@ -124,8 +124,8 @@ var TestIdTestApp = React.createClass({
 
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   base: {

ReactAndroid/src/androidTest/js/TextInputTestModule.js

@@ -76,12 +76,12 @@ class TokenizedTextExample extends React.Component {
   }
 }
 
-var TextInputTestApp = React.createClass({
-  componentDidMount: function() {
+class TextInputTestApp extends React.Component {
+  componentDidMount() {
     app = this;
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <View style={styles.container}>
         <TextInput
@@ -131,8 +131,8 @@ var TextInputTestApp = React.createClass({
         <TokenizedTextExample />
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

ReactAndroid/src/androidTest/js/TimePickerDialogTestModule.js

@@ -17,11 +17,11 @@ var React = require('React');
 var RecordingModule = require('NativeModules').TimePickerDialogRecordingModule;
 var View = require('View');
 
-var TimePickerDialogTestApp = React.createClass({
-  render: function() {
+class TimePickerDialogTestApp extends React.Component {
+  render() {
     return <View />;
-  },
-});
+  }
+}
 
 var TimePickerDialogTestModule = {
   TimePickerDialogTestApp: TimePickerDialogTestApp,

ReactAndroid/src/androidTest/js/TouchBubblingTestAppModule.js

@@ -18,11 +18,12 @@ var StyleSheet = require('StyleSheet');
 var View = require('View');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 
-var TouchBubblingTestApp = React.createClass({
-  handlePress: function(record) {
+class TouchBubblingTestApp extends React.Component {
+  handlePress = (record) => {
     Recording.record(record);
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <View style={styles.container}>
         <TouchableWithoutFeedback onPress={this.handlePress.bind(this, 'outer')} testID="D">
@@ -40,8 +41,8 @@ var TouchBubblingTestApp = React.createClass({
         </TouchableWithoutFeedback>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

ReactAndroid/src/androidTest/js/ViewRenderingTestModule.js

@@ -25,42 +25,41 @@ var styles = StyleSheet.create({
   },
 });
 
-var ViewSampleApp = React.createClass({
-  render: function() {
+class ViewSampleApp extends React.Component {
+  state = {};
+
+  render() {
     return (
       <View style={styles.view} collapsable={false}/>
     );
-  },
-  getInitialState: function() {
-    return {};
-  },
-});
+  }
+}
 
 var updateMargins;
-var MarginSampleApp = React.createClass({
-  getInitialState: function() {
-    return {margin: 10};
-  },
-  render: function() {
+
+class MarginSampleApp extends React.Component {
+  state = {margin: 10};
+
+  render() {
     updateMargins = this.setState.bind(this, {margin: 15});
     return (
       <View style={{margin: this.state.margin, marginLeft: 20}} collapsable={false}/>
     )
-  },
-});
+  }
+}
 
-var BorderSampleApp = React.createClass({
-  render: function() {
+class BorderSampleApp extends React.Component {
+  render() {
     return (
       <View style={{borderLeftWidth: 20, borderWidth: 5, backgroundColor: 'blue'}} collapsable={false}>
         <View style={{backgroundColor: 'red', width: 20, height: 20}} collapsable={false}/>
       </View>
     );
   }
-});
+}
 
-var TransformSampleApp = React.createClass({
-  render: function() {
+class TransformSampleApp extends React.Component {
+  render() {
     var style = {
       transform: [
         {translateX: 20},
@@ -74,7 +73,7 @@ var TransformSampleApp = React.createClass({
       <View style={style} collapsable={false}/>
     );
   }
-});
+}
 
 var ViewRenderingTestModule = {
   renderViewApplication: function(rootTag) {