Clean up UIExplorer and seperate RCTRootView examples

Reviewed By: nicklockwood

Differential Revision: D2951030

fb-gh-sync-id: e7cf64035d8e9e30aafe8b4944b6a20e4bc55078
shipit-source-id: e7cf64035d8e9e30aafe8b4944b6a20e4bc55078

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 (
+      <TouchableHighlight onPress={this._onPressButton.bind(this)}>
+        <View style={viewStyle}>
+          <View style={styles.center}>
+            <Text style={styles.whiteText}>
+              React Native Button
+            </Text>
+          </View>
+        </View>
+      </TouchableHighlight>
+    );
+  }
+
+}
+
+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;

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({
         </Text>
       </View>
     );
-  },
-});
+  }
+
+}
 
 module.exports = SetPropertiesExampleApp;

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 (
       <DrawerLayoutAndroid
         drawerPosition={DrawerLayoutAndroid.positions.Left}
@@ -59,19 +62,19 @@ var UIExplorerApp = React.createClass({
         renderNavigationView={this._renderNavigationView}>
         {this._renderNavigation()}
       </DrawerLayoutAndroid>
-      );
-  },
+    );
+  }
 
-  _renderNavigationView: function() {
+  _renderNavigationView() {
     return (
       <UIExplorerList
         onSelectExample={this.onSelectExample}
         isInDrawer={true}
       />
     );
-  },
+  }
 
-  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 (
       <View style={styles.container}>
         <StatusBar
@@ -114,9 +117,9 @@ var UIExplorerApp = React.createClass({
         />
       </View>
     );
-  },
+  }
 
-  _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,
   },

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 (
         <Example
           onExampleExit={() => {
@@ -49,7 +49,7 @@ var UIExplorerApp = React.createClass({
     }
 
     return (
-      <View style={{flex: 1}}>
+      <View style={styles.container}>
         <StatusBar barStyle="default" />
         <NavigatorIOS
           style={styles.container}
@@ -68,80 +68,16 @@ var UIExplorerApp = React.createClass({
       </View>
     );
   }
-});
 
-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 (
-      <View style={wrapperStyle}>
-        <Text>
-          Embedded React Native view
-        </Text>
-      </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 (
-      <TouchableHighlight onPress={this._onPressButton}>
-        <View style={viewStyle}>
-          <View style={styles.center}>
-            <Text style={styles.whiteText}>
-              React Native Button
-            </Text>
-          </View>
-        </View>
-      </TouchableHighlight>
-    );
-  },
 });
 
 AppRegistry.registerComponent('SetPropertiesExampleApp', () => SetPropertiesExampleApp);

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'),