Refactors examples to ES2016 and RN 0.25.

kb100824 · May 7, 2016 · 23f99cb · 23f99cb
1 parent bd0084f
commit 23f99cb
Show file tree

Hide file tree

Showing 21 changed files with 535 additions and 410 deletions.
diff --git a/Examples/IconExplorer/.buckconfig b/Examples/IconExplorer/.buckconfig
@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2
diff --git a/Examples/IconExplorer/.flowconfig b/Examples/IconExplorer/.flowconfig
@@ -15,11 +15,8 @@
 # Ignore react and fbjs where there are overlaps, but don't ignore
 # anything that react-native relies on
 .*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/Promise.js
 .*/node_modules/fbjs/lib/fetch.js
 .*/node_modules/fbjs/lib/ExecutionEnvironment.js
-.*/node_modules/fbjs/lib/isEmpty.js
-.*/node_modules/fbjs/lib/crc32.js
 .*/node_modules/fbjs/lib/ErrorUtils.js
 
 # Flow has a built-in definition for the 'react' module which we prefer to use
@@ -28,6 +25,11 @@
 .*/node_modules/react/lib/React.js
 .*/node_modules/react/lib/ReactDOM.js
 
+.*/__mocks__/.*
+.*/__tests__/.*
+
+.*/commoner/test/source/widget/share.js
+
 # Ignore commoner tests
 .*/node_modules/commoner/test/.*
 
@@ -40,14 +42,43 @@
 # Ignore Website
 .*/website/.*
 
+# Ignore generators
+.*/local-cli/generator.*
+
+# Ignore BUCK generated folders
+.*\.buckd/
+
+.*/node_modules/is-my-json-valid/test/.*\.json
+.*/node_modules/iconv-lite/encodings/tables/.*\.json
+.*/node_modules/y18n/test/.*\.json
+.*/node_modules/spdx-license-ids/spdx-license-ids.json
+.*/node_modules/spdx-exceptions/index.json
+.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
+.*/node_modules/resolve/lib/core.json
+.*/node_modules/jsonparse/samplejson/.*\.json
+.*/node_modules/json5/test/.*\.json
+.*/node_modules/ua-parser-js/test/.*\.json
+.*/node_modules/builtin-modules/builtin-modules.json
+.*/node_modules/binary-extensions/binary-extensions.json
+.*/node_modules/url-regex/tlds.json
+.*/node_modules/joi/.*\.json
+.*/node_modules/isemail/.*\.json
+.*/node_modules/tr46/.*\.json
+
+
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
 
 [options]
 module.system=haste
 
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+
 munge_underscores=true
 
 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
@@ -57,9 +88,9 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.21.0
+0.23.0
diff --git a/Examples/IconExplorer/.gitignore b/Examples/IconExplorer/.gitignore
@@ -32,3 +32,9 @@ local.properties
 #
 node_modules/
 npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
diff --git a/Examples/IconExplorer/IconList.js b/Examples/IconExplorer/IconList.js
@@ -1,53 +1,91 @@
-'use strict';
-
-var React = require('react-native');
-var {
+import React, { Component } from 'react';
+import {
   ListView,
+  Platform,
   StyleSheet,
   Text,
-  View,
   TextInput,
-  Platform,
-} = React;
+  View,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  searchBar: {
+    marginTop: (Platform.OS === 'android' ? 0 : 64),
+    padding: 3,
+    paddingLeft: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  searchBarInput: {
+    fontSize: 15,
+    flex: 1,
+    height: (Platform.OS === 'android' ? 45 : 30),
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+    overflow: 'hidden',
+  },
+  separator: {
+    height: 0.5,
+    backgroundColor: '#CCCCCC',
+  },
+  icon: {
+    textAlign: 'center',
+    marginRight: 10,
+    width: 20,
+  },
+  text: {
+    flex: 1,
+  },
+});
 
-var IconList = React.createClass({
-  getInitialState: function() {
-    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-    return {
+export default class ColoredView extends Component {
+  constructor(props) {
+    super(props);
+
+    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    this.state = {
       filter: '',
       dataSource: ds.cloneWithRows(this.props.iconSet.glyphs),
     };
-  },
+  }
 
   searchIcons(query) {
-    var glyphs = this.props.iconSet.glyphs.filter(function(glyph) {
-      for (var i = 0; i < glyph.length; i++) {
-        if(glyph[i].indexOf(query) !== -1) {
+    const glyphs = this.props.iconSet.glyphs.filter(glyph => {
+      for (let i = 0; i < glyph.length; i++) {
+        if (glyph[i].indexOf(query) !== -1) {
           return true;
         }
-      };
+      }
       return false;
     });
+
     this.setState({
       filter: query,
       dataSource: this.state.dataSource.cloneWithRows(glyphs),
     });
-  },
+  }
 
   handleSearchChange(event) {
-    var filter = event.nativeEvent.text.toLowerCase();
+    const filter = event.nativeEvent.text.toLowerCase();
     this.searchIcons(filter);
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <View style={styles.container}>
         <View style={styles.searchBar}>
           <TextInput
             autoCapitalize="none"
             autoCorrect={false}
             autoFocus={true}
-            onChange={this.handleSearchChange}
+            onChange={event => this.handleSearchChange(event)}
             placeholder="Search an icon..."
             style={styles.searchBarInput}
             onFocus={() =>
@@ -57,7 +95,7 @@ var IconList = React.createClass({
         <View style={styles.separator} />
         <ListView
           dataSource={this.state.dataSource}
-          renderRow={this._renderRow}
+          renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}
           automaticallyAdjustContentInsets={false}
           keyboardDismissMode="on-drag"
           keyboardShouldPersistTaps={true}
@@ -66,10 +104,10 @@ var IconList = React.createClass({
         />
       </View>
     );
-  },
+  }
 
-  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
-    var Icon = this.props.iconSet.component;
+  _renderRow(rowData, sectionID, rowID) {
+    const Icon = this.props.iconSet.component;
     return (
       <View>
         <View style={styles.row}>
@@ -81,43 +119,5 @@ var IconList = React.createClass({
         <View style={styles.separator} />
       </View>
     );
-  },
-});
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-  },
-  searchBar: {
-    marginTop: (Platform.OS === 'android' ? 0 : 64),
-    padding: 3,
-    paddingLeft: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  searchBarInput: {
-    fontSize: 15,
-    flex: 1,
-    height: (Platform.OS === 'android' ? 45 : 30),
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: 10,
-  },
-  separator: {
-    height: 0.5,
-    backgroundColor: '#CCCCCC',
-  },
-  icon: {
-    textAlign: 'center',
-    marginRight: 10,
-    width: 20,
-  },
-  text: {
-    flex: 1,
-  },
-});
-
-module.exports = IconList;
+  }
+}