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} /> + +);