diff --git a/__tests__/__snapshots__/RoomItem.js.snap b/__tests__/__snapshots__/RoomItem.js.snap
index 5c71d9422..11d20cb8f 100644
--- a/__tests__/__snapshots__/RoomItem.js.snap
+++ b/__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 {
- "color": "#ffffff",
- "fontSize": 20,
- }
+ Array [
+ Object {
+ "color": "#ffffff",
+ },
+ Object {
+ "fontSize": 20,
+ },
+ ]
}
>
NA
-
@@ -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
-
@@ -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
-
+
+
+
+ TE
+
+
+
+
+ AA
+
+
+
+
+ BB
+
+
+
+
+ TE
+
+
+
+
+`;
+
exports[`Storyshots Channel Cell Direct Messages 1`] = `
@@ -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,
+ },
+ ]
}
/>
@@ -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,
+ },
+ ]
}
/>
@@ -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,
+ },
+ ]
}
/>
@@ -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,
+ },
+ ]
}
/>
@@ -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,
+ },
+ ]
}
/>
@@ -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,
+ },
+ ]
}
/>
@@ -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,
+ },
+ ]
}
/>
@@ -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
-
@@ -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
-
@@ -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,
+ },
+ ]
}
>
-
(- this.props.onPress(item, index)} />);
+
+const renderItemResult = ({ item = '', onPress }) => (
+
+
+ @{item}
+ );
+
+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 (
+
+
+ {this.props.values.map(this.props.renderTag || renderTag)}
+
+
+ {this.props.result && this.props.result.length ? item}
+ style={styles.result}
+ data={this.props.result || []}
+ renderItem={e => (this.props.renderItemResult || renderItemResult)(e, this.props.onSelect)}
+ /> : null}
+ );
+ }
+}
+
+const Item = ({ onPress, label }) => (
+
+
+ {label}
+
+);
+
+Item.propTypes = {
+ label: PropTypes.string.isRequired,
+ onPress: PropTypes.func.isRequired
+};
diff --git a/storybook/stories/TagInput.js b/storybook/stories/TagInput.js
new file mode 100644
index 000000000..376709b1f
--- /dev/null
+++ b/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 (
+
+ values.splice(index, 1)} values={values} />
+
+);