Merge remote-tracking branch 'origin/redux-saga' into redux-saga

__tests__/__snapshots__/RoomItem.js.snap

@@ -231,15 +231,16 @@ exports[`render unread +999 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 40,
         },
         Object {
           "backgroundColor": "#3F51B5",
+          "borderRadius": 20,
+          "height": 40,
+          "width": 40,
         },
+        undefined,
       ]
     }
   >
@@ -249,29 +250,18 @@ exports[`render unread +999 1`] = `
       disabled={false}
       ellipsizeMode="tail"
       style={
-        Object {
+        Array [
-          "color": "#ffffff",
+          Object {
-          "fontSize": 20,
+            "color": "#ffffff",
-        }
+          },
+          Object {
+            "fontSize": 20,
+          },
+        ]
       }
     >
       NA
     </Text>
-    <View
-      source={
-        Object {
-          "uri": "undefined/avatar/name",
-        }
-      }
-      style={
-        Object {
-          "borderRadius": 20,
-          "height": 40,
-          "position": "absolute",
-          "width": 40,
-        }
-      }
-    />
   </View>
   <Text
     accessible={true}
@@ -350,15 +340,16 @@ exports[`render unread 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 40,
         },
         Object {
           "backgroundColor": "#3F51B5",
+          "borderRadius": 20,
+          "height": 40,
+          "width": 40,
         },
+        undefined,
       ]
     }
   >
@@ -368,29 +359,18 @@ exports[`render unread 1`] = `
       disabled={false}
       ellipsizeMode="tail"
       style={
-        Object {
+        Array [
-          "color": "#ffffff",
+          Object {
-          "fontSize": 20,
+            "color": "#ffffff",
-        }
+          },
+          Object {
+            "fontSize": 20,
+          },
+        ]
       }
     >
       NA
     </Text>
-    <View
-      source={
-        Object {
-          "uri": "undefined/avatar/name",
-        }
-      }
-      style={
-        Object {
-          "borderRadius": 20,
-          "height": 40,
-          "position": "absolute",
-          "width": 40,
-        }
-      }
-    />
   </View>
   <Text
     accessible={true}
@@ -469,15 +449,16 @@ exports[`renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "borderRadius": 20,
-          "height": 40,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 40,
         },
         Object {
           "backgroundColor": "#3F51B5",
+          "borderRadius": 20,
+          "height": 40,
+          "width": 40,
         },
+        undefined,
       ]
     }
   >
@@ -487,29 +468,18 @@ exports[`renders correctly 1`] = `
       disabled={false}
       ellipsizeMode="tail"
       style={
-        Object {
+        Array [
-          "color": "#ffffff",
+          Object {
-          "fontSize": 20,
+            "color": "#ffffff",
-        }
+          },
+          Object {
+            "fontSize": 20,
+          },
+        ]
       }
     >
       NA
     </Text>
-    <View
-      source={
-        Object {
-          "uri": "undefined/avatar/name",
-        }
-      }
-      style={
-        Object {
-          "borderRadius": 20,
-          "height": 40,
-          "position": "absolute",
-          "width": 40,
-        }
-      }
-    />
   </View>
   <Text
     accessible={true}

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -1,5 +1,160 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Avatar avatar 1`] = `
+<RCTScrollView>
+  <View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          Object {
+            "backgroundColor": "#3F51B5",
+            "borderRadius": 5,
+            "height": 25,
+            "width": 25,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        disabled={false}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+            },
+            Object {
+              "fontSize": 12.5,
+            },
+          ]
+        }
+      >
+        TE
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          Object {
+            "backgroundColor": "#9C27B0",
+            "borderRadius": 5,
+            "height": 40,
+            "width": 40,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        disabled={false}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+            },
+            Object {
+              "fontSize": 20,
+            },
+          ]
+        }
+      >
+        AA
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          Object {
+            "backgroundColor": "#9C27B0",
+            "borderRadius": 5,
+            "height": 30,
+            "width": 30,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        disabled={false}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+            },
+            Object {
+              "fontSize": 15,
+            },
+          ]
+        }
+      >
+        BB
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "overflow": "hidden",
+          },
+          Object {
+            "backgroundColor": "#3F51B5",
+            "borderRadius": 2,
+            "height": 25,
+            "width": 25,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        disabled={false}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Object {
+              "color": "#ffffff",
+            },
+            Object {
+              "fontSize": 12.5,
+            },
+          ]
+        }
+      >
+        TE
+      </Text>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
 exports[`Storyshots Channel Cell Direct Messages 1`] = `
 <RCTScrollView>
   <View>
@@ -37,15 +192,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#8BC34A",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -55,10 +211,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           RC
@@ -70,12 +230,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           }
           style={
-            Object {
+            Array [
-              "borderRadius": 20,
+              Object {
-              "height": 40,
+                "position": "absolute",
-              "position": "absolute",
+              },
-              "width": 40,
+              Object {
-            }
+                "height": 40,
+                "width": 40,
+              },
+            ]
           }
         />
       </View>
@@ -132,15 +295,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#8BC34A",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -150,10 +314,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           RC
@@ -165,12 +333,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           }
           style={
-            Object {
+            Array [
-              "borderRadius": 20,
+              Object {
-              "height": 40,
+                "position": "absolute",
-              "position": "absolute",
+              },
-              "width": 40,
+              Object {
-            }
+                "height": 40,
+                "width": 40,
+              },
+            ]
           }
         />
       </View>
@@ -227,15 +398,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#8BC34A",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -245,10 +417,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           RC
@@ -260,12 +436,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           }
           style={
-            Object {
+            Array [
-              "borderRadius": 20,
+              Object {
-              "height": 40,
+                "position": "absolute",
-              "position": "absolute",
+              },
-              "width": 40,
+              Object {
-            }
+                "height": 40,
+                "width": 40,
+              },
+            ]
           }
         />
       </View>
@@ -343,15 +522,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#795548",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -361,10 +541,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           LC
@@ -376,12 +560,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           }
           style={
-            Object {
+            Array [
-              "borderRadius": 20,
+              Object {
-              "height": 40,
+                "position": "absolute",
-              "position": "absolute",
+              },
-              "width": 40,
+              Object {
-            }
+                "height": 40,
+                "width": 40,
+              },
+            ]
           }
         />
       </View>
@@ -459,15 +646,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#795548",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -477,10 +665,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           LC
@@ -492,12 +684,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           }
           style={
-            Object {
+            Array [
-              "borderRadius": 20,
+              Object {
-              "height": 40,
+                "position": "absolute",
-              "position": "absolute",
+              },
-              "width": 40,
+              Object {
-            }
+                "height": 40,
+                "width": 40,
+              },
+            ]
           }
         />
       </View>
@@ -575,15 +770,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#795548",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -593,10 +789,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           LC
@@ -608,12 +808,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           }
           style={
-            Object {
+            Array [
-              "borderRadius": 20,
+              Object {
-              "height": 40,
+                "position": "absolute",
-              "position": "absolute",
+              },
-              "width": 40,
+              Object {
-            }
+                "height": 40,
+                "width": 40,
+              },
+            ]
           }
         />
       </View>
@@ -691,15 +894,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#795548",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -709,10 +913,14 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           LC
@@ -724,12 +932,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
             }
           }
           style={
-            Object {
+            Array [
-              "borderRadius": 20,
+              Object {
-              "height": 40,
+                "position": "absolute",
-              "position": "absolute",
+              },
-              "width": 40,
+              Object {
-            }
+                "height": 40,
+                "width": 40,
+              },
+            ]
           }
         />
       </View>
@@ -807,15 +1018,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#E91E63",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -825,29 +1037,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           W
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "undefined/avatar/W",
-            }
-          }
-          style={
-            Object {
-              "borderRadius": 20,
-              "height": 40,
-              "position": "absolute",
-              "width": 40,
-            }
-          }
-        />
       </View>
       <Text
         accessible={true}
@@ -902,15 +1103,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
               "backgroundColor": "#9C27B0",
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -920,29 +1122,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           WW
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "undefined/avatar/WW",
-            }
-          }
-          style={
-            Object {
-              "borderRadius": 20,
-              "height": 40,
-              "position": "absolute",
-              "width": 40,
-            }
-          }
-        />
       </View>
       <Text
         accessible={true}
@@ -997,15 +1188,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           Array [
             Object {
               "alignItems": "center",
-              "borderRadius": 20,
-              "height": 40,
               "justifyContent": "center",
               "overflow": "hidden",
-              "width": 40,
             },
             Object {
-              "backgroundColor": "#F44336",
+              "backgroundColor": undefined,
+              "borderRadius": 20,
+              "height": 40,
+              "width": 40,
             },
+            undefined,
           ]
         }
       >
@@ -1015,29 +1207,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           disabled={false}
           ellipsizeMode="tail"
           style={
-            Object {
+            Array [
-              "color": "#ffffff",
+              Object {
-              "fontSize": 20,
+                "color": "#ffffff",
-            }
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
           }
         >
           
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "undefined/avatar/",
-            }
-          }
-          style={
-            Object {
-              "borderRadius": 20,
-              "height": 40,
-              "position": "absolute",
-              "width": 40,
-            }
-          }
-        />
       </View>
       <Text
         accessible={true}

app/components/tags.js

@@ -0,0 +1,125 @@
+import { StyleSheet, TouchableHighlight, Text, View, TextInput, FlatList } from 'react-native';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/Ionicons';
+import Avatar from './avatar';
+
+const styles = StyleSheet.create({
+	result: {
+		marginTop: 15,
+		padding: 16,
+		borderWidth: 1,
+		flexGrow: 1,
+		flexShrink: 1,
+		borderColor: '#e1e5e8'
+	},
+	result_item: {
+		paddingVertical: 8,
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	container: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		alignItems: 'flex-start',
+		width: '100%',
+		borderWidth: 2,
+		padding: 4,
+		paddingRight: 8,
+		borderColor: '#e1e5e8'
+
+	},
+	tag: {
+		color: '#2f343d',
+		justifyContent: 'center',
+		alignItems: 'center',
+		marginRight: 5,
+		flexShrink: 1
+	},
+	iconContainer: {
+		justifyContent: 'center',
+		alignItems: 'center',
+		width: 25,
+		height: 25,
+		marginRight: 5
+	},
+	avatarInitials: {
+		color: 'white'
+	},
+	input: {
+		height: 45,
+		paddingLeft: 10,
+		flexGrow: 1,
+		backgroundColor: 'white',
+		color: 'black',
+		minWidth: 150
+	},
+	containerTag: {
+		backgroundColor: '#f2f3f5',
+		// justifyContent: 'center',
+		alignItems: 'center',
+		marginHorizontal: 2,
+		marginBottom: 5,
+		borderRadius: 2,
+		padding: 8,
+		margin: 2,
+		// flex: 1,
+		// flexGrow: 0,
+		maxWidth: '100%',
+		flexShrink: 1,
+		flexDirection: 'row'
+	}
+});
+
+const renderTag = (item, index) => (<Item key={item} label={item} onPress={() => this.props.onPress(item, index)} />);
+
+const renderItemResult = ({ item = '', onPress }) => (
+	<View style={styles.result_item} onPress={onPress}>
+		<Avatar	text={item}	width={40}	height={40} fontSize={20} style={{ marginRight: 5 }}	/>
+		<Text>@{item}</Text>
+	</View>);
+
+export default class tags extends React.PureComponent {
+	static propTypes = {
+		values: PropTypes.array.isRequired,
+		// onPress: PropTypes.func.isRequired,
+		placeholder: PropTypes.string.isRequired,
+		renderItemResult: PropTypes.func,
+		renderTag: PropTypes.func,
+		onChangeText: PropTypes.func.isRequired
+	}
+	render() {
+		return (
+			<View style={{ flex: 1 }}>
+				<View style={styles.container}>
+					{this.props.values.map(this.props.renderTag || renderTag)}
+					<TextInput
+						style={styles.input}
+						placeholder={this.props.placeholder}
+						autoCorrect={false}
+						autoCapitalize='none'
+						onChangeText={this.props.onChangeText}
+					/>
+				</View>
+				{this.props.result && this.props.result.length ? <FlatList
+					keyExtractor={item => item}
+					style={styles.result}
+					data={this.props.result || []}
+					renderItem={e => (this.props.renderItemResult || renderItemResult)(e, this.props.onSelect)}
+				/> : null}
+			</View>);
+	}
+}
+
+const Item = ({ onPress, label }) => (<TouchableHighlight onPress={onPress}>
+	<View style={styles.containerTag}>
+		<Avatar text={label} style={{ marginRight: 5 }} />
+		<Text llipsizeMode='tail' numberOfLines={1} style={styles.tag}>{label}</Text><Icon size={18} color={'#9d9fa3'} name='md-close' style={styles.close} />
+	</View>
+</TouchableHighlight>);
+
+Item.propTypes = {
+	label: PropTypes.string.isRequired,
+	onPress: PropTypes.func.isRequired
+};

storybook/stories/TagInput.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import TagInput from '../../app/components/tags';
+
+const values = ['guilherme.gazzo', 'g1', 'gestcagado', '4', '5', '6', '7', '8', '9', '10', '11', 'grandaooooooo	dasdasdasdasda.oooooooooooooooo', '12', '13', '14', '15'];
+export default (
+	<ScrollView>
+		<TagInput onPress={(item, index) => values.splice(index, 1)} values={values} />
+	</ScrollView>
+);