diff --git a/Examples/Movies/MovieCell.js b/Examples/Movies/MovieCell.js index daa7d41b5..cdb174038 100644 --- a/Examples/Movies/MovieCell.js +++ b/Examples/Movies/MovieCell.js @@ -31,8 +31,8 @@ var getStyleFromScore = require('./getStyleFromScore'); var getImageSource = require('./getImageSource'); var getTextFromScore = require('./getTextFromScore'); -var MovieCell = React.createClass({ - render: function() { +class MovieCell extends React.Component { + render() { var criticsScore = this.props.movie.ratings.critics_score; var TouchableElement = TouchableHighlight; if (Platform.OS === 'android') { @@ -66,7 +66,7 @@ var MovieCell = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ textContainer: { diff --git a/Examples/Movies/MovieScreen.js b/Examples/Movies/MovieScreen.js index cae726f0c..e6c5fc5f7 100644 --- a/Examples/Movies/MovieScreen.js +++ b/Examples/Movies/MovieScreen.js @@ -29,8 +29,8 @@ var getImageSource = require('./getImageSource'); var getStyleFromScore = require('./getStyleFromScore'); var getTextFromScore = require('./getTextFromScore'); -var MovieScreen = React.createClass({ - render: function() { +class MovieScreen extends React.Component { + render() { return ( @@ -57,11 +57,11 @@ var MovieScreen = React.createClass({ ); - }, -}); + } +} -var Ratings = React.createClass({ - render: function() { +class Ratings extends React.Component { + render() { var criticsScore = this.props.ratings.critics_score; var audienceScore = this.props.ratings.audience_score; @@ -81,11 +81,11 @@ var Ratings = React.createClass({ ); - }, -}); + } +} -var Cast = React.createClass({ - render: function() { +class Cast extends React.Component { + render() { if (!this.props.actors) { return null; } @@ -100,8 +100,8 @@ var Cast = React.createClass({ )} ); - }, -}); + } +} var styles = StyleSheet.create({ contentContainer: { diff --git a/Examples/Movies/MoviesApp.android.js b/Examples/Movies/MoviesApp.android.js index 2b40ea491..40368d414 100644 --- a/Examples/Movies/MoviesApp.android.js +++ b/Examples/Movies/MoviesApp.android.js @@ -65,8 +65,8 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) { } }; -var MoviesApp = React.createClass({ - render: function() { +class MoviesApp extends React.Component { + render() { var initialRoute = {name: 'search'}; return ( ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/Examples/Movies/MoviesApp.ios.js b/Examples/Movies/MoviesApp.ios.js index cce3216b1..99ba1d378 100644 --- a/Examples/Movies/MoviesApp.ios.js +++ b/Examples/Movies/MoviesApp.ios.js @@ -26,8 +26,8 @@ var { var SearchScreen = require('./SearchScreen'); -var MoviesApp = React.createClass({ - render: function() { +class MoviesApp extends React.Component { + render() { return ( ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/Examples/Movies/SearchBar.android.js b/Examples/Movies/SearchBar.android.js index f54b1b894..d918660c2 100644 --- a/Examples/Movies/SearchBar.android.js +++ b/Examples/Movies/SearchBar.android.js @@ -30,8 +30,8 @@ var { var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21; -var SearchBar = React.createClass({ - render: function() { +class SearchBar extends React.Component { + render() { var background = IS_RIPPLE_EFFECT_SUPPORTED ? TouchableNativeFeedback.SelectableBackgroundBorderless() : TouchableNativeFeedback.SelectableBackground(); @@ -67,7 +67,7 @@ var SearchBar = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ searchBar: { diff --git a/Examples/Movies/SearchBar.ios.js b/Examples/Movies/SearchBar.ios.js index b4429f56f..c168d4018 100644 --- a/Examples/Movies/SearchBar.ios.js +++ b/Examples/Movies/SearchBar.ios.js @@ -25,8 +25,8 @@ var { View, } = ReactNative; -var SearchBar = React.createClass({ - render: function() { +class SearchBar extends React.Component { + render() { return ( ); } -}); +} var styles = StyleSheet.create({ searchBar: { diff --git a/Examples/Movies/SearchScreen.js b/Examples/Movies/SearchScreen.js index e8400c39a..057336649 100644 --- a/Examples/Movies/SearchScreen.js +++ b/Examples/Movies/SearchScreen.js @@ -318,8 +318,8 @@ var SearchScreen = React.createClass({ }, }); -var NoMovies = React.createClass({ - render: function() { +class NoMovies extends React.Component { + render() { var text = ''; if (this.props.filter) { text = `No results for "${this.props.filter}"`; @@ -335,7 +335,7 @@ var NoMovies = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/Examples/TicTacToe/TicTacToeApp.js b/Examples/TicTacToe/TicTacToeApp.js index fb3be3034..9ccd9d9b0 100755 --- a/Examples/TicTacToe/TicTacToeApp.js +++ b/Examples/TicTacToe/TicTacToeApp.js @@ -94,8 +94,8 @@ class Board { } } -var Cell = React.createClass({ - cellStyle() { +class Cell extends React.Component { + cellStyle = () => { switch (this.props.player) { case 1: return styles.cellX; @@ -104,9 +104,9 @@ var Cell = React.createClass({ default: return null; } - }, + }; - textStyle() { + textStyle = () => { switch (this.props.player) { case 1: return styles.cellTextX; @@ -115,9 +115,9 @@ var Cell = React.createClass({ default: return {}; } - }, + }; - textContents() { + textContents = () => { switch (this.props.player) { case 1: return 'X'; @@ -126,7 +126,7 @@ var Cell = React.createClass({ default: return ''; } - }, + }; render() { return ( @@ -142,9 +142,9 @@ var Cell = React.createClass({ ); } -}); +} -var GameEndOverlay = React.createClass({ +class GameEndOverlay extends React.Component { render() { var board = this.props.board; @@ -175,7 +175,7 @@ var GameEndOverlay = React.createClass({ ); } -}); +} var TicTacToeApp = React.createClass({ getInitialState() { diff --git a/Examples/UIExplorer/js/AccessibilityAndroidExample.android.js b/Examples/UIExplorer/js/AccessibilityAndroidExample.android.js index 9b3c5789a..2b5db7723 100644 --- a/Examples/UIExplorer/js/AccessibilityAndroidExample.android.js +++ b/Examples/UIExplorer/js/AccessibilityAndroidExample.android.js @@ -36,40 +36,35 @@ var UIExplorerPage = require('./UIExplorerPage'); var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants']; -var AccessibilityAndroidExample = React.createClass({ +class AccessibilityAndroidExample extends React.Component { + static title = 'Accessibility'; + static description = 'Examples of using Accessibility API.'; - statics: { - title: 'Accessibility', - description: 'Examples of using Accessibility API.', - }, + state = { + count: 0, + backgroundImportantForAcc: 0, + forgroundImportantForAcc: 0, + }; - getInitialState: function() { - return { - count: 0, - backgroundImportantForAcc: 0, - forgroundImportantForAcc: 0, - }; - }, - - _addOne: function() { + _addOne = () => { this.setState({ count: ++this.state.count, }); - }, + }; - _changeBackgroundImportantForAcc: function() { + _changeBackgroundImportantForAcc = () => { this.setState({ backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4, }); - }, + }; - _changeForgroundImportantForAcc: function() { + _changeForgroundImportantForAcc = () => { this.setState({ forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4, }); - }, + }; - render: function() { + render() { return ( @@ -202,8 +197,8 @@ var AccessibilityAndroidExample = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ embedded: { diff --git a/Examples/UIExplorer/js/AccessibilityIOSExample.js b/Examples/UIExplorer/js/AccessibilityIOSExample.js index 84b49c4b1..2536b3037 100644 --- a/Examples/UIExplorer/js/AccessibilityIOSExample.js +++ b/Examples/UIExplorer/js/AccessibilityIOSExample.js @@ -29,7 +29,7 @@ var { View, } = ReactNative; -var AccessibilityIOSExample = React.createClass({ +class AccessibilityIOSExample extends React.Component { render() { return ( @@ -60,8 +60,8 @@ var AccessibilityIOSExample = React.createClass({ ); - }, -}); + } +} exports.title = 'AccessibilityIOS'; exports.description = 'Interface to show iOS\' accessibility samples'; diff --git a/Examples/UIExplorer/js/ActionSheetIOSExample.js b/Examples/UIExplorer/js/ActionSheetIOSExample.js index 183e9cff9..aded7ffe3 100644 --- a/Examples/UIExplorer/js/ActionSheetIOSExample.js +++ b/Examples/UIExplorer/js/ActionSheetIOSExample.js @@ -42,12 +42,10 @@ var BUTTONS = [ var DESTRUCTIVE_INDEX = 3; var CANCEL_INDEX = 4; -var ActionSheetExample = React.createClass({ - getInitialState() { - return { - clicked: 'none', - }; - }, +class ActionSheetExample extends React.Component { + state = { + clicked: 'none', + }; render() { return ( @@ -60,9 +58,9 @@ var ActionSheetExample = React.createClass({ ); - }, + } - showActionSheet() { + showActionSheet = () => { ActionSheetIOS.showActionSheetWithOptions({ options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, @@ -71,15 +69,13 @@ var ActionSheetExample = React.createClass({ (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); }); - } -}); + }; +} -var ActionSheetTintExample = React.createClass({ - getInitialState() { - return { - clicked: 'none', - }; - }, +class ActionSheetTintExample extends React.Component { + state = { + clicked: 'none', + }; render() { return ( @@ -92,9 +88,9 @@ var ActionSheetTintExample = React.createClass({ ); - }, + } - showActionSheet() { + showActionSheet = () => { ActionSheetIOS.showActionSheetWithOptions({ options: BUTTONS, cancelButtonIndex: CANCEL_INDEX, @@ -104,15 +100,13 @@ var ActionSheetTintExample = React.createClass({ (buttonIndex) => { this.setState({ clicked: BUTTONS[buttonIndex] }); }); - } -}); + }; +} -var ShareActionSheetExample = React.createClass({ - getInitialState() { - return { - text: '' - }; - }, +class ShareActionSheetExample extends React.Component { + state = { + text: '' + }; render() { return ( @@ -125,9 +119,9 @@ var ShareActionSheetExample = React.createClass({ ); - }, + } - showShareActionSheet() { + showShareActionSheet = () => { ActionSheetIOS.showShareActionSheetWithOptions({ url: this.props.url, message: 'message to go with the shared url', @@ -146,15 +140,13 @@ var ShareActionSheetExample = React.createClass({ } this.setState({text}); }); - } -}); + }; +} -var ShareScreenshotExample = React.createClass({ - getInitialState() { - return { - text: '' - }; - }, +class ShareScreenshotExample extends React.Component { + state = { + text: '' + }; render() { return ( @@ -167,9 +159,9 @@ var ShareScreenshotExample = React.createClass({ ); - }, + } - showShareActionSheet() { + showShareActionSheet = () => { // Take the snapshot (returns a temp file uri) UIManager.takeSnapshot('window').then((uri) => { // Share image data @@ -190,8 +182,8 @@ var ShareScreenshotExample = React.createClass({ this.setState({text}); }); }).catch((error) => alert(error)); - } -}); + }; +} var style = StyleSheet.create({ button: { diff --git a/Examples/UIExplorer/js/AdSupportIOSExample.js b/Examples/UIExplorer/js/AdSupportIOSExample.js index 5f6c4227f..f07973d93 100644 --- a/Examples/UIExplorer/js/AdSupportIOSExample.js +++ b/Examples/UIExplorer/js/AdSupportIOSExample.js @@ -44,15 +44,13 @@ exports.examples = [ } ]; -var AdSupportIOSExample = React.createClass({ - getInitialState: function() { - return { - deviceID: 'No IDFA yet', - hasAdvertiserTracking: 'unset', - }; - }, +class AdSupportIOSExample extends React.Component { + state = { + deviceID: 'No IDFA yet', + hasAdvertiserTracking: 'unset', + }; - componentDidMount: function() { + componentDidMount() { AdSupportIOS.getAdvertisingId( this._onDeviceIDSuccess, this._onDeviceIDFailure @@ -62,33 +60,33 @@ var AdSupportIOSExample = React.createClass({ this._onHasTrackingSuccess, this._onHasTrackingFailure ); - }, + } - _onHasTrackingSuccess: function(hasTracking) { + _onHasTrackingSuccess = (hasTracking) => { this.setState({ 'hasAdvertiserTracking': hasTracking, }); - }, + }; - _onHasTrackingFailure: function(e) { + _onHasTrackingFailure = (e) => { this.setState({ 'hasAdvertiserTracking': 'Error!', }); - }, + }; - _onDeviceIDSuccess: function(deviceID) { + _onDeviceIDSuccess = (deviceID) => { this.setState({ 'deviceID': deviceID, }); - }, + }; - _onDeviceIDFailure: function(e) { + _onDeviceIDFailure = (e) => { this.setState({ 'deviceID': 'Error!', }); - }, + }; - render: function() { + render() { return ( @@ -102,7 +100,7 @@ var AdSupportIOSExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ title: { diff --git a/Examples/UIExplorer/js/AlertExample.js b/Examples/UIExplorer/js/AlertExample.js index 8ee4813af..f8d6fe0ba 100644 --- a/Examples/UIExplorer/js/AlertExample.js +++ b/Examples/UIExplorer/js/AlertExample.js @@ -41,9 +41,8 @@ var alertMessage = 'Credibly reintermediate next-generation potentialities after /** * Simple alert examples. */ -var SimpleAlertExampleBlock = React.createClass({ - - render: function() { +class SimpleAlertExampleBlock extends React.Component { + render() { return ( ); - }, -}); + } +} -var AlertExample = React.createClass({ - statics: { - title: 'Alert', - description: 'Alerts display a concise and informative message ' + - 'and prompt the user to make a decision.', - }, - render: function() { +class AlertExample extends React.Component { + static title = 'Alert'; + + static description = 'Alerts display a concise and informative message ' + + 'and prompt the user to make a decision.'; + + render() { return ( ); } -}); +} var styles = StyleSheet.create({ wrapper: { diff --git a/Examples/UIExplorer/js/AppStateExample.js b/Examples/UIExplorer/js/AppStateExample.js index 8cac00b54..6be24ca70 100644 --- a/Examples/UIExplorer/js/AppStateExample.js +++ b/Examples/UIExplorer/js/AppStateExample.js @@ -31,33 +31,36 @@ const { View } = ReactNative; -var AppStateSubscription = React.createClass({ - getInitialState() { - return { - appState: AppState.currentState, - previousAppStates: [], - memoryWarnings: 0, - }; - }, - componentDidMount: function() { +class AppStateSubscription extends React.Component { + state = { + appState: AppState.currentState, + previousAppStates: [], + memoryWarnings: 0, + }; + + componentDidMount() { AppState.addEventListener('change', this._handleAppStateChange); AppState.addEventListener('memoryWarning', this._handleMemoryWarning); - }, - componentWillUnmount: function() { + } + + componentWillUnmount() { AppState.removeEventListener('change', this._handleAppStateChange); AppState.removeEventListener('memoryWarning', this._handleMemoryWarning); - }, - _handleMemoryWarning: function() { + } + + _handleMemoryWarning = () => { this.setState({memoryWarnings: this.state.memoryWarnings + 1}); - }, - _handleAppStateChange: function(appState) { + }; + + _handleAppStateChange = (appState) => { var previousAppStates = this.state.previousAppStates.slice(); previousAppStates.push(this.state.appState); this.setState({ appState, previousAppStates, }); - }, + }; + render() { if (this.props.showMemoryWarnings) { return ( @@ -79,7 +82,7 @@ var AppStateSubscription = React.createClass({ ); } -}); +} exports.title = 'AppState'; exports.description = 'app background status'; diff --git a/Examples/UIExplorer/js/AssetScaledImageExample.js b/Examples/UIExplorer/js/AssetScaledImageExample.js index 3d5c12a4d..685ea42d0 100644 --- a/Examples/UIExplorer/js/AssetScaledImageExample.js +++ b/Examples/UIExplorer/js/AssetScaledImageExample.js @@ -31,13 +31,10 @@ var { ScrollView } = ReactNative; -var AssetScaledImageExample = React.createClass({ - - getInitialState() { - return { - asset: this.props.asset - }; - }, +class AssetScaledImageExample extends React.Component { + state = { + asset: this.props.asset + }; render() { var image = this.state.asset.node.image; @@ -57,8 +54,8 @@ var AssetScaledImageExample = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ row: { diff --git a/Examples/UIExplorer/js/AsyncStorageExample.js b/Examples/UIExplorer/js/AsyncStorageExample.js index 8d26f7d32..70108c83e 100644 --- a/Examples/UIExplorer/js/AsyncStorageExample.js +++ b/Examples/UIExplorer/js/AsyncStorageExample.js @@ -35,12 +35,17 @@ var PickerItemIOS = PickerIOS.Item; var STORAGE_KEY = '@AsyncStorageExample:key'; var COLORS = ['red', 'orange', 'yellow', 'green', 'blue']; -var BasicStorageExample = React.createClass({ +class BasicStorageExample extends React.Component { + state = { + selectedValue: COLORS[0], + messages: [], + }; + componentDidMount() { this._loadInitialState().done(); - }, + } - async _loadInitialState() { + _loadInitialState = async () => { try { var value = await AsyncStorage.getItem(STORAGE_KEY); if (value !== null){ @@ -52,14 +57,7 @@ var BasicStorageExample = React.createClass({ } catch (error) { this._appendMessage('AsyncStorage error: ' + error.message); } - }, - - getInitialState() { - return { - selectedValue: COLORS[0], - messages: [], - }; - }, + }; render() { var color = this.state.selectedValue; @@ -91,9 +89,9 @@ var BasicStorageExample = React.createClass({ {this.state.messages.map((m) => {m})} ); - }, + } - async _onValueChange(selectedValue) { + _onValueChange = async (selectedValue) => { this.setState({selectedValue}); try { await AsyncStorage.setItem(STORAGE_KEY, selectedValue); @@ -101,21 +99,21 @@ var BasicStorageExample = React.createClass({ } catch (error) { this._appendMessage('AsyncStorage error: ' + error.message); } - }, + }; - async _removeStorage() { + _removeStorage = async () => { try { await AsyncStorage.removeItem(STORAGE_KEY); this._appendMessage('Selection removed from disk.'); } catch (error) { this._appendMessage('AsyncStorage error: ' + error.message); } - }, + }; - _appendMessage(message) { + _appendMessage = (message) => { this.setState({messages: this.state.messages.concat(message)}); - }, -}); + }; +} exports.title = 'AsyncStorage'; exports.description = 'Asynchronous local disk storage.'; diff --git a/Examples/UIExplorer/js/CameraRollExample.js b/Examples/UIExplorer/js/CameraRollExample.js index 1a665321c..be1f9254f 100644 --- a/Examples/UIExplorer/js/CameraRollExample.js +++ b/Examples/UIExplorer/js/CameraRollExample.js @@ -41,15 +41,12 @@ const AssetScaledImageExampleView = require('./AssetScaledImageExample'); const CAMERA_ROLL_VIEW = 'camera_roll_view'; -const CameraRollExample = React.createClass({ - - getInitialState() { - return { - groupTypes: 'SavedPhotos', - sliderValue: 1, - bigImages: true, - }; - }, +class CameraRollExample extends React.Component { + state = { + groupTypes: 'SavedPhotos', + sliderValue: 1, + bigImages: true, + }; render() { return ( @@ -71,9 +68,9 @@ const CameraRollExample = React.createClass({ /> ); - }, + } - loadAsset(asset){ + loadAsset = (asset) => { if (this.props.navigator) { this.props.navigator.push({ title: 'Camera Roll Image', @@ -82,9 +79,9 @@ const CameraRollExample = React.createClass({ passProps: { asset: asset }, }); } - }, + }; - _renderImage(asset) { + _renderImage = (asset) => { const imageSize = this.state.bigImages ? 150 : 75; const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; const location = asset.node.location.longitude ? @@ -105,22 +102,22 @@ const CameraRollExample = React.createClass({ ); - }, + }; - _onSliderChange(value) { + _onSliderChange = (value) => { const options = CameraRoll.GroupTypesOptions; const index = Math.floor(value * options.length * 0.99); const groupTypes = options[index]; if (groupTypes !== this.state.groupTypes) { this.setState({groupTypes: groupTypes}); } - }, + }; - _onSwitchChange(value) { + _onSwitchChange = (value) => { this.refs[CAMERA_ROLL_VIEW].rendererChanged(); this.setState({ bigImages: value }); - } -}); + }; +} const styles = StyleSheet.create({ row: { diff --git a/Examples/UIExplorer/js/ClipboardExample.js b/Examples/UIExplorer/js/ClipboardExample.js index 0b7399b20..808fa54b1 100644 --- a/Examples/UIExplorer/js/ClipboardExample.js +++ b/Examples/UIExplorer/js/ClipboardExample.js @@ -30,14 +30,12 @@ var { Text, } = ReactNative; -var ClipboardExample = React.createClass({ - getInitialState() { - return { - content: 'Content will appear here' - }; - }, +class ClipboardExample extends React.Component { + state = { + content: 'Content will appear here' + }; - async _setClipboardContent(){ + _setClipboardContent = async () => { Clipboard.setString('Hello World'); try { var content = await Clipboard.getString(); @@ -45,7 +43,7 @@ var ClipboardExample = React.createClass({ } catch (e) { this.setState({content:e.message}); } - }, + }; render() { return ( @@ -59,7 +57,7 @@ var ClipboardExample = React.createClass({ ); } -}); +} exports.title = 'Clipboard'; exports.description = 'Show Clipboard contents.'; diff --git a/Examples/UIExplorer/js/DatePickerAndroidExample.js b/Examples/UIExplorer/js/DatePickerAndroidExample.js index c6abe38a0..b362b78cd 100644 --- a/Examples/UIExplorer/js/DatePickerAndroidExample.js +++ b/Examples/UIExplorer/js/DatePickerAndroidExample.js @@ -32,26 +32,21 @@ var { var UIExplorerBlock = require('./UIExplorerBlock'); var UIExplorerPage = require('./UIExplorerPage'); -var DatePickerAndroidExample = React.createClass({ +class DatePickerAndroidExample extends React.Component { + static title = 'DatePickerAndroid'; + static description = 'Standard Android date picker dialog'; - statics: { - title: 'DatePickerAndroid', - description: 'Standard Android date picker dialog', - }, + state = { + presetDate: new Date(2020, 4, 5), + allDate: new Date(2020, 4, 5), + simpleText: 'pick a date', + minText: 'pick a date, no earlier than today', + maxText: 'pick a date, no later than today', + presetText: 'pick a date, preset to 2020/5/5', + allText: 'pick a date between 2020/5/1 and 2020/5/10', + }; - getInitialState() { - return { - presetDate: new Date(2020, 4, 5), - allDate: new Date(2020, 4, 5), - simpleText: 'pick a date', - minText: 'pick a date, no earlier than today', - maxText: 'pick a date, no later than today', - presetText: 'pick a date, preset to 2020/5/5', - allText: 'pick a date between 2020/5/1 and 2020/5/10', - }; - }, - - async showPicker(stateKey, options) { + showPicker = async (stateKey, options) => { try { var newState = {}; const {action, year, month, day} = await DatePickerAndroid.open(options); @@ -66,7 +61,7 @@ var DatePickerAndroidExample = React.createClass({ } catch ({code, message}) { console.warn(`Error in example '${stateKey}': `, message); } - }, + }; render() { return ( @@ -113,8 +108,8 @@ var DatePickerAndroidExample = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ text: { diff --git a/Examples/UIExplorer/js/DatePickerIOSExample.js b/Examples/UIExplorer/js/DatePickerIOSExample.js index 8d00dd877..15f0f83aa 100644 --- a/Examples/UIExplorer/js/DatePickerIOSExample.js +++ b/Examples/UIExplorer/js/DatePickerIOSExample.js @@ -32,34 +32,30 @@ var { View, } = ReactNative; -var DatePickerExample = React.createClass({ - getDefaultProps: function () { - return { - date: new Date(), - timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60, - }; - }, +class DatePickerExample extends React.Component { + static defaultProps = { + date: new Date(), + timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60, + }; - getInitialState: function() { - return { - date: this.props.date, - timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, - }; - }, + state = { + date: this.props.date, + timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, + }; - onDateChange: function(date) { + onDateChange = (date) => { this.setState({date: date}); - }, + }; - onTimezoneChange: function(event) { + onTimezoneChange = (event) => { var offset = parseInt(event.nativeEvent.text, 10); if (isNaN(offset)) { return; } this.setState({timeZoneOffsetInHours: offset}); - }, + }; - render: function() { + render() { // Ideally, the timezone input would be a picker rather than a // text input, but we don't have any pickers yet :( return ( @@ -103,11 +99,11 @@ var DatePickerExample = React.createClass({ /> ); - }, -}); + } +} -var WithLabel = React.createClass({ - render: function() { +class WithLabel extends React.Component { + render() { return ( @@ -119,10 +115,10 @@ var WithLabel = React.createClass({ ); } -}); +} -var Heading = React.createClass({ - render: function() { +class Heading extends React.Component { + render() { return ( @@ -131,7 +127,7 @@ var Heading = React.createClass({ ); } -}); +} exports.displayName = (undefined: ?string); exports.title = ''; diff --git a/Examples/UIExplorer/js/GeolocationExample.js b/Examples/UIExplorer/js/GeolocationExample.js index ea4517159..c9f3fbcbc 100644 --- a/Examples/UIExplorer/js/GeolocationExample.js +++ b/Examples/UIExplorer/js/GeolocationExample.js @@ -45,17 +45,15 @@ exports.examples = [ } ]; -var GeolocationExample = React.createClass({ - watchID: (null: ?number), +class GeolocationExample extends React.Component { + state = { + initialPosition: 'unknown', + lastPosition: 'unknown', + }; - getInitialState: function() { - return { - initialPosition: 'unknown', - lastPosition: 'unknown', - }; - }, + watchID: ?number = null; - componentDidMount: function() { + componentDidMount() { navigator.geolocation.getCurrentPosition( (position) => { var initialPosition = JSON.stringify(position); @@ -68,13 +66,13 @@ var GeolocationExample = React.createClass({ var lastPosition = JSON.stringify(position); this.setState({lastPosition}); }); - }, + } - componentWillUnmount: function() { + componentWillUnmount() { navigator.geolocation.clearWatch(this.watchID); - }, + } - render: function() { + render() { return ( @@ -88,7 +86,7 @@ var GeolocationExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ title: { diff --git a/Examples/UIExplorer/js/ImageCapInsetsExample.js b/Examples/UIExplorer/js/ImageCapInsetsExample.js index fe80a8612..5331026ae 100644 --- a/Examples/UIExplorer/js/ImageCapInsetsExample.js +++ b/Examples/UIExplorer/js/ImageCapInsetsExample.js @@ -32,8 +32,8 @@ var { View, } = ReactNative; -var ImageCapInsetsExample = React.createClass({ - render: function() { +class ImageCapInsetsExample extends React.Component { + render() { return ( @@ -61,7 +61,7 @@ var ImageCapInsetsExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ background: { diff --git a/Examples/UIExplorer/js/KeyboardAvoidingViewExample.js b/Examples/UIExplorer/js/KeyboardAvoidingViewExample.js index e23a984f1..0db5e5483 100644 --- a/Examples/UIExplorer/js/KeyboardAvoidingViewExample.js +++ b/Examples/UIExplorer/js/KeyboardAvoidingViewExample.js @@ -26,24 +26,20 @@ const { const UIExplorerBlock = require('./UIExplorerBlock'); const UIExplorerPage = require('./UIExplorerPage'); -const KeyboardAvoidingViewExample = React.createClass({ - statics: { - title: '', - description: 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.', - }, +class KeyboardAvoidingViewExample extends React.Component { + static title = ''; + static description = 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.'; - getInitialState() { - return { - behavior: 'padding', - modalOpen: false, - }; - }, + state = { + behavior: 'padding', + modalOpen: false, + }; - onSegmentChange(segment: String) { + onSegmentChange = (segment: String) => { this.setState({behavior: segment.toLowerCase()}); - }, + }; - renderExample() { + renderExample = () => { return ( @@ -69,7 +65,7 @@ const KeyboardAvoidingViewExample = React.createClass({ ); - }, + }; render() { return ( @@ -79,8 +75,8 @@ const KeyboardAvoidingViewExample = React.createClass({ ); - }, -}); + } +} const styles = StyleSheet.create({ outerContainer: { diff --git a/Examples/UIExplorer/js/LayoutAnimationExample.js b/Examples/UIExplorer/js/LayoutAnimationExample.js index 10efb402b..8cbc6f993 100644 --- a/Examples/UIExplorer/js/LayoutAnimationExample.js +++ b/Examples/UIExplorer/js/LayoutAnimationExample.js @@ -32,25 +32,22 @@ const { TouchableOpacity, } = ReactNative; -const AddRemoveExample = React.createClass({ - - getInitialState() { - return { - views: [], - }; - }, +class AddRemoveExample extends React.Component { + state = { + views: [], + }; componentWillUpdate() { LayoutAnimation.easeInEaseOut(); - }, + } - _onPressAddView() { + _onPressAddView = () => { this.setState((state) => ({views: [...state.views, {}]})); - }, + }; - _onPressRemoveView() { + _onPressRemoveView = () => { this.setState((state) => ({views: state.views.slice(0, -1)})); - }, + }; render() { const views = this.state.views.map((view, i) => @@ -75,8 +72,8 @@ const AddRemoveExample = React.createClass({ ); - }, -}); + } +} const GreenSquare = () => @@ -88,18 +85,15 @@ const BlueSquare = () => Blue square ; -const CrossFadeExample = React.createClass({ +class CrossFadeExample extends React.Component { + state = { + toggled: false, + }; - getInitialState() { - return { - toggled: false, - }; - }, - - _onPressToggle() { + _onPressToggle = () => { LayoutAnimation.easeInEaseOut(); this.setState((state) => ({toggled: !state.toggled})); - }, + }; render() { return ( @@ -118,8 +112,8 @@ const CrossFadeExample = React.createClass({ ); - }, -}); + } +} const styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/LayoutEventsExample.js b/Examples/UIExplorer/js/LayoutEventsExample.js index 097b76cc8..1ca5a97b5 100644 --- a/Examples/UIExplorer/js/LayoutEventsExample.js +++ b/Examples/UIExplorer/js/LayoutEventsExample.js @@ -54,15 +54,14 @@ type State = { viewStyle: { margin: number }, }; -var LayoutEventExample = React.createClass({ - getInitialState(): State { - return { - viewStyle: { - margin: 20, - }, - }; - }, - animateViewLayout: function() { +class LayoutEventExample extends React.Component { + state: State = { + viewStyle: { + margin: 20, + }, + }; + + animateViewLayout = () => { LayoutAnimation.configureNext( LayoutAnimation.Presets.spring, () => { @@ -75,29 +74,35 @@ var LayoutEventExample = React.createClass({ margin: this.state.viewStyle.margin > 20 ? 20 : 60, } }); - }, - addWrapText: function() { + }; + + addWrapText = () => { this.setState( {extraText: ' And a bunch more text to wrap around a few lines.'}, this.changeContainer ); - }, - changeContainer: function() { + }; + + changeContainer = () => { this.setState({containerStyle: {width: 280}}); - }, - onViewLayout: function(e: LayoutEvent) { + }; + + onViewLayout = (e: LayoutEvent) => { console.log('received view layout event\n', e.nativeEvent); this.setState({viewLayout: e.nativeEvent.layout}); - }, - onTextLayout: function(e: LayoutEvent) { + }; + + onTextLayout = (e: LayoutEvent) => { console.log('received text layout event\n', e.nativeEvent); this.setState({textLayout: e.nativeEvent.layout}); - }, - onImageLayout: function(e: LayoutEvent) { + }; + + onImageLayout = (e: LayoutEvent) => { console.log('received image layout event\n', e.nativeEvent); this.setState({imageLayout: e.nativeEvent.layout}); - }, - render: function() { + }; + + render() { var viewStyle = [styles.view, this.state.viewStyle]; var textLayout = this.state.textLayout || {width: '?', height: '?'}; var imageLayout = this.state.imageLayout || {x: '?', y: '?'}; @@ -131,7 +136,7 @@ var LayoutEventExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ view: { diff --git a/Examples/UIExplorer/js/LayoutExample.js b/Examples/UIExplorer/js/LayoutExample.js index 3b65fcbad..9d99e9386 100644 --- a/Examples/UIExplorer/js/LayoutExample.js +++ b/Examples/UIExplorer/js/LayoutExample.js @@ -33,8 +33,8 @@ var { var UIExplorerBlock = require('./UIExplorerBlock'); var UIExplorerPage = require('./UIExplorerPage'); -var Circle = React.createClass({ - render: function() { +class Circle extends React.Component { + render() { var size = this.props.size || 20; var backgroundColor = this.props.bgColor || '#527fe4'; return ( @@ -49,10 +49,10 @@ var Circle = React.createClass({ /> ); } -}); +} -var CircleBlock = React.createClass({ - render: function() { +class CircleBlock extends React.Component { + render() { var circleStyle = { flexDirection: 'row', backgroundColor: '#f6f7f8', @@ -66,17 +66,14 @@ var CircleBlock = React.createClass({ ); } -}); +} -var LayoutExample = React.createClass({ - statics: { - title: 'Layout - Flexbox', - description: 'Examples of using the flexbox API to layout views.', - }, +class LayoutExample extends React.Component { + static title = 'Layout - Flexbox'; + static description = 'Examples of using the flexbox API to layout views.'; + static displayName = 'LayoutExample'; - displayName: 'LayoutExample', - - render: function() { + render() { var fiveColoredCircles = [ , , @@ -168,7 +165,7 @@ var LayoutExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ overlay: { diff --git a/Examples/UIExplorer/js/LinkingExample.js b/Examples/UIExplorer/js/LinkingExample.js index 594209fe1..ff0a4900e 100644 --- a/Examples/UIExplorer/js/LinkingExample.js +++ b/Examples/UIExplorer/js/LinkingExample.js @@ -31,13 +31,12 @@ var { } = ReactNative; var UIExplorerBlock = require('./UIExplorerBlock'); -var OpenURLButton = React.createClass({ - - propTypes: { +class OpenURLButton extends React.Component { + static propTypes = { url: React.PropTypes.string, - }, + }; - handleClick: function() { + handleClick = () => { Linking.canOpenURL(this.props.url).then(supported => { if (supported) { Linking.openURL(this.props.url); @@ -45,9 +44,9 @@ var OpenURLButton = React.createClass({ console.log('Don\'t know how to open URI: ' + this.props.url); } }); - }, + }; - render: function() { + render() { return ( @@ -57,16 +56,13 @@ var OpenURLButton = React.createClass({ ); } -}); +} -var IntentAndroidExample = React.createClass({ +class IntentAndroidExample extends React.Component { + static title = 'Linking'; + static description = 'Shows how to use Linking to open URLs.'; - statics: { - title: 'Linking', - description: 'Shows how to use Linking to open URLs.', - }, - - render: function() { + render() { return ( @@ -77,8 +73,8 @@ var IntentAndroidExample = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/ListViewPagingExample.js b/Examples/UIExplorer/js/ListViewPagingExample.js index 89c6c4b4b..76bd37b6a 100644 --- a/Examples/UIExplorer/js/ListViewPagingExample.js +++ b/Examples/UIExplorer/js/ListViewPagingExample.js @@ -57,26 +57,28 @@ var THUMB_URLS = [ var NUM_SECTIONS = 100; var NUM_ROWS_PER_SECTION = 10; -var Thumb = React.createClass({ - getInitialState: function() { - return {thumbIndex: this._getThumbIdx(), dir: 'row'}; - }, - componentWillMount: function() { +class Thumb extends React.Component { + componentWillMount() { UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); - }, - _getThumbIdx: function() { + } + + _getThumbIdx = () => { return Math.floor(Math.random() * THUMB_URLS.length); - }, - _onPressThumb: function() { + }; + + _onPressThumb = () => { var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length]; LayoutAnimation.configureNext(config); this.setState({ thumbIndex: this._getThumbIdx(), dir: this.state.dir === 'row' ? 'column' : 'row', }); - }, - render: function() { + }; + + state = {thumbIndex: this._getThumbIdx(), dir: 'row'}; + + render() { return ( ); } -}); +} -var ListViewPagingExample = React.createClass({ - statics: { - title: ' - Paging', - description: 'Floating headers & layout animations.' - }, +class ListViewPagingExample extends React.Component { + state: *; + static title = ' - Paging'; + static description = 'Floating headers & layout animations.'; - getInitialState: function() { + // $FlowFixMe found when converting React.createClass to ES6 + constructor(props) { + super(props); var getSectionData = (dataBlob, sectionID) => { return dataBlob[sectionID]; }; @@ -132,17 +135,18 @@ var ListViewPagingExample = React.createClass({ dataBlob[rowName] = rowName; } } - return { + + this.state = { dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs), headerPressCount: 0, }; - }, + } - renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement { + renderRow = (rowData: string, sectionID: string, rowID: string): ReactElement => { return (); - }, + }; - renderSectionHeader: function(sectionData: string, sectionID: string) { + renderSectionHeader = (sectionData: string, sectionID: string) => { return ( @@ -150,9 +154,9 @@ var ListViewPagingExample = React.createClass({ ); - }, + }; - renderHeader: function() { + renderHeader = () => { var headerLikeText = this.state.headerPressCount % 2 ? 1 Like : null; @@ -166,9 +170,9 @@ var ListViewPagingExample = React.createClass({ ); - }, + }; - renderFooter: function() { + renderFooter = () => { return ( console.log('Footer!')} style={styles.text}> @@ -176,9 +180,9 @@ var ListViewPagingExample = React.createClass({ ); - }, + }; - render: function() { + render() { return ( ); - }, + } - _onPressHeader: function() { + _onPressHeader = () => { var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length]; LayoutAnimation.configureNext(config); this.setState({headerPressCount: this.state.headerPressCount + 1}); - }, - -}); + }; +} var styles = StyleSheet.create({ listview: { diff --git a/Examples/UIExplorer/js/MapViewExample.js b/Examples/UIExplorer/js/MapViewExample.js index 9851f0d0f..fcb58a723 100644 --- a/Examples/UIExplorer/js/MapViewExample.js +++ b/Examples/UIExplorer/js/MapViewExample.js @@ -160,16 +160,13 @@ var MapRegionInput = React.createClass({ }); -var MapViewExample = React.createClass({ - - getInitialState() { - return { - isFirstLoad: true, - mapRegion: undefined, - mapRegionInput: undefined, - annotations: [], - }; - }, +class MapViewExample extends React.Component { + state = { + isFirstLoad: true, + mapRegion: undefined, + mapRegionInput: undefined, + annotations: [], + }; render() { return ( @@ -187,23 +184,23 @@ var MapViewExample = React.createClass({ /> ); - }, + } - _getAnnotations(region) { + _getAnnotations = (region) => { return [{ longitude: region.longitude, latitude: region.latitude, title: 'You Are Here', }]; - }, + }; - _onRegionChange(region) { + _onRegionChange = (region) => { this.setState({ mapRegionInput: region, }); - }, + }; - _onRegionChangeComplete(region) { + _onRegionChangeComplete = (region) => { if (this.state.isFirstLoad) { this.setState({ mapRegionInput: region, @@ -211,27 +208,23 @@ var MapViewExample = React.createClass({ isFirstLoad: false, }); } - }, + }; - _onRegionInputChanged(region) { + _onRegionInputChanged = (region) => { this.setState({ mapRegion: region, mapRegionInput: region, annotations: this._getAnnotations(region), }); - }, + }; +} -}); - -var AnnotationExample = React.createClass({ - - getInitialState() { - return { - isFirstLoad: true, - annotations: [], - mapRegion: undefined, - }; - }, +class AnnotationExample extends React.Component { + state = { + isFirstLoad: true, + annotations: [], + mapRegion: undefined, + }; render() { if (this.state.isFirstLoad) { @@ -255,13 +248,17 @@ var AnnotationExample = React.createClass({ annotations={this.state.annotations} /> ); - }, + } +} -}); +class DraggableAnnotationExample extends React.Component { + state = { + isFirstLoad: true, + annotations: [], + mapRegion: undefined, + }; -var DraggableAnnotationExample = React.createClass({ - - createAnnotation(longitude, latitude) { + createAnnotation = (longitude, latitude) => { return { longitude, latitude, @@ -275,15 +272,7 @@ var DraggableAnnotationExample = React.createClass({ console.log('Drag state: ' + event.state); }, }; - }, - - getInitialState() { - return { - isFirstLoad: true, - annotations: [], - mapRegion: undefined, - }; - }, + }; render() { if (this.state.isFirstLoad) { @@ -305,9 +294,8 @@ var DraggableAnnotationExample = React.createClass({ annotations={this.state.annotations} /> ); - }, - -}); + } +} var styles = StyleSheet.create({ map: { diff --git a/Examples/UIExplorer/js/ModalExample.js b/Examples/UIExplorer/js/ModalExample.js index deb838960..522cfc135 100644 --- a/Examples/UIExplorer/js/ModalExample.js +++ b/Examples/UIExplorer/js/ModalExample.js @@ -38,20 +38,18 @@ exports.framework = 'React'; exports.title = ''; exports.description = 'Component for presenting modal views.'; -var Button = React.createClass({ - getInitialState() { - return { - active: false, - }; - }, +class Button extends React.Component { + state = { + active: false, + }; - _onHighlight() { + _onHighlight = () => { this.setState({active: true}); - }, + }; - _onUnhighlight() { + _onUnhighlight = () => { this.setState({active: false}); - }, + }; render() { var colorStyle = { @@ -68,28 +66,26 @@ var Button = React.createClass({ ); } -}); +} -var ModalExample = React.createClass({ - getInitialState() { - return { - animationType: 'none', - modalVisible: false, - transparent: false, - }; - }, +class ModalExample extends React.Component { + state = { + animationType: 'none', + modalVisible: false, + transparent: false, + }; - _setModalVisible(visible) { + _setModalVisible = (visible) => { this.setState({modalVisible: visible}); - }, + }; - _setAnimationType(type) { + _setAnimationType = (type) => { this.setState({animationType: type}); - }, + }; - _toggleTransparent() { + _toggleTransparent = () => { this.setState({transparent: !this.state.transparent}); - }, + }; render() { var modalBackgroundStyle = { @@ -144,8 +140,8 @@ var ModalExample = React.createClass({ ); - }, -}); + } +} exports.examples = [ { diff --git a/Examples/UIExplorer/js/NativeAnimationsExample.js b/Examples/UIExplorer/js/NativeAnimationsExample.js index 67757f56e..ef92dae60 100644 --- a/Examples/UIExplorer/js/NativeAnimationsExample.js +++ b/Examples/UIExplorer/js/NativeAnimationsExample.js @@ -33,16 +33,15 @@ var { } = ReactNative; var UIExplorerButton = require('./UIExplorerButton'); -var Tester = React.createClass({ - current: 0, - getInitialState() { - return { - native: new Animated.Value(0), - js: new Animated.Value(0), - }; - }, +class Tester extends React.Component { + state = { + native: new Animated.Value(0), + js: new Animated.Value(0), + }; - onPress() { + current = 0; + + onPress = () => { this.current = this.current ? 0 : 1; const config = { ...this.props.config, @@ -55,7 +54,7 @@ var Tester = React.createClass({ throw e; } Animated[this.props.type](this.state.js, { ...config, useNativeDriver: false }).start(); - }, + }; render() { return ( @@ -76,8 +75,8 @@ var Tester = React.createClass({ ); - }, -}); + } +} const styles = StyleSheet.create({ row: { diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js index 9f6b27a18..e0629506a 100644 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js +++ b/Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js @@ -30,8 +30,8 @@ var { TouchableHighlight, } = ReactNative; -var NavigationExampleRow = React.createClass({ - render: function() { +class NavigationExampleRow extends React.Component { + render() { if (this.props.onPress) { return ( ); - }, -}); + } +} const styles = StyleSheet.create({ row: { diff --git a/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js b/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js index 16e31cc5c..a80de6700 100644 --- a/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js +++ b/Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js @@ -41,18 +41,14 @@ const EXAMPLES = { const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample'; -const NavigationExperimentalExample = React.createClass({ - statics: { - title: 'Navigation (Experimental)', - description: 'Upcoming navigation APIs and animated navigation views', - external: true, - }, +class NavigationExperimentalExample extends React.Component { + static title = 'Navigation (Experimental)'; + static description = 'Upcoming navigation APIs and animated navigation views'; + static external = true; - getInitialState: function() { - return { - example: null, - }; - }, + state = { + example: null, + }; componentDidMount() { AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => { @@ -66,16 +62,16 @@ const NavigationExperimentalExample = React.createClass({ example, }); }); - }, + } - setExample: function(example) { + setExample = (example) => { this.setState({ example, }); AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example); - }, + }; - _renderMenu: function() { + _renderMenu = () => { let exitRow = null; if (this.props.onExampleExit) { exitRow = ( @@ -93,9 +89,9 @@ const NavigationExperimentalExample = React.createClass({ ); - }, + }; - _renderExampleList: function() { + _renderExampleList = () => { return Object.keys(EXAMPLES).map(exampleName => ( )); - }, + }; - _exitInnerExample: function() { + _exitInnerExample = () => { this.setExample('menu'); - }, + }; - handleBackAction: function() { + handleBackAction = () => { const wasHandledByExample = ( this.exampleRef && this.exampleRef.handleBackAction && @@ -125,9 +121,9 @@ const NavigationExperimentalExample = React.createClass({ return true; } return false; - }, + }; - render: function() { + render() { if (this.state.example === 'menu') { return this._renderMenu(); } @@ -141,8 +137,8 @@ const NavigationExperimentalExample = React.createClass({ ); } return null; - }, -}); + } +} const styles = StyleSheet.create({ menu: { diff --git a/Examples/UIExplorer/js/Navigator/BreadcrumbNavSample.js b/Examples/UIExplorer/js/Navigator/BreadcrumbNavSample.js index 183ff03df..c42e505d9 100644 --- a/Examples/UIExplorer/js/Navigator/BreadcrumbNavSample.js +++ b/Examples/UIExplorer/js/Navigator/BreadcrumbNavSample.js @@ -50,9 +50,8 @@ class NavButton extends React.Component { } } -var BreadcrumbNavSample = React.createClass({ - - componentWillMount: function() { +class BreadcrumbNavSample extends React.Component { + componentWillMount() { this._navBarRouteMapper = { rightContentForRoute: function(route, navigator) { return null; @@ -82,9 +81,9 @@ var BreadcrumbNavSample = React.createClass({ ); } }; - }, + } - _renderScene: function(route, navigator) { + _renderScene = (route, navigator) => { return ( ); - }, + }; - render: function() { + render() { return ( ); - }, - - - -}); + } +} var styles = StyleSheet.create({ scene: { diff --git a/Examples/UIExplorer/js/Navigator/JumpingNavSample.js b/Examples/UIExplorer/js/Navigator/JumpingNavSample.js index ef3e09da7..4cb876aa9 100644 --- a/Examples/UIExplorer/js/Navigator/JumpingNavSample.js +++ b/Examples/UIExplorer/js/Navigator/JumpingNavSample.js @@ -106,8 +106,8 @@ class JumpingNavBar extends React.Component { } } -var JumpingNavSample = React.createClass({ - render: function() { +class JumpingNavSample extends React.Component { + render() { return ( ); - }, + } - renderScene: function(route, navigator) { + renderScene = (route, navigator) => { var backBtn; var forwardBtn; if (ROUTE_STACK.indexOf(route) !== 0) { @@ -185,8 +185,8 @@ var JumpingNavSample = React.createClass({ /> ); - }, -}); + }; +} var styles = StyleSheet.create({ button: { diff --git a/Examples/UIExplorer/js/Navigator/NavigationBarSample.js b/Examples/UIExplorer/js/Navigator/NavigationBarSample.js index b11629de0..ee8118d0c 100644 --- a/Examples/UIExplorer/js/Navigator/NavigationBarSample.js +++ b/Examples/UIExplorer/js/Navigator/NavigationBarSample.js @@ -92,9 +92,8 @@ function newRandomRoute() { }; } -var NavigationBarSample = React.createClass({ - - componentWillMount: function() { +class NavigationBarSample extends React.Component { + componentWillMount() { var navigator = this.props.navigator; var callback = (event) => { @@ -113,13 +112,13 @@ var NavigationBarSample = React.createClass({ navigator.navigationContext.addListener('willfocus', callback), navigator.navigationContext.addListener('didfocus', callback), ]; - }, + } - componentWillUnmount: function() { + componentWillUnmount() { this._listeners && this._listeners.forEach(listener => listener.remove()); - }, + } - render: function() { + render() { return ( ); - }, - -}); + } +} var styles = StyleSheet.create({ messageText: { diff --git a/Examples/UIExplorer/js/Navigator/NavigatorExample.js b/Examples/UIExplorer/js/Navigator/NavigatorExample.js index 45158f642..9815ce066 100644 --- a/Examples/UIExplorer/js/Navigator/NavigatorExample.js +++ b/Examples/UIExplorer/js/Navigator/NavigatorExample.js @@ -112,14 +112,11 @@ class NavMenu extends React.Component { } } -var TabBarExample = React.createClass({ +class TabBarExample extends React.Component { + static title = ''; + static description = 'JS-implemented navigation'; - statics: { - title: '', - description: 'JS-implemented navigation', - }, - - renderScene: function(route, nav) { + renderScene = (route, nav) => { switch (route.id) { case 'navbar': return ; @@ -136,9 +133,9 @@ var TabBarExample = React.createClass({ /> ); } - }, + }; - render: function() { + render() { return ( ); - }, + } - - componentWillUnmount: function() { + componentWillUnmount() { this._listeners && this._listeners.forEach(listener => listener.remove()); - }, + } - _setNavigatorRef: function(navigator) { + _setNavigatorRef = (navigator) => { if (navigator !== this._navigator) { this._navigator = navigator; @@ -182,8 +178,8 @@ var TabBarExample = React.createClass({ ]; } } - }, -}); + }; +} var styles = StyleSheet.create({ messageText: { diff --git a/Examples/UIExplorer/js/NavigatorIOSColorsExample.js b/Examples/UIExplorer/js/NavigatorIOSColorsExample.js index 033d56f5d..aa6db47ba 100644 --- a/Examples/UIExplorer/js/NavigatorIOSColorsExample.js +++ b/Examples/UIExplorer/js/NavigatorIOSColorsExample.js @@ -30,9 +30,8 @@ var { View } = ReactNative; -var EmptyPage = React.createClass({ - - render: function() { +class EmptyPage extends React.Component { + render() { return ( @@ -40,18 +39,14 @@ var EmptyPage = React.createClass({ ); - }, + } +} -}); +class NavigatorIOSColors extends React.Component { + static title = ' - Custom'; + static description = 'iOS navigation with custom nav bar colors'; -var NavigatorIOSColors = React.createClass({ - - statics: { - title: ' - Custom', - description: 'iOS navigation with custom nav bar colors', - }, - - render: function() { + render() { // Set StatusBar with light contents to get better contrast StatusBar.setBarStyle('light-content'); @@ -77,9 +72,8 @@ var NavigatorIOSColors = React.createClass({ translucent={true} /> ); - }, - -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/NavigatorIOSExample.js b/Examples/UIExplorer/js/NavigatorIOSExample.js index 4d8f1f52a..09c569f41 100644 --- a/Examples/UIExplorer/js/NavigatorIOSExample.js +++ b/Examples/UIExplorer/js/NavigatorIOSExample.js @@ -36,8 +36,8 @@ const { View, } = ReactNative; -const EmptyPage = React.createClass({ - render: function() { +class EmptyPage extends React.Component { + render() { return ( @@ -45,11 +45,11 @@ const EmptyPage = React.createClass({ ); - }, -}); + } +} -const NavigatorIOSExamplePage = React.createClass({ - render: function() { +class NavigatorIOSExamplePage extends React.Component { + render() { var recurseTitle = 'Recurse Navigation'; if (!this.props.depth || this.props.depth === 1) { recurseTitle += ' - more examples here'; @@ -128,9 +128,9 @@ const NavigatorIOSExamplePage = React.createClass({ ); - }, + } - _renderReplace: function() { + _renderReplace = () => { if (!this.props.depth) { // this is to avoid replacing the top of the stack return null; @@ -148,9 +148,9 @@ const NavigatorIOSExamplePage = React.createClass({ } }); }); - }, + }; - _renderReplacePrevious: function() { + _renderReplacePrevious = () => { if (!this.props.depth || this.props.depth < 2) { // this is to avoid replacing the top of the stack return null; @@ -165,9 +165,9 @@ const NavigatorIOSExamplePage = React.createClass({ wrapperStyle: styles.customWrapperStyle, }); }); - }, + }; - _renderReplacePreviousAndPop: function() { + _renderReplacePreviousAndPop = () => { if (!this.props.depth || this.props.depth < 2) { // this is to avoid replacing the top of the stack return null; @@ -182,9 +182,9 @@ const NavigatorIOSExamplePage = React.createClass({ wrapperStyle: styles.customWrapperStyle, }); }); - }, + }; - _renderRow: function(title: string, onPress: Function) { + _renderRow = (title: string, onPress: Function) => { return ( @@ -197,17 +197,15 @@ const NavigatorIOSExamplePage = React.createClass({ ); - }, -}); + }; +} -const NavigatorIOSExample = React.createClass({ - statics: { - title: '', - description: 'iOS navigation capabilities', - external: true, - }, +class NavigatorIOSExample extends React.Component { + static title = ''; + static description = 'iOS navigation capabilities'; + static external = true; - render: function() { + render() { const {onExampleExit} = this.props; return ( ); - }, -}); + } +} const styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/NetInfoExample.js b/Examples/UIExplorer/js/NetInfoExample.js index 540a84639..d2563a67f 100644 --- a/Examples/UIExplorer/js/NetInfoExample.js +++ b/Examples/UIExplorer/js/NetInfoExample.js @@ -31,31 +31,33 @@ const { TouchableWithoutFeedback, } = ReactNative; -const ConnectionInfoSubscription = React.createClass({ - getInitialState() { - return { - connectionInfoHistory: [], - }; - }, - componentDidMount: function() { +class ConnectionInfoSubscription extends React.Component { + state = { + connectionInfoHistory: [], + }; + + componentDidMount() { NetInfo.addEventListener( 'change', this._handleConnectionInfoChange ); - }, - componentWillUnmount: function() { + } + + componentWillUnmount() { NetInfo.removeEventListener( 'change', this._handleConnectionInfoChange ); - }, - _handleConnectionInfoChange: function(connectionInfo) { + } + + _handleConnectionInfoChange = (connectionInfo) => { const connectionInfoHistory = this.state.connectionInfoHistory.slice(); connectionInfoHistory.push(connectionInfo); this.setState({ connectionInfoHistory, }); - }, + }; + render() { return ( @@ -63,15 +65,14 @@ const ConnectionInfoSubscription = React.createClass({ ); } -}); +} -const ConnectionInfoCurrent = React.createClass({ - getInitialState() { - return { - connectionInfo: null, - }; - }, - componentDidMount: function() { +class ConnectionInfoCurrent extends React.Component { + state = { + connectionInfo: null, + }; + + componentDidMount() { NetInfo.addEventListener( 'change', this._handleConnectionInfoChange @@ -79,18 +80,21 @@ const ConnectionInfoCurrent = React.createClass({ NetInfo.fetch().done( (connectionInfo) => { this.setState({connectionInfo}); } ); - }, - componentWillUnmount: function() { + } + + componentWillUnmount() { NetInfo.removeEventListener( 'change', this._handleConnectionInfoChange ); - }, - _handleConnectionInfoChange: function(connectionInfo) { + } + + _handleConnectionInfoChange = (connectionInfo) => { this.setState({ connectionInfo, }); - }, + }; + render() { return ( @@ -98,15 +102,14 @@ const ConnectionInfoCurrent = React.createClass({ ); } -}); +} -const IsConnected = React.createClass({ - getInitialState() { - return { - isConnected: null, - }; - }, - componentDidMount: function() { +class IsConnected extends React.Component { + state = { + isConnected: null, + }; + + componentDidMount() { NetInfo.isConnected.addEventListener( 'change', this._handleConnectivityChange @@ -114,18 +117,21 @@ const IsConnected = React.createClass({ NetInfo.isConnected.fetch().done( (isConnected) => { this.setState({isConnected}); } ); - }, - componentWillUnmount: function() { + } + + componentWillUnmount() { NetInfo.isConnected.removeEventListener( 'change', this._handleConnectivityChange ); - }, - _handleConnectivityChange: function(isConnected) { + } + + _handleConnectivityChange = (isConnected) => { this.setState({ isConnected, }); - }, + }; + render() { return ( @@ -133,19 +139,19 @@ const IsConnected = React.createClass({ ); } -}); +} -const IsConnectionExpensive = React.createClass({ - getInitialState() { - return { - isConnectionExpensive: (null : ?boolean), - }; - }, - _checkIfExpensive() { +class IsConnectionExpensive extends React.Component { + state = { + isConnectionExpensive: (null : ?boolean), + }; + + _checkIfExpensive = () => { NetInfo.isConnectionExpensive().then( isConnectionExpensive => { this.setState({isConnectionExpensive}); } ); - }, + }; + render() { return ( @@ -161,7 +167,7 @@ const IsConnectionExpensive = React.createClass({ ); } -}); +} exports.title = 'NetInfo'; exports.description = 'Monitor network status'; diff --git a/Examples/UIExplorer/js/PermissionsExampleAndroid.android.js b/Examples/UIExplorer/js/PermissionsExampleAndroid.android.js index bde582110..4d3a5d96b 100644 --- a/Examples/UIExplorer/js/PermissionsExampleAndroid.android.js +++ b/Examples/UIExplorer/js/PermissionsExampleAndroid.android.js @@ -40,15 +40,13 @@ exports.framework = 'React'; exports.title = ''; exports.description = 'Permissions example for API 23+.'; -const PermissionsExample = React.createClass({ - getInitialState: function() { - return { - permission: 'android.permission.WRITE_EXTERNAL_STORAGE', - hasPermission: 'Not Checked', - }; - }, +class PermissionsExample extends React.Component { + state = { + permission: 'android.permission.WRITE_EXTERNAL_STORAGE', + hasPermission: 'Not Checked', + }; - render: function() { + render() { return ( Permission Name: @@ -72,15 +70,15 @@ const PermissionsExample = React.createClass({ ); - }, + } - _updateText: function(event: Object) { + _updateText = (event: Object) => { this.setState({ permission: event.nativeEvent.text, }); - }, + }; - _checkPermission: function() { + _checkPermission = () => { Permissions.checkPermission( this.state.permission, (permission: string, result: boolean) => { @@ -89,9 +87,9 @@ const PermissionsExample = React.createClass({ }); }, this._showError); - }, + }; - _shouldExplainPermission: function() { + _shouldExplainPermission = () => { Permissions.shouldShowRequestPermissionRationale( this.state.permission, (permission: string, shouldShow: boolean) => { @@ -110,9 +108,9 @@ const PermissionsExample = React.createClass({ } }, this._showError); - }, + }; - _requestPermission: function() { + _requestPermission = () => { Permissions.requestPermission( this.state.permission, (permission: string, result: boolean) => { @@ -121,12 +119,12 @@ const PermissionsExample = React.createClass({ }); }, this._showError); - }, + }; - _showError: function() { + _showError = () => { DialogManager.showAlert({message: 'Error'}, {}, {}); - } -}); + }; +} exports.examples = [ { diff --git a/Examples/UIExplorer/js/PickerExample.js b/Examples/UIExplorer/js/PickerExample.js index c45014d2c..ac7b1c570 100644 --- a/Examples/UIExplorer/js/PickerExample.js +++ b/Examples/UIExplorer/js/PickerExample.js @@ -33,26 +33,22 @@ const { Text, TouchableWithoutFeedback, } = ReactNative; +// $FlowFixMe found when converting React.createClass to ES6 const Item = Picker.Item; -const PickerExample = React.createClass({ +class PickerExample extends React.Component { + static title = ''; + static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.'; - statics: { - title: '', - description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.', - }, + state = { + selected1: 'key1', + selected2: 'key1', + selected3: 'key1', + color: 'red', + mode: Picker.MODE_DIALOG, + }; - getInitialState: function() { - return { - selected1: 'key1', - selected2: 'key1', - selected3: 'key1', - color: 'red', - mode: Picker.MODE_DIALOG, - }; - }, - - render: function() { + render() { return ( @@ -121,21 +117,21 @@ const PickerExample = React.createClass({ ); - }, + } - changeMode: function() { + changeMode = () => { const newMode = this.state.mode === Picker.MODE_DIALOG ? Picker.MODE_DROPDOWN : Picker.MODE_DIALOG; this.setState({mode: newMode}); - }, + }; - onValueChange: function(key: string, value: string) { + onValueChange = (key: string, value: string) => { const newState = {}; newState[key] = value; this.setState(newState); - }, -}); + }; +} var styles = StyleSheet.create({ picker: { diff --git a/Examples/UIExplorer/js/PickerIOSExample.js b/Examples/UIExplorer/js/PickerIOSExample.js index 5b8e1988f..b6c8b8ba2 100644 --- a/Examples/UIExplorer/js/PickerIOSExample.js +++ b/Examples/UIExplorer/js/PickerIOSExample.js @@ -73,15 +73,13 @@ var CAR_MAKES_AND_MODELS = { }, }; -var PickerExample = React.createClass({ - getInitialState: function() { - return { - carMake: 'cadillac', - modelIndex: 3, - }; - }, +class PickerExample extends React.Component { + state = { + carMake: 'cadillac', + modelIndex: 3, + }; - render: function() { + render() { var make = CAR_MAKES_AND_MODELS[this.state.carMake]; var selectionString = make.name + ' ' + make.models[this.state.modelIndex]; return ( @@ -114,18 +112,16 @@ var PickerExample = React.createClass({ You selected: {selectionString} ); - }, -}); + } +} -var PickerStyleExample = React.createClass({ - getInitialState: function() { - return { - carMake: 'cadillac', - modelIndex: 0, - }; - }, +class PickerStyleExample extends React.Component { + state = { + carMake: 'cadillac', + modelIndex: 0, + }; - render: function() { + render() { var make = CAR_MAKES_AND_MODELS[this.state.carMake]; var selectionString = make.name + ' ' + make.models[this.state.modelIndex]; return ( @@ -142,8 +138,8 @@ var PickerStyleExample = React.createClass({ ))} ); - }, -}); + } +} exports.displayName = (undefined: ?string); exports.title = ''; diff --git a/Examples/UIExplorer/js/PointerEventsExample.js b/Examples/UIExplorer/js/PointerEventsExample.js index 5b15ebb27..3ab911509 100644 --- a/Examples/UIExplorer/js/PointerEventsExample.js +++ b/Examples/UIExplorer/js/PointerEventsExample.js @@ -30,26 +30,28 @@ var { View, } = ReactNative; -var ExampleBox = React.createClass({ - getInitialState: function() { - return { - log: [], - }; - }, - handleLog: function(msg) { +class ExampleBox extends React.Component { + state = { + log: [], + }; + + handleLog = (msg) => { this.state.log = this.state.log.concat([msg]); - }, - flushReactChanges: function() { + }; + + flushReactChanges = () => { this.forceUpdate(); - }, + }; + /** * Capture phase of bubbling to append separator before any of the bubbling * happens. */ - handleTouchCapture: function() { + handleTouchCapture = () => { this.state.log = this.state.log.concat(['---']); - }, - render: function() { + }; + + render() { return ( ); } -}); +} - -var NoneExample = React.createClass({ - render: function() { +class NoneExample extends React.Component { + render() { return ( this.props.onLog('A unspecified touched')} @@ -96,14 +97,14 @@ var NoneExample = React.createClass({ ); } -}); +} /** * Special demo text that makes itself untouchable so that it doesn't destroy * the experiment and confuse the output. */ -var DemoText = React.createClass({ - render: function() { +class DemoText extends React.Component { + render() { return ( ); } -}); +} -var BoxNoneExample = React.createClass({ - render: function() { +class BoxNoneExample extends React.Component { + render() { return ( this.props.onLog('A unspecified touched')} @@ -150,10 +151,10 @@ var BoxNoneExample = React.createClass({ ); } -}); +} -var BoxOnlyExample = React.createClass({ - render: function() { +class BoxOnlyExample extends React.Component { + render() { return ( this.props.onLog('A unspecified touched')} @@ -187,7 +188,7 @@ var BoxOnlyExample = React.createClass({ ); } -}); +} type ExampleClass = { Component: ReactClass, diff --git a/Examples/UIExplorer/js/ProgressBarAndroidExample.android.js b/Examples/UIExplorer/js/ProgressBarAndroidExample.android.js index 81be4637c..4570d262d 100644 --- a/Examples/UIExplorer/js/ProgressBarAndroidExample.android.js +++ b/Examples/UIExplorer/js/ProgressBarAndroidExample.android.js @@ -52,14 +52,11 @@ var MovingBar = React.createClass({ }, }); -var ProgressBarAndroidExample = React.createClass({ +class ProgressBarAndroidExample extends React.Component { + static title = ''; + static description = 'Horizontal bar to show the progress of some operation.'; - statics: { - title: '', - description: 'Horizontal bar to show the progress of some operation.', - }, - - render: function() { + render() { return ( @@ -79,7 +76,7 @@ var ProgressBarAndroidExample = React.createClass({ ); - }, -}); + } +} module.exports = ProgressBarAndroidExample; diff --git a/Examples/UIExplorer/js/PushNotificationIOSExample.js b/Examples/UIExplorer/js/PushNotificationIOSExample.js index 064a44580..e0c961b49 100644 --- a/Examples/UIExplorer/js/PushNotificationIOSExample.js +++ b/Examples/UIExplorer/js/PushNotificationIOSExample.js @@ -33,8 +33,8 @@ var { View, } = ReactNative; -var Button = React.createClass({ - render: function() { +class Button extends React.Component { + render() { return ( ); } -}); +} class NotificationExample extends React.Component { componentWillMount() { diff --git a/Examples/UIExplorer/js/RefreshControlExample.js b/Examples/UIExplorer/js/RefreshControlExample.js index 9d85274cb..52da179f7 100644 --- a/Examples/UIExplorer/js/RefreshControlExample.js +++ b/Examples/UIExplorer/js/RefreshControlExample.js @@ -49,11 +49,12 @@ const styles = StyleSheet.create({ }, }); -const Row = React.createClass({ - _onClick: function() { +class Row extends React.Component { + _onClick = () => { this.props.onClick(this.props.data); - }, - render: function() { + }; + + render() { return ( @@ -63,30 +64,26 @@ const Row = React.createClass({ ); - }, -}); + } +} -const RefreshControlExample = React.createClass({ - statics: { - title: '', - description: 'Adds pull-to-refresh support to a scrollview.' - }, +class RefreshControlExample extends React.Component { + static title = ''; + static description = 'Adds pull-to-refresh support to a scrollview.'; - getInitialState() { - return { - isRefreshing: false, - loaded: 0, - rowData: Array.from(new Array(20)).map( - (val, i) => ({text: 'Initial row ' + i, clicks: 0})), - }; - }, + state = { + isRefreshing: false, + loaded: 0, + rowData: Array.from(new Array(20)).map( + (val, i) => ({text: 'Initial row ' + i, clicks: 0})), + }; - _onClick(row) { + _onClick = (row) => { row.clicks++; this.setState({ rowData: this.state.rowData, }); - }, + }; render() { const rows = this.state.rowData.map((row, ii) => { @@ -109,9 +106,9 @@ const RefreshControlExample = React.createClass({ {rows} ); - }, + } - _onRefresh() { + _onRefresh = () => { this.setState({isRefreshing: true}); setTimeout(() => { // prepend 10 items @@ -128,7 +125,7 @@ const RefreshControlExample = React.createClass({ rowData: rowData, }); }, 5000); - }, -}); + }; +} module.exports = RefreshControlExample; diff --git a/Examples/UIExplorer/js/ScrollViewExample.js b/Examples/UIExplorer/js/ScrollViewExample.js index de6ac3f7b..7eb416920 100644 --- a/Examples/UIExplorer/js/ScrollViewExample.js +++ b/Examples/UIExplorer/js/ScrollViewExample.js @@ -84,18 +84,19 @@ exports.examples = [ } }]; -var Thumb = React.createClass({ - shouldComponentUpdate: function(nextProps, nextState) { +class Thumb extends React.Component { + shouldComponentUpdate(nextProps, nextState) { return false; - }, - render: function() { + } + + render() { return ( ); } -}); +} var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png']; THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS diff --git a/Examples/UIExplorer/js/ScrollViewSimpleExample.js b/Examples/UIExplorer/js/ScrollViewSimpleExample.js index 60efdad42..2c2e85b4e 100644 --- a/Examples/UIExplorer/js/ScrollViewSimpleExample.js +++ b/Examples/UIExplorer/js/ScrollViewSimpleExample.js @@ -33,12 +33,11 @@ var { var NUM_ITEMS = 20; -var ScrollViewSimpleExample = React.createClass({ - statics: { - title: '', - description: 'Component that enables scrolling through child components.' - }, - makeItems: function(nItems: number, styles): Array { +class ScrollViewSimpleExample extends React.Component { + static title = ''; + static description = 'Component that enables scrolling through child components.'; + + makeItems = (nItems: number, styles): Array => { var items = []; for (var i = 0; i < nItems; i++) { items[i] = ( @@ -48,9 +47,9 @@ var ScrollViewSimpleExample = React.createClass({ ); } return items; - }, + }; - render: function() { + render() { // One of the items is a horizontal scroll view var items = this.makeItems(NUM_ITEMS, styles.itemWrapper); items[4] = ( @@ -67,7 +66,7 @@ var ScrollViewSimpleExample = React.createClass({ return verticalScrollView; } -}); +} var styles = StyleSheet.create({ verticalScrollView: { diff --git a/Examples/UIExplorer/js/SegmentedControlIOSExample.js b/Examples/UIExplorer/js/SegmentedControlIOSExample.js index 4a23037a2..6ce3920e6 100644 --- a/Examples/UIExplorer/js/SegmentedControlIOSExample.js +++ b/Examples/UIExplorer/js/SegmentedControlIOSExample.js @@ -31,7 +31,7 @@ var { StyleSheet } = ReactNative; -var BasicSegmentedControlExample = React.createClass({ +class BasicSegmentedControlExample extends React.Component { render() { return ( @@ -44,9 +44,9 @@ var BasicSegmentedControlExample = React.createClass({ ); } -}); +} -var PreSelectedSegmentedControlExample = React.createClass({ +class PreSelectedSegmentedControlExample extends React.Component { render() { return ( @@ -56,9 +56,9 @@ var PreSelectedSegmentedControlExample = React.createClass({ ); } -}); +} -var MomentarySegmentedControlExample = React.createClass({ +class MomentarySegmentedControlExample extends React.Component { render() { return ( @@ -68,9 +68,9 @@ var MomentarySegmentedControlExample = React.createClass({ ); } -}); +} -var DisabledSegmentedControlExample = React.createClass({ +class DisabledSegmentedControlExample extends React.Component { render() { return ( @@ -79,10 +79,10 @@ var DisabledSegmentedControlExample = React.createClass({ ); - }, -}); + } +} -var ColorSegmentedControlExample = React.createClass({ +class ColorSegmentedControlExample extends React.Component { render() { return ( @@ -94,17 +94,15 @@ var ColorSegmentedControlExample = React.createClass({ ); - }, -}); + } +} -var EventSegmentedControlExample = React.createClass({ - getInitialState() { - return { - values: ['One', 'Two', 'Three'], - value: 'Not selected', - selectedIndex: undefined - }; - }, +class EventSegmentedControlExample extends React.Component { + state = { + values: ['One', 'Two', 'Three'], + value: 'Not selected', + selectedIndex: undefined + }; render() { return ( @@ -122,20 +120,20 @@ var EventSegmentedControlExample = React.createClass({ onValueChange={this._onValueChange} /> ); - }, + } - _onChange(event) { + _onChange = (event) => { this.setState({ selectedIndex: event.nativeEvent.selectedSegmentIndex, }); - }, + }; - _onValueChange(value) { + _onValueChange = (value) => { this.setState({ value: value, }); - } -}); + }; +} var styles = StyleSheet.create({ text: { diff --git a/Examples/UIExplorer/js/SliderExample.js b/Examples/UIExplorer/js/SliderExample.js index ff7b31de9..bd4a3c1fb 100644 --- a/Examples/UIExplorer/js/SliderExample.js +++ b/Examples/UIExplorer/js/SliderExample.js @@ -31,18 +31,14 @@ var { View, } = ReactNative; -var SliderExample = React.createClass({ - getDefaultProps() { - return { - value: 0, - } - }, +class SliderExample extends React.Component { + static defaultProps = { + value: 0, + }; - getInitialState() { - return { - value: this.props.value, - }; - }, + state = { + value: this.props.value, + }; render() { return ( @@ -56,15 +52,13 @@ var SliderExample = React.createClass({ ); } -}); +} -var SlidingCompleteExample = React.createClass({ - getInitialState() { - return { - slideCompletionValue: 0, - slideCompletionCount: 0, - }; - }, +class SlidingCompleteExample extends React.Component { + state = { + slideCompletionValue: 0, + slideCompletionCount: 0, + }; render() { return ( @@ -80,7 +74,7 @@ var SlidingCompleteExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ slider: { diff --git a/Examples/UIExplorer/js/SliderIOSExample.js b/Examples/UIExplorer/js/SliderIOSExample.js index 8cd69a825..be0f6f4e2 100644 --- a/Examples/UIExplorer/js/SliderIOSExample.js +++ b/Examples/UIExplorer/js/SliderIOSExample.js @@ -31,12 +31,10 @@ var { View, } = ReactNative; -var SliderExample = React.createClass({ - getInitialState() { - return { - value: 0, - }; - }, +class SliderExample extends React.Component { + state = { + value: 0, + }; render() { return ( @@ -50,7 +48,7 @@ var SliderExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ slider: { diff --git a/Examples/UIExplorer/js/SnapshotExample.js b/Examples/UIExplorer/js/SnapshotExample.js index 1a3e5c181..03a8b6ba6 100644 --- a/Examples/UIExplorer/js/SnapshotExample.js +++ b/Examples/UIExplorer/js/SnapshotExample.js @@ -32,12 +32,10 @@ var { View, } = ReactNative; -var ScreenshotExample = React.createClass({ - getInitialState() { - return { - uri: undefined, - }; - }, +class ScreenshotExample extends React.Component { + state = { + uri: undefined, + }; render() { return ( @@ -48,15 +46,15 @@ var ScreenshotExample = React.createClass({ ); - }, + } - takeScreenshot() { + takeScreenshot = () => { UIManager .takeSnapshot('window', {format: 'jpeg', quality: 0.8}) // See UIManager.js for options .then((uri) => this.setState({uri})) .catch((error) => alert(error)); - } -}); + }; +} var style = StyleSheet.create({ button: { diff --git a/Examples/UIExplorer/js/StatusBarExample.js b/Examples/UIExplorer/js/StatusBarExample.js index 5a213a32c..e1f90c192 100644 --- a/Examples/UIExplorer/js/StatusBarExample.js +++ b/Examples/UIExplorer/js/StatusBarExample.js @@ -56,31 +56,29 @@ function getValue(values: Array, index: number): T { return values[index % values.length]; } -const StatusBarHiddenExample = React.createClass({ - getInitialState() { - return { - animated: true, - hidden: false, - showHideTransition: getValue(showHideTransitions, 0), - }; - }, +class StatusBarHiddenExample extends React.Component { + state = { + animated: true, + hidden: false, + showHideTransition: getValue(showHideTransitions, 0), + }; - _showHideTransitionIndex: 0, + _showHideTransitionIndex = 0; - _onChangeAnimated() { + _onChangeAnimated = () => { this.setState({animated: !this.state.animated}); - }, + }; - _onChangeHidden() { + _onChangeHidden = () => { this.setState({hidden: !this.state.hidden}); - }, + }; - _onChangeTransition() { + _onChangeTransition = () => { this._showHideTransitionIndex++; this.setState({ showHideTransition: getValue(showHideTransitions, this._showHideTransitionIndex), }); - }, + }; render() { return ( @@ -116,27 +114,25 @@ const StatusBarHiddenExample = React.createClass({ ); - }, -}); + } +} -const StatusBarStyleExample = React.createClass({ - getInitialState() { - return { - animated: true, - barStyle: getValue(barStyles, this._barStyleIndex), - }; - }, +class StatusBarStyleExample extends React.Component { + _barStyleIndex = 0; - _barStyleIndex: 0, - - _onChangeBarStyle() { + _onChangeBarStyle = () => { this._barStyleIndex++; this.setState({barStyle: getValue(barStyles, this._barStyleIndex)}); - }, + }; - _onChangeAnimated() { + _onChangeAnimated = () => { this.setState({animated: !this.state.animated}); - }, + }; + + state = { + animated: true, + barStyle: getValue(barStyles, this._barStyleIndex), + }; render() { return ( @@ -161,21 +157,19 @@ const StatusBarStyleExample = React.createClass({ ); - }, -}); + } +} -const StatusBarNetworkActivityExample = React.createClass({ - getInitialState() { - return { - networkActivityIndicatorVisible: false, - }; - }, +class StatusBarNetworkActivityExample extends React.Component { + state = { + networkActivityIndicatorVisible: false, + }; - _onChangeNetworkIndicatorVisible() { + _onChangeNetworkIndicatorVisible = () => { this.setState({ networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible, }); - }, + }; render() { return ( @@ -195,27 +189,25 @@ const StatusBarNetworkActivityExample = React.createClass({ ); - }, -}); + } +} -const StatusBarBackgroundColorExample = React.createClass({ - getInitialState() { - return { - animated: true, - backgroundColor: getValue(colors, 0), - }; - }, +class StatusBarBackgroundColorExample extends React.Component { + state = { + animated: true, + backgroundColor: getValue(colors, 0), + }; - _colorIndex: 0, + _colorIndex = 0; - _onChangeBackgroundColor() { + _onChangeBackgroundColor = () => { this._colorIndex++; this.setState({backgroundColor: getValue(colors, this._colorIndex)}); - }, + }; - _onChangeAnimated() { + _onChangeAnimated = () => { this.setState({animated: !this.state.animated}); - }, + }; render() { return ( @@ -240,22 +232,19 @@ const StatusBarBackgroundColorExample = React.createClass({ ); - }, -}); + } +} +class StatusBarTranslucentExample extends React.Component { + state = { + translucent: false, + }; -const StatusBarTranslucentExample = React.createClass({ - getInitialState() { - return { - translucent: false, - }; - }, - - _onChangeTranslucent() { + _onChangeTranslucent = () => { this.setState({ translucent: !this.state.translucent, }); - }, + }; render() { return ( @@ -272,10 +261,10 @@ const StatusBarTranslucentExample = React.createClass({ ); - }, -}); + } +} -const StatusBarStaticIOSExample = React.createClass({ +class StatusBarStaticIOSExample extends React.Component { render() { return ( @@ -335,10 +324,10 @@ const StatusBarStaticIOSExample = React.createClass({ ); - }, -}); + } +} -const StatusBarStaticAndroidExample = React.createClass({ +class StatusBarStaticAndroidExample extends React.Component { render() { return ( @@ -400,8 +389,8 @@ const StatusBarStaticAndroidExample = React.createClass({ ); - }, -}); + } +} const examples = [{ title: 'StatusBar hidden', diff --git a/Examples/UIExplorer/js/SwitchExample.js b/Examples/UIExplorer/js/SwitchExample.js index 0fc645626..3c7ddad0e 100644 --- a/Examples/UIExplorer/js/SwitchExample.js +++ b/Examples/UIExplorer/js/SwitchExample.js @@ -31,13 +31,12 @@ var { View } = ReactNative; -var BasicSwitchExample = React.createClass({ - getInitialState() { - return { - trueSwitchIsOn: true, - falseSwitchIsOn: false, - }; - }, +class BasicSwitchExample extends React.Component { + state = { + trueSwitchIsOn: true, + falseSwitchIsOn: false, + }; + render() { return ( @@ -51,9 +50,9 @@ var BasicSwitchExample = React.createClass({ ); } -}); +} -var DisabledSwitchExample = React.createClass({ +class DisabledSwitchExample extends React.Component { render() { return ( @@ -66,16 +65,15 @@ var DisabledSwitchExample = React.createClass({ value={false} /> ); - }, -}); + } +} + +class ColorSwitchExample extends React.Component { + state = { + colorTrueSwitchIsOn: true, + colorFalseSwitchIsOn: false, + }; -var ColorSwitchExample = React.createClass({ - getInitialState() { - return { - colorTrueSwitchIsOn: true, - colorFalseSwitchIsOn: false, - }; - }, render() { return ( @@ -94,16 +92,15 @@ var ColorSwitchExample = React.createClass({ value={this.state.colorTrueSwitchIsOn} /> ); - }, -}); + } +} + +class EventSwitchExample extends React.Component { + state = { + eventSwitchIsOn: false, + eventSwitchRegressionIsOn: true, + }; -var EventSwitchExample = React.createClass({ - getInitialState() { - return { - eventSwitchIsOn: false, - eventSwitchRegressionIsOn: true, - }; - }, render() { return ( @@ -132,7 +129,7 @@ var EventSwitchExample = React.createClass({ ); } -}); +} var examples = [ { diff --git a/Examples/UIExplorer/js/TabBarIOSExample.js b/Examples/UIExplorer/js/TabBarIOSExample.js index 30a28c6b3..1e659b54c 100644 --- a/Examples/UIExplorer/js/TabBarIOSExample.js +++ b/Examples/UIExplorer/js/TabBarIOSExample.js @@ -33,32 +33,27 @@ var { var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='; -var TabBarExample = React.createClass({ - statics: { - title: '', - description: 'Tab-based navigation.', - }, +class TabBarExample extends React.Component { + static title = ''; + static description = 'Tab-based navigation.'; + static displayName = 'TabBarExample'; - displayName: 'TabBarExample', + state = { + selectedTab: 'redTab', + notifCount: 0, + presses: 0, + }; - getInitialState: function() { - return { - selectedTab: 'redTab', - notifCount: 0, - presses: 0, - }; - }, - - _renderContent: function(color: string, pageText: string, num?: number) { + _renderContent = (color: string, pageText: string, num?: number) => { return ( {pageText} {num} re-renders of the {pageText} ); - }, + }; - render: function() { + render() { return ( ); - }, - -}); + } +} var styles = StyleSheet.create({ tabContent: { diff --git a/Examples/UIExplorer/js/TextExample.android.js b/Examples/UIExplorer/js/TextExample.android.js index 8360c9375..c51d9e44b 100644 --- a/Examples/UIExplorer/js/TextExample.android.js +++ b/Examples/UIExplorer/js/TextExample.android.js @@ -33,31 +33,32 @@ var { var UIExplorerBlock = require('./UIExplorerBlock'); var UIExplorerPage = require('./UIExplorerPage'); -var Entity = React.createClass({ - render: function() { +class Entity extends React.Component { + render() { return ( {this.props.children} ); } -}); +} -var AttributeToggler = React.createClass({ - getInitialState: function() { - return {fontWeight: 'bold', fontSize: 15}; - }, - toggleWeight: function() { +class AttributeToggler extends React.Component { + state = {fontWeight: 'bold', fontSize: 15}; + + toggleWeight = () => { this.setState({ fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold' }); - }, - increaseSize: function() { + }; + + increaseSize = () => { this.setState({ fontSize: this.state.fontSize + 1 }); - }, - render: function() { + }; + + render() { var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize}; return ( @@ -77,14 +78,13 @@ var AttributeToggler = React.createClass({ ); } -}); +} -var TextExample = React.createClass({ - statics: { - title: '', - description: 'Base component for rendering styled text.', - }, - render: function() { +class TextExample extends React.Component { + static title = ''; + static description = 'Base component for rendering styled text.'; + + render() { return ( @@ -414,7 +414,7 @@ var TextExample = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ backgroundColorText: { diff --git a/Examples/UIExplorer/js/TextExample.ios.js b/Examples/UIExplorer/js/TextExample.ios.js index 3c5802157..eb106958a 100644 --- a/Examples/UIExplorer/js/TextExample.ios.js +++ b/Examples/UIExplorer/js/TextExample.ios.js @@ -31,31 +31,32 @@ var { View, } = ReactNative; -var Entity = React.createClass({ - render: function() { +class Entity extends React.Component { + render() { return ( {this.props.children} ); } -}); +} -var AttributeToggler = React.createClass({ - getInitialState: function() { - return {fontWeight: 'bold', fontSize: 15}; - }, - toggleWeight: function() { +class AttributeToggler extends React.Component { + state = {fontWeight: 'bold', fontSize: 15}; + + toggleWeight = () => { this.setState({ fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold' }); - }, - increaseSize: function() { + }; + + increaseSize = () => { this.setState({ fontSize: this.state.fontSize + 1 }); - }, - render: function() { + }; + + render() { var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize}; return ( @@ -78,7 +79,7 @@ var AttributeToggler = React.createClass({ ); } -}); +} exports.title = ''; exports.description = 'Base component for rendering styled text.'; diff --git a/Examples/UIExplorer/js/TextInputExample.android.js b/Examples/UIExplorer/js/TextInputExample.android.js index 83731531d..1e3b761a4 100644 --- a/Examples/UIExplorer/js/TextInputExample.android.js +++ b/Examples/UIExplorer/js/TextInputExample.android.js @@ -31,16 +31,14 @@ var { StyleSheet, } = ReactNative; -var TextEventsExample = React.createClass({ - getInitialState: function() { - return { - curText: '', - prevText: '', - prev2Text: '', - }; - }, +class TextEventsExample extends React.Component { + state = { + curText: '', + prevText: '', + prev2Text: '', + }; - updateText: function(text) { + updateText = (text) => { this.setState((state) => { return { curText: text, @@ -48,9 +46,9 @@ var TextEventsExample = React.createClass({ prev2Text: state.prevText, }; }); - }, + }; - render: function() { + render() { return ( ); } -}); +} class AutoExpandingTextInput extends React.Component { constructor(props) { @@ -189,12 +187,12 @@ class TokenizedTextExample extends React.Component { } } -var BlurOnSubmitExample = React.createClass({ - focusNextField(nextField) { +class BlurOnSubmitExample extends React.Component { + focusNextField = (nextField) => { this.refs[nextField].focus(); - }, + }; - render: function() { + render() { return ( ); } -}); +} var styles = StyleSheet.create({ multiline: { diff --git a/Examples/UIExplorer/js/TextInputExample.ios.js b/Examples/UIExplorer/js/TextInputExample.ios.js index a65d55393..6b4874465 100644 --- a/Examples/UIExplorer/js/TextInputExample.ios.js +++ b/Examples/UIExplorer/js/TextInputExample.ios.js @@ -31,8 +31,8 @@ var { StyleSheet, } = ReactNative; -var WithLabel = React.createClass({ - render: function() { +class WithLabel extends React.Component { + render() { return ( @@ -41,20 +41,18 @@ var WithLabel = React.createClass({ {this.props.children} ); - }, -}); + } +} -var TextEventsExample = React.createClass({ - getInitialState: function() { - return { - curText: '', - prevText: '', - prev2Text: '', - prev3Text: '', - }; - }, +class TextEventsExample extends React.Component { + state = { + curText: '', + prevText: '', + prev2Text: '', + prev3Text: '', + }; - updateText: function(text) { + updateText = (text) => { this.setState((state) => { return { curText: text, @@ -63,9 +61,9 @@ var TextEventsExample = React.createClass({ prev3Text: state.prev2Text, }; }); - }, + }; - render: function() { + render() { return ( ); } -}); +} class AutoExpandingTextInput extends React.Component { state: any; @@ -242,12 +240,12 @@ class TokenizedTextExample extends React.Component { } } -var BlurOnSubmitExample = React.createClass({ - focusNextField(nextField) { +class BlurOnSubmitExample extends React.Component { + focusNextField = (nextField) => { this.refs[nextField].focus(); - }, + }; - render: function() { + render() { return ( ); } -}); +} var styles = StyleSheet.create({ page: { diff --git a/Examples/UIExplorer/js/TimePickerAndroidExample.js b/Examples/UIExplorer/js/TimePickerAndroidExample.js index db3d54acf..7a9e88d09 100644 --- a/Examples/UIExplorer/js/TimePickerAndroidExample.js +++ b/Examples/UIExplorer/js/TimePickerAndroidExample.js @@ -32,27 +32,19 @@ var { var UIExplorerBlock = require('./UIExplorerBlock'); var UIExplorerPage = require('./UIExplorerPage'); -var TimePickerAndroidExample = React.createClass({ +class TimePickerAndroidExample extends React.Component { + static title = 'TimePickerAndroid'; + static description = 'Standard Android time picker dialog'; - statics: { - title: 'TimePickerAndroid', - description: 'Standard Android time picker dialog', - }, + state = { + isoFormatText: 'pick a time (24-hour format)', + presetHour: 4, + presetMinute: 4, + presetText: 'pick a time, default: 4:04AM', + simpleText: 'pick a time', + }; - getInitialState() { - // *Text, *Hour and *Minute are set by successCallback -- this updates the text with the time - // picked by the user and makes it so the next time they open it the hour and minute they picked - // before is displayed. - return { - isoFormatText: 'pick a time (24-hour format)', - presetHour: 4, - presetMinute: 4, - presetText: 'pick a time, default: 4:04AM', - simpleText: 'pick a time', - }; - }, - - async showPicker(stateKey, options) { + showPicker = async (stateKey, options) => { try { const {action, minute, hour} = await TimePickerAndroid.open(options); var newState = {}; @@ -67,7 +59,7 @@ var TimePickerAndroidExample = React.createClass({ } catch ({code, message}) { console.warn(`Error in example '${stateKey}': `, message); } - }, + }; render() { return ( @@ -100,8 +92,8 @@ var TimePickerAndroidExample = React.createClass({ ); - }, -}); + } +} /** * Returns e.g. '3:05'. diff --git a/Examples/UIExplorer/js/TimerExample.js b/Examples/UIExplorer/js/TimerExample.js index 97d4b9a32..a32522851 100644 --- a/Examples/UIExplorer/js/TimerExample.js +++ b/Examples/UIExplorer/js/TimerExample.js @@ -40,19 +40,17 @@ function burnCPU(milliseconds) { while (performanceNow() < (start + milliseconds)) {} } -var RequestIdleCallbackTester = React.createClass({ - _idleTimer: (null: any), - _iters: 0, +class RequestIdleCallbackTester extends React.Component { + state = { + message: '-', + }; - getInitialState() { - return { - message: '-', - }; - }, + _idleTimer: any = null; + _iters = 0; componentWillUnmount() { cancelIdleCallback(this._idleTimer); - }, + } render() { return ( @@ -76,9 +74,9 @@ var RequestIdleCallbackTester = React.createClass({ {this.state.message} ); - }, + } - _run(shouldBurnCPU) { + _run = (shouldBurnCPU) => { cancelIdleCallback(this._idleTimer); this._idleTimer = requestIdleCallback((deadline) => { let message = ''; @@ -89,9 +87,9 @@ var RequestIdleCallbackTester = React.createClass({ } this.setState({message: `${message} ${deadline.timeRemaining()}ms remaining in frame`}); }); - }, + }; - _runBackground() { + _runBackground = () => { cancelIdleCallback(this._idleTimer); const handler = (deadline) => { while (deadline.timeRemaining() > 5) { @@ -102,13 +100,13 @@ var RequestIdleCallbackTester = React.createClass({ this._idleTimer = requestIdleCallback(handler); }; this._idleTimer = requestIdleCallback(handler); - }, + }; - _stopBackground() { + _stopBackground = () => { this._iters = 0; cancelIdleCallback(this._idleTimer); - } -}); + }; +} var TimerTester = React.createClass({ mixins: [TimerMixin], @@ -245,14 +243,12 @@ exports.examples = [ description: 'Execute function fn every t milliseconds until cancelled ' + 'or component is unmounted.', render: function(): ReactElement { - var IntervalExample = React.createClass({ - getInitialState: function() { - return { - showTimer: true, - }; - }, + class IntervalExample extends React.Component { + state = { + showTimer: true, + }; - render: function() { + render() { if (this.state.showTimer) { var timer = [ , @@ -273,9 +269,9 @@ exports.examples = [ ); - }, + } - _renderTimer: function() { + _renderTimer = () => { return ( @@ -284,12 +280,13 @@ exports.examples = [ ); - }, + }; - _toggleTimer: function() { + _toggleTimer = () => { this.setState({showTimer: !this.state.showTimer}); - }, - }); + }; + } + return ; }, }, diff --git a/Examples/UIExplorer/js/ToastAndroidExample.android.js b/Examples/UIExplorer/js/ToastAndroidExample.android.js index 86866b1c3..d15898eea 100644 --- a/Examples/UIExplorer/js/ToastAndroidExample.android.js +++ b/Examples/UIExplorer/js/ToastAndroidExample.android.js @@ -35,18 +35,12 @@ var { var UIExplorerBlock = require('UIExplorerBlock'); var UIExplorerPage = require('UIExplorerPage'); -var ToastExample = React.createClass({ +class ToastExample extends React.Component { + static title = 'Toast Example'; + static description = 'Example that demonstrates the use of an Android Toast to provide feedback.'; + state = {}; - statics: { - title: 'Toast Example', - description: 'Example that demonstrates the use of an Android Toast to provide feedback.', - }, - - getInitialState: function() { - return {}; - }, - - render: function() { + render() { return ( @@ -101,8 +95,8 @@ var ToastExample = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ text: { diff --git a/Examples/UIExplorer/js/ToolbarAndroidExample.android.js b/Examples/UIExplorer/js/ToolbarAndroidExample.android.js index b0fb8efbc..39941eed9 100644 --- a/Examples/UIExplorer/js/ToolbarAndroidExample.android.js +++ b/Examples/UIExplorer/js/ToolbarAndroidExample.android.js @@ -35,22 +35,20 @@ var UIExplorerPage = require('./UIExplorerPage'); var SwitchAndroid = require('SwitchAndroid'); var ToolbarAndroid = require('ToolbarAndroid'); -var ToolbarAndroidExample = React.createClass({ - statics: { - title: '', - description: 'Examples of using the Android toolbar.' - }, - getInitialState: function() { - return { - actionText: 'Example app with toolbar component', - toolbarSwitch: false, - colorProps: { - titleColor: '#3b5998', - subtitleColor: '#6a7180', - }, - }; - }, - render: function() { +class ToolbarAndroidExample extends React.Component { + static title = ''; + static description = 'Examples of using the Android toolbar.'; + + state = { + actionText: 'Example app with toolbar component', + toolbarSwitch: false, + colorProps: { + titleColor: '#3b5998', + subtitleColor: '#6a7180', + }, + }; + + render() { return ( @@ -117,13 +115,14 @@ var ToolbarAndroidExample = React.createClass({ ); - }, - _onActionSelected: function(position) { + } + + _onActionSelected = (position) => { this.setState({ actionText: 'Selected ' + toolbarActions[position].title, }); - }, -}); + }; +} var toolbarActions = [ {title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'}, diff --git a/Examples/UIExplorer/js/TouchableExample.js b/Examples/UIExplorer/js/TouchableExample.js index 69e3819c1..ef741b5e6 100644 --- a/Examples/UIExplorer/js/TouchableExample.js +++ b/Examples/UIExplorer/js/TouchableExample.js @@ -119,18 +119,18 @@ exports.examples = [ }, }]; -var TextOnPressBox = React.createClass({ - getInitialState: function() { - return { - timesPressed: 0, - }; - }, - textOnPress: function() { +class TextOnPressBox extends React.Component { + state = { + timesPressed: 0, + }; + + textOnPress = () => { this.setState({ timesPressed: this.state.timesPressed + 1, }); - }, - render: function() { + }; + + render() { var textLog = ''; if (this.state.timesPressed > 1) { textLog = this.state.timesPressed + 'x text onPress'; @@ -153,15 +153,14 @@ var TextOnPressBox = React.createClass({ ); } -}); +} -var TouchableFeedbackEvents = React.createClass({ - getInitialState: function() { - return { - eventLog: [], - }; - }, - render: function() { +class TouchableFeedbackEvents extends React.Component { + state = { + eventLog: [], + }; + + render() { return ( @@ -185,22 +184,22 @@ var TouchableFeedbackEvents = React.createClass({ ); - }, - _appendEvent: function(eventName) { + } + + _appendEvent = (eventName) => { var limit = 6; var eventLog = this.state.eventLog.slice(0, limit - 1); eventLog.unshift(eventName); this.setState({eventLog}); - }, -}); + }; +} -var TouchableDelayEvents = React.createClass({ - getInitialState: function() { - return { - eventLog: [], - }; - }, - render: function() { +class TouchableDelayEvents extends React.Component { + state = { + eventLog: [], + }; + + render() { return ( @@ -224,27 +223,28 @@ var TouchableDelayEvents = React.createClass({ ); - }, - _appendEvent: function(eventName) { + } + + _appendEvent = (eventName) => { var limit = 6; var eventLog = this.state.eventLog.slice(0, limit - 1); eventLog.unshift(eventName); this.setState({eventLog}); - }, -}); + }; +} -var ForceTouchExample = React.createClass({ - getInitialState: function() { - return { - force: 0, - }; - }, - _renderConsoleText: function() { +class ForceTouchExample extends React.Component { + state = { + force: 0, + }; + + _renderConsoleText = () => { return View.forceTouchAvailable ? 'Force: ' + this.state.force.toFixed(3) : '3D Touch is not available on this device'; - }, - render: function() { + }; + + render() { return ( @@ -264,21 +264,21 @@ var ForceTouchExample = React.createClass({ ); - }, -}); + } +} -var TouchableHitSlop = React.createClass({ - getInitialState: function() { - return { - timesPressed: 0, - }; - }, - onPress: function() { +class TouchableHitSlop extends React.Component { + state = { + timesPressed: 0, + }; + + onPress = () => { this.setState({ timesPressed: this.state.timesPressed + 1, }); - }, - render: function() { + }; + + render() { var log = ''; if (this.state.timesPressed > 1) { log = this.state.timesPressed + 'x onPress'; @@ -307,10 +307,10 @@ var TouchableHitSlop = React.createClass({ ); } -}); +} -var TouchableDisabled = React.createClass({ - render: function() { +class TouchableDisabled extends React.Component { + render() { return ( @@ -373,7 +373,7 @@ var TouchableDisabled = React.createClass({ ); } -}); +} var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'}; diff --git a/Examples/UIExplorer/js/TransformExample.js b/Examples/UIExplorer/js/TransformExample.js index a13e9c345..780bdbea8 100644 --- a/Examples/UIExplorer/js/TransformExample.js +++ b/Examples/UIExplorer/js/TransformExample.js @@ -30,24 +30,22 @@ var { View, } = ReactNative; -var Flip = React.createClass({ - getInitialState() { - return { - theta: new Animated.Value(45), - }; - }, +class Flip extends React.Component { + state = { + theta: new Animated.Value(45), + }; componentDidMount() { this._animate(); - }, + } - _animate() { + _animate = () => { this.state.theta.setValue(0); Animated.timing(this.state.theta, { toValue: 360, duration: 5000, }).start(this._animate); - }, + }; render() { return ( @@ -83,7 +81,7 @@ var Flip = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/TransparentHitTestExample.js b/Examples/UIExplorer/js/TransparentHitTestExample.js index b049c94bb..aba90ae64 100644 --- a/Examples/UIExplorer/js/TransparentHitTestExample.js +++ b/Examples/UIExplorer/js/TransparentHitTestExample.js @@ -19,8 +19,8 @@ var { TouchableOpacity, } = ReactNative; -var TransparentHitTestExample = React.createClass({ - render: function() { +class TransparentHitTestExample extends React.Component { + render() { return ( alert('Hi!')}> @@ -37,8 +37,8 @@ var TransparentHitTestExample = React.createClass({ opacity: 0.0}} /> ); - }, -}); + } +} exports.title = ''; exports.displayName = 'TransparentHitTestExample'; diff --git a/Examples/UIExplorer/js/UIExplorerApp.ios.js b/Examples/UIExplorer/js/UIExplorerApp.ios.js index cb49d2d8a..32173a12c 100644 --- a/Examples/UIExplorer/js/UIExplorerApp.ios.js +++ b/Examples/UIExplorer/js/UIExplorerApp.ios.js @@ -206,16 +206,17 @@ AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp); UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Example: UIExplorerExample) => { const ExampleModule = Example.module; if (ExampleModule.displayName) { - const Snapshotter = React.createClass({ - render: function() { + class Snapshotter extends React.Component { + render() { const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule); return ( ); - }, - }); + } + } + AppRegistry.registerComponent(ExampleModule.displayName, () => Snapshotter); } }); diff --git a/Examples/UIExplorer/js/UIExplorerBlock.js b/Examples/UIExplorer/js/UIExplorerBlock.js index 160fcbc31..4002ab3e8 100644 --- a/Examples/UIExplorer/js/UIExplorerBlock.js +++ b/Examples/UIExplorer/js/UIExplorerBlock.js @@ -31,17 +31,20 @@ var { View, } = ReactNative; -var UIExplorerBlock = React.createClass({ - propTypes: { +class UIExplorerBlock extends React.Component { + props: { + title?: string, + description?: string, + }; + + static propTypes = { title: React.PropTypes.string, description: React.PropTypes.string, - }, + }; - getInitialState: function() { - return {description: (null: ?string)}; - }, + state = {description: (null: ?string)}; - render: function() { + render() { var description; if (this.props.description) { description = @@ -59,12 +62,14 @@ var UIExplorerBlock = React.createClass({ {description} - {this.props.children} + { + // $FlowFixMe found when converting React.createClass to ES6 + this.props.children} ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/UIExplorerButton.js b/Examples/UIExplorer/js/UIExplorerButton.js index 51d5e1a66..63a62bd26 100644 --- a/Examples/UIExplorer/js/UIExplorerButton.js +++ b/Examples/UIExplorer/js/UIExplorerButton.js @@ -30,23 +30,28 @@ var { TouchableHighlight, } = ReactNative; -var UIExplorerButton = React.createClass({ - propTypes: { +class UIExplorerButton extends React.Component { + props: {onPress?: Function}; + + static propTypes = { onPress: React.PropTypes.func, - }, - render: function() { + }; + + render() { return ( - {this.props.children} + { + // $FlowFixMe found when converting React.createClass to ES6 + this.props.children} ); - }, -}); + } +} var styles = StyleSheet.create({ button: { diff --git a/Examples/UIExplorer/js/UIExplorerPage.js b/Examples/UIExplorer/js/UIExplorerPage.js index 3991fef11..c29e5bfb6 100644 --- a/Examples/UIExplorer/js/UIExplorerPage.js +++ b/Examples/UIExplorer/js/UIExplorerPage.js @@ -33,21 +33,27 @@ var { var UIExplorerTitle = require('./UIExplorerTitle'); -var UIExplorerPage = React.createClass({ +class UIExplorerPage extends React.Component { + props: { + keyboardShouldPersistTaps?: boolean, + noScroll?: boolean, + noSpacer?: boolean, + }; - propTypes: { + static propTypes = { keyboardShouldPersistTaps: React.PropTypes.bool, noScroll: React.PropTypes.bool, noSpacer: React.PropTypes.bool, - }, + }; - render: function() { + render() { var ContentWrapper; var wrapperProps = {}; if (this.props.noScroll) { ContentWrapper = (View: ReactClass); } else { ContentWrapper = (ScrollView: ReactClass); + // $FlowFixMe found when converting React.createClass to ES6 wrapperProps.automaticallyAdjustContentInsets = !this.props.title; wrapperProps.keyboardShouldPersistTaps = true; wrapperProps.keyboardDismissMode = 'interactive'; @@ -62,13 +68,15 @@ var UIExplorerPage = React.createClass({ - {this.props.children} + { + // $FlowFixMe found when converting React.createClass to ES6 + this.props.children} {spacer} ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/UIExplorerTitle.js b/Examples/UIExplorer/js/UIExplorerTitle.js index 33feaf705..e586d5702 100644 --- a/Examples/UIExplorer/js/UIExplorerTitle.js +++ b/Examples/UIExplorer/js/UIExplorerTitle.js @@ -31,8 +31,8 @@ var { View, } = ReactNative; -var UIExplorerTitle = React.createClass({ - render: function() { +class UIExplorerTitle extends React.Component { + render() { return ( @@ -41,7 +41,7 @@ var UIExplorerTitle = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/ViewExample.js b/Examples/UIExplorer/js/ViewExample.js index 965802941..daa5d5fad 100644 --- a/Examples/UIExplorer/js/ViewExample.js +++ b/Examples/UIExplorer/js/ViewExample.js @@ -46,12 +46,10 @@ var styles = StyleSheet.create({ }, }); -var ViewBorderStyleExample = React.createClass({ - getInitialState() { - return { - showBorder: true - }; - }, +class ViewBorderStyleExample extends React.Component { + state = { + showBorder: true + }; render() { return ( @@ -80,19 +78,17 @@ var ViewBorderStyleExample = React.createClass({ ); - }, - - _handlePress() { - this.setState({showBorder: !this.state.showBorder}); } -}); -var ZIndexExample = React.createClass({ - getInitialState() { - return { - flipped: false - }; - }, + _handlePress = () => { + this.setState({showBorder: !this.state.showBorder}); + }; +} + +class ZIndexExample extends React.Component { + state = { + flipped: false + }; render() { const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1]; @@ -127,12 +123,12 @@ var ZIndexExample = React.createClass({ ); - }, - - _handlePress() { - this.setState({flipped: !this.state.flipped}); } -}); + + _handlePress = () => { + this.setState({flipped: !this.state.flipped}); + }; +} exports.title = ''; exports.description = 'Basic building block of all UI, examples that ' + diff --git a/Examples/UIExplorer/js/ViewPagerAndroidExample.android.js b/Examples/UIExplorer/js/ViewPagerAndroidExample.android.js index 629938374..f9efdacd3 100644 --- a/Examples/UIExplorer/js/ViewPagerAndroidExample.android.js +++ b/Examples/UIExplorer/js/ViewPagerAndroidExample.android.js @@ -45,16 +45,16 @@ var IMAGE_URIS = [ 'http://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg', ]; -var LikeCount = React.createClass({ - getInitialState: function() { - return { - likes: 7, - }; - }, - onClick: function() { +class LikeCount extends React.Component { + state = { + likes: 7, + }; + + onClick = () => { this.setState({likes: this.state.likes + 1}); - }, - render: function() { + }; + + render() { var thumbsUp = '\uD83D\uDC4D'; return ( @@ -68,16 +68,17 @@ var LikeCount = React.createClass({ ); - }, -}); + } +} -var Button = React.createClass({ - _handlePress: function() { +class Button extends React.Component { + _handlePress = () => { if (this.props.enabled && this.props.onPress) { this.props.onPress(); } - }, - render: function() { + }; + + render() { return ( @@ -86,10 +87,10 @@ var Button = React.createClass({ ); } -}); +} -var ProgressBar = React.createClass({ - render: function() { +class ProgressBar extends React.Component { + render() { var fractionalPosition = (this.props.progress.position + this.props.progress.offset); var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size; return ( @@ -98,43 +99,40 @@ var ProgressBar = React.createClass({ ); } -}); +} -var ViewPagerAndroidExample = React.createClass({ - statics: { - title: '', - description: 'Container that allows to flip left and right between child views.' - }, - getInitialState: function() { - return { - page: 0, - animationsAreEnabled: true, - scrollEnabled: true, - progress: { - position: 0, - offset: 0, - }, - }; - }, +class ViewPagerAndroidExample extends React.Component { + static title = ''; + static description = 'Container that allows to flip left and right between child views.'; - onPageSelected: function(e) { + state = { + page: 0, + animationsAreEnabled: true, + scrollEnabled: true, + progress: { + position: 0, + offset: 0, + }, + }; + + onPageSelected = (e) => { this.setState({page: e.nativeEvent.position}); - }, + }; - onPageScroll: function(e) { + onPageScroll = (e) => { this.setState({progress: e.nativeEvent}); - }, + }; - onPageScrollStateChanged: function(state : ViewPagerScrollState) { + onPageScrollStateChanged = (state : ViewPagerScrollState) => { this.setState({scrollState: state}); - }, + }; - move: function(delta) { + move = (delta) => { var page = this.state.page + delta; this.go(page); - }, + }; - go: function(page) { + go = (page) => { if (this.state.animationsAreEnabled) { this.viewPager.setPage(page); } else { @@ -142,9 +140,9 @@ var ViewPagerAndroidExample = React.createClass({ } this.setState({page}); - }, + }; - render: function() { + render() { var pages = []; for (var i = 0; i < PAGES; i++) { var pageStyle = { @@ -207,8 +205,8 @@ var ViewPagerAndroidExample = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ buttons: { diff --git a/Examples/UIExplorer/js/WebViewExample.js b/Examples/UIExplorer/js/WebViewExample.js index 6f1066701..469c06262 100644 --- a/Examples/UIExplorer/js/WebViewExample.js +++ b/Examples/UIExplorer/js/WebViewExample.js @@ -42,30 +42,27 @@ var TEXT_INPUT_REF = 'urlInput'; var WEBVIEW_REF = 'webview'; var DEFAULT_URL = 'https://m.facebook.com'; -var WebViewExample = React.createClass({ +class WebViewExample extends React.Component { + state = { + url: DEFAULT_URL, + status: 'No Page Loaded', + backButtonEnabled: false, + forwardButtonEnabled: false, + loading: true, + scalesPageToFit: true, + }; - getInitialState: function() { - return { - url: DEFAULT_URL, - status: 'No Page Loaded', - backButtonEnabled: false, - forwardButtonEnabled: false, - loading: true, - scalesPageToFit: true, - }; - }, + inputText = ''; - inputText: '', - - handleTextInputChange: function(event) { + handleTextInputChange = (event) => { var url = event.nativeEvent.text; if (!/^[a-zA-Z-_]+:/.test(url)) { url = 'http://' + url; } this.inputText = url; - }, + }; - render: function() { + render() { this.inputText = this.state.url; return ( @@ -120,26 +117,26 @@ var WebViewExample = React.createClass({ ); - }, + } - goBack: function() { + goBack = () => { this.refs[WEBVIEW_REF].goBack(); - }, + }; - goForward: function() { + goForward = () => { this.refs[WEBVIEW_REF].goForward(); - }, + }; - reload: function() { + reload = () => { this.refs[WEBVIEW_REF].reload(); - }, + }; - onShouldStartLoadWithRequest: function(event) { + onShouldStartLoadWithRequest = (event) => { // Implement any custom loading logic here, don't forget to return! return true; - }, + }; - onNavigationStateChange: function(navState) { + onNavigationStateChange = (navState) => { this.setState({ backButtonEnabled: navState.canGoBack, forwardButtonEnabled: navState.canGoForward, @@ -148,13 +145,13 @@ var WebViewExample = React.createClass({ loading: navState.loading, scalesPageToFit: true }); - }, + }; - onSubmitEditing: function(event) { + onSubmitEditing = (event) => { this.pressGoButton(); - }, + }; - pressGoButton: function() { + pressGoButton = () => { var url = this.inputText.toLowerCase(); if (url === this.state.url) { this.reload(); @@ -165,17 +162,17 @@ var WebViewExample = React.createClass({ } // dismiss keyboard this.refs[TEXT_INPUT_REF].blur(); - }, + }; +} -}); - -var Button = React.createClass({ - _handlePress: function() { +class Button extends React.Component { + _handlePress = () => { if (this.props.enabled !== false && this.props.onPress) { this.props.onPress(); } - }, - render: function() { + }; + + render() { return ( @@ -184,17 +181,14 @@ var Button = React.createClass({ ); } -}); +} -var ScaledWebView = React.createClass({ +class ScaledWebView extends React.Component { + state = { + scalingEnabled: true, + }; - getInitialState: function() { - return { - scalingEnabled: true, - } - }, - - render: function() { + render() { return ( ); - }, -}) + } +} var styles = StyleSheet.create({ container: { diff --git a/Examples/UIExplorer/js/createExamplePage.js b/Examples/UIExplorer/js/createExamplePage.js index 2a037dbe0..7bb3e94c3 100644 --- a/Examples/UIExplorer/js/createExamplePage.js +++ b/Examples/UIExplorer/js/createExamplePage.js @@ -39,13 +39,11 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule) : ReactClass { invariant(!!exampleModule.examples, 'The module must have examples'); - var ExamplePage = React.createClass({ - statics: { - title: exampleModule.title, - description: exampleModule.description, - }, + class ExamplePage extends React.Component { + static title = exampleModule.title; + static description = exampleModule.description; - getBlock: function(example: Example, i) { + getBlock = (example: Example, i) => { // Filter platform-specific examples var {title, description, platform} = example; if (platform) { @@ -82,16 +80,16 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule) {renderedComponent} ); - }, + }; - render: function() { + render() { return ( {exampleModule.examples.map(this.getBlock)} ); } - }); + } return ExamplePage; }; diff --git a/IntegrationTests/AppEventsTest.js b/IntegrationTests/AppEventsTest.js index 0811788f4..e428d8ab7 100644 --- a/IntegrationTests/AppEventsTest.js +++ b/IntegrationTests/AppEventsTest.js @@ -32,24 +32,25 @@ type State = { elapsed?: string, }; -var AppEventsTest = React.createClass({ - getInitialState(): State { - return {sent: 'none', received: 'none'}; - }, - componentDidMount: function() { +class AppEventsTest extends React.Component { + state: State = {sent: 'none', received: 'none'}; + + componentDidMount() { NativeAppEventEmitter.addListener('testEvent', this.receiveEvent); var event = {data: TEST_PAYLOAD, ts: Date.now()}; TestModule.sendAppEvent('testEvent', event); this.setState({sent: event}); - }, - receiveEvent: function(event: any) { + } + + receiveEvent = (event: any) => { if (deepDiffer(event.data, TEST_PAYLOAD)) { throw new Error('Received wrong event: ' + JSON.stringify(event)); } var elapsed = (Date.now() - event.ts) + 'ms'; this.setState({received: event, elapsed}, TestModule.markTestCompleted); - }, - render: function() { + }; + + render() { return ( @@ -58,7 +59,7 @@ var AppEventsTest = React.createClass({ ); } -}); +} AppEventsTest.displayName = 'AppEventsTest'; diff --git a/IntegrationTests/AsyncStorageTest.js b/IntegrationTests/AsyncStorageTest.js index 880476629..b5db2cada 100644 --- a/IntegrationTests/AsyncStorageTest.js +++ b/IntegrationTests/AsyncStorageTest.js @@ -167,13 +167,11 @@ function testOptimizedMultiGet() { } -var AsyncStorageTest = React.createClass({ - getInitialState() { - return { - messages: 'Initializing...', - done: false, - }; - }, +class AsyncStorageTest extends React.Component { + state = { + messages: 'Initializing...', + done: false, + }; componentDidMount() { done = () => this.setState({done: true}, TestModule.markTestCompleted); @@ -182,7 +180,7 @@ var AsyncStorageTest = React.createClass({ DEBUG && console.log(msg); }; AsyncStorage.clear(testSetAndGet); - }, + } render() { return ( @@ -195,7 +193,7 @@ var AsyncStorageTest = React.createClass({ ); } -}); +} AsyncStorageTest.displayName = 'AsyncStorageTest'; diff --git a/IntegrationTests/ImageSnapshotTest.js b/IntegrationTests/ImageSnapshotTest.js index 838bd69c3..798fcf627 100644 --- a/IntegrationTests/ImageSnapshotTest.js +++ b/IntegrationTests/ImageSnapshotTest.js @@ -18,16 +18,16 @@ var { } = ReactNative; var { TestModule } = ReactNative.NativeModules; -var ImageSnapshotTest = React.createClass({ +class ImageSnapshotTest extends React.Component { componentDidMount() { if (!TestModule.verifySnapshot) { throw new Error('TestModule.verifySnapshot not defined.'); } - }, + } - done(success : boolean) { + done = (success : boolean) => { TestModule.markTestPassed(success); - }, + }; render() { return ( @@ -37,7 +37,7 @@ var ImageSnapshotTest = React.createClass({ onLoad={() => TestModule.verifySnapshot(this.done)} /> ); } -}); +} ImageSnapshotTest.displayName = 'ImageSnapshotTest'; diff --git a/IntegrationTests/IntegrationTestHarnessTest.js b/IntegrationTests/IntegrationTestHarnessTest.js index 6edefbc32..45749eb3d 100644 --- a/IntegrationTests/IntegrationTestHarnessTest.js +++ b/IntegrationTests/IntegrationTestHarnessTest.js @@ -19,17 +19,20 @@ var { } = ReactNative; var { TestModule } = ReactNative.NativeModules; -var IntegrationTestHarnessTest = React.createClass({ - propTypes: { +class IntegrationTestHarnessTest extends React.Component { + props: { + shouldThrow?: boolean, + waitOneFrame?: boolean, + }; + + static propTypes = { shouldThrow: React.PropTypes.bool, waitOneFrame: React.PropTypes.bool, - }, + }; - getInitialState() { - return { - done: false, - }; - }, + state = { + done: false, + }; componentDidMount() { if (this.props.waitOneFrame) { @@ -37,9 +40,9 @@ var IntegrationTestHarnessTest = React.createClass({ } else { this.runTest(); } - }, + } - runTest() { + runTest = () => { if (this.props.shouldThrow) { throw new Error('Throwing error because shouldThrow'); } @@ -49,7 +52,7 @@ var IntegrationTestHarnessTest = React.createClass({ throw new Error('RCTTestModule.markTestCompleted not defined.'); } this.setState({done: true}, TestModule.markTestCompleted); - }, + }; render() { return ( @@ -61,7 +64,7 @@ var IntegrationTestHarnessTest = React.createClass({ ); } -}); +} IntegrationTestHarnessTest.displayName = 'IntegrationTestHarnessTest'; diff --git a/IntegrationTests/IntegrationTestsApp.js b/IntegrationTests/IntegrationTestsApp.js index 0812dc0b4..90fbe446d 100644 --- a/IntegrationTests/IntegrationTestsApp.js +++ b/IntegrationTests/IntegrationTestsApp.js @@ -42,13 +42,12 @@ require('LoggingTestModule'); type Test = any; -var IntegrationTestsApp = React.createClass({ - getInitialState: function() { - return { - test: (null: ?Test), - }; - }, - render: function() { +class IntegrationTestsApp extends React.Component { + state = { + test: (null: ?Test), + }; + + render() { if (this.state.test) { return ( @@ -79,7 +78,7 @@ var IntegrationTestsApp = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/IntegrationTests/PromiseTest.js b/IntegrationTests/PromiseTest.js index 16a909138..6a625cb91 100644 --- a/IntegrationTests/PromiseTest.js +++ b/IntegrationTests/PromiseTest.js @@ -15,11 +15,11 @@ var ReactNative = require('react-native'); var { View } = ReactNative; var { TestModule } = ReactNative.NativeModules; -var PromiseTest = React.createClass({ - shouldResolve: false, - shouldReject: false, - shouldSucceedAsync: false, - shouldThrowAsync: false, +class PromiseTest extends React.Component { + shouldResolve = false; + shouldReject = false; + shouldSucceedAsync = false; + shouldThrowAsync = false; componentDidMount() { Promise.all([ @@ -28,48 +28,49 @@ var PromiseTest = React.createClass({ this.testShouldSucceedAsync(), this.testShouldThrowAsync(), ]).then(() => TestModule.markTestPassed( + // $FlowFixMe found when converting React.createClass to ES6 this.shouldResolve && this.shouldReject && + // $FlowFixMe found when converting React.createClass to ES6 this.shouldSucceedAsync && this.shouldThrowAsync )); - }, + } - testShouldResolve() { + testShouldResolve = () => { return TestModule .shouldResolve() .then(() => this.shouldResolve = true) .catch(() => this.shouldResolve = false); - }, + }; - testShouldReject() { + testShouldReject = () => { return TestModule .shouldReject() .then(() => this.shouldReject = false) .catch(() => this.shouldReject = true); - }, + }; - async testShouldSucceedAsync() : Promise { + testShouldSucceedAsync = async (): Promise => { try { await TestModule.shouldResolve(); this.shouldSucceedAsync = true; } catch (e) { this.shouldSucceedAsync = false; } - }, + }; - async testShouldThrowAsync() : Promise { + testShouldThrowAsync = async (): Promise => { try { await TestModule.shouldReject(); this.shouldThrowAsync = false; } catch (e) { this.shouldThrowAsync = true; } - }, + }; - render() : ReactElement { + render(): ReactElement { return ; } - -}); +} PromiseTest.displayName = 'PromiseTest'; diff --git a/IntegrationTests/PropertiesUpdateTest.js b/IntegrationTests/PropertiesUpdateTest.js index aac7289e1..3d4bb59d9 100644 --- a/IntegrationTests/PropertiesUpdateTest.js +++ b/IntegrationTests/PropertiesUpdateTest.js @@ -16,8 +16,7 @@ var { var { TestModule } = ReactNative.NativeModules; -var PropertiesUpdateTest = React.createClass({ - +class PropertiesUpdateTest extends React.Component { render() { if (this.props.markTestPassed) { TestModule.markTestPassed(true); @@ -26,7 +25,7 @@ var PropertiesUpdateTest = React.createClass({ ); } -}); +} PropertiesUpdateTest.displayName = 'PropertiesUpdateTest'; diff --git a/IntegrationTests/RCTRootViewIntegrationTestApp.js b/IntegrationTests/RCTRootViewIntegrationTestApp.js index c40121648..77b9f5192 100644 --- a/IntegrationTests/RCTRootViewIntegrationTestApp.js +++ b/IntegrationTests/RCTRootViewIntegrationTestApp.js @@ -35,13 +35,12 @@ TESTS.forEach( (test) => AppRegistry.registerComponent(test.displayName, () => test) ); -var RCTRootViewIntegrationTestsApp = React.createClass({ - getInitialState: function() { - return { - test: null, - }; - }, - render: function() { +class RCTRootViewIntegrationTestsApp extends React.Component { + state = { + test: null, + }; + + render() { if (this.state.test) { return ( @@ -72,7 +71,7 @@ var RCTRootViewIntegrationTestsApp = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/IntegrationTests/SimpleSnapshotTest.js b/IntegrationTests/SimpleSnapshotTest.js index 94ce08494..dbde12cdc 100644 --- a/IntegrationTests/SimpleSnapshotTest.js +++ b/IntegrationTests/SimpleSnapshotTest.js @@ -20,17 +20,17 @@ var { } = ReactNative; var { TestModule } = ReactNative.NativeModules; -var SimpleSnapshotTest = React.createClass({ +class SimpleSnapshotTest extends React.Component { componentDidMount() { if (!TestModule.verifySnapshot) { throw new Error('TestModule.verifySnapshot not defined.'); } requestAnimationFrame(() => TestModule.verifySnapshot(this.done)); - }, + } - done(success : boolean) { + done = (success : boolean) => { TestModule.markTestPassed(success); - }, + }; render() { return ( @@ -40,7 +40,7 @@ var SimpleSnapshotTest = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ box1: { diff --git a/Libraries/ART/ReactNativeART.js b/Libraries/ART/ReactNativeART.js index a0d571fc1..b97a926e7 100644 --- a/Libraries/ART/ReactNativeART.js +++ b/Libraries/ART/ReactNativeART.js @@ -136,9 +136,8 @@ function childrenAsString(children) { // Surface - Root node of all ART -var Surface = React.createClass({ - - render: function() { +class Surface extends React.Component { + render() { var props = this.props; var w = extractNumber(props.width, 0); var h = extractNumber(props.height, 0); @@ -148,8 +147,7 @@ var Surface = React.createClass({ ); } - -}); +} // Node Props @@ -204,9 +202,8 @@ function extractOpacity(props) { // Note: ART has a notion of width and height on Group but AFAIK it's a noop in // ReactART. -var Group = React.createClass({ - - render: function() { +class Group extends React.Component { + render() { var props = this.props; return ( ); } +} -}); - -var ClippingRectangle = React.createClass({ - - render: function() { +class ClippingRectangle extends React.Component { + render() { var props = this.props; var x = extractNumber(props.x, 0); var y = extractNumber(props.y, 0); @@ -241,8 +236,7 @@ var ClippingRectangle = React.createClass({ ); } - -}); +} // Renderables @@ -376,9 +370,8 @@ function extractStrokeJoin(strokeJoin) { // Note: ART has a notion of width and height on Shape but AFAIK it's a noop in // ReactART. -var Shape = React.createClass({ - - render: function() { +class Shape extends React.Component { + render() { var props = this.props; var path = props.d || childrenAsString(props.children); var d = new Path(path).toJSON(); @@ -397,8 +390,7 @@ var Shape = React.createClass({ /> ); } - -}); +} // Text @@ -472,9 +464,8 @@ function extractAlignment(alignment) { } } -var Text = React.createClass({ - - render: function() { +class Text extends React.Component { + render() { var props = this.props; var textPath = props.path ? new Path(props.path).toJSON() : null; var textFrame = extractFontAndLines( @@ -498,8 +489,7 @@ var Text = React.createClass({ /> ); } - -}); +} // Declarative fill type objects - API design not finalized diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicatorIOS.android.js b/Libraries/Components/ActivityIndicator/ActivityIndicatorIOS.android.js index 36ad97e51..1e7f01cee 100644 --- a/Libraries/Components/ActivityIndicator/ActivityIndicatorIOS.android.js +++ b/Libraries/Components/ActivityIndicator/ActivityIndicatorIOS.android.js @@ -13,10 +13,10 @@ var React = require('React'); var View = require('View'); -var ActivityIndicatorIOS = React.createClass({ +class ActivityIndicatorIOS extends React.Component { render(): ReactElement { return ; } -}); +} module.exports = ActivityIndicatorIOS; diff --git a/Libraries/Components/DatePicker/DatePickerIOS.android.js b/Libraries/Components/DatePicker/DatePickerIOS.android.js index 1faf93a05..9a2b26697 100644 --- a/Libraries/Components/DatePicker/DatePickerIOS.android.js +++ b/Libraries/Components/DatePicker/DatePickerIOS.android.js @@ -16,15 +16,15 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -var DummyDatePickerIOS = React.createClass({ - render: function() { +class DummyDatePickerIOS extends React.Component { + render() { return ( DatePickerIOS is not supported on this platform! ); - }, -}); + } +} var styles = StyleSheet.create({ dummyDatePickerIOS: { diff --git a/Libraries/Components/Navigation/NavigatorIOS.ios.js b/Libraries/Components/Navigation/NavigatorIOS.ios.js index 1943ce713..f08271225 100644 --- a/Libraries/Components/Navigation/NavigatorIOS.ios.js +++ b/Libraries/Components/Navigation/NavigatorIOS.ios.js @@ -34,21 +34,21 @@ function getuid() { return __uid++; } -var NavigatorTransitionerIOS = React.createClass({ - requestSchedulingNavigation: function(cb) { +class NavigatorTransitionerIOS extends React.Component { + requestSchedulingNavigation = (cb) => { RCTNavigatorManager.requestSchedulingJavaScriptNavigation( ReactNative.findNodeHandle(this), logError, cb ); - }, + }; - render: function() { + render() { return ( ); - }, -}); + } +} type Route = { component: Function, diff --git a/Libraries/Components/Picker/Picker.js b/Libraries/Components/Picker/Picker.js index 5fa3ba7e1..313f30b40 100644 --- a/Libraries/Components/Picker/Picker.js +++ b/Libraries/Components/Picker/Picker.js @@ -44,110 +44,126 @@ var MODE_DROPDOWN = 'dropdown'; * * */ -var Picker = React.createClass({ +class Picker extends React.Component { + props: { + style?: $FlowFixMe, + selectedValue?: any, + onValueChange?: Function, + enabled?: boolean, + mode?: 'dialog' | 'dropdown', + itemStyle?: $FlowFixMe, + prompt?: string, + testID?: string, + }; - statics: { - /** - * On Android, display the options in a dialog. - */ - MODE_DIALOG: MODE_DIALOG, - /** - * On Android, display the options in a dropdown (this is the default). - */ - MODE_DROPDOWN: MODE_DROPDOWN, - }, + /** + * On Android, display the options in a dialog. + */ + static MODE_DIALOG = MODE_DIALOG; - getDefaultProps: function() { - return { - mode: MODE_DIALOG, - }; - }, + /** + * On Android, display the options in a dropdown (this is the default). + */ + static MODE_DROPDOWN = MODE_DROPDOWN; - propTypes: { - ...View.propTypes, - style: pickerStyleType, - /** - * Value matching value of one of the items. Can be a string or an integer. - */ - selectedValue: React.PropTypes.any, - /** - * Callback for when an item is selected. This is called with the following parameters: - * - `itemValue`: the `value` prop of the item that was selected - * - `itemPosition`: the index of the selected item in this picker - */ - onValueChange: React.PropTypes.func, - /** - * If set to false, the picker will be disabled, i.e. the user will not be able to make a - * selection. - * @platform android - */ - enabled: React.PropTypes.bool, - /** - * On Android, specifies how to display the selection items when the user taps on the picker: - * - * - 'dialog': Show a modal dialog. This is the default. - * - 'dropdown': Shows a dropdown anchored to the picker view - * - * @platform android - */ - mode: React.PropTypes.oneOf(['dialog', 'dropdown']), - /** - * Style to apply to each of the item labels. - * @platform ios - */ - itemStyle: itemStylePropType, - /** - * Prompt string for this picker, used on Android in dialog mode as the title of the dialog. - * @platform android - */ - prompt: React.PropTypes.string, - /** - * Used to locate this view in end-to-end tests. - */ - testID: React.PropTypes.string, - }, + static defaultProps = { + mode: MODE_DIALOG, + }; - render: function() { - if (Platform.OS === 'ios') { - return {this.props.children}; - } else if (Platform.OS === 'android') { - return {this.props.children}; - } else { - return ; - } - }, -}); + static propTypes = { + ...View.propTypes, + style: pickerStyleType, + /** + * Value matching value of one of the items. Can be a string or an integer. + */ + selectedValue: React.PropTypes.any, + /** + * Callback for when an item is selected. This is called with the following parameters: + * - `itemValue`: the `value` prop of the item that was selected + * - `itemPosition`: the index of the selected item in this picker + */ + onValueChange: React.PropTypes.func, + /** + * If set to false, the picker will be disabled, i.e. the user will not be able to make a + * selection. + * @platform android + */ + enabled: React.PropTypes.bool, + /** + * On Android, specifies how to display the selection items when the user taps on the picker: + * + * - 'dialog': Show a modal dialog. This is the default. + * - 'dropdown': Shows a dropdown anchored to the picker view + * + * @platform android + */ + mode: React.PropTypes.oneOf(['dialog', 'dropdown']), + /** + * Style to apply to each of the item labels. + * @platform ios + */ + itemStyle: itemStylePropType, + /** + * Prompt string for this picker, used on Android in dialog mode as the title of the dialog. + * @platform android + */ + prompt: React.PropTypes.string, + /** + * Used to locate this view in end-to-end tests. + */ + testID: React.PropTypes.string, + }; + + render() { + if (Platform.OS === 'ios') { + // $FlowFixMe found when converting React.createClass to ES6 + return {this.props.children}; + } else if (Platform.OS === 'android') { + // $FlowFixMe found when converting React.createClass to ES6 + return {this.props.children}; + } else { + return ; + } + } +} /** * Individual selectable item in a Picker. */ -Picker.Item = React.createClass({ +// $FlowFixMe found when converting React.createClass to ES6 +Picker.Item = class extends React.Component { + props: { + label: string, + value?: any, + color?: $FlowFixMe, + testID?: string, + }; - propTypes: { - /** - * Text to display for this item. - */ - label: React.PropTypes.string.isRequired, - /** - * The value to be passed to picker's `onValueChange` callback when - * this item is selected. Can be a string or an integer. - */ - value: React.PropTypes.any, - /** - * Color of this item's text. - * @platform android - */ - color: ColorPropType, - /** - * Used to locate the item in end-to-end tests. - */ - testID: React.PropTypes.string, - }, + static propTypes = { + /** + * Text to display for this item. + */ + label: React.PropTypes.string.isRequired, + /** + * The value to be passed to picker's `onValueChange` callback when + * this item is selected. Can be a string or an integer. + */ + value: React.PropTypes.any, + /** + * Color of this item's text. + * @platform android + */ + color: ColorPropType, + /** + * Used to locate the item in end-to-end tests. + */ + testID: React.PropTypes.string, + }; - render: function() { - // The items are not rendered directly - throw null; - }, -}); + render() { + // The items are not rendered directly + throw null; + } +}; module.exports = Picker; diff --git a/Libraries/Components/Picker/PickerAndroid.android.js b/Libraries/Components/Picker/PickerAndroid.android.js index b6dfc21c8..2021434c8 100644 --- a/Libraries/Components/Picker/PickerAndroid.android.js +++ b/Libraries/Components/Picker/PickerAndroid.android.js @@ -38,9 +38,20 @@ type Event = Object; /** * Not exposed as a public API - use instead. */ -var PickerAndroid = React.createClass({ +class PickerAndroid extends React.Component { + props: { + style?: $FlowFixMe, + selectedValue?: any, + enabled?: boolean, + mode?: 'dialog' | 'dropdown', + onValueChange?: Function, + prompt?: string, + testID?: string, + }; - propTypes: { + state: *; + + static propTypes = { ...View.propTypes, style: pickerStyleType, selectedValue: React.PropTypes.any, @@ -49,22 +60,24 @@ var PickerAndroid = React.createClass({ onValueChange: ReactPropTypes.func, prompt: ReactPropTypes.string, testID: ReactPropTypes.string, - }, + }; - getInitialState: function() { - var state = this._stateFromProps(this.props); - return { + constructor(props, context) { + super(props, context); + var state = this._stateFromProps(props); + + this.state = { ...state, initialSelectedIndex: state.selectedIndex, }; - }, + } - componentWillReceiveProps: function(nextProps) { + componentWillReceiveProps(nextProps) { this.setState(this._stateFromProps(nextProps)); - }, + } // Translate prop and children into stuff that the native picker understands. - _stateFromProps: function(props) { + _stateFromProps = (props) => { var selectedIndex = 0; let items = ReactChildren.map(props.children, (child, index) => { if (child.props.value === props.selectedValue) { @@ -80,9 +93,9 @@ var PickerAndroid = React.createClass({ return childProps; }); return {selectedIndex, items}; - }, + }; - render: function() { + render() { var Picker = this.props.mode === MODE_DROPDOWN ? DropdownPicker : DialogPicker; var nativeProps = { @@ -97,9 +110,9 @@ var PickerAndroid = React.createClass({ }; return ; - }, + } - _onChange: function(event: Event) { + _onChange = (event: Event) => { if (this.props.onValueChange) { var position = event.nativeEvent.position; if (position >= 0) { @@ -111,13 +124,13 @@ var PickerAndroid = React.createClass({ } this._lastNativePosition = event.nativeEvent.position; this.forceUpdate(); - }, + }; - componentDidMount: function() { + componentDidMount() { this._lastNativePosition = this.state.initialSelectedIndex; - }, + } - componentDidUpdate: function() { + componentDidUpdate() { // The picker is a controlled component. This means we expect the // on*Change handlers to be in charge of updating our // `selectedValue` prop. That way they can also @@ -128,8 +141,8 @@ var PickerAndroid = React.createClass({ this.refs[REF_PICKER].setNativeProps({selected: this.state.selectedIndex}); this._lastNativePosition = this.state.selectedIndex; } - }, -}); + } +} var styles = StyleSheet.create({ pickerAndroid: { diff --git a/Libraries/Components/Picker/PickerIOS.ios.js b/Libraries/Components/Picker/PickerIOS.ios.js index cc61bf59e..1ff658c19 100644 --- a/Libraries/Components/Picker/PickerIOS.ios.js +++ b/Libraries/Components/Picker/PickerIOS.ios.js @@ -90,17 +90,17 @@ var PickerIOS = React.createClass({ }, }); -PickerIOS.Item = React.createClass({ - propTypes: { +PickerIOS.Item = class extends React.Component { + static propTypes = { value: React.PropTypes.any, // string or integer basically label: React.PropTypes.string, - }, + }; - render: function() { + render() { // These items don't get rendered directly. return null; - }, -}); + } +}; var styles = StyleSheet.create({ pickerIOS: { diff --git a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js index abda1c368..d4a7da54a 100644 --- a/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js +++ b/Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js @@ -17,8 +17,8 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -var DummyProgressViewIOS = React.createClass({ - render: function() { +class DummyProgressViewIOS extends React.Component { + render() { return ( @@ -26,8 +26,8 @@ var DummyProgressViewIOS = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ dummy: { diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js index 848144bff..15ac90078 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js @@ -17,8 +17,8 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -var DummySegmentedControlIOS = React.createClass({ - render: function() { +class DummySegmentedControlIOS extends React.Component { + render() { return ( @@ -26,8 +26,8 @@ var DummySegmentedControlIOS = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ dummy: { diff --git a/Libraries/Components/StaticRenderer.js b/Libraries/Components/StaticRenderer.js index 03a7d8d08..bbf4eb55f 100644 --- a/Libraries/Components/StaticRenderer.js +++ b/Libraries/Components/StaticRenderer.js @@ -13,19 +13,24 @@ var React = require('React'); -var StaticRenderer = React.createClass({ - propTypes: { +class StaticRenderer extends React.Component { + props: { + shouldUpdate: boolean, + render: Function, + }; + + static propTypes = { shouldUpdate: React.PropTypes.bool.isRequired, render: React.PropTypes.func.isRequired, - }, + }; - shouldComponentUpdate: function(nextProps: { shouldUpdate: boolean }): boolean { + shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean { return nextProps.shouldUpdate; - }, + } - render: function(): ReactElement { + render(): ReactElement { return this.props.render(); - }, -}); + } +} module.exports = StaticRenderer; diff --git a/Libraries/Components/StatusBar/StatusBar.js b/Libraries/Components/StatusBar/StatusBar.js index 8c0b65a0b..323018aab 100644 --- a/Libraries/Components/StatusBar/StatusBar.js +++ b/Libraries/Components/StatusBar/StatusBar.js @@ -128,109 +128,120 @@ function createStackEntry(props: any): any { * set by the static API will get overriden by the one set by the component in * the next render. */ -const StatusBar = React.createClass({ - statics: { - _propsStack: [], - _defaultProps: createStackEntry({ - animated: false, - showHideTransition: 'fade', - backgroundColor: 'black', - barStyle: 'default', - translucent: false, - hidden: false, - networkActivityIndicatorVisible: false, - }), - // Timer for updating the native module values at the end of the frame. - _updateImmediate: null, - // The current merged values from the props stack. - _currentValues: null, +class StatusBar extends React.Component { + props: { + hidden?: boolean, + animated?: boolean, + backgroundColor?: $FlowFixMe, + translucent?: boolean, + barStyle?: 'default' | 'light-content', + networkActivityIndicatorVisible?: boolean, + showHideTransition?: 'fade' | 'slide', + }; - // TODO(janic): Provide a real API to deal with status bar height. See the - // discussion in #6195. - /** - * The current height of the status bar on the device. - * - * @platform android - */ - currentHeight: StatusBarManager.HEIGHT, + static _propsStack = []; - // Provide an imperative API as static functions of the component. - // See the corresponding prop for more detail. + static _defaultProps = createStackEntry({ + animated: false, + showHideTransition: 'fade', + backgroundColor: 'black', + barStyle: 'default', + translucent: false, + hidden: false, + networkActivityIndicatorVisible: false, + }); - /** - * Show or hide the status bar - * @param hidden The dialog's title. - * @param animation Optional animation when - * changing the status bar hidden property. - */ - setHidden(hidden: boolean, animation?: StatusBarAnimation) { - animation = animation || 'none'; - StatusBar._defaultProps.hidden.value = hidden; - if (Platform.OS === 'ios') { - StatusBarManager.setHidden(hidden, animation); - } else if (Platform.OS === 'android') { - StatusBarManager.setHidden(hidden); - } - }, + // Timer for updating the native module values at the end of the frame. + static _updateImmediate = null; - /** - * Set the status bar style - * @param style Status bar style to set - * @param animated Animate the style change. - */ - setBarStyle(style: StatusBarStyle, animated?: boolean) { - if (Platform.OS !== 'ios') { - console.warn('`setBarStyle` is only available on iOS'); - return; - } - animated = animated || false; - StatusBar._defaultProps.barStyle.value = style; - StatusBarManager.setStyle(style, animated); - }, + // The current merged values from the props stack. + static _currentValues = null; - /** - * Control the visibility of the network activity indicator - * @param visible Show the indicator. - */ - setNetworkActivityIndicatorVisible(visible: boolean) { - if (Platform.OS !== 'ios') { - console.warn('`setNetworkActivityIndicatorVisible` is only available on iOS'); - return; - } - StatusBar._defaultProps.networkActivityIndicatorVisible = visible; - StatusBarManager.setNetworkActivityIndicatorVisible(visible); - }, + // TODO(janic): Provide a real API to deal with status bar height. See the + // discussion in #6195. + /** + * The current height of the status bar on the device. + * + * @platform android + */ + static currentHeight = StatusBarManager.HEIGHT; - /** - * Set the background color for the status bar - * @param color Background color. - * @param animated Animate the style change. - */ - setBackgroundColor(color: string, animated?: boolean) { - if (Platform.OS !== 'android') { - console.warn('`setBackgroundColor` is only available on Android'); - return; - } - animated = animated || false; - StatusBar._defaultProps.backgroundColor.value = color; - StatusBarManager.setColor(processColor(color), animated); - }, + // Provide an imperative API as static functions of the component. + // See the corresponding prop for more detail. - /** - * Control the translucency of the status bar - * @param translucent Set as translucent. - */ - setTranslucent(translucent: boolean) { - if (Platform.OS !== 'android') { - console.warn('`setTranslucent` is only available on Android'); - return; - } - StatusBar._defaultProps.translucent = translucent; - StatusBarManager.setTranslucent(translucent); - }, - }, + /** + * Show or hide the status bar + * @param hidden The dialog's title. + * @param animation Optional animation when + * changing the status bar hidden property. + */ + static setHidden(hidden: boolean, animation?: StatusBarAnimation) { + animation = animation || 'none'; + StatusBar._defaultProps.hidden.value = hidden; + if (Platform.OS === 'ios') { + StatusBarManager.setHidden(hidden, animation); + } else if (Platform.OS === 'android') { + StatusBarManager.setHidden(hidden); + } + } - propTypes: { + /** + * Set the status bar style + * @param style Status bar style to set + * @param animated Animate the style change. + */ + static setBarStyle(style: StatusBarStyle, animated?: boolean) { + if (Platform.OS !== 'ios') { + console.warn('`setBarStyle` is only available on iOS'); + return; + } + animated = animated || false; + StatusBar._defaultProps.barStyle.value = style; + StatusBarManager.setStyle(style, animated); + } + + /** + * Control the visibility of the network activity indicator + * @param visible Show the indicator. + */ + static setNetworkActivityIndicatorVisible(visible: boolean) { + if (Platform.OS !== 'ios') { + console.warn('`setNetworkActivityIndicatorVisible` is only available on iOS'); + return; + } + StatusBar._defaultProps.networkActivityIndicatorVisible = visible; + StatusBarManager.setNetworkActivityIndicatorVisible(visible); + } + + /** + * Set the background color for the status bar + * @param color Background color. + * @param animated Animate the style change. + */ + static setBackgroundColor(color: string, animated?: boolean) { + if (Platform.OS !== 'android') { + console.warn('`setBackgroundColor` is only available on Android'); + return; + } + animated = animated || false; + StatusBar._defaultProps.backgroundColor.value = color; + StatusBarManager.setColor(processColor(color), animated); + } + + /** + * Control the translucency of the status bar + * @param translucent Set as translucent. + */ + static setTranslucent(translucent: boolean) { + if (Platform.OS !== 'android') { + console.warn('`setTranslucent` is only available on Android'); + return; + } + StatusBar._defaultProps.translucent = translucent; + StatusBarManager.setTranslucent(translucent); + } + + static propTypes = { /** * If the status bar is hidden. */ @@ -278,16 +289,14 @@ const StatusBar = React.createClass({ 'fade', 'slide', ]), - }, + }; - getDefaultProps(): DefaultProps { - return { - animated: false, - showHideTransition: 'fade', - }; - }, + static defaultProps = { + animated: false, + showHideTransition: 'fade', + }; - _stackEntry: null, + _stackEntry = null; componentDidMount() { // Every time a StatusBar component is mounted, we push it's prop to a stack @@ -297,29 +306,31 @@ const StatusBar = React.createClass({ this._stackEntry = createStackEntry(this.props); StatusBar._propsStack.push(this._stackEntry); this._updatePropsStack(); - }, + } componentWillUnmount() { // When a StatusBar is unmounted, remove itself from the stack and update // the native bar with the next props. + // $FlowFixMe found when converting React.createClass to ES6 const index = StatusBar._propsStack.indexOf(this._stackEntry); StatusBar._propsStack.splice(index, 1); this._updatePropsStack(); - }, + } componentDidUpdate() { + // $FlowFixMe found when converting React.createClass to ES6 const index = StatusBar._propsStack.indexOf(this._stackEntry); this._stackEntry = createStackEntry(this.props); StatusBar._propsStack[index] = this._stackEntry; this._updatePropsStack(); - }, + } /** * Updates the native status bar with the props from the stack. */ - _updatePropsStack() { + _updatePropsStack = () => { // Send the update to the native module only once at the end of the frame. clearImmediate(StatusBar._updateImmediate); StatusBar._updateImmediate = setImmediate(() => { @@ -365,11 +376,11 @@ const StatusBar = React.createClass({ // Update the current prop values. StatusBar._currentValues = mergedProps; }); - }, + }; render(): ?ReactElement { return null; - }, -}); + } +} module.exports = StatusBar; diff --git a/Libraries/Components/SwitchIOS/SwitchIOS.android.js b/Libraries/Components/SwitchIOS/SwitchIOS.android.js index 9fde1a659..ea670d3e2 100644 --- a/Libraries/Components/SwitchIOS/SwitchIOS.android.js +++ b/Libraries/Components/SwitchIOS/SwitchIOS.android.js @@ -16,15 +16,15 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -var DummySwitchIOS = React.createClass({ - render: function() { +class DummySwitchIOS extends React.Component { + render() { return ( SwitchIOS is not supported on this platform! ); - }, -}); + } +} var styles = StyleSheet.create({ dummySwitchIOS: { diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.android.js b/Libraries/Components/TabBarIOS/TabBarIOS.android.js index 95b820f55..c582903a7 100644 --- a/Libraries/Components/TabBarIOS/TabBarIOS.android.js +++ b/Libraries/Components/TabBarIOS/TabBarIOS.android.js @@ -15,15 +15,15 @@ var React = require('React'); var View = require('View'); var StyleSheet = require('StyleSheet'); -var DummyTabBarIOS = React.createClass({ - render: function() { +class DummyTabBarIOS extends React.Component { + render() { return ( {this.props.children} ); } -}); +} var styles = StyleSheet.create({ tabGroup: { diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js index 57208b92e..be374d346 100644 --- a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js +++ b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js @@ -19,12 +19,19 @@ var View = require('View'); var requireNativeComponent = require('requireNativeComponent'); -var TabBarIOS = React.createClass({ - statics: { - Item: TabBarItemIOS, - }, +class TabBarIOS extends React.Component { + props: { + style?: $FlowFixMe, + unselectedTintColor?: $FlowFixMe, + tintColor?: $FlowFixMe, + barTintColor?: $FlowFixMe, + translucent?: boolean, + itemPositioning?: 'fill' | 'center' | 'auto', + }; - propTypes: { + static Item = TabBarItemIOS; + + static propTypes = { ...View.propTypes, style: View.propTypes.style, /** @@ -53,9 +60,9 @@ var TabBarIOS = React.createClass({ * it defaults to center. */ itemPositioning: React.PropTypes.oneOf(['fill', 'center', 'auto']), - }, + }; - render: function() { + render() { return ( - {this.props.children} + { + // $FlowFixMe found when converting React.createClass to ES6 + this.props.children} ); } -}); +} var styles = StyleSheet.create({ tabGroup: { diff --git a/Libraries/Components/TabBarIOS/TabBarItemIOS.android.js b/Libraries/Components/TabBarIOS/TabBarItemIOS.android.js index 6eb46c362..43cf6d429 100644 --- a/Libraries/Components/TabBarIOS/TabBarItemIOS.android.js +++ b/Libraries/Components/TabBarIOS/TabBarItemIOS.android.js @@ -15,8 +15,8 @@ var React = require('React'); var View = require('View'); var StyleSheet = require('StyleSheet'); -var DummyTab = React.createClass({ - render: function() { +class DummyTab extends React.Component { + render() { if (!this.props.selected) { return ; } @@ -26,7 +26,7 @@ var DummyTab = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ tab: { diff --git a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js index e4936ea67..80aa46b78 100644 --- a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js +++ b/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js @@ -19,8 +19,8 @@ var View = require('View'); var requireNativeComponent = require('requireNativeComponent'); -var TabBarItemIOS = React.createClass({ - propTypes: { +class TabBarItemIOS extends React.Component { + static propTypes = { ...View.propTypes, /** * Little red bubble that sits at the top right of the icon. @@ -81,27 +81,25 @@ var TabBarItemIOS = React.createClass({ * is defined. */ title: React.PropTypes.string, - }, + }; - getInitialState: function() { - return { - hasBeenSelected: false, - }; - }, + state = { + hasBeenSelected: false, + }; - componentWillMount: function() { + componentWillMount() { if (this.props.selected) { this.setState({hasBeenSelected: true}); } - }, + } - componentWillReceiveProps: function(nextProps: { selected?: boolean }) { + componentWillReceiveProps(nextProps: { selected?: boolean }) { if (this.state.hasBeenSelected || nextProps.selected) { this.setState({hasBeenSelected: true}); } - }, + } - render: function() { + render() { var {style, children, ...props} = this.props; // if the tab has already been shown once, always continue to show it so we @@ -123,7 +121,7 @@ var TabBarItemIOS = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ tab: { diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js b/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js index 4596e8d24..99abaa3a0 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.ios.js @@ -16,15 +16,15 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -var DummyTouchableNativeFeedback = React.createClass({ - render: function() { +class DummyTouchableNativeFeedback extends React.Component { + render() { return ( TouchableNativeFeedback is not supported on this platform! ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/Libraries/Components/UnimplementedViews/UnimplementedView.js b/Libraries/Components/UnimplementedViews/UnimplementedView.js index 1870f495b..ba62f2459 100644 --- a/Libraries/Components/UnimplementedViews/UnimplementedView.js +++ b/Libraries/Components/UnimplementedViews/UnimplementedView.js @@ -10,13 +10,14 @@ var React = require('React'); var StyleSheet = require('StyleSheet'); -var UnimplementedView = React.createClass({ - setNativeProps: function() { +class UnimplementedView extends React.Component { + setNativeProps = () => { // Do nothing. // This method is required in order to use this view as a Touchable* child. // See ensureComponentIsNative.js for more info - }, - render: function() { + }; + + render() { // Workaround require cycle from requireNativeComponent var View = require('View'); return ( @@ -24,8 +25,8 @@ var UnimplementedView = React.createClass({ {this.props.children} ); - }, -}); + } +} var styles = StyleSheet.create({ unimplementedView: { diff --git a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js b/Libraries/Components/ViewPager/ViewPagerAndroid.android.js index 0e0dfccfc..d23e9d569 100644 --- a/Libraries/Components/ViewPager/ViewPagerAndroid.android.js +++ b/Libraries/Components/ViewPager/ViewPagerAndroid.android.js @@ -69,9 +69,18 @@ export type ViewPagerScrollState = $Enum<{ * } * ``` */ -var ViewPagerAndroid = React.createClass({ +class ViewPagerAndroid extends React.Component { + props: { + initialPage?: number, + onPageScroll?: Function, + onPageScrollStateChanged?: Function, + onPageSelected?: Function, + pageMargin?: number, + keyboardDismissMode?: 'none' | 'on-drag', + scrollEnabled?: boolean, + }; - propTypes: { + static propTypes = { ...View.propTypes, /** * Index of initial page that should be selected. Use `setPage` method to @@ -129,19 +138,19 @@ var ViewPagerAndroid = React.createClass({ * The default value is true. */ scrollEnabled: ReactPropTypes.bool, - }, + }; - componentDidMount: function() { + componentDidMount() { if (this.props.initialPage) { this.setPageWithoutAnimation(this.props.initialPage); } - }, + } - getInnerViewNode: function(): ReactComponent { + getInnerViewNode = (): ReactComponent => { return this.refs[VIEWPAGER_REF].getInnerViewNode(); - }, + }; - _childrenWithOverridenStyle: function(): Array { + _childrenWithOverridenStyle = (): Array => { // Override styles so that each page will fill the parent. Native component // will handle positioning of elements, so it's not important to offset // them correctly. @@ -170,54 +179,54 @@ var ViewPagerAndroid = React.createClass({ } return ReactElement.createElement(child.type, newProps); }); - }, + }; - _onPageScroll: function(e: Event) { + _onPageScroll = (e: Event) => { if (this.props.onPageScroll) { this.props.onPageScroll(e); } if (this.props.keyboardDismissMode === 'on-drag') { dismissKeyboard(); } - }, + }; - _onPageScrollStateChanged: function(e: Event) { + _onPageScrollStateChanged = (e: Event) => { if (this.props.onPageScrollStateChanged) { this.props.onPageScrollStateChanged(e.nativeEvent.pageScrollState); } - }, + }; - _onPageSelected: function(e: Event) { + _onPageSelected = (e: Event) => { if (this.props.onPageSelected) { this.props.onPageSelected(e); } - }, + }; /** * A helper function to scroll to a specific page in the ViewPager. * The transition between pages will be animated. */ - setPage: function(selectedPage: number) { + setPage = (selectedPage: number) => { UIManager.dispatchViewManagerCommand( ReactNative.findNodeHandle(this), UIManager.AndroidViewPager.Commands.setPage, [selectedPage], ); - }, + }; /** * A helper function to scroll to a specific page in the ViewPager. * The transition between pages will *not* be animated. */ - setPageWithoutAnimation: function(selectedPage: number) { + setPageWithoutAnimation = (selectedPage: number) => { UIManager.dispatchViewManagerCommand( ReactNative.findNodeHandle(this), UIManager.AndroidViewPager.Commands.setPageWithoutAnimation, [selectedPage], ); - }, + }; - render: function() { + render() { return ( ); - }, -}); + } +} var NativeAndroidViewPager = requireNativeComponent('AndroidViewPager', ViewPagerAndroid); diff --git a/Libraries/Components/WebView/WebView.android.js b/Libraries/Components/WebView/WebView.android.js index 005048113..9e7b11cd4 100644 --- a/Libraries/Components/WebView/WebView.android.js +++ b/Libraries/Components/WebView/WebView.android.js @@ -46,9 +46,8 @@ var defaultRenderLoading = () => ( /** * Renders a native WebView. */ -var WebView = React.createClass({ - - propTypes: { +class WebView extends React.Component { + static propTypes = { ...View.propTypes, renderError: PropTypes.func, renderLoading: PropTypes.func, @@ -153,30 +152,26 @@ var WebView = React.createClass({ * start playing. The default value is `false`. */ mediaPlaybackRequiresUserAction: PropTypes.bool, - }, + }; - getInitialState: function() { - return { - viewState: WebViewState.IDLE, - lastErrorEvent: null, - startInLoadingState: true, - }; - }, + static defaultProps = { + javaScriptEnabled : true, + scalesPageToFit: true, + }; - getDefaultProps: function() { - return { - javaScriptEnabled : true, - scalesPageToFit: true, - }; - }, + state = { + viewState: WebViewState.IDLE, + lastErrorEvent: null, + startInLoadingState: true, + }; - componentWillMount: function() { + componentWillMount() { if (this.props.startInLoadingState) { this.setState({viewState: WebViewState.LOADING}); } - }, + } - render: function() { + render() { var otherView = null; if (this.state.viewState === WebViewState.LOADING) { @@ -237,61 +232,61 @@ var WebView = React.createClass({ {otherView} ); - }, + } - goForward: function() { + goForward = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.goForward, null ); - }, + }; - goBack: function() { + goBack = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.goBack, null ); - }, + }; - reload: function() { + reload = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.reload, null ); - }, + }; - stopLoading: function() { + stopLoading = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.stopLoading, null ); - }, + }; /** * We return an event with a bunch of fields including: * url, title, loading, canGoBack, canGoForward */ - updateNavigationState: function(event) { + updateNavigationState = (event) => { if (this.props.onNavigationStateChange) { this.props.onNavigationStateChange(event.nativeEvent); } - }, + }; - getWebViewHandle: function() { + getWebViewHandle = () => { return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]); - }, + }; - onLoadingStart: function(event) { + onLoadingStart = (event) => { var onLoadStart = this.props.onLoadStart; onLoadStart && onLoadStart(event); this.updateNavigationState(event); - }, + }; - onLoadingError: function(event) { + onLoadingError = (event) => { event.persist(); // persist this event because we need to store it var {onError, onLoadEnd} = this.props; onError && onError(event); @@ -302,9 +297,9 @@ var WebView = React.createClass({ lastErrorEvent: event.nativeEvent, viewState: WebViewState.ERROR }); - }, + }; - onLoadingFinish: function(event) { + onLoadingFinish = (event) => { var {onLoad, onLoadEnd} = this.props; onLoad && onLoad(event); onLoadEnd && onLoadEnd(event); @@ -312,8 +307,8 @@ var WebView = React.createClass({ viewState: WebViewState.IDLE, }); this.updateNavigationState(event); - }, -}); + }; +} var RCTWebView = requireNativeComponent('RCTWebView', WebView); diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js index 018f913d1..c48ddd4fd 100644 --- a/Libraries/Components/WebView/WebView.ios.js +++ b/Libraries/Components/WebView/WebView.ios.js @@ -112,13 +112,11 @@ var defaultRenderError = (errorDomain, errorCode, errorDesc) => ( * You can use this component to navigate back and forth in the web view's * history and configure various properties for the web content. */ -var WebView = React.createClass({ - statics: { - JSNavigationScheme: JSNavigationScheme, - NavigationType: NavigationType, - }, +class WebView extends React.Component { + static JSNavigationScheme = JSNavigationScheme; + static NavigationType = NavigationType; - propTypes: { + static propTypes = { ...View.propTypes, html: deprecatedPropType( @@ -326,23 +324,21 @@ var WebView = React.createClass({ * to tap them before they start playing. The default value is `false`. */ mediaPlaybackRequiresUserAction: PropTypes.bool, - }, + }; - getInitialState: function() { - return { - viewState: WebViewState.IDLE, - lastErrorEvent: (null: ?ErrorEvent), - startInLoadingState: true, - }; - }, + state = { + viewState: WebViewState.IDLE, + lastErrorEvent: (null: ?ErrorEvent), + startInLoadingState: true, + }; - componentWillMount: function() { + componentWillMount() { if (this.props.startInLoadingState) { this.setState({viewState: WebViewState.LOADING}); } - }, + } - render: function() { + render() { var otherView = null; if (this.state.viewState === WebViewState.LOADING) { @@ -414,77 +410,77 @@ var WebView = React.createClass({ {otherView} ); - }, + } /** * Go forward one page in the web view's history. */ - goForward: function() { + goForward = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.goForward, null ); - }, + }; /** * Go back one page in the web view's history. */ - goBack: function() { + goBack = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.goBack, null ); - }, + }; /** * Reloads the current page. */ - reload: function() { + reload = () => { this.setState({viewState: WebViewState.LOADING}); UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.reload, null ); - }, + }; /** * Stop loading the current page. */ - stopLoading: function() { + stopLoading = () => { UIManager.dispatchViewManagerCommand( this.getWebViewHandle(), UIManager.RCTWebView.Commands.stopLoading, null ); - }, + }; /** * We return an event with a bunch of fields including: * url, title, loading, canGoBack, canGoForward */ - _updateNavigationState: function(event: Event) { + _updateNavigationState = (event: Event) => { if (this.props.onNavigationStateChange) { this.props.onNavigationStateChange(event.nativeEvent); } - }, + }; /** * Returns the native `WebView` node. */ - getWebViewHandle: function(): any { + getWebViewHandle = (): any => { return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]); - }, + }; - _onLoadingStart: function(event: Event) { + _onLoadingStart = (event: Event) => { var onLoadStart = this.props.onLoadStart; onLoadStart && onLoadStart(event); this._updateNavigationState(event); - }, + }; - _onLoadingError: function(event: Event) { + _onLoadingError = (event: Event) => { event.persist(); // persist this event because we need to store it var {onError, onLoadEnd} = this.props; onError && onError(event); @@ -495,9 +491,9 @@ var WebView = React.createClass({ lastErrorEvent: event.nativeEvent, viewState: WebViewState.ERROR }); - }, + }; - _onLoadingFinish: function(event: Event) { + _onLoadingFinish = (event: Event) => { var {onLoad, onLoadEnd} = this.props; onLoad && onLoad(event); onLoadEnd && onLoadEnd(event); @@ -505,8 +501,8 @@ var WebView = React.createClass({ viewState: WebViewState.IDLE, }); this._updateNavigationState(event); - }, -}); + }; +} var RCTWebView = requireNativeComponent('RCTWebView', WebView, { nativeOnly: { diff --git a/Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js b/Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js index 6ec0a546d..a59c82eda 100644 --- a/Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js +++ b/Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js @@ -76,8 +76,8 @@ var initStyle = function(index, presentedIndex) { NavigatorBreadcrumbNavigationBarStyles.Right[index]; }; -var NavigatorBreadcrumbNavigationBar = React.createClass({ - propTypes: { +class NavigatorBreadcrumbNavigationBar extends React.Component { + static propTypes = { navigator: PropTypes.shape({ push: PropTypes.func, pop: PropTypes.func, @@ -95,13 +95,11 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({ presentedIndex: React.PropTypes.number, }), style: View.propTypes.style, - }, + }; - statics: { - Styles: NavigatorBreadcrumbNavigationBarStyles, - }, + static Styles = NavigatorBreadcrumbNavigationBarStyles; - _updateIndexProgress: function(progress, index, fromIndex, toIndex) { + _updateIndexProgress = (progress, index, fromIndex, toIndex) => { var amount = toIndex > fromIndex ? progress : (1 - progress); var oldDistToCenter = index - fromIndex; var newDistToCenter = index - toIndex; @@ -143,32 +141,32 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({ pointerEvents: rightButtonStyle.opacity === 0 ? 'none' : 'auto', }); } - }, + }; - updateProgress: function(progress, fromIndex, toIndex) { + updateProgress = (progress, fromIndex, toIndex) => { var max = Math.max(fromIndex, toIndex); var min = Math.min(fromIndex, toIndex); for (var index = min; index <= max; index++) { this._updateIndexProgress(progress, index, fromIndex, toIndex); } - }, + }; - onAnimationStart: function(fromIndex, toIndex) { + onAnimationStart = (fromIndex, toIndex) => { var max = Math.max(fromIndex, toIndex); var min = Math.min(fromIndex, toIndex); for (var index = min; index <= max; index++) { this._setRenderViewsToHardwareTextureAndroid(index, true); } - }, + }; - onAnimationEnd: function() { + onAnimationEnd = () => { var max = this.props.navState.routeStack.length - 1; for (var index = 0; index <= max; index++) { this._setRenderViewsToHardwareTextureAndroid(index, false); } - }, + }; - _setRenderViewsToHardwareTextureAndroid: function(index, renderToHardwareTexture) { + _setRenderViewsToHardwareTextureAndroid = (index, renderToHardwareTexture) => { var props = { renderToHardwareTextureAndroid: renderToHardwareTexture, }; @@ -177,13 +175,13 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({ this._setPropsIfExists('separator_' + index, props); this._setPropsIfExists('title_' + index, props); this._setPropsIfExists('right_' + index, props); - }, + }; - componentWillMount: function() { + componentWillMount() { this._reset(); - }, + } - render: function() { + render() { var navState = this.props.navState; var icons = navState && navState.routeStack.map(this._getBreadcrumb); var titles = navState.routeStack.map(this._getTitle); @@ -197,23 +195,23 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({ {buttons} ); - }, + } - immediatelyRefresh: function() { + immediatelyRefresh = () => { this._reset(); this.forceUpdate(); - }, + }; - _reset() { + _reset = () => { this._key = guid(); this._descriptors = { crumb: new Map(), title: new Map(), right: new Map(), }; - }, + }; - _getBreadcrumb: function(route, index) { + _getBreadcrumb = (route, index) => { if (this._descriptors.crumb.has(route)) { return this._descriptors.crumb.get(route); } @@ -237,9 +235,9 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({ this._descriptors.crumb = this._descriptors.crumb.set(route, breadcrumbDescriptor); return breadcrumbDescriptor; - }, + }; - _getTitle: function(route, index) { + _getTitle = (route, index) => { if (this._descriptors.title.has(route)) { return this._descriptors.title.get(route); } @@ -260,9 +258,9 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({ ); this._descriptors.title = this._descriptors.title.set(route, titleDescriptor); return titleDescriptor; - }, + }; - _getRightButton: function(route, index) { + _getRightButton = (route, index) => { if (this._descriptors.right.has(route)) { return this._descriptors.right.get(route); } @@ -285,13 +283,13 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({ ); this._descriptors.right = this._descriptors.right.set(route, rightButtonDescriptor); return rightButtonDescriptor; - }, + }; - _setPropsIfExists: function(ref, props) { + _setPropsIfExists = (ref, props) => { var ref = this.refs[ref]; ref && ref.setNativeProps(props); - }, -}); + }; +} var styles = StyleSheet.create({ breadCrumbContainer: { diff --git a/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js b/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js index c4607bd72..7a39b1821 100644 --- a/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js +++ b/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js @@ -50,9 +50,8 @@ var navStatePresentedIndex = function(navState) { return navState.observedTopOfStack; }; -var NavigatorNavigationBar = React.createClass({ - - propTypes: { +class NavigatorNavigationBar extends React.Component { + static propTypes = { navigator: React.PropTypes.object, routeMapper: React.PropTypes.shape({ Title: React.PropTypes.func.isRequired, @@ -65,34 +64,30 @@ var NavigatorNavigationBar = React.createClass({ }), navigationStyles: React.PropTypes.object, style: View.propTypes.style, - }, + }; - statics: { - Styles: NavigatorNavigationBarStyles, - StylesAndroid: NavigatorNavigationBarStylesAndroid, - StylesIOS: NavigatorNavigationBarStylesIOS, - }, + static Styles = NavigatorNavigationBarStyles; + static StylesAndroid = NavigatorNavigationBarStylesAndroid; + static StylesIOS = NavigatorNavigationBarStylesIOS; - getDefaultProps() { - return { - navigationStyles: NavigatorNavigationBarStyles, - }; - }, + static defaultProps = { + navigationStyles: NavigatorNavigationBarStyles, + }; - componentWillMount: function() { + componentWillMount() { this._reset(); - }, + } /** * Stop transtion, immediately resets the cached state and re-render the * whole view. */ - immediatelyRefresh() { + immediatelyRefresh = () => { this._reset(); this.forceUpdate(); - }, + }; - _reset() { + _reset = () => { this._key = guid(); this._reusableProps = {}; this._components = {}; @@ -102,12 +97,9 @@ var NavigatorNavigationBar = React.createClass({ this._components[componentName] = new Map(); this._descriptors[componentName] = new Map(); }); - }, + }; - _getReusableProps: function( - /*string*/componentName, - /*number*/index - ) /*object*/ { + _getReusableProps = (/*string*/componentName, /*number*/index) => /*object*/ { var propStack = this._reusableProps[componentName]; if (!propStack) { propStack = this._reusableProps[componentName] = []; @@ -117,14 +109,14 @@ var NavigatorNavigationBar = React.createClass({ props = propStack[index] = {style:{}}; } return props; - }, + }; - _updateIndexProgress: function( + _updateIndexProgress = ( /*number*/progress, /*number*/index, /*number*/fromIndex, - /*number*/toIndex - ) { + /*number*/toIndex, + ) => { var amount = toIndex > fromIndex ? progress : (1 - progress); var oldDistToCenter = index - fromIndex; var newDistToCenter = index - toIndex; @@ -149,21 +141,17 @@ var NavigatorNavigationBar = React.createClass({ component.setNativeProps(props); } }, this); - }, + }; - updateProgress: function( - /*number*/progress, - /*number*/fromIndex, - /*number*/toIndex - ) { + updateProgress = (/*number*/progress, /*number*/fromIndex, /*number*/toIndex) => { var max = Math.max(fromIndex, toIndex); var min = Math.min(fromIndex, toIndex); for (var index = min; index <= max; index++) { this._updateIndexProgress(progress, index, fromIndex, toIndex); } - }, + }; - render: function() { + render() { var navBarStyle = { height: this.props.navigationStyles.General.TotalNavHeight, }; @@ -181,13 +169,9 @@ var NavigatorNavigationBar = React.createClass({ {components} ); - }, + } - _getComponent: function( - /*string*/componentName, - /*object*/route, - /*number*/index - ) /*?Object*/ { + _getComponent = (/*string*/componentName, /*object*/route, /*number*/index) => /*?Object*/ { if (this._descriptors[componentName].includes(route)) { return this._descriptors[componentName].get(route); } @@ -221,9 +205,8 @@ var NavigatorNavigationBar = React.createClass({ this._descriptors[componentName] = this._descriptors[componentName].set(route, rendered); return rendered; - }, - -}); + }; +} var styles = StyleSheet.create({ diff --git a/Libraries/Experimental/SwipeableRow/SwipeableListView.js b/Libraries/Experimental/SwipeableRow/SwipeableListView.js index 206f4e54d..45d315bcf 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableListView.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableListView.js @@ -48,22 +48,25 @@ const {PropTypes} = React; * - It can bounce the 1st row of the list so users know it's swipeable * - More to come */ -const SwipeableListView = React.createClass({ - statics: { - getNewDataSource(): Object { - return new SwipeableListViewDataSource({ - getRowData: (data, sectionID, rowID) => data[sectionID][rowID], - getSectionHeaderData: (data, sectionID) => data[sectionID], - sectionHeaderHasChanged: (s1, s2) => s1 !== s2, - rowHasChanged: (row1, row2) => row1 !== row2, - }); - }, - }, +class SwipeableListView extends React.Component { + props: { + bounceFirstRowOnMount: boolean, + dataSource: SwipeableListViewDataSource, + maxSwipeDistance: number, + renderRow: Function, + renderQuickActions: Function, + }; - _listViewRef: (null: ?string), - _shouldBounceFirstRowOnMount: false, + static getNewDataSource(): Object { + return new SwipeableListViewDataSource({ + getRowData: (data, sectionID, rowID) => data[sectionID][rowID], + getSectionHeaderData: (data, sectionID) => data[sectionID], + sectionHeaderHasChanged: (s1, s2) => s1 !== s2, + rowHasChanged: (row1, row2) => row1 !== row2, + }); + } - propTypes: { + static propTypes = { /** * To alert the user that swiping is possible, the first row can bounce * on component mount. @@ -80,24 +83,23 @@ const SwipeableListView = React.createClass({ renderRow: PropTypes.func.isRequired, // Callback method to render the view that will be unveiled on swipe renderQuickActions: PropTypes.func.isRequired, - }, + }; - getDefaultProps(): Object { - return { - bounceFirstRowOnMount: false, - renderQuickActions: () => null, - }; - }, + static defaultProps = { + bounceFirstRowOnMount: false, + renderQuickActions: () => null, + }; - getInitialState(): Object { - return { - dataSource: this.props.dataSource, - }; - }, + state: Object = { + dataSource: this.props.dataSource, + }; + + _listViewRef: ?string = null; + _shouldBounceFirstRowOnMount = false; componentWillMount(): void { this._shouldBounceFirstRowOnMount = this.props.bounceFirstRowOnMount; - }, + } componentWillReceiveProps(nextProps: Object): void { if ( @@ -107,7 +109,7 @@ const SwipeableListView = React.createClass({ dataSource: nextProps.dataSource, }); } - }, + } render(): ReactElement { return ( @@ -121,7 +123,7 @@ const SwipeableListView = React.createClass({ scrollEnabled={this.state.scrollEnabled} /> ); - }, + } /** * This is a work-around to lock vertical `ListView` scrolling on iOS and @@ -129,26 +131,22 @@ const SwipeableListView = React.createClass({ * scrolling is active allows us to significantly improve framerates * (from high 20s to almost consistently 60 fps) */ - _setListViewScrollable(value: boolean): void { + _setListViewScrollable = (value: boolean): void => { if (this._listViewRef && this._listViewRef.setNativeProps) { this._listViewRef.setNativeProps({ scrollEnabled: value, }); } - }, + }; // Passing through ListView's getScrollResponder() function - getScrollResponder(): ?Object { + getScrollResponder = (): ?Object => { if (this._listViewRef && this._listViewRef.getScrollResponder) { return this._listViewRef.getScrollResponder(); } - }, + }; - _renderRow( - rowData: Object, - sectionID: string, - rowID: string, - ): ReactElement { + _renderRow = (rowData: Object, sectionID: string, rowID: string): ReactElement => { const slideoutView = this.props.renderQuickActions(rowData, sectionID, rowID); // If renderRowSlideout is unspecified or returns falsey, don't allow swipe @@ -157,6 +155,7 @@ const SwipeableListView = React.createClass({ } let shouldBounceOnMount = false; + // $FlowFixMe found when converting React.createClass to ES6 if (this._shouldBounceFirstRowOnMount) { this._shouldBounceFirstRowOnMount = false; shouldBounceOnMount = rowID === this.props.dataSource.getFirstRowID(); @@ -175,13 +174,13 @@ const SwipeableListView = React.createClass({ {this.props.renderRow(rowData, sectionID, rowID)} ); - }, + }; - _onOpen(rowID: string): void { + _onOpen = (rowID: string): void => { this.setState({ dataSource: this.state.dataSource.setOpenRowID(rowID), }); - }, -}); + }; +} module.exports = SwipeableListView; diff --git a/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js b/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js index 10dc7a6c5..ab6367e29 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js @@ -36,8 +36,19 @@ const {PropTypes} = React; * with SwipeableListView. Each button takes an image and text with optional * formatting. */ -const SwipeableQuickActionButton = React.createClass({ - propTypes: { +class SwipeableQuickActionButton extends React.Component { + props: { + accessibilityLabel?: string, + imageSource: $FlowFixMe, + imageStyle?: $FlowFixMe, + onPress?: Function, + style?: $FlowFixMe, + testID?: string, + text?: string, + textStyle?: $FlowFixMe, + }; + + static propTypes = { accessibilityLabel: PropTypes.string, imageSource: Image.propTypes.source.isRequired, imageStyle: Image.propTypes.style, @@ -46,7 +57,7 @@ const SwipeableQuickActionButton = React.createClass({ testID: PropTypes.string, text: PropTypes.string, textStyle: Text.propTypes.style, - }, + }; render(): ?ReactElement { if (!this.props.imageSource && !this.props.text) { @@ -70,7 +81,7 @@ const SwipeableQuickActionButton = React.createClass({ ); - }, -}); + } +} module.exports = SwipeableQuickActionButton; diff --git a/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js b/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js index d5b77585a..73e171b32 100644 --- a/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js +++ b/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js @@ -39,12 +39,15 @@ const MAX_QUICK_ACTIONS = 2; * * */ -const SwipeableQuickActions = React.createClass({ - propTypes: { +class SwipeableQuickActions extends React.Component { + props: {style?: $FlowFixMe}; + + static propTypes = { style: View.propTypes.style, - }, + }; render(): ReactElement { + // $FlowFixMe found when converting React.createClass to ES6 const children = this.props.children; let buttons = []; @@ -53,6 +56,7 @@ const SwipeableQuickActions = React.createClass({ for (let i = 0; i < children.length && i < MAX_QUICK_ACTIONS; i++) { buttons.push(children[i]); + // $FlowFixMe found when converting React.createClass to ES6 if (i < this.props.children.length - 1) { // Not last button buttons.push(); } @@ -66,8 +70,8 @@ const SwipeableQuickActions = React.createClass({ {buttons} ); - }, -}); + } +} const styles = StyleSheet.create({ background: { diff --git a/Libraries/Inspector/ElementProperties.js b/Libraries/Inspector/ElementProperties.js index a8e7cb37f..63dadf9bf 100644 --- a/Libraries/Inspector/ElementProperties.js +++ b/Libraries/Inspector/ElementProperties.js @@ -26,8 +26,17 @@ var flattenStyle = require('flattenStyle'); var mapWithSeparator = require('mapWithSeparator'); var openFileInEditor = require('openFileInEditor'); -var ElementProperties = React.createClass({ - propTypes: { +class ElementProperties extends React.Component { + props: { + hierarchy: Array<$FlowFixMe>, + style?: Object | Array<$FlowFixMe> | number, + source?: { + fileName?: string, + lineNumber?: number, + }, + }; + + static propTypes = { hierarchy: PropTypes.array.isRequired, style: PropTypes.oneOfType([ PropTypes.object, @@ -38,10 +47,11 @@ var ElementProperties = React.createClass({ fileName: PropTypes.string, lineNumber: PropTypes.number, }), - }, + }; - render: function() { + render() { var style = flattenStyle(this.props.style); + // $FlowFixMe found when converting React.createClass to ES6 var selection = this.props.selection; var openFileButton; var source = this.props.source; @@ -71,6 +81,7 @@ var ElementProperties = React.createClass({ this.props.setSelection(i)}> {getInstanceName(item)} @@ -89,13 +100,15 @@ var ElementProperties = React.createClass({ {openFileButton} - + { + // $FlowFixMe found when converting React.createClass to ES6 + } ); - }, -}); + } +} function getInstanceName(instance) { if (instance.getName) { diff --git a/Libraries/Inspector/InspectorOverlay.js b/Libraries/Inspector/InspectorOverlay.js index 2e8ce5f3f..ec39ee2df 100644 --- a/Libraries/Inspector/InspectorOverlay.js +++ b/Libraries/Inspector/InspectorOverlay.js @@ -25,17 +25,26 @@ type EventLike = { nativeEvent: Object; }; -var InspectorOverlay = React.createClass({ - propTypes: { +class InspectorOverlay extends React.Component { + props: { + inspected?: { + frame?: Object, + style?: any, + }, + inspectedViewTag?: number, + onTouchInstance: Function, + }; + + static propTypes = { inspected: PropTypes.shape({ frame: PropTypes.object, style: PropTypes.any, }), inspectedViewTag: PropTypes.number, onTouchInstance: PropTypes.func.isRequired, - }, + }; - findViewForTouchEvent: function(e: EventLike) { + findViewForTouchEvent = (e: EventLike) => { var {locationX, locationY} = e.nativeEvent.touches[0]; UIManager.findSubviewIn( this.props.inspectedViewTag, @@ -48,14 +57,14 @@ var InspectorOverlay = React.createClass({ this.props.onTouchInstance(instance, {left, top, width, height}, locationY); } ); - }, + }; - shouldSetResponser: function(e: EventLike): bool { + shouldSetResponser = (e: EventLike): bool => { this.findViewForTouchEvent(e); return true; - }, + }; - render: function() { + render() { var content = null; if (this.props.inspected) { content = ; @@ -70,7 +79,7 @@ var InspectorOverlay = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ inspector: { diff --git a/Libraries/Inspector/PerformanceOverlay.js b/Libraries/Inspector/PerformanceOverlay.js index 1c6986c28..9eb51a380 100644 --- a/Libraries/Inspector/PerformanceOverlay.js +++ b/Libraries/Inspector/PerformanceOverlay.js @@ -17,8 +17,8 @@ var StyleSheet = require('StyleSheet'); var Text = require('Text'); var View = require('View'); -var PerformanceOverlay = React.createClass({ - render: function() { +class PerformanceOverlay extends React.Component { + render() { var perfLogs = PerformanceLogger.getTimespans(); var items = []; @@ -42,7 +42,7 @@ var PerformanceOverlay = React.createClass({ ); } -}); +} var styles = StyleSheet.create({ container: { diff --git a/Libraries/RCTTest/SnapshotViewIOS.ios.js b/Libraries/RCTTest/SnapshotViewIOS.ios.js index 3cd8bf04a..869a2914a 100644 --- a/Libraries/RCTTest/SnapshotViewIOS.ios.js +++ b/Libraries/RCTTest/SnapshotViewIOS.ios.js @@ -19,12 +19,25 @@ var View = require('View'); var requireNativeComponent = require('requireNativeComponent'); -var SnapshotViewIOS = React.createClass({ - onDefaultAction: function(event: Object) { - TestModule.verifySnapshot(TestModule.markTestPassed); - }, +class SnapshotViewIOS extends React.Component { + props: { + onSnapshotReady?: Function, + testIdentifier?: string, + }; - render: function() { + static propTypes = { + ...View.propTypes, + // A callback when the Snapshot view is ready to be compared + onSnapshotReady : React.PropTypes.func, + // A name to identify the individual instance to the SnapshotView + testIdentifier : React.PropTypes.string, + }; + + onDefaultAction = (event: Object) => { + TestModule.verifySnapshot(TestModule.markTestPassed); + }; + + render() { var testIdentifier = this.props.testIdentifier || 'test'; var onSnapshotReady = this.props.onSnapshotReady || this.onDefaultAction; return ( @@ -35,16 +48,8 @@ var SnapshotViewIOS = React.createClass({ testIdentifier={testIdentifier} /> ); - }, - - propTypes: { - ...View.propTypes, - // A callback when the Snapshot view is ready to be compared - onSnapshotReady : React.PropTypes.func, - // A name to identify the individual instance to the SnapshotView - testIdentifier : React.PropTypes.string, } -}); +} var style = StyleSheet.create({ snapshot: { diff --git a/ReactAndroid/src/androidTest/js/CatalystRootViewTestModule.js b/ReactAndroid/src/androidTest/js/CatalystRootViewTestModule.js index 1086567a1..d9ada150d 100644 --- a/ReactAndroid/src/androidTest/js/CatalystRootViewTestModule.js +++ b/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 ; - }, -}); + } +} module.exports = { CatalystRootViewTestApp: CatalystRootViewTestApp, diff --git a/ReactAndroid/src/androidTest/js/DatePickerDialogTestModule.js b/ReactAndroid/src/androidTest/js/DatePickerDialogTestModule.js index a15eabd4b..88c9e5fc2 100644 --- a/ReactAndroid/src/androidTest/js/DatePickerDialogTestModule.js +++ b/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 (); - }, -}); + } +} var DatePickerDialogTestModule = { DatePickerDialogTestApp: DatePickerDialogTestApp, diff --git a/ReactAndroid/src/androidTest/js/InitialPropsTestApp.js b/ReactAndroid/src/androidTest/js/InitialPropsTestApp.js index 9b5142c24..3a4f40301 100644 --- a/ReactAndroid/src/androidTest/js/InitialPropsTestApp.js +++ b/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 dummy; } -}); +} module.exports = InitialPropsTestApp; diff --git a/ReactAndroid/src/androidTest/js/JSResponderTestApp.js b/ReactAndroid/src/androidTest/js/JSResponderTestApp.js index 314f7f39d..9c88cedb2 100644 --- a/ReactAndroid/src/androidTest/js/JSResponderTestApp.js +++ b/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({ ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/ReactAndroid/src/androidTest/js/LayoutEventsTestApp.js b/ReactAndroid/src/androidTest/js/LayoutEventsTestApp.js index d9a0dcfa2..06ba34e17 100644 --- a/ReactAndroid/src/androidTest/js/LayoutEventsTestApp.js +++ b/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 ( ); - }, -}); + } +} module.exports = LayoutEventsTestApp; diff --git a/ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js b/ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js index a768668ad..9883e7c37 100644 --- a/ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js +++ b/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 ( @@ -66,8 +67,8 @@ var MeasureLayoutTestApp = React.createClass({ ); - }, -}); + } +} function shouldNotCallThisCallback() { assertEquals(false, true); diff --git a/ReactAndroid/src/androidTest/js/MultitouchHandlingTestAppModule.js b/ReactAndroid/src/androidTest/js/MultitouchHandlingTestAppModule.js index 7c51afbee..38b17db2c 100644 --- a/ReactAndroid/src/androidTest/js/MultitouchHandlingTestAppModule.js +++ b/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 ( ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/ReactAndroid/src/androidTest/js/PickerAndroidTestModule.js b/ReactAndroid/src/androidTest/js/PickerAndroidTestModule.js index e354d8fae..219e3ec0a 100644 --- a/ReactAndroid/src/androidTest/js/PickerAndroidTestModule.js +++ b/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 ( ); - }, - onValueChange: function(value) { + } + + onValueChange = (value) => { this.setState({selected: value}); RecordingModule.recordSelection(value); - }, -}); + }; +} var PickerAndroidTestModule = { PickerAndroidTestApp: PickerAndroidTestApp, diff --git a/ReactAndroid/src/androidTest/js/ProgressBarTestModule.js b/ReactAndroid/src/androidTest/js/ProgressBarTestModule.js index 296cb8a2c..70408854a 100644 --- a/ReactAndroid/src/androidTest/js/ProgressBarTestModule.js +++ b/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 ( @@ -34,11 +36,8 @@ var ProgressBarSampleApp = React.createClass({ ); - }, - getInitialState: function() { - return {}; - }, -}); + } +} var ProgressBarTestModule = { renderProgressBarApplication: function(rootTag) { diff --git a/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js b/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js index ac4f5f1a5..8ea740fee 100644 --- a/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js +++ b/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 ( @@ -35,8 +35,8 @@ var Item = React.createClass({ ); - }, -}); + } +} var getInitialState = function() { var data = []; diff --git a/ReactAndroid/src/androidTest/js/ShareTestModule.js b/ReactAndroid/src/androidTest/js/ShareTestModule.js index dbba70103..4ef9b78e6 100644 --- a/ReactAndroid/src/androidTest/js/ShareTestModule.js +++ b/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 (); - }, -}); + } +} var ShareTestModule = { ShareTestApp: ShareTestApp, diff --git a/ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js b/ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js index 3d18827d6..06fe1d3b7 100644 --- a/ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js +++ b/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 ( @@ -37,7 +37,7 @@ var ClippingSample1 = React.createClass({ ); } -}); +} 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 ( @@ -92,7 +92,7 @@ var ClippingSample2 = React.createClass({ ); } -}); +} 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({ ); } -}); +} 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({ ); } -}); +} 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({ ); } -}); +} 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 ( {component} ); - }, -}); + } +} var SubviewsClippingTestModule = { App: SubviewsClippingTestApp, diff --git a/ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js b/ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js index 3c1c289a4..80e2c6eb5 100644 --- a/ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js +++ b/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 ( @@ -37,26 +35,25 @@ var Row = React.createClass({ ); - }, + } - _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(); @@ -74,8 +71,8 @@ var SwipeRefreshLayoutTestApp = React.createClass({ {rows} ); - }, -}); + } +} var SwipeRefreshLayoutTestModule = { SwipeRefreshLayoutTestApp, diff --git a/ReactAndroid/src/androidTest/js/TestIdTestModule.js b/ReactAndroid/src/androidTest/js/TestIdTestModule.js index 6f11c1574..41b9b7272 100644 --- a/ReactAndroid/src/androidTest/js/TestIdTestModule.js +++ b/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 ( @@ -124,8 +124,8 @@ var TestIdTestApp = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ base: { diff --git a/ReactAndroid/src/androidTest/js/TextInputTestModule.js b/ReactAndroid/src/androidTest/js/TextInputTestModule.js index 9ce284486..1dd1c3d0c 100644 --- a/ReactAndroid/src/androidTest/js/TextInputTestModule.js +++ b/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 ( ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/ReactAndroid/src/androidTest/js/TimePickerDialogTestModule.js b/ReactAndroid/src/androidTest/js/TimePickerDialogTestModule.js index 4f1f16672..7a8db9e07 100644 --- a/ReactAndroid/src/androidTest/js/TimePickerDialogTestModule.js +++ b/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 ; - }, -}); + } +} var TimePickerDialogTestModule = { TimePickerDialogTestApp: TimePickerDialogTestApp, diff --git a/ReactAndroid/src/androidTest/js/TouchBubblingTestAppModule.js b/ReactAndroid/src/androidTest/js/TouchBubblingTestAppModule.js index e792d2d73..47e3d8660 100644 --- a/ReactAndroid/src/androidTest/js/TouchBubblingTestAppModule.js +++ b/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 ( @@ -40,8 +41,8 @@ var TouchBubblingTestApp = React.createClass({ ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/ReactAndroid/src/androidTest/js/ViewRenderingTestModule.js b/ReactAndroid/src/androidTest/js/ViewRenderingTestModule.js index 03c093df7..607b9aeaf 100644 --- a/ReactAndroid/src/androidTest/js/ViewRenderingTestModule.js +++ b/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 ( ); - }, - 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 ( ) - }, -}); + } +} -var BorderSampleApp = React.createClass({ - render: function() { +class BorderSampleApp extends React.Component { + render() { return ( ); } -}); +} -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({ ); } -}); +} var ViewRenderingTestModule = { renderViewApplication: function(rootTag) {