Cleanup UIExplorer folder

Summary: Move all JS to a js/ subfolder so we get some overview of this folder again.

Reviewed By: bestander

Differential Revision: D3542598

fbshipit-source-id: 7637133fe4152f4d39e461b443b38510272d5bc8

Examples/UIExplorer/js/AlertExample.js

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * 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.
+ *
+ */
+
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  Alert,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = ReactNative;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+
+// corporate ipsum > lorem ipsum
+var alertMessage = 'Credibly reintermediate next-generation potentialities after goal-oriented ' +
+                   'catalysts for change. Dynamically revolutionize.';
+
+/**
+ * Simple alert examples.
+ */
+var SimpleAlertExampleBlock = React.createClass({
+
+  render: function() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            alertMessage,
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with message and default button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            alertMessage,
+            [
+              {text: 'OK', onPress: () => console.log('OK Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with one button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            alertMessage,
+            [
+              {text: 'Cancel', onPress: () => console.log('Cancel Pressed!')},
+              {text: 'OK', onPress: () => console.log('OK Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with two buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            null,
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+              {text: 'Baz', onPress: () => console.log('Baz Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with three buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Foo Title',
+            alertMessage,
+            '..............'.split('').map((dot, index) => ({
+              text: 'Button ' + index,
+              onPress: () => console.log('Pressed ' + index)
+            }))
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with too many buttons</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+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() {
+    return (
+      <UIExplorerBlock title={'Alert'}>
+        <SimpleAlertExampleBlock />
+      </UIExplorerBlock>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});
+
+module.exports = {
+  AlertExample,
+  SimpleAlertExampleBlock,
+};