react-native-tags-input
Advanced tools
+23
-9
@@ -9,4 +9,5 @@ import React from 'react'; | ||
| Image, | ||
| TouchableHighlight, | ||
| ViewPropTypes | ||
| TouchableOpacity, | ||
| ViewPropTypes, | ||
| FlatList | ||
| } from 'react-native'; | ||
@@ -60,2 +61,15 @@ | ||
| // If characters remain in the input field after input is completed, add them to the tag. | ||
| onEndEditing = (tags, updateState) => { | ||
| if (tags.tag) { | ||
| const tempArray = tags.tagsArray.concat(tags.tag); | ||
| const tempObject = { | ||
| tag: '', | ||
| tagsArray: [...new Set(tempArray)] // Deduplication | ||
| }; | ||
| updateState(tempObject); | ||
| return this.input.clear(); | ||
| } | ||
| } | ||
| onChangeText = (text, tags, updateState, keysForTags) => { | ||
@@ -75,8 +89,7 @@ | ||
| let tempTag = text.replace(keysStr, ''); | ||
| let tempArray = tags.tagsArray; | ||
| const tempArray = tags.tagsArray.concat(tempTag); | ||
| console.log(tempTag); | ||
| tempArray.push(tempTag); | ||
| let tempObject = { | ||
| tag: '', | ||
| tagsArray: tempArray | ||
| tagsArray: [...new Set(tempArray)] // Deduplication | ||
| }; | ||
@@ -150,2 +163,3 @@ updateState(tempObject); | ||
| onChangeText={text => this.onChangeText(text, tags, updateState, keysForTag)} | ||
| onEndEditing={() => this.onEndEditing(tags, updateState)} | ||
| /> | ||
@@ -155,3 +169,3 @@ {rightElement ? this.renderRightElement(rightElement, rightElementContainerStyle) : null} | ||
| {customElement ? customElement : null} | ||
| <View style={StyleSheet.flatten([styles.tagsView, tagsViewStyle])}> | ||
| <FlatList style={StyleSheet.flatten([styles.tagsView, tagsViewStyle])}> | ||
| {tags.tagsArray.map((item, count) => { | ||
@@ -164,3 +178,3 @@ return ( | ||
| <Text style={StyleSheet.flatten([styles.tagText, tagTextStyle])}>{item}</Text> | ||
| <TouchableHighlight onPress={() => this.deleteTag(count, tags, updateState) }> | ||
| <TouchableOpacity onPress={() => this.deleteTag(count, tags, updateState) }> | ||
| {deleteElement ? deleteElement : ( | ||
@@ -172,7 +186,7 @@ <Image | ||
| )} | ||
| </TouchableHighlight> | ||
| </TouchableOpacity> | ||
| </View> | ||
| ) | ||
| })} | ||
| </View> | ||
| </FlatList> | ||
| </View> | ||
@@ -179,0 +193,0 @@ ); |
+1
-1
| { | ||
| "name": "react-native-tags-input", | ||
| "version": "1.0.7", | ||
| "version": "1.0.8", | ||
| "description": "Input component for React Native to add and remove tags.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
15586
3.32%255
5.37%