Merge pull request #17 from seeocon/master

Added the ability to delete on press, and limit the maximum number of tags.

Author: peterp

.DS_Store

@@ -1,3 +1,4 @@
 Federico Martín Alconada Verzini (https://github.com/fedealconada)
 Havens (https://github.com/havenS)
-Dajaffe (https://github.com/dajaffe)
+Dajaffe (https://github.com/dajaffe)
+Michael O'Connor Havens (https://github.com/seeocon)

CONTRIBUTORS

@@ -1,4 +1,4 @@
-# React-Native-Tags
+# React-Native-Tags (with maximum tag and delete on press support)
 
 [![Build Status](https://travis-ci.org/peterp/react-native-tags.svg?branch=master)](https://travis-ci.org/peterp/react-native-tags)
 [![npm](https://img.shields.io/npm/dt/express.svg)](https://www.npmjs.com/package/react-native-tags)
@@ -43,10 +43,12 @@ const UselessComponent = () => (
 | initialText       | The input element's text             |
 | initialTags       | ['the', 'initial', 'tags']           |
 | onChangeTags      | Fires when tags are added or removed |
+| maxNumberOfTags        | integer: up to you (mandatory)          |
 | onTagPress        | Fires when tags are pressed          |
 | readonly          | Tags cannot be modified              |
 | containerStyle    | Style                                |
 | style             | Style (`containerStyle` alias)       |
 | inputStyle        | Style                                |
 | tagContainerStyle | Style                                |
 | tagTextStyle      | Style                                |
+| deleteOnPress  | true/false                       |

README.md

@@ -39,7 +39,7 @@ class Tags extends React.Component {
       );
     } else if (
       text.length > 1 &&
-      (text.slice(-1) === " " || text.slice(-1) === ",")
+      (text.slice(-1) === " " || text.slice(-1) === ",") && !(this.state.tags.indexOf(text.slice(0, -1).trim()) > -1)
     ) {
       this.setState(
         {
@@ -54,6 +54,22 @@ class Tags extends React.Component {
     }
   };
 
+
+  /**
+   * void arraySplice(tag)
+   * uses the array.filter() method provided in Javascript to remove the specific tag from the list.
+   * 
+   * @param {string} tag 
+   */
+  arraySplice(tag) {
+    if (this.props.deleteOnPress == true){
+    this.setState({
+      tags: this.state.tags.filter(e => e !== tag)
+    });
+  }
+}
+  
+
   render() {
     return (
       <View
@@ -63,13 +79,17 @@ class Tags extends React.Component {
           <Tag
             key={i}
             label={tag}
-            onPress={e => this.props.onTagPress(i, tag, e)}
+            onPress={e => {
+                     this.arraySplice(tag)
+                     this.props.onTagPress(i, tag, e)
+                    }}
             readonly={this.props.readonly}
             tagContainerStyle={this.props.tagContainerStyle}
             tagTextStyle={this.props.tagTextStyle}
           />
         ))}
-        {!this.props.readonly && (
+
+        {!this.props.readonly && (this.props.maxNumberOfTags > this.state.tags.length) && (
           <View style={[styles.textInputContainer]}>
             <TextInput
               value={this.state.text}
@@ -94,13 +114,14 @@ Tags.propTypes = {
   initialText: PropTypes.string,
   initialTags: PropTypes.arrayOf(PropTypes.string),
   onChangeTags: PropTypes.func,
-  onTagPress: PropTypes.func,
   containerStyle: PropTypes.object,
   style: PropTypes.object,
   inputStyle: PropTypes.object,
   tagContainerStyle: PropTypes.object,
   tagTextStyle: PropTypes.object,
-  readonly: PropTypes.bool
+  readonly: PropTypes.bool,
+  maxNumberOfTags: PropTypes.number,
+  deleteOnPress: PropTypes.bool
 };
 
 export { Tag };