[react_native] JS files from D2127018: [react_native] Add uiexplorer app

Examples/UIExplorer/UIExplorerList.js

@@ -20,6 +20,7 @@ var {
   AppRegistry,
   ListView,
   PixelRatio,
+  Platform,
   StyleSheet,
   Text,
   TextInput,
@@ -34,52 +35,68 @@ import type { ExampleModule } from 'ExampleTypes';
 
 var createExamplePage = require('./createExamplePage');
 
-var COMPONENTS = [
-  require('./ActivityIndicatorIOSExample'),
-  require('./DatePickerIOSExample'),
-  require('./ImageExample'),
-  require('./ListViewExample'),
-  require('./ListViewPagingExample'),
-  require('./MapViewExample'),
-  require('./Navigator/NavigatorExample'),
-  require('./NavigatorIOSColorsExample'),
-  require('./NavigatorIOSExample'),
-  require('./PickerIOSExample'),
-  require('./ProgressViewIOSExample'),
-  require('./ScrollViewExample'),
-  require('./SegmentedControlIOSExample'),
-  require('./SliderIOSExample'),
-  require('./SwitchIOSExample'),
-  require('./TabBarIOSExample'),
-  require('./TextExample.ios'),
-  require('./TextInputExample'),
-  require('./TouchableExample'),
+var COMMON_COMPONENTS = [
   require('./ViewExample'),
   require('./WebViewExample'),
 ];
 
-var APIS = [
-  require('./AccessibilityIOSExample'),
-  require('./ActionSheetIOSExample'),
-  require('./AdSupportIOSExample'),
-  require('./AlertIOSExample'),
-  require('./AppStateIOSExample'),
-  require('./AsyncStorageExample'),
-  require('./BorderExample'),
-  require('./CameraRollExample.ios'),
+var COMMON_APIS = [
   require('./GeolocationExample'),
-  require('./LayoutEventsExample'),
   require('./LayoutExample'),
-  require('./NetInfoExample'),
   require('./PanResponderExample'),
-  require('./PointerEventsExample'),
-  require('./PushNotificationIOSExample'),
-  require('./StatusBarIOSExample'),
-  require('./TimerExample'),
-  require('./VibrationIOSExample'),
-  require('./XHRExample'),
 ];
 
+if (Platform.OS === 'ios') {
+  var COMPONENTS = COMMON_COMPONENTS.concat([
+    require('./ActivityIndicatorIOSExample'),
+    require('./DatePickerIOSExample'),
+    require('./ImageExample'),
+    require('./ListViewExample'),
+    require('./ListViewPagingExample'),
+    require('./MapViewExample'),
+    require('./Navigator/NavigatorExample'),
+    require('./NavigatorIOSColorsExample'),
+    require('./NavigatorIOSExample'),
+    require('./PickerIOSExample'),
+    require('./ProgressViewIOSExample'),
+    require('./ScrollViewExample'),
+    require('./SegmentedControlIOSExample'),
+    require('./SliderIOSExample'),
+    require('./SwitchIOSExample'),
+    require('./TabBarIOSExample'),
+    require('./TextExample.ios'),
+    require('./TextInputExample'),
+    require('./TouchableExample'),
+  ]);
+
+  var APIS = COMMON_APIS.concat([
+    require('./AccessibilityIOSExample'),
+    require('./ActionSheetIOSExample'),
+    require('./AdSupportIOSExample'),
+    require('./AlertIOSExample'),
+    require('./AppStateIOSExample'),
+    require('./AsyncStorageExample'),
+    require('./BorderExample'),
+    require('./CameraRollExample.ios'),
+    require('./LayoutEventsExample'),
+    require('./NetInfoExample'),
+    require('./PointerEventsExample'),
+    require('./PushNotificationIOSExample'),
+    require('./StatusBarIOSExample'),
+    require('./TimerExample'),
+    require('./VibrationIOSExample'),
+    require('./XHRExample'),
+  ]);
+
+} else if (Platform.OS === 'android') {
+  var COMPONENTS = COMMON_COMPONENTS.concat([
+    require('ToolbarAndroidSampleApp'),
+  ]);
+
+  var APIS = COMMON_APIS.concat([
+  ]);
+}
+
 var ds = new ListView.DataSource({
   rowHasChanged: (r1, r2) => r1 !== r2,
   sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
@@ -112,12 +129,17 @@ COMPONENTS.concat(APIS).forEach((Example) => {
   }
 });
 
-type Props = {
-  navigator: Array<{title: string, component: ReactClass<any,any,any>}>,
-  onExternalExampleRequested: Function,
-};
-
-
+if (Platform.OS === 'ios') {
+  type Props = {
+    navigator: Array<{title: string, component: ReactClass<any,any,any>}>,
+    onExternalExampleRequested: Function,
+  };
+} else if (Platform.OS === 'android') {
+  type Props = {
+    onSelectExample: Function,
+    isInDrawer: bool,
+  };
+}
 
 class UIExplorerList extends React.Component {
   props: Props;
@@ -129,7 +151,7 @@ class UIExplorerList extends React.Component {
         components: COMPONENTS,
         apis: APIS,
       }),
-      searchText: Settings.get('searchText'),
+      searchText: Platform.OS === 'ios' ? Settings.get('searchText') : '',
     };
   }
 
@@ -138,8 +160,12 @@ class UIExplorerList extends React.Component {
   }
 
   render() {
-    return (
-      <View style={styles.listContainer}>
+    if (Platform.OS === 'ios' ||
+      (Platform.OS === 'android' && !this.props.isInDrawer)) {
+      var platformTextInputStyle =
+        Platform.OS === 'ios' ? styles.searchTextInputIOS :
+        Platform.OS === 'android' ? styles.searchTextInputAndroid : {};
+      var textInput = (
         <View style={styles.searchRow}>
           <TextInput
             autoCapitalize="none"
@@ -147,10 +173,24 @@ class UIExplorerList extends React.Component {
             clearButtonMode="always"
             onChangeText={this._search.bind(this)}
             placeholder="Search..."
-            style={styles.searchTextInput}
+            style={[styles.searchTextInput, platformTextInputStyle]}
             value={this.state.searchText}
           />
-        </View>
+        </View>);
+    }
+
+    var homePage;
+    if (Platform.OS === 'android' && this.props.isInDrawer) {
+      homePage = this._renderRow({
+        title: 'UIExplorer',
+        description: 'List of examples',
+      }, -1);
+    }
+
+    return (
+      <View style={styles.listContainer}>
+        {textInput}
+        {homePage}
         <ListView
           style={styles.list}
           dataSource={this.state.dataSource}
@@ -212,10 +252,17 @@ class UIExplorerList extends React.Component {
       return;
     }
     var Component = makeRenderable(example);
-    this.props.navigator.push({
-      title: Component.title,
-      component: Component,
-    });
+    if (Platform.OS === 'ios') {
+      this.props.navigator.push({
+        title: Component.title,
+        component: Component,
+      });
+    } else if (Platform.OS === 'android') {
+      this.props.onSelectExample({
+        title: Component.title,
+        component: Component,
+      });
+    }
   }
 }
 
@@ -268,9 +315,14 @@ var styles = StyleSheet.create({
     borderColor: '#cccccc',
     borderRadius: 3,
     borderWidth: 1,
-    height: 30,
     paddingLeft: 8,
   },
+  searchTextInputIOS: {
+    height: 30,
+  },
+  searchTextInputAndroid: {
+    padding: 2,
+  },
 });
 
 module.exports = UIExplorerList;