Merge pull request FaridSafi#100 from FaridSafi/0.1.0

0.1.0

Author: FaridSafi

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: 'airbnb',
+  plugins: [
+    'react',
+  ],
+  rules: {
+    "max-len": ["error", 160, 4, {"ignoreUrls": true}],
+    "react/jsx-boolean-value": 0
+  }
+};

Bubble.js

@@ -1,6 +1,8 @@
-import React, {Text, View, Animated, Image, StyleSheet} from 'react-native';
+import React, { Text, View, StyleSheet } from 'react-native';
 
-let styles = StyleSheet.create({
+import ParsedText from 'react-native-parsed-text';
+
+const styles = StyleSheet.create({
   bubble: {
     borderRadius: 15,
     paddingLeft: 14,
@@ -19,63 +21,101 @@ let styles = StyleSheet.create({
   bubbleLeft: {
     marginRight: 70,
     backgroundColor: '#e6e6eb',
-    alignSelf: "flex-start",
+    alignSelf: 'flex-start',
   },
   bubbleRight: {
     marginLeft: 70,
     backgroundColor: '#007aff',
-    alignSelf: "flex-end"
+    alignSelf: 'flex-end',
   },
   bubbleError: {
-    backgroundColor: '#e01717'
+    backgroundColor: '#e01717',
   },
-
 });
 
 export default class Bubble extends React.Component {
 
-  constructor(props) {
-    super(props);
-  }
-
   componentWillMount() {
     Object.assign(styles, this.props.styles);
   }
 
-  renderText(text = "", position) {
-
+  renderText(text = '', position) {
     if (this.props.renderCustomText) {
       return this.props.renderCustomText(this.props);
     }
+
+    if (this.props.parseText === true) {
+      return (
+        <ParsedText
+          style={[styles.text, (position === 'left' ? styles.textLeft : styles.textRight)]}
+          parse={
+            [
+              {
+                type: 'url',
+                style: {
+                  textDecorationLine: 'underline',
+                },
+                onPress: this.props.handleUrlPress,
+              },
+              {
+                type: 'phone',
+                style: {
+                  textDecorationLine: 'underline',
+                },
+                onPress: this.props.handlePhonePress,
+              },
+              {
+                type: 'email',
+                style: {
+                  textDecorationLine: 'underline',
+                },
+                onPress: this.props.handleEmailPress,
+              },
+            ]
+          }
+        >
+          {text}
+        </ParsedText>
+      );
+    }
+
     return (
       <Text style={[styles.text, (position === 'left' ? styles.textLeft : styles.textRight)]}>
         {text}
       </Text>
     );
   }
 
-  render(){
-    var flexStyle = {};
-    if ( this.props.text.length > 40 ) {
-     flexStyle.flex = 1;
+  render() {
+    const flexStyle = {};
+    if (this.props.text) {
+      if (this.props.text.length > 40) {
+        flexStyle.flex = 1;
+      }
     }
 
     return (
       <View style={[styles.bubble,
         (this.props.position === 'left' ? styles.bubbleLeft : styles.bubbleRight),
         (this.props.status === 'ErrorButton' ? styles.bubbleError : null),
-        flexStyle]}>
+        flexStyle]}
+      >
         {this.props.name}
         {this.renderText(this.props.text, this.props.position)}
       </View>
-    )
+  );
   }
 }
 
 Bubble.propTypes = {
-  position: React.PropTypes.oneOf(['left','right']),
+  position: React.PropTypes.oneOf(['left', 'right']),
   status: React.PropTypes.string,
   text: React.PropTypes.string,
   renderCustomText: React.PropTypes.func,
-  name: React.PropTypes.element
-}
+  styles: React.PropTypes.object,
+  parseText: React.PropTypes.bool,
+  name: React.PropTypes.element,
+  handleUrlPress: React.PropTypes.func,
+  handlePhonePress: React.PropTypes.func,
+  handleEmailPress: React.PropTypes.func,
+};

ErrorButton.js

@@ -1,7 +1,7 @@
-import React, {View, Text, TouchableHighlight, StyleSheet} from 'react-native';
+import React, { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
 import GiftedSpinner from 'react-native-gifted-spinner';
 
-let styles = StyleSheet.create({
+const styles = StyleSheet.create({
   errorButtonContainer: {
     marginLeft: 8,
     alignSelf: 'center',
@@ -19,43 +19,45 @@ let styles = StyleSheet.create({
 
 export default class ErrorButton extends React.Component {
 
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       isLoading: false,
     };
-  }
 
+    this.onPress = this.onPress.bind(this);
+  }
 
   componentWillMount() {
     Object.assign(styles, this.props.styles);
   }
-  
-  
+
   onPress() {
     this.setState({
       isLoading: true,
     });
 
-    this.props.onErrorButtonPress(this.props.rowData, this.props.rowID);
+    this.props.onErrorButtonPress(this.props.rowData);
   }
 
   render() {
     if (this.state.isLoading === true) {
       return (
-        <View style={[styles.errorButtonContainer, {
-          backgroundColor: 'transparent',
-          borderRadius: 0,
-        }]}>
+        <View
+          style={[styles.errorButtonContainer, {
+            backgroundColor: 'transparent',
+            borderRadius: 0,
+          }]}
+        >
           <GiftedSpinner />
         </View>
       );
     }
     return (
       <View style={styles.errorButtonContainer}>
         <TouchableHighlight
-          underlayColor='transparent'
-          onPress={this.onPress.bind(this)}
+          underlayColor="transparent"
+          onPress={this.onPress}
         >
           <Text style={styles.errorButton}>↻</Text>
         </TouchableHighlight>
@@ -64,9 +66,14 @@ export default class ErrorButton extends React.Component {
   }
 }
 
+ErrorButton.propTypes = {
+  styles: React.PropTypes.object,
+  onErrorButtonPress: React.PropTypes.func,
+  rowData: React.PropTypes.object,
+};
+
 ErrorButton.defaultProps = {
   onErrorButtonPress: () => {},
   rowData: {},
-  rowID: null,
   styles: {},
-};
+};