From 62606f4ebe8bb262ccc002390a4249b3d7975f44 Mon Sep 17 00:00:00 2001 From: Peter Pistorius Date: Sun, 16 Sep 2018 16:01:46 +0200 Subject: [PATCH 1/3] Allow tag creation trigger to be custom. --- README.md | 31 ++++++++++++++++--------------- Tags/index.js | 4 +++- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 2fb971c..4c6dc57 100644 --- a/README.md +++ b/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 | | diff --git a/Tags/index.js b/Tags/index.js index a96785b..ff85543 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) === ",") && + this.props.createTagOnString.includes(text.slice(-1)) && !(this.state.tags.indexOf(text.slice(0, -1).trim()) > -1) ) { this.setState( @@ -119,6 +119,7 @@ class Tags extends React.Component { Tags.defaultProps = { initialTags: [], initialText: " ", + createTagOnString: [",", " "], readonly: false, deleteOnTagPress: true, maxNumberOfTags: Number.POSITIVE_INFINITY @@ -127,6 +128,7 @@ Tags.defaultProps = { Tags.propTypes = { initialText: PropTypes.string, initialTags: PropTypes.arrayOf(PropTypes.string), + createTagOnString: PropTypes.array, onChangeTags: PropTypes.func, readonly: PropTypes.bool, maxNumberOfTags: PropTypes.number, From 7308ecc5e03589d69b18be1ac6f40d2aee162133 Mon Sep 17 00:00:00 2001 From: Peter Pistorius Date: Sun, 16 Sep 2018 17:27:28 +0200 Subject: [PATCH 2/3] Make return create new tag. --- Tags/__tests__/Tags_enzyme-tests.js | 10 +++++++ .../__snapshots__/Tags-tests.js.snap | 1 + Tags/index.js | 30 ++++++++++++++----- 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/Tags/__tests__/Tags_enzyme-tests.js b/Tags/__tests__/Tags_enzyme-tests.js index a22c620..280ae38 100644 --- 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( + + ).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().find( diff --git a/Tags/__tests__/__snapshots__/Tags-tests.js.snap b/Tags/__tests__/__snapshots__/Tags-tests.js.snap index 78e7835..47bdffd 100644 --- 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`] = ` { + 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" /> @@ -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, From dc91789e71f22af95c77a80d21d02c4183bcfb7a Mon Sep 17 00:00:00 2001 From: Peter Pistorius Date: Sun, 16 Sep 2018 17:26:43 +0200 Subject: [PATCH 3/3] v1.6.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2e1d0c9..6f9cba4 100644 --- a/package.json +++ b/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": {