From f6b8b8c41d3db634a09594ecffaaf7417fe2d5d4 Mon Sep 17 00:00:00 2001 From: Seth Fitzsimmons Date: Fri, 7 Jul 2017 14:24:25 -0700 Subject: [PATCH] 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 https://github.com/facebook/react-native/pull/14729 Differential Revision: D5321810 Pulled By: hramos fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585 --- IntegrationTests/LayoutEventsTest.js | 4 +++- .../ReactContentSizeUpdateTest.js | 4 +++- IntegrationTests/SizeFlexibilityUpdateTest.js | 4 +++- IntegrationTests/TimersTest.js | 4 +++- .../ActivityIndicator/ActivityIndicator.js | 4 +++- .../DatePicker/DatePickerIOS.ios.js | 4 +++- .../DrawerLayoutAndroid.android.js | 4 +++- .../Keyboard/KeyboardAvoidingView.js | 4 +++- Libraries/Components/LazyRenderer.js | 4 +++- .../Components/Navigation/NavigatorIOS.ios.js | 4 +++- Libraries/Components/Picker/PickerIOS.ios.js | 4 +++- .../ProgressBarAndroid.android.js | 4 +++- .../ProgressViewIOS/ProgressViewIOS.ios.js | 4 +++- .../RefreshControl/RefreshControl.js | 4 +++- Libraries/Components/ScrollView/ScrollView.js | 4 +++- .../SegmentedControlIOS.ios.js | 4 +++- Libraries/Components/Slider/Slider.js | 4 +++- Libraries/Components/Switch/Switch.js | 4 +++- Libraries/Components/TextInput/TextInput.js | 4 +++- .../ToolbarAndroid/ToolbarAndroid.android.js | 4 +++- .../Components/Touchable/TouchableBounce.js | 4 +++- .../Touchable/TouchableHighlight.js | 4 +++- .../TouchableNativeFeedback.android.js | 4 +++- .../Components/Touchable/TouchableOpacity.js | 4 +++- .../Touchable/TouchableWithoutFeedback.js | 4 +++- Libraries/Components/View/View.js | 4 +++- .../Experimental/SwipeableRow/SwipeableRow.js | 4 +++- Libraries/Image/Image.android.js | 4 +++- Libraries/Image/Image.ios.js | 4 +++- Libraries/Lists/ListView/ListView.js | 4 +++- Libraries/Text/Text.js | 4 +++- Libraries/Text/TextUpdateTest.js | 4 +++- RNTester/js/CameraRollView.js | 4 +++- RNTester/js/ImageExample.js | 10 ++++++---- RNTester/js/ListViewExample.js | 4 +++- RNTester/js/ListViewGridLayoutExample.js | 4 +++- RNTester/js/PanResponderExample.js | 4 +++- .../js/ProgressBarAndroidExample.android.js | 4 +++- RNTester/js/ProgressViewIOSExample.js | 4 +++- RNTester/js/SwipeableListViewExample.js | 4 +++- RNTester/js/TextExample.ios.js | 4 +++- RNTester/js/TimerExample.js | 4 +++- .../androidTest/js/ScrollViewTestModule.js | 7 +++++-- .../src/androidTest/js/UIManagerTestModule.js | 19 +++++++++++++------ docs/DirectManipulation.md | 2 +- docs/Timers.md | 2 +- website/package.json | 2 +- 47 files changed, 150 insertions(+), 56 deletions(-) diff --git a/IntegrationTests/LayoutEventsTest.js b/IntegrationTests/LayoutEventsTest.js index a7c73ea7add592..46b3915a58e102 100644 --- 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 index 4760dad042a628..07ae0ed661ce15 100644 --- 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 index 7b050e9f3f8f56..5d580f8fc6a028 100644 --- 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 index 25056a892f59c1..06d4c6b1a4a3e2 100644 --- 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 index 68dc82b3983ecd..4cc7759e4d1499 100644 --- 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 index ccab7293df6359..5ef82af2094bdd 100644 --- 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 index 2f697587ce0e58..e7305ab99abe67 100644 --- 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 index 7d4db39dd01584..a7d789e45ebb63 100644 --- 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'); @@ -53,7 +54,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 index 95cafbd16194a2..2d2c225f52ab67 100644 --- 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 index 1cb90eeaf7f352..4dfc7b5d9d0d28 100644 --- 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 index ec617510d84f95..81911b4bc16143 100644 --- 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 index e3b0b6ee7ae63c..4347f88446bb59 100644 --- 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) { * }, * ``` */ -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 index 3d996cbbebb1dc..0b6c4f3ee4125d 100644 --- 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 index 7736b06b1f6b72..8323ca24bed50c 100644 --- 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 index 723bcfa4f18168..e6cce2970b0bd4 100644 --- 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'); @@ -69,7 +70,8 @@ const requireNativeComponent = require('requireNativeComponent'); * 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 index 4fd6d0d1ebec1f..ba0c52ebbc0e9f 100644 --- 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 index ce0c39dcace347..712100bffaa611 100644 --- 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 index 7cad1ac14b2d0c..e7b456af98ed9f 100644 --- 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 index b47b785b0ca86d..b50d627deace3e 100644 --- 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 index 675738217cf676..85435eaea6bfa4 100644 --- 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 index bcc1695ba9ecf7..775c41e284eb2b 100644 --- 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 index 3a259abc9cace1..a2281c6cdf53b0 100644 --- 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, /** diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js index 3c2e7b0053ea14..7436dd234278ee 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js @@ -18,6 +18,7 @@ var Touchable = require('Touchable'); var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); var UIManager = require('UIManager'); +var createReactClass = require('create-react-class'); var ensurePositiveDelayProps = require('ensurePositiveDelayProps'); var processColor = require('processColor'); @@ -70,7 +71,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * ``` */ -var TouchableNativeFeedback = React.createClass({ +var TouchableNativeFeedback = createReactClass({ + displayName: 'TouchableNativeFeedback', propTypes: { ...TouchableWithoutFeedback.propTypes, diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 861fd5f5a4fecb..cc9430f3d1a9b9 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -22,6 +22,7 @@ var TimerMixin = require('react-timer-mixin'); var Touchable = require('Touchable'); var TouchableWithoutFeedback = require('TouchableWithoutFeedback'); +var createReactClass = require('create-react-class'); var ensurePositiveDelayProps = require('ensurePositiveDelayProps'); var flattenStyle = require('flattenStyle'); @@ -51,7 +52,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * }, * ``` */ -var TouchableOpacity = React.createClass({ +var TouchableOpacity = createReactClass({ + displayName: 'TouchableOpacity', mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin], propTypes: { diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index cf94cbba9f2e55..a36f0f1417858a 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -17,6 +17,7 @@ const PropTypes = require('prop-types'); const TimerMixin = require('react-timer-mixin'); const Touchable = require('Touchable'); +const createReactClass = require('create-react-class'); const ensurePositiveDelayProps = require('ensurePositiveDelayProps'); const warning = require('fbjs/lib/warning'); @@ -37,7 +38,8 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * If you wish to have several child components, wrap them in a View. */ // $FlowFixMe(>=0.41.0) -const TouchableWithoutFeedback = React.createClass({ +const TouchableWithoutFeedback = createReactClass({ + displayName: 'TouchableWithoutFeedback', mixins: [TimerMixin, Touchable.Mixin], propTypes: { diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 38c9daca84c66c..8bda304b572af7 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -21,6 +21,7 @@ const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const ViewPropTypes = require('ViewPropTypes'); +const createReactClass = require('create-react-class'); const invariant = require('fbjs/lib/invariant'); const warning = require('fbjs/lib/warning'); @@ -81,7 +82,8 @@ const forceTouchAvailable = (NativeModules.PlatformConstants && * - `touches` - Array of all current touches on the screen. */ // $FlowFixMe(>=0.41.0) -const View = React.createClass({ +const View = createReactClass({ + displayName: 'View', // TODO: We should probably expose the mixins, viewConfig, and statics publicly. For example, // one of the props is of type AccessibilityComponentType. That is defined as a const[] above, // but it is not rendered by the docs, since `statics` below is not rendered. So its Possible diff --git a/Libraries/Experimental/SwipeableRow/SwipeableRow.js b/Libraries/Experimental/SwipeableRow/SwipeableRow.js index 5a7c575c4f2094..7a78b8d12bfbf0 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableRow.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableRow.js @@ -20,6 +20,7 @@ const StyleSheet = require('StyleSheet'); const TimerMixin = require('react-timer-mixin'); const View = require('View'); +const createReactClass = require('create-react-class'); const emptyFunction = require('fbjs/lib/emptyFunction'); const IS_RTL = I18nManager.isRTL; @@ -61,7 +62,8 @@ const RIGHT_SWIPE_THRESHOLD = 30 * SLOW_SPEED_SWIPE_FACTOR; * used in a normal ListView. See the renderRow for SwipeableListView to see how * to use this component separately. */ -const SwipeableRow = React.createClass({ +const SwipeableRow = createReactClass({ + displayName: 'SwipeableRow', _panResponder: {}, _previousLeft: CLOSED_LEFT_POSITION, diff --git a/Libraries/Image/Image.android.js b/Libraries/Image/Image.android.js index 4be34bddb5e2b9..8d5ef9c89cbf8c 100644 --- a/Libraries/Image/Image.android.js +++ b/Libraries/Image/Image.android.js @@ -25,6 +25,7 @@ var View = require('View'); var ViewPropTypes = require('ViewPropTypes'); var ViewStylePropTypes = require('ViewStylePropTypes'); +var createReactClass = require('create-react-class'); var filterObject = require('fbjs/lib/filterObject'); var flattenStyle = require('flattenStyle'); var merge = require('merge'); @@ -76,7 +77,8 @@ var ImageViewAttributes = merge(ReactNativeViewAttributes.UIView, { var ViewStyleKeys = new Set(Object.keys(ViewStylePropTypes)); var ImageSpecificStyleKeys = new Set(Object.keys(ImageStylePropTypes).filter(x => !ViewStyleKeys.has(x))); -var Image = React.createClass({ +var Image = createReactClass({ + displayName: 'Image', propTypes: { ...ViewPropTypes, style: StyleSheetPropType(ImageStylePropTypes), diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js index fba9e16447a686..ca82dfcf607cb1 100644 --- a/Libraries/Image/Image.ios.js +++ b/Libraries/Image/Image.ios.js @@ -23,6 +23,7 @@ const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const StyleSheet = require('StyleSheet'); const StyleSheetPropType = require('StyleSheetPropType'); +const createReactClass = require('create-react-class'); const flattenStyle = require('flattenStyle'); const requireNativeComponent = require('requireNativeComponent'); const resolveAssetSource = require('resolveAssetSource'); @@ -126,7 +127,8 @@ const ImageViewManager = NativeModules.ImageViewManager; * */ // $FlowFixMe(>=0.41.0) -const Image = React.createClass({ +const Image = createReactClass({ + displayName: 'Image', propTypes: { /** * > `ImageResizeMode` is an `Enum` for different image resizing modes, set via the diff --git a/Libraries/Lists/ListView/ListView.js b/Libraries/Lists/ListView/ListView.js index 2001888c83e8d2..864663a0c4f027 100644 --- a/Libraries/Lists/ListView/ListView.js +++ b/Libraries/Lists/ListView/ListView.js @@ -24,6 +24,7 @@ var TimerMixin = require('react-timer-mixin'); var View = require('View'); var cloneReferencedElement = require('react-clone-referenced-element'); +var createReactClass = require('create-react-class'); var isEmpty = require('isEmpty'); var merge = require('merge'); @@ -85,7 +86,8 @@ var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50; * rendering rows. */ -var ListView = React.createClass({ +var ListView = createReactClass({ + displayName: 'ListView', _childFrames: ([]: Array), _sentEndForContentLength: (null: ?number), _scrollComponent: (null: any), diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index dac73a1f27c69a..159f4675967b14 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -22,6 +22,7 @@ const StyleSheetPropType = require('StyleSheetPropType'); const TextStylePropTypes = require('TextStylePropTypes'); const Touchable = require('Touchable'); +const createReactClass = require('create-react-class'); const createReactNativeComponentClass = require('createReactNativeComponentClass'); const mergeFast = require('mergeFast'); const processColor = require('processColor'); @@ -96,7 +97,8 @@ const viewConfig = { */ // $FlowFixMe(>=0.41.0) -const Text = React.createClass({ +const Text = createReactClass({ + displayName: 'Text', propTypes: { /** * When `numberOfLines` is set, this prop defines how text will be truncated. diff --git a/Libraries/Text/TextUpdateTest.js b/Libraries/Text/TextUpdateTest.js index 40a931eed12b45..bd12bb8484a464 100644 --- a/Libraries/Text/TextUpdateTest.js +++ b/Libraries/Text/TextUpdateTest.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'); var { @@ -22,7 +23,8 @@ var { var TestManager = NativeModules.TestManager || NativeModules.SnapshotTestManager; -var TextUpdateTest = React.createClass({ +var TextUpdateTest = createReactClass({ + displayName: 'TextUpdateTest', mixins: [TimerMixin], getInitialState: function() { return {seeMore: true}; diff --git a/RNTester/js/CameraRollView.js b/RNTester/js/CameraRollView.js index c8833f3c20b0aa..3419989fb1262a 100644 --- a/RNTester/js/CameraRollView.js +++ b/RNTester/js/CameraRollView.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); const PropTypes = require('prop-types'); var ReactNative = require('react-native'); var { @@ -71,7 +72,8 @@ var propTypes = { }; -var CameraRollView = React.createClass({ +var CameraRollView = createReactClass({ + displayName: 'CameraRollView', // $FlowFixMe(>=0.41.0) propTypes: propTypes, diff --git a/RNTester/js/ImageExample.js b/RNTester/js/ImageExample.js index 580b9887503e99..4293fed3d8ce3d 100644 --- a/RNTester/js/ImageExample.js +++ b/RNTester/js/ImageExample.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { ActivityIndicator, @@ -28,7 +29,8 @@ var ImageCapInsetsExample = require('./ImageCapInsetsExample'); const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now(); var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL); -var NetworkImageCallbackExample = React.createClass({ +var NetworkImageCallbackExample = createReactClass({ + displayName: 'NetworkImageCallbackExample', getInitialState: function() { return { events: [], @@ -101,7 +103,7 @@ var NetworkImageCallbackExample = React.createClass({ } }); -var NetworkImageExample = React.createClass({ +var NetworkImageExample = createReactClass({ getInitialState: function() { return { error: false, @@ -129,7 +131,7 @@ var NetworkImageExample = React.createClass({ } }); -var ImageSizeExample = React.createClass({ +var ImageSizeExample = createReactClass({ getInitialState: function() { return { width: 0, @@ -161,7 +163,7 @@ var ImageSizeExample = React.createClass({ }, }); -var MultipleSourcesExample = React.createClass({ +var MultipleSourcesExample = createReactClass({ getInitialState: function() { return { width: 30, diff --git a/RNTester/js/ListViewExample.js b/RNTester/js/ListViewExample.js index be70270b7270c3..7007ed2035559c 100644 --- a/RNTester/js/ListViewExample.js +++ b/RNTester/js/ListViewExample.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { Image, @@ -24,7 +25,8 @@ var { var RNTesterPage = require('./RNTesterPage'); -var ListViewSimpleExample = React.createClass({ +var ListViewSimpleExample = createReactClass({ + displayName: 'ListViewSimpleExample', statics: { title: '', description: 'Performant, scrollable list of data.' diff --git a/RNTester/js/ListViewGridLayoutExample.js b/RNTester/js/ListViewGridLayoutExample.js index 635743c3fdbf5c..455fbc2f340b82 100644 --- a/RNTester/js/ListViewGridLayoutExample.js +++ b/RNTester/js/ListViewGridLayoutExample.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { Image, @@ -37,7 +38,8 @@ var THUMB_URLS = [ require('./Thumbnails/victory.png'), ]; -var ListViewGridLayoutExample = React.createClass({ +var ListViewGridLayoutExample = createReactClass({ + displayName: 'ListViewGridLayoutExample', statics: { title: ' - Grid Layout', diff --git a/RNTester/js/PanResponderExample.js b/RNTester/js/PanResponderExample.js index 70cb5e696ac09d..a8d569338438aa 100644 --- a/RNTester/js/PanResponderExample.js +++ b/RNTester/js/PanResponderExample.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { PanResponder, @@ -21,7 +22,8 @@ var { var CIRCLE_SIZE = 80; -var PanResponderExample = React.createClass({ +var PanResponderExample = createReactClass({ + displayName: 'PanResponderExample', statics: { title: 'PanResponder Sample', diff --git a/RNTester/js/ProgressBarAndroidExample.android.js b/RNTester/js/ProgressBarAndroidExample.android.js index 1ea184483f46ae..cd3bf3dde6211a 100644 --- a/RNTester/js/ProgressBarAndroidExample.android.js +++ b/RNTester/js/ProgressBarAndroidExample.android.js @@ -13,12 +13,14 @@ var ProgressBar = require('ProgressBarAndroid'); var React = require('React'); +var createReactClass = require('create-react-class'); var RNTesterBlock = require('RNTesterBlock'); var RNTesterPage = require('RNTesterPage'); var TimerMixin = require('react-timer-mixin'); -var MovingBar = React.createClass({ +var MovingBar = createReactClass({ + displayName: 'MovingBar', mixins: [TimerMixin], getInitialState: function() { diff --git a/RNTester/js/ProgressViewIOSExample.js b/RNTester/js/ProgressViewIOSExample.js index cca3c5ad126600..e9b8cd9d9ce567 100644 --- a/RNTester/js/ProgressViewIOSExample.js +++ b/RNTester/js/ProgressViewIOSExample.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { ProgressViewIOS, @@ -20,7 +21,8 @@ var { } = ReactNative; var TimerMixin = require('react-timer-mixin'); -var ProgressViewExample = React.createClass({ +var ProgressViewExample = createReactClass({ + displayName: 'ProgressViewExample', mixins: [TimerMixin], getInitialState() { diff --git a/RNTester/js/SwipeableListViewExample.js b/RNTester/js/SwipeableListViewExample.js index 2c7ab423000d24..6525933076323d 100644 --- a/RNTester/js/SwipeableListViewExample.js +++ b/RNTester/js/SwipeableListViewExample.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { Image, @@ -25,7 +26,8 @@ var { var RNTesterPage = require('./RNTesterPage'); -var SwipeableListViewSimpleExample = React.createClass({ +var SwipeableListViewSimpleExample = createReactClass({ + displayName: 'SwipeableListViewSimpleExample', statics: { title: '', description: 'Performant, scrollable, swipeable list of data.' diff --git a/RNTester/js/TextExample.ios.js b/RNTester/js/TextExample.ios.js index 53e9ef83d8c4b3..57f57248161d25 100644 --- a/RNTester/js/TextExample.ios.js +++ b/RNTester/js/TextExample.ios.js @@ -13,6 +13,7 @@ const Platform = require('Platform'); var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { Image, @@ -72,7 +73,8 @@ class AttributeToggler extends React.Component { } } -var AdjustingFontSize = React.createClass({ +var AdjustingFontSize = createReactClass({ + displayName: 'AdjustingFontSize', getInitialState: function() { return {dynamicText:'', shouldRender: true,}; }, diff --git a/RNTester/js/TimerExample.js b/RNTester/js/TimerExample.js index 6f2705b70bb33a..3ba93b3223ac4d 100644 --- a/RNTester/js/TimerExample.js +++ b/RNTester/js/TimerExample.js @@ -12,6 +12,7 @@ 'use strict'; var React = require('react'); +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { AlertIOS, @@ -97,7 +98,8 @@ class RequestIdleCallbackTester extends React.Component { }; } -var TimerTester = React.createClass({ +var TimerTester = createReactClass({ + displayName: 'TimerTester', mixins: [TimerMixin], _ii: 0, diff --git a/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js b/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js index 8ea740feec1916..0081c50b216643 100644 --- a/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js +++ b/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js @@ -13,6 +13,7 @@ var BatchedBridge = require('BatchedBridge'); var React = require('React'); +var createReactClass = require('create-react-class'); var View = require('View'); var ScrollView = require('ScrollView'); var Text = require('Text'); @@ -64,7 +65,8 @@ var onItemPress = function(itemNumber) { ScrollListener.onItemPress(itemNumber); }; -var ScrollViewTestApp = React.createClass({ +var ScrollViewTestApp = createReactClass({ + displayName: 'ScrollViewTestApp', getInitialState: getInitialState, onScroll: onScroll, onItemPress: onItemPress, @@ -90,7 +92,8 @@ var ScrollViewTestApp = React.createClass({ }, }); -var HorizontalScrollViewTestApp = React.createClass({ +var HorizontalScrollViewTestApp = createReactClass({ + displayName: 'HorizontalScrollViewTestApp', getInitialState: getInitialState, onScroll: onScroll, onItemPress: onItemPress, diff --git a/ReactAndroid/src/androidTest/js/UIManagerTestModule.js b/ReactAndroid/src/androidTest/js/UIManagerTestModule.js index dd63b9e180035e..236cfce2ea387b 100644 --- a/ReactAndroid/src/androidTest/js/UIManagerTestModule.js +++ b/ReactAndroid/src/androidTest/js/UIManagerTestModule.js @@ -17,9 +17,11 @@ var StyleSheet = require('StyleSheet'); var View = require('View'); var Text = require('Text'); +var createReactClass = require('create-react-class'); var renderApplication = require('renderApplication'); -var FlexTestApp = React.createClass({ +var FlexTestApp = createReactClass({ + displayName: 'FlexTestApp', _styles: StyleSheet.create({ container: { width: 200, @@ -47,7 +49,8 @@ var FlexTestApp = React.createClass({ } }); -var FlexWithText = React.createClass({ +var FlexWithText = createReactClass({ + displayName: 'FlexWithText', _styles: StyleSheet.create({ container: { flexDirection: 'column', @@ -75,7 +78,8 @@ var FlexWithText = React.createClass({ } }); -var AbsolutePositionTestApp = React.createClass({ +var AbsolutePositionTestApp = createReactClass({ + displayName: 'AbsolutePositionTestApp', _styles: StyleSheet.create({ absolute: { position: 'absolute', @@ -90,7 +94,8 @@ var AbsolutePositionTestApp = React.createClass({ } }); -var AbsolutePositionBottomRightTestApp = React.createClass({ +var AbsolutePositionBottomRightTestApp = createReactClass({ + displayName: 'AbsolutePositionBottomRightTestApp', _styles: StyleSheet.create({ container: { width: 100, @@ -113,7 +118,8 @@ var AbsolutePositionBottomRightTestApp = React.createClass({ } }); -var CenteredTextView = React.createClass({ +var CenteredTextView = createReactClass({ + displayName: 'CenteredTextView', _styles: StyleSheet.create({ parent: { width: 200, @@ -139,7 +145,8 @@ var CenteredTextView = React.createClass({ }); var flushUpdatePositionInList = null; -var UpdatePositionInListTestApp = React.createClass({ +var UpdatePositionInListTestApp = createReactClass({ + displayName: 'UpdatePositionInListTestApp', _styles: StyleSheet.create({ element: { height: 10, diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md index 1982d2b7d26872..055d4b5b863f61 100644 --- a/docs/DirectManipulation.md +++ b/docs/DirectManipulation.md @@ -123,7 +123,7 @@ If you run this you will immediately see this error: `Touchable child must either be native or forward setNativeProps to a native component`. This occurs because `MyButton` isn't directly backed by a native view whose opacity should be set. You can think about it like this: if you -define a component with `React.createClass` you would not expect to be +define a component with `createReactClass` you would not expect to be able to set a style prop on it and have that work - you would need to pass the style prop down to a child, unless you are wrapping a native component. Similarly, we are going to forward `setNativeProps` to a diff --git a/docs/Timers.md b/docs/Timers.md index c18c97d49d5c81..bcb2c432f67ce3 100644 --- a/docs/Timers.md +++ b/docs/Timers.md @@ -64,7 +64,7 @@ This library does not ship with React Native - in order to use it on your projec ```javascript import TimerMixin from 'react-timer-mixin'; -var Component = React.createClass({ +var Component = createReactClass({ mixins: [TimerMixin], componentDidMount: function() { this.setTimeout( diff --git a/website/package.json b/website/package.json index 8af3bc297ba32f..d8d336824b70e7 100644 --- a/website/package.json +++ b/website/package.json @@ -25,7 +25,7 @@ "optimist": "0.6.0", "prop-types": "^15.5.8", "react": "~0.13.0", - "react-docgen": "3.0.0-beta2", + "react-docgen": "3.0.0-beta5", "react-page-middleware": "0.4.1", "remove-markdown": "^0.1.0", "request": "^2.69.0",