[createReactClass] from ReactAndroid/src/androidTest/js/UIManagerTestModule.js

ReactAndroid/src/androidTest/js/UIManagerTestModule.js

@@ -9,214 +9,248 @@
 
 'use strict';
 
-var BatchedBridge = require('BatchedBridge');
-var React = require('React');
-var StyleSheet = require('StyleSheet');
-var View = require('View');
-var Text = require('Text');
-
-var createReactClass = require('create-react-class');
-var renderApplication = require('renderApplication');
-
-var FlexTestApp = createReactClass({
-  displayName: 'FlexTestApp',
-  _styles: StyleSheet.create({
-    container: {
-      width: 200,
-      height: 200,
-      flexDirection: 'row',
-    },
-    child: {
-      flex: 1,
-    },
-    absolute: {
-      position: 'absolute',
-      top: 15,
-      left: 10,
-      width: 50,
-      height: 60,
-    },
-  }),
-  render: function() {
+const BatchedBridge = require('BatchedBridge');
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
+const Text = require('Text');
+
+const renderApplication = require('renderApplication');
+
+type FlexTestAppProps = $ReadOnly<{||}>;
+class FlexTestApp extends React.Component<FlexTestAppProps> {
+  render() {
     return (
       <View
-        style={this._styles.container}
+        style={FlexTestAppStyles.container}
         testID="container"
         collapsable={false}>
         <View
-          style={[this._styles.child, {backgroundColor: '#ff0000'}]}
+          style={[FlexTestAppStyles.child, FlexTestAppStyles.bgRed]}
           collapsable={false}
         />
         <View
-          style={[this._styles.child, {backgroundColor: '#0000ff'}]}
+          style={[FlexTestAppStyles.child, FlexTestAppStyles.bgBlue]}
           collapsable={false}
         />
       </View>
     );
+  }
+};
+
+const FlexTestAppStyles = StyleSheet.create({
+  container: {
+    width: 200,
+    height: 200,
+    flexDirection: 'row',
+  },
+  child: {
+    flex: 1,
+  },
+  absolute: {
+    position: 'absolute',
+    top: 15,
+    left: 10,
+    width: 50,
+    height: 60,
+  },
+  bgRed: {
+    backgroundColor: '#ff0000',
+  },
+  bgBlue: {
+    backgroundColor: '#0000ff',
   },
 });
 
-var FlexWithText = createReactClass({
-  displayName: 'FlexWithText',
-  _styles: StyleSheet.create({
-    container: {
-      flexDirection: 'column',
-      margin: 20,
-    },
-    row: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      height: 300,
-    },
-    inner: {
-      flex: 1,
-      margin: 10,
-    },
-  }),
-  render: function() {
+type FlexWithTextProps = $ReadOnly<{||}>;
+class FlexWithText extends React.Component<FlexWithTextProps> {
+  render() {
     return (
       <View
-        style={this._styles.container}
+        style={FlexWithTextStyles.container}
         testID="container"
         collapsable={false}>
-        <View style={this._styles.row} collapsable={false}>
-          <Text style={this._styles.inner}>Hello</Text>
-          <Text style={this._styles.inner}>World</Text>
+        <View style={FlexWithTextStyles.row} collapsable={false}>
+          <Text style={FlexWithTextStyles.inner}>Hello</Text>
+          <Text style={FlexWithTextStyles.inner}>World</Text>
         </View>
       </View>
     );
+  }
+};
+
+const FlexWithTextStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    margin: 20,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    height: 300,
+  },
+  inner: {
+    flex: 1,
+    margin: 10,
   },
 });
 
-var AbsolutePositionTestApp = createReactClass({
-  displayName: 'AbsolutePositionTestApp',
-  _styles: StyleSheet.create({
-    absolute: {
-      position: 'absolute',
-      top: 15,
-      left: 10,
-      width: 50,
-      height: 60,
-    },
-  }),
-  render: function() {
+type AbsolutePositionTestAppProps = $ReadOnly<{||}>;
+class AbsolutePositionTestApp extends React.Component<
+  AbsolutePositionTestAppProps,
+  > {
+  render() {
     return (
       <View
-        style={this._styles.absolute}
+        style={AbsolutePositionTestAppStyles.absolute}
         testID="absolute"
         collapsable={false}
       />
     );
+  }
+};
+
+const AbsolutePositionTestAppStyles = StyleSheet.create({
+  absolute: {
+    position: 'absolute',
+    top: 15,
+    left: 10,
+    width: 50,
+    height: 60,
   },
 });
 
-var AbsolutePositionBottomRightTestApp = createReactClass({
-  displayName: 'AbsolutePositionBottomRightTestApp',
-  _styles: StyleSheet.create({
-    container: {
-      width: 100,
-      height: 100,
-    },
-    absolute: {
-      position: 'absolute',
-      bottom: 15,
-      right: 10,
-      width: 50,
-      height: 60,
-    },
-  }),
-  render: function() {
+type AbsolutePositionBottomRightTestAppProps = $ReadOnly<{||}>;
+class AbsolutePositionBottomRightTestApp extends React.Component<
+  AbsolutePositionBottomRightTestAppProps,
+  > {
+  render() {
     return (
       <View
-        style={this._styles.container}
+        style={AbsolutePositionBottomRightTestAppStyles.container}
         testID="container"
         collapsable={false}>
-        <View style={this._styles.absolute} collapsable={false} />
+        <View
+          style={AbsolutePositionBottomRightTestAppStyles.absolute}
+          collapsable={false}
+        />
       </View>
     );
+  }
+};
+
+const AbsolutePositionBottomRightTestAppStyles = StyleSheet.create({
+  container: {
+    width: 100,
+    height: 100,
+  },
+  absolute: {
+    position: 'absolute',
+    bottom: 15,
+    right: 10,
+    width: 50,
+    height: 60,
   },
 });
 
-var CenteredTextView = createReactClass({
-  displayName: 'CenteredTextView',
-  _styles: StyleSheet.create({
-    parent: {
-      width: 200,
-      height: 100,
-      backgroundColor: '#aa3311',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    text: {
-      fontSize: 15,
-      color: '#672831',
-    },
-  }),
-  render: function() {
+type CenteredTextViewProps = $ReadOnly<{|
+  text?: ?string,
+|}>;
+class CenteredTextView extends React.Component<CenteredTextViewProps> {
+  render() {
     return (
       <View collapsable={false}>
-        <View style={this._styles.parent} collapsable={false}>
-          <Text style={this._styles.text} testID="text">
+        <View style={CenteredTextViewStyles.parent} collapsable={false}>
+          <Text style={CenteredTextViewStyles.text} testID="text">
             {this.props.text}
           </Text>
         </View>
       </View>
     );
+  }
+};
+
+const CenteredTextViewStyles = StyleSheet.create({
+  parent: {
+    width: 200,
+    height: 100,
+    backgroundColor: '#aa3311',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 15,
+    color: '#672831',
   },
 });
 
-var flushUpdatePositionInList = null;
-var UpdatePositionInListTestApp = createReactClass({
-  displayName: 'UpdatePositionInListTestApp',
-  _styles: StyleSheet.create({
-    element: {
-      height: 10,
-    },
-    active: {
-      height: 50,
-    },
-  }),
-  getInitialState: function() {
-    flushUpdatePositionInList = () => this.setState({active: true});
-    return {active: false};
-  },
-  render: function() {
+let flushUpdatePositionInList = null;
+type UpdatePositionInListTestAppProps = $ReadOnly<{||}>;
+type UpdatePositionInListTestAppState = $ReadOnly<{|
+  active?: ?boolean,
+|}>;
+class UpdatePositionInListTestApp extends React.Component<
+  UpdatePositionInListTestAppProps,
+  UpdatePositionInListTestAppState,
+  > {
+  state = {
+    active: false
+  };
+
+  flushUpdatePositionInList = () => this.setState({ active: true });
+
+  render() {
     return (
       <View collapsable={false} testID="container">
-        <View style={this._styles.element} collapsable={false} />
+        <View
+          style={UpdatePositionInListTestAppStyles.element}
+          collapsable={false}
+        />
         <View
           style={[
-            this._styles.element,
-            this.state.active && this._styles.active,
+            UpdatePositionInListTestAppStyles.element,
+            this.state.active && UpdatePositionInListTestAppStyles.active,
           ]}
           collapsable={false}
         />
-        <View style={this._styles.element} collapsable={false} />
+        <View
+          style={UpdatePositionInListTestAppStyles.element}
+          collapsable={false}
+        />
       </View>
     );
+  }
+};
+
+const UpdatePositionInListTestAppStyles = StyleSheet.create({
+  element: {
+    height: 10,
+  },
+  active: {
+    height: 50,
   },
 });
 
-var UIManagerTestModule = {
-  renderFlexTestApplication: function(rootTag) {
+const UIManagerTestModule = {
+  renderFlexTestApplication(rootTag) {
     renderApplication(FlexTestApp, {}, rootTag);
   },
-  renderFlexWithTextApplication: function(rootTag) {
+  renderFlexWithTextApplication(rootTag) {
     renderApplication(FlexWithText, {}, rootTag);
   },
-  renderAbsolutePositionBottomRightTestApplication: function(rootTag) {
+  renderAbsolutePositionBottomRightTestApplication(rootTag) {
     renderApplication(AbsolutePositionBottomRightTestApp, {}, rootTag);
   },
-  renderAbsolutePositionTestApplication: function(rootTag) {
+  renderAbsolutePositionTestApplication(rootTag) {
     renderApplication(AbsolutePositionTestApp, {}, rootTag);
   },
-  renderCenteredTextViewTestApplication: function(rootTag, text) {
-    renderApplication(CenteredTextView, {text: text}, rootTag);
+  renderCenteredTextViewTestApplication(rootTag, text) {
+    renderApplication(CenteredTextView, { text: text }, rootTag);
   },
-  renderUpdatePositionInListTestApplication: function(rootTag) {
+  renderUpdatePositionInListTestApplication(rootTag) {
     renderApplication(UpdatePositionInListTestApp, {}, rootTag);
   },
-  flushUpdatePositionInList: function() {
+  flushUpdatePositionInList() {
     flushUpdatePositionInList();
   },
 };