Upgrade to RN0.27, es6 sugar

mcnamee · Jun 20, 2016 · 03b9d76 · 03b9d76
1 parent b7d54b5
commit 03b9d76
Show file tree

Hide file tree

Showing 24 changed files with 1,361 additions and 1,655 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -46,6 +46,9 @@
 # Ignore BUCK generated folders
 .*\.buckd/
 
+# Ignore RNPM
+.*/local-cli/rnpm/.*
+
 .*/node_modules/is-my-json-valid/test/.*\.json
 .*/node_modules/iconv-lite/encodings/tables/.*\.json
 .*/node_modules/y18n/test/.*\.json
@@ -86,9 +89,9 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.24.0
+^0.25.0
diff --git a/ReactApp/components/button.ios.js b/ReactApp/components/button.ios.js
@@ -3,96 +3,92 @@
  *
     <Button 
       text={text}
-      style={'outlined'}
+      type={'outlined'}
       onPress={()=>{alert('Go To Entry View')}} />
  *
  * React Native Starter App
  * https://github.com/mcnamee/react-native-starter-app
  */
 'use strict';
-
-/* ==============================
-  Initialise App
-  =============================== */
-  // React Plugins
-  import React, { Component } from 'react';
-  import {
-    StyleSheet,
-    View,
-    Text,
-    Image,
-    TouchableOpacity,
-  } from 'react-native';
 
-  // App Globals
-  import AppStyles from '../styles.ios';
-  import AppConfig from '../config.ios';
+/* Setup ==================================================================== */
+import React, { Component } from 'react'
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+} from 'react-native'
 
-/* ==============================
-  View
-  =============================== */
-  var Button = React.createClass({
-    /**
-      * When user clicks Row
-      */
-    _onPress: function() {
-      if(this.props.onPress) this.props.onPress();
-    },
+// App Globals
+import AppStyles from '../styles.ios'
+import AppConfig from '../config.ios'
 
-    /**
-      * RENDER
-      */
-    render: function(){
-      return (
-        <TouchableOpacity 
-          style={[styles.formButton, this.props.style == 'outlined' ? styles.formButtonOutline : null]}
-          onPress={this._onPress}
-          activeOpacity={0.7}>
-          <Text style={[AppStyles.baseText, styles.formButton_text, this.props.style == 'outlined' ? styles.formButtonOutline_text : null]}>
-            {this.props.text ? this.props.text : 'Click Here'}
-          </Text>
-        </TouchableOpacity>
-      )
-    },
 
-  });
+/* Component ==================================================================== */
+class Button extends Component {
+  static propTypes = {
+    onPress: React.PropTypes.func.isRequired,
+    type: React.PropTypes.oneOf(['', 'outlined']),
+    text: React.PropTypes.string.isRequired,
+  }
 
-/* ==============================
-  Styles
-  =============================== */
-  var styles = StyleSheet.create({
-    // Standard
-    formButton: {
-      backgroundColor: AppConfig.primaryColor,
-      height: 50,
-      justifyContent: 'center',
-      borderRadius: 3,
-      marginBottom: 10,
-      paddingHorizontal: 10,
-    },
-    formButton_text: {
-      color: "#FFF",
-      textAlign: 'center',
-      fontSize: 15,
-      fontFamily: AppConfig.baseFont,
-      fontWeight: '800',
-    },
+  static defaultProps = {
+    text: 'Click Here',
+  }
 
-    // Outlined
-    formButtonOutline: {
-      backgroundColor: "#fff",
-      borderWidth: 1,
-      borderColor: AppConfig.primaryColor,
-    },
-    formButtonOutline_text: {
-      color: AppConfig.primaryColor,
-    },
-  });
+  /**
+    * RENDER
+    */
+  render = ()=> {
+    let { text, type, onPress } = this.props;
 
-/* ==============================
-  Done!
-  =============================== */
-  module.exports = Button;
-  module.exports.details = {
-    title: 'Button'
-  };
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}
+        style={[styles.button, type == 'outlined' && styles.buttonOutline]}>
+        <Text style={[AppStyles.baseText, styles.button_text, type == 'outlined' && styles.buttonOutline_text]}>
+          {text}
+        </Text>
+      </TouchableOpacity>
+    )
+  }
+}
+
+
+/* Styles ==================================================================== */
+const styles = StyleSheet.create({
+  // Standard
+  button: {
+    backgroundColor: AppConfig.primaryColor,
+    height: 50,
+    justifyContent: 'center',
+    borderRadius: 3,
+    marginBottom: 10,
+    paddingHorizontal: 10,
+  },
+  button_text: {
+    color: "#FFF",
+    textAlign: 'center',
+    fontSize: 15,
+    fontFamily: AppConfig.baseFont,
+    fontWeight: '800',
+  },
+
+  // Outlined
+  buttonOutline: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: AppConfig.primaryColor,
+  },
+  buttonOutline_text: {
+    color: AppConfig.primaryColor,
+  },
+});
+
+
+/* Export Component ==================================================================== */
+module.exports = Button;
+module.exports.details = {
+  title: 'Button'
+};
diff --git a/ReactApp/components/list.row.ios.js b/ReactApp/components/list.row.ios.js
@@ -10,104 +10,99 @@
  * https://github.com/mcnamee/react-native-starter-app
  */
 'use strict';
-
-/* ==============================
-  Initialise App
-  =============================== */
-  // React
-  import React, { Component } from 'react';
-  import {
-    StyleSheet,
-    View,
-    Text,
-    Image,
-    TouchableOpacity,
-  } from 'react-native';
 
-  // App Globals
-  import AppStyles from '../styles.ios';
-  import AppConfig from '../config.ios';
+/* Setup ==================================================================== */
+import React, { Component } from 'react'
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+} from 'react-native'
 
-/* ==============================
-  View
-  =============================== */
-  var listRow = React.createClass({
-    /**
-      * When user clicks Row
-      */
-    _onPress: function() {
-      if(this.props.onPress) this.props.onPress(this.props.index);
-    },
+// App Globals
+import AppStyles from '../styles.ios'
+import AppConfig from '../config.ios'
 
-    /**
-      * RENDER
-      */
-    render: function(){
-      var self = this;
 
-      if(self.props.image) {
-        return (
-          <TouchableOpacity 
-            style={[styles.listRow, self.props.image ? styles.imageBackground : null]} 
-            onPress={self._onPress} activeOpacity={0.7}>
-            <Image source={{uri: self.props.image}} style={[styles.imageBackground_image]}>
-              <Text style={[AppStyles.baseText, styles.listRow_text, styles.listRowImage_text]}>{self.props.title.toUpperCase()}</Text>
-            </Image>
-          </TouchableOpacity>
-        )
-      } else {
-        return (
-          <TouchableOpacity style={[styles.listRow]} onPress={self.onPress} activeOpacity={0.7}>
-            <View style={styles.listRowInner}>
-              <Text style={[AppStyles.baseText, styles.listRow_text]}>{self.props.title.toUpperCase()}</Text>
-            </View>
-          </TouchableOpacity>
-        )
-      }
-    },
+/* Component ==================================================================== */
+class listRow extends Component {
+  static propTypes = {
+    onPress: React.PropTypes.func.isRequired,
+    title: React.PropTypes.string.isRequired,
+    image: React.PropTypes.string,
+  }
 
-  });
+  static defaultProps = {
+    title: 'Lorem Ipsum',
+  }
 
-/* ==============================
-  Styles
-  =============================== */
-  var styles = StyleSheet.create({
-    listRow: {
-      left: 0,
-      right: 0,
-    },
-    listRowInner: {
-      paddingVertical: 20,
-      borderBottomWidth: 1,
-      borderBottomColor: AppConfig.borderColor,
-    },
-    listRow_text: {
-      color: AppConfig.textColor,
-      textAlign: 'center',
-      fontWeight: '500',
-      backgroundColor: 'transparent',
-    },
-    listRowImage_text: {
-      color: "#FFF",
-    },
+  /**
+    * RENDER
+    */
+  render = () => {
+    let { title, image, onPress } = this.props;
 
-    // With Image
-    imageBackground: {
-      backgroundColor: "#333",
-    },
-    imageBackground_image: {
-      height: AppConfig.windowHeight / 4,
-      flexDirection: 'row',
-      flexWrap: 'nowrap',
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginBottom: 1,
+    if(image) {
+      return (
+        <TouchableOpacity 
+          style={[styles.listRow, image && styles.imageBackground]} 
+          onPress={onPress} activeOpacity={0.7}>
+          <Image source={{uri: image}} style={[styles.imageBackground_image]}>
+            <Text style={[AppStyles.baseText, styles.listRow_text, styles.listRowImage_text]}>{title.toUpperCase()}</Text>
+          </Image>
+        </TouchableOpacity>
+      )
+    } else {
+      return (
+        <TouchableOpacity style={[styles.listRow]} onPress={onPress} activeOpacity={0.7}>
+          <View style={styles.listRowInner}>
+            <Text style={[AppStyles.baseText, styles.listRow_text]}>{title.toUpperCase()}</Text>
+          </View>
+        </TouchableOpacity>
+      )
     }
-  });
+  }
+}
 
-/* ==============================
-  Done!
-  =============================== */
+/* Styles ==================================================================== */
+const styles = StyleSheet.create({
+  listRow: {
+    left: 0,
+    right: 0,
+    backgroundColor: "#FFF",
+  },
+  listRowInner: {
+    paddingVertical: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: AppConfig.borderColor,
+  },
+  listRow_text: {
+    color: AppConfig.textColor,
+    textAlign: 'center',
+    fontWeight: '500',
+    backgroundColor: 'transparent',
+  },
+  listRowImage_text: {
+    color: "#FFF",
+  },
+
+  // With Image
+  imageBackground: {
+    backgroundColor: "#333",
+  },
+  imageBackground_image: {
+    height: AppConfig.windowHeight / 4,
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 1,
+  }
+});
+
+/* Export Component ==================================================================== */
   module.exports = listRow;
   module.exports.details = {
     title: 'listRow'