Replace React.createClass with create-react-class

Summary: This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style. Fixes #14620 Refs #14712 Closes #14729 Differential Revision: D5321810 Pulled By: hramos fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585
facebook · Jul 7, 2017 · 9afb71f · 9afb71f
1 parent 20224b7
commit 9afb71f
Show file tree

Hide file tree

Showing 47 changed files with 150 additions and 56 deletions.
diff --git a/IntegrationTests/LayoutEventsTest.js b/IntegrationTests/LayoutEventsTest.js
@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   Image,
@@ -58,7 +59,8 @@ type State = {
   containerStyle?: Style,
 };
 
-var LayoutEventsTest = React.createClass({
+var LayoutEventsTest = createReactClass({
+  displayName: 'LayoutEventsTest',
   getInitialState(): State {
     return {
       didAnimation: false,

diff --git a/IntegrationTests/ReactContentSizeUpdateTest.js b/IntegrationTests/ReactContentSizeUpdateTest.js
@@ -10,6 +10,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var RCTNativeAppEventEmitter = require('RCTNativeAppEventEmitter');
 var Subscribable = require('Subscribable');
@@ -24,7 +25,8 @@ var reactViewHeight = 102;
 var newReactViewWidth = 201;
 var newReactViewHeight = 202;
 
-var ReactContentSizeUpdateTest = React.createClass({
+var ReactContentSizeUpdateTest = createReactClass({
+  displayName: 'ReactContentSizeUpdateTest',
   mixins: [Subscribable.Mixin,
            TimerMixin],
 

diff --git a/IntegrationTests/SizeFlexibilityUpdateTest.js b/IntegrationTests/SizeFlexibilityUpdateTest.js
@@ -10,6 +10,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var RCTNativeAppEventEmitter = require('RCTNativeAppEventEmitter');
 var Subscribable = require('Subscribable');
@@ -22,7 +23,8 @@ var reactViewHeight = 222;
 
 var finalState = false;
 
-var SizeFlexibilityUpdateTest = React.createClass({
+var SizeFlexibilityUpdateTest = createReactClass({
+  displayName: 'SizeFlexibilityUpdateTest',
   mixins: [Subscribable.Mixin],
 
   componentWillMount: function() {

diff --git a/IntegrationTests/TimersTest.js b/IntegrationTests/TimersTest.js
@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var TimerMixin = require('react-timer-mixin');
 
@@ -22,7 +23,8 @@ var {
 } = ReactNative;
 var { TestModule  } = ReactNative.NativeModules;
 
-var TimersTest = React.createClass({
+var TimersTest = createReactClass({
+  displayName: 'TimersTest',
   mixins: [TimerMixin],
 
   _nextTest: () => {},

diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -20,6 +20,7 @@ const StyleSheet = require('StyleSheet');
 const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
+const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
 const GRAY = '#999999';
@@ -36,7 +37,8 @@ type DefaultProps = {
 /**
  * Displays a circular loading indicator.
  */
-const ActivityIndicator = React.createClass({
+const ActivityIndicator = createReactClass({
+  displayName: 'ActivityIndicator',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
@@ -20,6 +20,7 @@ const StyleSheet = require('StyleSheet');
 const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
+const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
 type DefaultProps = {
@@ -36,7 +37,8 @@ type Event = Object;
  * source of truth.
  */
 // $FlowFixMe(>=0.41.0)
-const DatePickerIOS = React.createClass({
+const DatePickerIOS = createReactClass({
+  displayName: 'DatePickerIOS',
   // TOOD: Put a better type for _picker
   _picker: (undefined: ?$FlowFixMe),
 

diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js
@@ -24,6 +24,7 @@ var ViewPropTypes = require('ViewPropTypes');
 
 var DrawerConsts = UIManager.AndroidDrawerLayout.Constants;
 
+var createReactClass = require('create-react-class');
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');
 
@@ -67,7 +68,8 @@ var DRAWER_STATES = [
  * },
  * ```
  */
-var DrawerLayoutAndroid = React.createClass({
+var DrawerLayoutAndroid = createReactClass({
+  displayName: 'DrawerLayoutAndroid',
   statics: {
     positions: DrawerConsts.DrawerPosition,
   },

diff --git a/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/Libraries/Components/Keyboard/KeyboardAvoidingView.js
@@ -11,6 +11,7 @@
  */
 'use strict';
 
+const createReactClass = require('create-react-class');
 const Keyboard = require('Keyboard');
 const LayoutAnimation = require('LayoutAnimation');
 const Platform = require('Platform');
@@ -43,7 +44,8 @@ const viewRef = 'VIEW';
  * It can automatically adjust either its position or bottom padding based on the position of the keyboard.
  */
 // $FlowFixMe(>=0.41.0)
-const KeyboardAvoidingView = React.createClass({
+const KeyboardAvoidingView = createReactClass({
+  displayName: 'KeyboardAvoidingView',
   mixins: [TimerMixin],
 
   propTypes: {

diff --git a/Libraries/Components/LazyRenderer.js b/Libraries/Components/LazyRenderer.js
@@ -11,10 +11,12 @@
 'use strict';
 
 var React = require('React');
+var createReactClass = require('create-react-class');
 var PropTypes = require('prop-types');
 var TimerMixin = require('react-timer-mixin');
 
-var LazyRenderer = React.createClass({
+var LazyRenderer = createReactClass({
+  displayName: 'LazyRenderer',
   mixin: [TimerMixin],
 
   propTypes: {

diff --git a/Libraries/Components/Navigation/NavigatorIOS.ios.js b/Libraries/Components/Navigation/NavigatorIOS.ios.js
@@ -23,6 +23,7 @@ var TVEventHandler = require('TVEventHandler');
 var View = require('View');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var invariant = require('fbjs/lib/invariant');
 var logError = require('logError');
 var requireNativeComponent = require('requireNativeComponent');
@@ -304,7 +305,8 @@ type Event = Object;
  * is pushed.
  *
  */
-var NavigatorIOS = React.createClass({
+var NavigatorIOS = createReactClass({
+  displayName: 'NavigatorIOS',
 
   propTypes: {
 

diff --git a/Libraries/Components/Picker/PickerIOS.ios.js b/Libraries/Components/Picker/PickerIOS.ios.js
@@ -22,10 +22,12 @@ var View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 var processColor = require('processColor');
 
+var createReactClass = require('create-react-class');
 var itemStylePropType = StyleSheetPropType(TextStylePropTypes);
 var requireNativeComponent = require('requireNativeComponent');
 
-var PickerIOS = React.createClass({
+var PickerIOS = createReactClass({
+  displayName: 'PickerIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

diff --git a/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js b/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js
@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
 var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 var STYLE_ATTRIBUTES = [
@@ -63,7 +64,8 @@ var indeterminateType = function(props, propName, componentName, ...rest) {
  * },
  * ```
  */
-var ProgressBarAndroid = React.createClass({
+var ProgressBarAndroid = createReactClass({
+  displayName: 'ProgressBarAndroid',
   propTypes: {
     ...ViewPropTypes,
     /**

diff --git a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js
@@ -18,13 +18,15 @@ var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
 // $FlowFixMe(>=0.41.0)
-var ProgressViewIOS = React.createClass({
+var ProgressViewIOS = createReactClass({
+  displayName: 'ProgressViewIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

diff --git a/Libraries/Components/RefreshControl/RefreshControl.js b/Libraries/Components/RefreshControl/RefreshControl.js
@@ -18,6 +18,7 @@ const React = require('React');
 const PropTypes = require('prop-types');
 const ViewPropTypes = require('ViewPropTypes');
 
+const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
 if (Platform.OS === 'android') {
@@ -72,7 +73,8 @@ if (Platform.OS === 'android') {
  * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
  */
 // $FlowFixMe(>=0.41.0)
-const RefreshControl = React.createClass({
+const RefreshControl = createReactClass({
+  displayName: 'RefreshControl',
   statics: {
     SIZE: RefreshLayoutConsts.SIZE,
   },

diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js
@@ -27,6 +27,7 @@ const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 const ViewStylePropTypes = require('ViewStylePropTypes');
 
+const createReactClass = require('create-react-class');
 const dismissKeyboard = require('dismissKeyboard');
 const flattenStyle = require('flattenStyle');
 const invariant = require('fbjs/lib/invariant');
@@ -72,7 +73,8 @@ import type {NativeMethodsMixinType} from 'ReactNativeTypes';
  * supports out of the box.
  */
 // $FlowFixMe(>=0.41.0)
-const ScrollView = React.createClass({
+const ScrollView = createReactClass({
+  displayName: 'ScrollView',
   propTypes: {
     ...ViewPropTypes,
     /**

diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js
@@ -17,6 +17,7 @@ var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 type DefaultProps = {
@@ -49,7 +50,8 @@ type Event = Object;
  * ````
  */
 // $FlowFixMe(>=0.41.0)
-var SegmentedControlIOS = React.createClass({
+var SegmentedControlIOS = createReactClass({
+  displayName: 'SegmentedControlIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js
@@ -21,6 +21,7 @@ var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 type Event = Object;
@@ -29,7 +30,8 @@ type Event = Object;
  * A component used to select a single value from a range of values.
  */
 // $FlowFixMe(>=0.41.0)
-var Slider = React.createClass({
+var Slider = createReactClass({
+  displayName: 'Slider',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js
@@ -19,6 +19,7 @@ const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 const ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 type DefaultProps = {
@@ -38,7 +39,8 @@ type DefaultProps = {
  * @keyword toggle
  */
 // $FlowFixMe(>=0.41.0)
-var Switch = React.createClass({
+var Switch = createReactClass({
+  displayName: 'Switch',
   propTypes: {
     ...ViewPropTypes,
     /**

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -17,6 +17,7 @@ const EventEmitter = require('EventEmitter');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const createReactClass = require('create-react-class');
 const PropTypes = require('prop-types');
 const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
@@ -168,7 +169,8 @@ const DataDetectorTypes = [
  *
  */
 // $FlowFixMe(>=0.41.0)
-const TextInput = React.createClass({
+const TextInput = createReactClass({
+  displayName: 'TextInput',
   statics: {
     /* TODO(brentvatne) docs are needed for this */
     State: TextInputState,

diff --git a/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js b/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js
@@ -20,6 +20,7 @@ var UIManager = require('UIManager');
 var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
@@ -65,7 +66,8 @@ var optionalImageSource = PropTypes.oneOfType([
  *
  * [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
  */
-var ToolbarAndroid = React.createClass({
+var ToolbarAndroid = createReactClass({
+  displayName: 'ToolbarAndroid',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
@@ -15,6 +15,7 @@ var Animated = require('Animated');
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var createReactClass = require('create-react-class');
 var PropTypes = require('prop-types');
 var Touchable = require('Touchable');
 
@@ -35,7 +36,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * interesting interactions such as `handleTouchablePress`.
  */
 // $FlowFixMe(>=0.41.0)
-var TouchableBounce = React.createClass({
+var TouchableBounce = createReactClass({
+  displayName: 'TouchableBounce',
   mixins: [Touchable.Mixin, NativeMethodsMixin],
 
   propTypes: {

diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -25,6 +25,7 @@ var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 var View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var ensureComponentIsNative = require('ensureComponentIsNative');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var keyOf = require('fbjs/lib/keyOf');
@@ -68,7 +69,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * ```
  */
 
-var TouchableHighlight = React.createClass({
+var TouchableHighlight = createReactClass({
+  displayName: 'TouchableHighlight',
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
     /**