From af95e950437bbd79831dabe4bca770ee8b4ed1c0 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Tue, 24 Mar 2015 19:35:12 -0700
Subject: [PATCH] [ReactNative] cleanup view example

---
 Examples/UIExplorer/ViewExample.js | 210 +++++++++++++++--------------
 1 file changed, 109 insertions(+), 101 deletions(-)

diff --git a/Examples/UIExplorer/ViewExample.js b/Examples/UIExplorer/ViewExample.js
index 6061a8ff2..25e3d3d16 100644
--- a/Examples/UIExplorer/ViewExample.js
+++ b/Examples/UIExplorer/ViewExample.js
@@ -17,106 +17,6 @@ var {
   View,
 } = React;
 
-var UIExplorerBlock = require('./UIExplorerBlock');
-var UIExplorerPage = require('./UIExplorerPage');
-
-var ViewExample = React.createClass({
-  statics: {
-    title: '<View>',
-    description: 'Basic building block of all UI.'
-  },
-  getInitialState: function() {
-    return {
-      textBorderExampleHeight: 20,
-    };
-  },
-
-  render: function() {
-    return (
-      <UIExplorerPage title={this.props.navigator ? null : '<View>'}>
-        <UIExplorerBlock title="Background Color">
-          <View style={{backgroundColor: '#527FE4', padding: 5}}>
-            <Text style={{fontSize: 11}}>
-              Blue background
-            </Text>
-          </View>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Border">
-          <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
-            <Text style={{fontSize: 11}}>5px blue border</Text>
-          </View>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Padding/Margin">
-          <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
-            <View style={[styles.box, {padding: 5}]}>
-              <Text style={{fontSize: 11}}>5px padding</Text>
-            </View>
-            <View style={[styles.box, {margin: 5}]}>
-              <Text style={{fontSize: 11}}>5px margin</Text>
-            </View>
-            <View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
-              <Text style={{fontSize: 11}}>
-                5px margin and padding,
-              </Text>
-              <Text style={{fontSize: 11}}>
-                widthAutonomous=true
-              </Text>
-            </View>
-          </View>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Border Radius">
-          <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
-            <Text style={{fontSize: 11}}>
-              Too much use of `borderRadius` (especially large radii) on
-              anything which is scrolling may result in dropped frames.
-              Use sparingly.
-            </Text>
-          </View>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Circle with Border Radius">
-          <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Overflow">
-          <View style={{flexDirection: 'row'}}>
-            <View
-              style={{
-                width: 95,
-                height: 10,
-                marginRight: 10,
-                marginBottom: 5,
-                overflow: 'hidden',
-                borderWidth: 0.5,
-              }}>
-              <View style={{width: 200, height: 20}}>
-                <Text>Overflow hidden</Text>
-              </View>
-            </View>
-            <View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
-              <View style={{width: 200, height: 20}}>
-                <Text>Overflow visible</Text>
-              </View>
-            </View>
-          </View>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Opacity">
-          <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
-          <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
-          <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
-          <View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
-          <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
-          <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
-          <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
-        </UIExplorerBlock>
-      </UIExplorerPage>
-    );
-  },
-
-  updateHeight: function() {
-    var height = this.state.textBorderExampleHeight === 50 ? 20 : 50;
-    this.setState({textBorderExampleHeight: height});
-  },
-});
-
 var styles = StyleSheet.create({
   box: {
     backgroundColor: '#527FE4',
@@ -125,4 +25,112 @@ var styles = StyleSheet.create({
   }
 });
 
-module.exports = ViewExample;
+exports.title = '<View>';
+exports.description = 'Basic building block of all UI.';
+exports.displayName = 'ViewExample';
+exports.examples = [
+  {
+    title: 'Background Color',
+    render: function() {
+      return (
+        <View style={{backgroundColor: '#527FE4', padding: 5}}>
+          <Text style={{fontSize: 11}}>
+            Blue background
+          </Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border',
+    render: function() {
+      return (
+        <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
+          <Text style={{fontSize: 11}}>5px blue border</Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Padding/Margin',
+    render: function() {
+      return (
+        <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
+          <View style={[styles.box, {padding: 5}]}>
+            <Text style={{fontSize: 11}}>5px padding</Text>
+          </View>
+          <View style={[styles.box, {margin: 5}]}>
+            <Text style={{fontSize: 11}}>5px margin</Text>
+          </View>
+          <View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
+            <Text style={{fontSize: 11}}>
+              5px margin and padding,
+            </Text>
+            <Text style={{fontSize: 11}}>
+              widthAutonomous=true
+            </Text>
+          </View>
+        </View>
+      );
+    },
+  }, {
+    title: 'Border Radius',
+    render: function() {
+      return (
+        <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
+          <Text style={{fontSize: 11}}>
+            Too much use of `borderRadius` (especially large radii) on
+            anything which is scrolling may result in dropped frames.
+            Use sparingly.
+          </Text>
+        </View>
+      );
+    },
+  }, {
+    title: 'Circle with Border Radius',
+    render: function() {
+      return (
+        <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
+      );
+    },
+  }, {
+    title: 'Overflow',
+    render: function() {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          <View
+            style={{
+              width: 95,
+              height: 10,
+              marginRight: 10,
+              marginBottom: 5,
+              overflow: 'hidden',
+              borderWidth: 0.5,
+            }}>
+            <View style={{width: 200, height: 20}}>
+              <Text>Overflow hidden</Text>
+            </View>
+          </View>
+          <View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
+            <View style={{width: 200, height: 20}}>
+              <Text>Overflow visible</Text>
+            </View>
+          </View>
+        </View>
+      );
+    },
+  }, {
+    title: 'Opacity',
+    render: function() {
+      return (
+        <View>
+          <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
+          <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
+          <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
+          <View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
+          <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
+          <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
+          <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
+        </View>
+      );
+    },
+  },
+];