RNTester: Cleanup ViewExample.js

Summary: Minor cleanup of ViewExample.js in the RNTester.

Reviewed By: sahrens

Differential Revision: D8690133

fbshipit-source-id: d034f6d215679dac7f19fab90729bb7e7ef39edd

RNTester/js/ViewExample.js

@@ -10,110 +10,11 @@
 
 'use strict';
 
-var React = require('react');
+/* eslint-disable react-native/no-inline-styles */
-var ReactNative = require('react-native');
-var {StyleSheet, Text, View} = ReactNative;
-var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 
-var styles = StyleSheet.create({
+const React = require('react');
-  box: {
+const {StyleSheet, Text, View} = require('react-native');
-    backgroundColor: '#527FE4',
+const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
-    borderColor: '#000033',
-    borderWidth: 1,
-  },
-  zIndex: {
-    justifyContent: 'space-around',
-    width: 100,
-    height: 50,
-    marginTop: -10,
-  },
-});
-
-class ViewBorderStyleExample extends React.Component<{}, $FlowFixMeState> {
-  state = {
-    showBorder: true,
-  };
-
-  render() {
-    return (
-      <TouchableWithoutFeedback onPress={this._handlePress}>
-        <View>
-          <View
-            style={{
-              borderWidth: 1,
-              borderStyle: this.state.showBorder ? 'dashed' : null,
-              padding: 5,
-            }}>
-            <Text style={{fontSize: 11}}>Dashed border style</Text>
-          </View>
-          <View
-            style={{
-              marginTop: 5,
-              borderWidth: 1,
-              borderRadius: 5,
-              borderStyle: this.state.showBorder ? 'dotted' : null,
-              padding: 5,
-            }}>
-            <Text style={{fontSize: 11}}>Dotted border style</Text>
-          </View>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
-
-  _handlePress = () => {
-    this.setState({showBorder: !this.state.showBorder});
-  };
-}
-
-class ZIndexExample extends React.Component<{}, $FlowFixMeState> {
-  state = {
-    flipped: false,
-  };
-
-  render() {
-    const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
-    return (
-      <TouchableWithoutFeedback onPress={this._handlePress}>
-        <View>
-          <Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
-          <View
-            style={[
-              styles.zIndex,
-              {marginTop: 0, backgroundColor: '#E57373', zIndex: indices[0]},
-            ]}>
-            <Text>ZIndex {indices[0]}</Text>
-          </View>
-          <View
-            style={[
-              styles.zIndex,
-              {marginLeft: 50, backgroundColor: '#FFF176', zIndex: indices[1]},
-            ]}>
-            <Text>ZIndex {indices[1]}</Text>
-          </View>
-          <View
-            style={[
-              styles.zIndex,
-              {marginLeft: 100, backgroundColor: '#81C784', zIndex: indices[2]},
-            ]}>
-            <Text>ZIndex {indices[2]}</Text>
-          </View>
-          <View
-            style={[
-              styles.zIndex,
-              {marginLeft: 150, backgroundColor: '#64B5F6', zIndex: indices[3]},
-            ]}>
-            <Text>ZIndex {indices[3]}</Text>
-          </View>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  }
-
-  _handlePress = () => {
-    this.setState({flipped: !this.state.flipped});
-  };
-}
 
 exports.title = '<View>';
 exports.description =
@@ -124,7 +25,7 @@ exports.displayName = 'ViewExample';
 exports.examples = [
   {
     title: 'Background Color',
-    render: function() {
+    render() {
       return (
         <View style={{backgroundColor: '#527FE4', padding: 5}}>
           <Text style={{fontSize: 11}}>Blue background</Text>
@@ -134,7 +35,7 @@ exports.examples = [
   },
   {
     title: 'Border',
-    render: function() {
+    render() {
       return (
         <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
           <Text style={{fontSize: 11}}>5px blue border</Text>
@@ -144,7 +45,14 @@ exports.examples = [
   },
   {
     title: 'Padding/Margin',
-    render: function() {
+    render() {
+      const styles = StyleSheet.create({
+        box: {
+          backgroundColor: '#527FE4',
+          borderColor: '#000033',
+          borderWidth: 1,
+        },
+      });
       return (
         <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
           <View style={[styles.box, {padding: 5}]}>
@@ -167,7 +75,7 @@ exports.examples = [
   },
   {
     title: 'Border Radius',
-    render: function() {
+    render() {
       return (
         <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
           <Text style={{fontSize: 11}}>
@@ -180,13 +88,54 @@ exports.examples = [
   },
   {
     title: 'Border Style',
-    render: function() {
+    render() {
+      type Props = $ReadOnly<{||}>;
+      type State = {|
+        showBorder: boolean,
+      |};
+
+      class ViewBorderStyleExample extends React.Component<Props, State> {
+        state = {
+          showBorder: true,
+        };
+
+        render() {
+          return (
+            <TouchableWithoutFeedback onPress={this._handlePress}>
+              <View>
+                <View
+                  style={{
+                    borderWidth: 1,
+                    borderStyle: this.state.showBorder ? 'dashed' : null,
+                    padding: 5,
+                  }}>
+                  <Text style={{fontSize: 11}}>Dashed border style</Text>
+                </View>
+                <View
+                  style={{
+                    marginTop: 5,
+                    borderWidth: 1,
+                    borderRadius: 5,
+                    borderStyle: this.state.showBorder ? 'dotted' : null,
+                    padding: 5,
+                  }}>
+                  <Text style={{fontSize: 11}}>Dotted border style</Text>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          );
+        }
+
+        _handlePress = () => {
+          this.setState({showBorder: !this.state.showBorder});
+        };
+      }
       return <ViewBorderStyleExample />;
     },
   },
   {
     title: 'Circle with Border Radius',
-    render: function() {
+    render() {
       return (
         <View
           style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}}
@@ -196,24 +145,30 @@ exports.examples = [
   },
   {
     title: 'Overflow',
-    render: function() {
+    render() {
       return (
         <View style={{flexDirection: 'row'}}>
           <View
             style={{
-              width: 95,
-              height: 10,
-              marginRight: 10,
-              marginBottom: 5,
-              overflow: 'hidden',
               borderWidth: 0.5,
+              height: 10,
+              marginBottom: 5,
+              marginRight: 10,
+              overflow: 'hidden',
+              width: 95,
             }}>
             <View style={{width: 200, height: 20}}>
               <Text>Overflow hidden</Text>
             </View>
           </View>
           <View
-            style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
+            style={{
+              borderWidth: 0.5,
+              height: 10,
+              marginBottom: 5,
+              marginRight: 10,
+              width: 95,
+            }}>
             <View style={{width: 200, height: 20}}>
               <Text>Overflow visible</Text>
             </View>
@@ -224,7 +179,7 @@ exports.examples = [
   },
   {
     title: 'Opacity',
-    render: function() {
+    render() {
       return (
         <View>
           <View style={{opacity: 0}}>
@@ -254,7 +209,87 @@ exports.examples = [
   },
   {
     title: 'ZIndex',
-    render: function() {
+    render() {
+      type Props = $ReadOnly<{||}>;
+      type State = {|
+        flipped: boolean,
+      |};
+
+      const styles = StyleSheet.create({
+        zIndex: {
+          justifyContent: 'space-around',
+          width: 100,
+          height: 50,
+          marginTop: -10,
+        },
+      });
+
+      class ZIndexExample extends React.Component<Props, State> {
+        state = {
+          flipped: false,
+        };
+
+        render() {
+          const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
+          return (
+            <TouchableWithoutFeedback onPress={this._handlePress}>
+              <View>
+                <Text style={{paddingBottom: 10}}>
+                  Tap to flip sorting order
+                </Text>
+                <View
+                  style={[
+                    styles.zIndex,
+                    {
+                      marginTop: 0,
+                      backgroundColor: '#E57373',
+                      zIndex: indices[0],
+                    },
+                  ]}>
+                  <Text>ZIndex {indices[0]}</Text>
+                </View>
+                <View
+                  style={[
+                    styles.zIndex,
+                    {
+                      marginLeft: 50,
+                      backgroundColor: '#FFF176',
+                      zIndex: indices[1],
+                    },
+                  ]}>
+                  <Text>ZIndex {indices[1]}</Text>
+                </View>
+                <View
+                  style={[
+                    styles.zIndex,
+                    {
+                      marginLeft: 100,
+                      backgroundColor: '#81C784',
+                      zIndex: indices[2],
+                    },
+                  ]}>
+                  <Text>ZIndex {indices[2]}</Text>
+                </View>
+                <View
+                  style={[
+                    styles.zIndex,
+                    {
+                      marginLeft: 150,
+                      backgroundColor: '#64B5F6',
+                      zIndex: indices[3],
+                    },
+                  ]}>
+                  <Text>ZIndex {indices[3]}</Text>
+                </View>
+              </View>
+            </TouchableWithoutFeedback>
+          );
+        }
+
+        _handlePress = () => {
+          this.setState({flipped: !this.state.flipped});
+        };
+      }
       return <ZIndexExample />;
     },
   },