Merge pull request #22 from peterp/pp-custom-strings-to-create-tag

Custom strings to create tag and press return for new tag

Author: peterp

README.md

@@ -41,18 +41,19 @@ const UselessComponent = () => (
 
 ## Props
 
-| PropName            | Description                                | Default  |
-| ------------------- | ------------------------------------------ | -------- |
-| initialText         | The input element's text                   |          |
-| initialTags         | ['the', 'initial', 'tags']                 |          |
-| onChangeTags        | Fires when tags are added or removed       |          |
-| maxNumberOfTags     | The max number of tags that can be entered | infinity |
-| onTagPress          | Fires when tags are pressed                |          |
-| readonly            | Tags cannot be modified                    | false    |
-| deleteTagOnPress    | Remove the tag when pressed                | true     |
-| containerStyle      | Style                                      |          |
-| style               | Style (`containerStyle` alias)             |          |
-| inputContainerStyle | Style                                      |          |
-| inputStyle          | Style                                      |          |
-| tagContainerStyle   | Style                                      |          |
-| tagTextStyle        | Style                                      |          |
+| PropName            | Description                                | Default         |
+| ------------------- | ------------------------------------------ | --------------- |
+| initialText         | The input element's text                   |                 |
+| initialTags         | ['the', 'initial', 'tags']                 |                 |
+| createTagOnString   | Triggers new tag creation                  | [",", ".", " "] |
+| onChangeTags        | Fires when tags are added or removed       |                 |
+| maxNumberOfTags     | The max number of tags that can be entered | infinity        |
+| onTagPress          | Fires when tags are pressed                |                 |
+| readonly            | Tags cannot be modified                    | false           |
+| deleteTagOnPress    | Remove the tag when pressed                | true            |
+| containerStyle      | Style                                      |                 |
+| style               | Style (`containerStyle` alias)             |                 |
+| inputContainerStyle | Style                                      |                 |
+| inputStyle          | Style                                      |                 |
+| tagContainerStyle   | Style                                      |                 |
+| tagTextStyle        | Style                                      |                 |

Tags/__tests__/Tags_enzyme-tests.js

@@ -20,6 +20,16 @@ describe("Tags", () => {
         expect(onChangeTags.mock.calls).toEqual([[["dog"]], [["dog", "cat"]]]);
       });
 
+      it("should add a new tag when return is pressed", () => {
+        const onChangeTags = jest.fn();
+        const wrapper = shallow(
+          <Tags createTagOnReturn onChangeTags={onChangeTags} />
+        ).find("TextInput");
+        wrapper.simulate("ChangeText", "dog");
+        wrapper.simulate("SubmitEditing");
+        expect(onChangeTags.mock.calls).toEqual([[["dog"]]]);
+      });
+
       it("should remove a tag when the text is empty", () => {
         const onChangeTags = jest.fn();
         const wrapper = shallow(<Tags onChangeTags={onChangeTags} />).find(

Tags/__tests__/__snapshots__/Tags-tests.js.snap

@@ -179,6 +179,7 @@ exports[`Tags should render props correctly 1`] = `
     <TextInput
       allowFontScaling={true}
       onChangeText={[Function]}
+      onSubmitEditing={[Function]}
       style={
         Array [
           Object {

Tags/index.js

@@ -24,6 +24,16 @@ class Tags extends React.Component {
     });
   }
 
+  addTag = text => {
+    this.setState(
+      {
+        tags: [...this.state.tags, text.trim()],
+        text: " "
+      },
+      () => this.props.onChangeTags && this.props.onChangeTags(this.state.tags)
+    );
+  };
+
   onChangeText = text => {
     if (text.length === 0) {
       // `onKeyPress` isn't currently supported on Android; I've placed an extra
@@ -39,22 +49,23 @@ class Tags extends React.Component {
       );
     } else if (
       text.length > 1 &&
-      (text.slice(-1) === " " || text.slice(-1) === ",") &&
+      this.props.createTagOnString.includes(text.slice(-1)) &&
       !(this.state.tags.indexOf(text.slice(0, -1).trim()) > -1)
     ) {
-      this.setState(
-        {
-          tags: [...this.state.tags, text.slice(0, -1).trim()],
-          text: " "
-        },
-        () =>
-          this.props.onChangeTags && this.props.onChangeTags(this.state.tags)
-      );
+      this.addTag(text.slice(0, -1));
     } else {
       this.setState({ text });
     }
   };
 
+  onSubmitEditing = () => {
+    if (!this.props.createTagOnReturn) {
+      return;
+    }
+
+    this.addTag(this.state.text);
+  };
+
   render() {
     const {
       containerStyle,
@@ -107,6 +118,7 @@ class Tags extends React.Component {
                 value={this.state.text}
                 style={[styles.textInput, inputStyle]}
                 onChangeText={this.onChangeText}
+                onSubmitEditing={this.onSubmitEditing}
                 underlineColorAndroid="transparent"
               />
             </View>
@@ -119,6 +131,8 @@ class Tags extends React.Component {
 Tags.defaultProps = {
   initialTags: [],
   initialText: " ",
+  createTagOnString: [",", " "],
+  createTagOnReturn: false,
   readonly: false,
   deleteOnTagPress: true,
   maxNumberOfTags: Number.POSITIVE_INFINITY
@@ -127,6 +141,8 @@ Tags.defaultProps = {
 Tags.propTypes = {
   initialText: PropTypes.string,
   initialTags: PropTypes.arrayOf(PropTypes.string),
+  createTagOnString: PropTypes.array,
+  createTagOnReturn: PropTypes.bool,
   onChangeTags: PropTypes.func,
   readonly: PropTypes.bool,
   maxNumberOfTags: PropTypes.number,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tags",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Tag input component for React Native",
   "main": "index.js",
   "scripts": {