from ReactAndroid/src/androidTest/js/UIManagerTestModule.js (#21702)

Summary:
Related to #21581 .
Removed createReactClass from ReactAndroid/src/androidTest/js/UIManagerTestModule.js
Pull Request resolved: https://github.com/facebook/react-native/pull/21702

Reviewed By: TheSavior

Differential Revision: D10345717

Pulled By: RSNara

fbshipit-source-id: 280f499abb2e2aa9f8ea25c3f8faaed8162e67d5

ReactAndroid/src/androidTest/js/UIManagerTestModule.js

@@ -5,220 +5,270 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow
  */
 
 'use strict';
 
-var BatchedBridge = require('BatchedBridge');
+const BatchedBridge = require('BatchedBridge');
-var React = require('React');
+const React = require('React');
-var StyleSheet = require('StyleSheet');
+const StyleSheet = require('StyleSheet');
-var View = require('View');
+const View = require('View');
-var Text = require('Text');
+const Text = require('Text');
 
-var createReactClass = require('create-react-class');
+const renderApplication = require('renderApplication');
-var renderApplication = require('renderApplication');
 
-var FlexTestApp = createReactClass({
+type FlexTestAppProps = $ReadOnly<{||}>;
-  displayName: 'FlexTestApp',
+class FlexTestApp extends React.Component<FlexTestAppProps> {
-  _styles: StyleSheet.create({
+  render() {
-    container: {
-      width: 200,
-      height: 200,
-      flexDirection: 'row',
-    },
-    child: {
-      flex: 1,
-    },
-    absolute: {
-      position: 'absolute',
-      top: 15,
-      left: 10,
-      width: 50,
-      height: 60,
-    },
-  }),
-  render: function() {
     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({
+type FlexWithTextProps = $ReadOnly<{||}>;
-  displayName: 'FlexWithText',
+class FlexWithText extends React.Component<FlexWithTextProps> {
-  _styles: StyleSheet.create({
+  render() {
-    container: {
-      flexDirection: 'column',
-      margin: 20,
-    },
-    row: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      height: 300,
-    },
-    inner: {
-      flex: 1,
-      margin: 10,
-    },
-  }),
-  render: function() {
     return (
       <View
-        style={this._styles.container}
+        style={FlexWithTextStyles.container}
         testID="container"
         collapsable={false}>
-        <View style={this._styles.row} collapsable={false}>
+        <View style={FlexWithTextStyles.row} collapsable={false}>
-          <Text style={this._styles.inner}>Hello</Text>
+          <Text style={FlexWithTextStyles.inner}>Hello</Text>
-          <Text style={this._styles.inner}>World</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({
+type AbsolutePositionTestAppProps = $ReadOnly<{||}>;
-  displayName: 'AbsolutePositionTestApp',
+class AbsolutePositionTestApp extends React.Component<
-  _styles: StyleSheet.create({
+  AbsolutePositionTestAppProps,
-    absolute: {
+> {
-      position: 'absolute',
+  render() {
-      top: 15,
-      left: 10,
-      width: 50,
-      height: 60,
-    },
-  }),
-  render: function() {
     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({
+type AbsolutePositionBottomRightTestAppProps = $ReadOnly<{||}>;
-  displayName: 'AbsolutePositionBottomRightTestApp',
+class AbsolutePositionBottomRightTestApp extends React.Component<
-  _styles: StyleSheet.create({
+  AbsolutePositionBottomRightTestAppProps,
-    container: {
+> {
-      width: 100,
+  render() {
-      height: 100,
-    },
-    absolute: {
-      position: 'absolute',
-      bottom: 15,
-      right: 10,
-      width: 50,
-      height: 60,
-    },
-  }),
-  render: function() {
     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({
+type CenteredTextViewProps = $ReadOnly<{|
-  displayName: 'CenteredTextView',
+  text?: ?string,
-  _styles: StyleSheet.create({
+|}>;
-    parent: {
+class CenteredTextView extends React.Component<CenteredTextViewProps> {
-      width: 200,
+  render() {
-      height: 100,
-      backgroundColor: '#aa3311',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    text: {
-      fontSize: 15,
-      color: '#672831',
-    },
-  }),
-  render: function() {
     return (
       <View collapsable={false}>
-        <View style={this._styles.parent} collapsable={false}>
+        <View style={CenteredTextViewStyles.parent} collapsable={false}>
-          <Text style={this._styles.text} testID="text">
+          <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;
+let flushUpdatePositionInList = null;
-var UpdatePositionInListTestApp = createReactClass({
+
-  displayName: 'UpdatePositionInListTestApp',
+type UpdatePositionInListTestAppProps = $ReadOnly<{||}>;
-  _styles: StyleSheet.create({
+type UpdatePositionInListTestAppState = {|
-    element: {
+  active: boolean,
-      height: 10,
+|};
-    },
+class UpdatePositionInListTestApp extends React.Component<
-    active: {
+  UpdatePositionInListTestAppProps,
-      height: 50,
+  UpdatePositionInListTestAppState,
-    },
+> {
-  }),
+  state = {
-  getInitialState: function() {
+    active: false,
+  };
+
+  constructor(...args) {
+    super(...args);
     flushUpdatePositionInList = () => this.setState({active: true});
-    return {active: false};
+  }
-  },
+
-  render: function() {
+  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,
+            UpdatePositionInListTestAppStyles.element,
-            this.state.active && this._styles.active,
+            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) {
+ * This is a workaround for the following flow problem:
-    renderApplication(FlexTestApp, {}, rootTag);
+ *
+ *   const emptyObject: {||} = {}; // Raises error
+ *
+ * @see https://github.com/facebook/flow/issues/2977
+ */
+const emptyExactProps = Object.freeze({});
+
+const UIManagerTestModule = {
+  renderFlexTestApplication(rootTag: number) {
+    renderApplication(FlexTestApp, emptyExactProps, rootTag);
   },
-  renderFlexWithTextApplication: function(rootTag) {
+  renderFlexWithTextApplication(rootTag: number) {
-    renderApplication(FlexWithText, {}, rootTag);
+    renderApplication(FlexWithText, emptyExactProps, rootTag);
   },
-  renderAbsolutePositionBottomRightTestApplication: function(rootTag) {
+  renderAbsolutePositionBottomRightTestApplication(rootTag: number) {
-    renderApplication(AbsolutePositionBottomRightTestApp, {}, rootTag);
+    renderApplication(
+      AbsolutePositionBottomRightTestApp,
+      emptyExactProps,
+      rootTag,
+    );
   },
-  renderAbsolutePositionTestApplication: function(rootTag) {
+  renderAbsolutePositionTestApplication(rootTag: number) {
-    renderApplication(AbsolutePositionTestApp, {}, rootTag);
+    renderApplication(AbsolutePositionTestApp, emptyExactProps, rootTag);
   },
-  renderCenteredTextViewTestApplication: function(rootTag, text) {
+  renderCenteredTextViewTestApplication(rootTag: number, text: string) {
     renderApplication(CenteredTextView, {text: text}, rootTag);
   },
-  renderUpdatePositionInListTestApplication: function(rootTag) {
+  renderUpdatePositionInListTestApplication(rootTag: number) {
-    renderApplication(UpdatePositionInListTestApp, {}, rootTag);
+    renderApplication(UpdatePositionInListTestApp, emptyExactProps, rootTag);
-  },
-  flushUpdatePositionInList: function() {
-    flushUpdatePositionInList();
   },
+  flushUpdatePositionInList,
 };
 
 BatchedBridge.registerCallableModule(