From 2b46fd424d9f95fe82cbb302a66f02e09a56fcc5 Mon Sep 17 00:00:00 2001 From: Eric Vicenti Date: Fri, 19 Feb 2016 16:55:07 -0800 Subject: [PATCH] Clean up UIExplorer and seperate RCTRootView examples Reviewed By: nicklockwood Differential Revision: D2951030 fb-gh-sync-id: e7cf64035d8e9e30aafe8b4944b6a20e4bc55078 shipit-source-id: e7cf64035d8e9e30aafe8b4944b6a20e4bc55078 --- .../RootViewSizeFlexibilityExampleApp.js | 76 +++++++++++++++ .../UIExplorer/SetPropertiesExampleApp.js | 20 ++-- Examples/UIExplorer/UIExplorerApp.android.js | 62 ++++++------ Examples/UIExplorer/UIExplorerApp.ios.js | 96 ++++--------------- Examples/UIExplorer/UIExplorerList.android.js | 1 - 5 files changed, 136 insertions(+), 119 deletions(-) create mode 100644 Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js diff --git a/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js new file mode 100644 index 000000000..baab38671 --- /dev/null +++ b/Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js @@ -0,0 +1,76 @@ +/** + * The examples provided by Facebook are for non-commercial testing and + * evaluation purposes only. + * + * Facebook reserves all rights not expressly granted. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS + * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL + * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN + * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + * + * @flow + */ +'use strict'; + +const React = require('react-native'); +const { + StyleSheet, + Text, + TouchableHighlight, + View, +} = React; + +class RootViewSizeFlexibilityExampleApp extends React.Component { + + constructor(props: {toggled: boolean}) { + super(props); + this.state = { toggled: false }; + } + + _onPressButton() { + this.setState({ toggled: !this.state.toggled }); + } + + render() { + const viewStyle = this.state.toggled ? styles.bigContainer : styles.smallContainer; + + return ( + + + + + React Native Button + + + + + ); + } + +} + +const styles = StyleSheet.create({ + bigContainer: { + flex: 1, + height: 60, + backgroundColor: 'gray', + }, + smallContainer: { + flex: 1, + height: 40, + backgroundColor: 'gray', + }, + center: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + whiteText: { + color: 'white', + } +}); + +module.exports = RootViewSizeFlexibilityExampleApp; diff --git a/Examples/UIExplorer/SetPropertiesExampleApp.js b/Examples/UIExplorer/SetPropertiesExampleApp.js index 748bbc3cc..f5dc9c8ea 100644 --- a/Examples/UIExplorer/SetPropertiesExampleApp.js +++ b/Examples/UIExplorer/SetPropertiesExampleApp.js @@ -13,17 +13,18 @@ * * @flow */ - 'use strict'; -var React = require('React'); -var Text = require('Text'); -var View = require('View'); +const React = require('react-native'); +const { + Text, + View, +} = React; -var SetPropertiesExampleApp = React.createClass({ +class SetPropertiesExampleApp extends React.Component { - render: function() { - var wrapperStyle = { + render() { + const wrapperStyle = { backgroundColor: this.props.color, flex: 1, alignItems: 'center', @@ -37,7 +38,8 @@ var SetPropertiesExampleApp = React.createClass({ ); - }, -}); + } + +} module.exports = SetPropertiesExampleApp; diff --git a/Examples/UIExplorer/UIExplorerApp.android.js b/Examples/UIExplorer/UIExplorerApp.android.js index cdf92c684..6446e8fa4 100644 --- a/Examples/UIExplorer/UIExplorerApp.android.js +++ b/Examples/UIExplorer/UIExplorerApp.android.js @@ -16,8 +16,8 @@ */ 'use strict'; -var React = require('react-native'); -var { +const React = require('react-native'); +const { AppRegistry, BackAndroid, Dimensions, @@ -27,29 +27,32 @@ var { View, StatusBar, } = React; -var UIExplorerList = require('./UIExplorerList.android'); +const UIExplorerList = require('./UIExplorerList.android'); -var DRAWER_WIDTH_LEFT = 56; +const DRAWER_WIDTH_LEFT = 56; -var UIExplorerApp = React.createClass({ - getInitialState: function() { - return { +class UIExplorerApp extends React.Component { + constructor(props) { + super(props); + this.onSelectExample = this.onSelectExample.bind(this); + this._handleBackButtonPress = this._handleBackButtonPress.bind(this); + this.state = { example: this._getUIExplorerHome(), }; - }, + } - _getUIExplorerHome: function() { + _getUIExplorerHome() { return { title: 'UIExplorer', component: this._renderHome(), }; - }, + } - componentWillMount: function() { + componentWillMount() { BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress); - }, + } - render: function() { + render() { return ( {this._renderNavigation()} - ); - }, + ); + } - _renderNavigationView: function() { + _renderNavigationView() { return ( ); - }, + } - onSelectExample: function(example) { + onSelectExample(example) { this.drawer.closeDrawer(); if (example.title === this._getUIExplorerHome().title) { example = this._getUIExplorerHome(); @@ -79,10 +82,10 @@ var UIExplorerApp = React.createClass({ this.setState({ example: example, }); - }, + } - _renderHome: function() { - var onSelectExample = this.onSelectExample; + _renderHome() { + const onSelectExample = this.onSelectExample; return React.createClass({ render: function() { return ( @@ -93,10 +96,10 @@ var UIExplorerApp = React.createClass({ ); } }); - }, + } - _renderNavigation: function() { - var Component = this.state.example.component; + _renderNavigation() { + const Component = this.state.example.component; return ( ); - }, + } - _handleBackButtonPress: function() { + _handleBackButtonPress() { if ( this._exampleRef && this._exampleRef.handleBackAction && @@ -129,10 +132,11 @@ var UIExplorerApp = React.createClass({ return true; } return false; - }, -}); + } -var styles = StyleSheet.create({ +} + +const styles = StyleSheet.create({ container: { flex: 1, }, diff --git a/Examples/UIExplorer/UIExplorerApp.ios.js b/Examples/UIExplorer/UIExplorerApp.ios.js index f93cc2a66..120c772d8 100644 --- a/Examples/UIExplorer/UIExplorerApp.ios.js +++ b/Examples/UIExplorer/UIExplorerApp.ios.js @@ -12,33 +12,33 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * * @providesModule UIExplorerApp - * @flow */ 'use strict'; -var React = require('react-native'); -var UIExplorerList = require('./UIExplorerList.ios'); -var { +const React = require('react-native'); +const UIExplorerList = require('./UIExplorerList.ios'); +const SetPropertiesExampleApp = require('./SetPropertiesExampleApp'); +const RootViewSizeFlexibilityExampleApp = require('./RootViewSizeFlexibilityExampleApp'); +const { AppRegistry, NavigatorIOS, StyleSheet, - Text, - TouchableHighlight, View, StatusBar, } = React; -var UIExplorerApp = React.createClass({ +class UIExplorerApp extends React.Component { - getInitialState: function() { - return { + constructor(props) { + super(props); + this.state = { openExternalExample: (null: ?React.Component), }; - }, + } - render: function() { + render() { if (this.state.openExternalExample) { - var Example = this.state.openExternalExample; + const Example = this.state.openExternalExample; return ( { @@ -49,7 +49,7 @@ var UIExplorerApp = React.createClass({ } return ( - + ); } -}); -var styles = StyleSheet.create({ +} + +const styles = StyleSheet.create({ container: { flex: 1, }, itemWrapper: { backgroundColor: '#eaeaea', }, - bigContainer: { - flex: 1, - height: 60, - backgroundColor: 'gray', - }, - smallContainer: { - flex: 1, - height: 40, - backgroundColor: 'gray', - }, - center: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - whiteText: { - color: 'white', - } -}); - -var SetPropertiesExampleApp = React.createClass({ - - render: function() { - var wrapperStyle = { - backgroundColor: this.props.color, - flex: 1, - alignItems: 'center', - justifyContent: 'center' - }; - - return ( - - - Embedded React Native view - - - ); - }, -}); - -var RootViewSizeFlexibilityExampleApp = React.createClass({ - - getInitialState: function () { - return { toggled: false }; - }, - - _onPressButton: function() { - this.setState({ toggled: !this.state.toggled }); - }, - - render: function() { - var viewStyle = this.state.toggled ? styles.bigContainer : styles.smallContainer; - - return ( - - - - - React Native Button - - - - - ); - }, }); AppRegistry.registerComponent('SetPropertiesExampleApp', () => SetPropertiesExampleApp); diff --git a/Examples/UIExplorer/UIExplorerList.android.js b/Examples/UIExplorer/UIExplorerList.android.js index 804ed69d4..8959a0919 100644 --- a/Examples/UIExplorer/UIExplorerList.android.js +++ b/Examples/UIExplorer/UIExplorerList.android.js @@ -53,7 +53,6 @@ var APIS = [ require('./ImageEditingExample'), require('./IntentAndroidExample.android'), require('./LayoutEventsExample'), - require('./NavigationExperimental/NavigationExperimentalExample'), require('./LayoutExample'), require('./NavigationExperimental/NavigationExperimentalExample'), require('./NetInfoExample'),