diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..a1c23bc Binary files /dev/null and b/.DS_Store differ diff --git a/CONTRIBUTORS b/CONTRIBUTORS index 1b97ae5..062a4ab 100644 --- a/CONTRIBUTORS +++ b/CONTRIBUTORS @@ -1,3 +1,4 @@ Federico Martín Alconada Verzini (https://github.com/fedealconada) Havens (https://github.com/havenS) -Dajaffe (https://github.com/dajaffe) \ No newline at end of file +Dajaffe (https://github.com/dajaffe) +Michael O'Connor Havens (https://github.com/seeocon) diff --git a/README.md b/README.md index 59d293c..a8ef4c5 100644 --- a/README.md +++ b/README.md @@ -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,6 +43,7 @@ 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 | @@ -50,3 +51,4 @@ const UselessComponent = () => ( | inputStyle | Style | | tagContainerStyle | Style | | tagTextStyle | Style | +| deleteOnPress | true/false | diff --git a/Tags/index.js b/Tags/index.js index 104edfe..ea72230 100644 --- a/Tags/index.js +++ b/Tags/index.js @@ -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 ( 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) && (