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/__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 @@ -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" /> @@ -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, 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": {