Make return create new tag.

peterp · Sep 16, 2018 · 7308ecc · 7308ecc
1 parent 62606f4
commit 7308ecc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/Tags/__tests__/Tags_enzyme-tests.js b/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(

diff --git a/Tags/__tests__/__snapshots__/Tags-tests.js.snap b/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 {

diff --git a/Tags/index.js b/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
@@ -42,19 +52,20 @@ class Tags extends React.Component {
       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>
@@ -120,6 +132,7 @@ Tags.defaultProps = {
   initialTags: [],
   initialText: " ",
   createTagOnString: [",", " "],
+  createTagOnReturn: false,
   readonly: false,
   deleteOnTagPress: true,
   maxNumberOfTags: Number.POSITIVE_INFINITY
@@ -129,6 +142,7 @@ 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,