verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Guilherme Gazzo 2017-08-31 23:10:20 -03:00
parent ca354fe55e 6c84470408
commit dcf7e020b5
No known key found for this signature in database
GPG Key ID: 1F85C9AD922D0829
4 changed files with 511 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
__tests__/__snapshots__/RoomItem.js.snap
View File

@ -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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"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}

497
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
RC
@ -70,12 +230,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
RC
@ -165,12 +333,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
RC
@ -260,12 +436,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -376,12 +560,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -492,12 +684,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -608,12 +808,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
@ -724,12 +932,15 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
}
}
style={
Object {
"borderRadius": 20,
"height": 40,
"position": "absolute",
"width": 40,
}
Array [
Object {
"position": "absolute",
},
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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"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 {
"color": "#ffffff",
"fontSize": 20,
}
Array [
Object {
"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}

125
app/components/tags.js Normal file
View File

@ -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
};

11
storybook/stories/TagInput.js Normal file
View File

@ -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>
);