Refactor component to be stateless

Refactor the Tags component to be stateless and allow the state of
tags to be changed/controlled at the host component level. Keep all
other business logic in the component layer.

Update README to reflect new refactor of the component. Update
options and events, remove onChange event.

Update tags tests to use stateless compoment. Create an
App fixture to be able to capture events and state change
in the component so we can test properly.

Update webpack to extract the css in a production build
as well as a development build. Remove css-loader rule from rules config.

Update example/docs to reflect new changes to the component.

Author: jfusco

README.md

@@ -31,25 +31,34 @@ import { render } from 'react-dom';
 import Tags from 'react-tagging-input';
 
 class Application extends Component{
+	state = {
+		tags: ['foo', 'bar']
+	};
+
 	constructor(props){
 		super(props);
+	}
 
-		this.state = {
-			tags: ['hello', 'world']
-		}
+	onTagAdded(tag) {
+		this.setState({
+			tags: [...this.state.tags, tag]
+		});
 	}
 
-	onTagsChange(tags){
-		console.log(`new tags: ${tags}`);
+	onTagRemoved(tag, index) {
+		this.setState({
+			tags: this.state.tags.filter((tag, i) => i !== index)
+		});
 	}
 
 	render(){
 		return (
 			<div>
 				<Tags
-				 initialTags={this.state.tags}
-				 placeholder="Add a tag"
-				 onChange={this.onTagsChange.bind(this)} />
+					tags={this.state.tags}
+					placeholder="Add a tag"
+					onAdded={this.onTagAdded.bind(this)}
+					onRemoved={this.onTagRemoved.bind(this)} />
 			</div>
 		);
 	}
@@ -60,10 +69,9 @@ render(<Application />, document.getElementById('application'));
 
 <a name="options"></a>
 #### Options
-* **[`initialTags`](#initialTags)**
+* **[`tags`](#tags)**
 * **[`placeholder`](#placeholder)**
 * **[`addKeys`](#addKeys)**
-* **[`onChange`](#onChange)**
 * **[`onAdded`](#onAdded)**
 * **[`onRemoved`](#onRemoved)**
 * **[`maxTags`](#maxTags)**
@@ -72,13 +80,15 @@ render(<Application />, document.getElementById('application'));
 * **[`uniqueTags`](#uniqueTags)**
 * **[`id`](#id)**
 
-<a name="initialTags"></a>
-##### initialTags ~ optional ~ default `[]`
+<a name="tags"></a>
+##### tags ~ required
 An `array` of tags to be passed in and rendered right away in the component
 ```js
-const tags = ['hello', 'world'];
+state = {
+  tags: ['foo', 'bar']
+};
 
-<Tags initialTags={tags} />
+<Tags tags={this.state.tags} />
 ```
 
 <a name="placeholder"></a>
@@ -97,17 +107,6 @@ An `array` of keyCodes used to tell the tags component which delimiter to use to
 <Tags addKeys={[13, 9, 32, 188]} />
 ```
 
-<a name="onChange"></a>
-##### onChange ~ optional
-A `function` fired anytime there is a change - returns the new `array` of tags
-```js
-onTagsChange(tags){
-	console.log(`new tags: ${tags}`);
-}
-
-<Tags onChange={this.onTagsChange} />
-```
-
 <a name="onAdded"></a>
 ##### onAdded ~ optional
 A `function` fired when a new tag is added - returns a `string` of the new tag
@@ -123,11 +122,11 @@ onTagAdded(tag){
 ##### onRemoved ~ optional
 A `function` fired when a new tag is deleted - returns a `string` of the tag that was deleted
 ```js
-onTagRemoved(tag){
-	console.log(`deleted tag: ${tag}`);
+onTagRemoved(tag, index){
+	console.log(`deleted tag: ${tag} at index ${index}`);
 }
 
-<Tags onRemoved={this.onTagRemoved} />
+<Tags onRemoved={this.onTagRemoved.bind(this)} />
 ```
 
 <a name="maxTags"></a>

__tests__/Tags-test.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import { createRenderer, Simulate, renderIntoDocument } from 'react-addons-test-utils';
 import Tags from '../src/component/js/Tags';
+import App from './__fixtures__/App';
 
 const TEST_TAGS = [
 	'foo',
@@ -21,7 +22,7 @@ describe('Tags', () => {
 			<Tags
 				id="test-tags"
 				placeholder="Custom placeholder text"
-				initialTags={TEST_TAGS} />
+				tags={TEST_TAGS} />
 		);
 
 		tags = renderer.getRenderOutput();
@@ -58,7 +59,7 @@ describe('Tags - "initialTags"', () => {
 		const renderList = () => {
 			renderer.render(
 				<Tags
-					initialTags={TEST_TAGS} />
+					tags={TEST_TAGS} />
 			);
 
 			const list = renderer.getRenderOutput();
@@ -72,8 +73,9 @@ describe('Tags - "initialTags"', () => {
 
 	it('should render tags (DOM render)', () => {
 		const tags = renderIntoDocument(
-			<Tags
-				initialTags={TEST_TAGS} />
+			<div>
+				<Tags tags={TEST_TAGS} />
+			</div>
 		);
 
 		const renderedDOM = findDOMNode(tags);
@@ -91,7 +93,7 @@ describe('Tags - "readOnly"', () => {
 
 		renderer.render(
 			<Tags
-				initialTags={TEST_TAGS}
+				tags={TEST_TAGS}
 				readOnly={true} />
 		);
 	});
@@ -113,20 +115,20 @@ describe('Tags - "readOnly"', () => {
 	});
 });
 
-
 describe('Tags - "addKeys"', () => {
 	let tags,
 		input,
 		tagContainer;
 
 	beforeEach(() => {
 		tags = renderIntoDocument(
-			<Tags
-				initialTags={TEST_TAGS}
+			<App
+				tags={TEST_TAGS}
 				addKeys={[13, 9, 32, 188]} />
 		);
 
 		const renderedDOM = findDOMNode(tags);
+
 		tagContainer = renderedDOM.querySelector('.react-tags__container');
 		input = renderedDOM.getElementsByTagName('input')[0];
 
@@ -181,20 +183,21 @@ describe('Tags - events', () => {
 
 	const onTagAdded = jest.genMockFunction();
 	const onTagRemoved = jest.genMockFunction();
-	const onTagsChanged = jest.genMockFunction();
 	const onTagsInputChange = jest.genMockFunction();
 
 	beforeEach(() => {
 		tags = renderIntoDocument(
-			<Tags
-				initialTags={TEST_TAGS}
-				onAdded={onTagAdded}
-				onRemoved={onTagRemoved}
-				onChange={onTagsChanged}
-				onInputChange={onTagsInputChange} />
+			<div>
+				<Tags
+					tags={TEST_TAGS}
+					onAdded={onTagAdded}
+					onRemoved={onTagRemoved}
+					onInputChange={onTagsInputChange} />
+			</div>
 		);
 
 		const renderedDOM = findDOMNode(tags);
+
 		tagContainer = renderedDOM.querySelector('.react-tags__container');
 		input = renderedDOM.getElementsByTagName('input')[0];
 	});
@@ -206,38 +209,24 @@ describe('Tags - events', () => {
 	});
 
 	describe('when adding a tag', () => {
-		beforeEach(() => {
+		it('should call the "onAdded" event and return the new tag', () => {
 			input.value = TEST_TAGS[0];
 
 			Simulate.change(input);
 			Simulate.keyDown(input, {key: 'Enter', keyCode: 13, which: 13});
-		});
 
-		it('should call the "onAdded" event and return the new tag', () => {
 			expect(onTagAdded).toBeCalledWith(TEST_TAGS[0]);
 		});
-
-		it('should call the "onChange" event and return the new tags list as an array', () => {
-			const newArray = TEST_TAGS.concat('foo');
-
-			expect(onTagsChanged).toBeCalledWith(newArray);
-		});
 	});
 
 	describe('when removing a tag', () => {
-		beforeEach(() => {
+		it('should call the "onRemoved" event and return the tag that was removed', () => {
 			input.value = '';
 
 			Simulate.change(input);
 			Simulate.keyDown(input, {key: 'Delete', keyCode: 8, which: 8});
-		});
-
-		it('should call the "onRemoved" event and return the tag that was removed', () => {
-			expect(onTagRemoved).toBeCalledWith(TEST_TAGS[1]);
-		});
 
-		it('should call the "onChange" event and return the new tags list as an array', () => {
-			expect(onTagsChanged).toBeCalledWith([TEST_TAGS[0]]);
+			expect(onTagRemoved).toBeCalledWith(TEST_TAGS[1], 1);
 		});
 	});
 
@@ -261,8 +250,8 @@ describe('Tags - removing', () => {
 
 	beforeEach(() => {
 		tags = renderIntoDocument(
-			<Tags
-				initialTags={TEST_TAGS} />
+			<App
+				tags={TEST_TAGS} />
 		);
 
 		const renderedDOM = findDOMNode(tags);
@@ -315,8 +304,8 @@ describe('Tags - removing', () => {
 describe('Tags - "uniqueTags"', () => {
 	it('should allow duplicate tags to be created', () => {
 		const tags = renderIntoDocument(
-			<Tags
-				initialTags={TEST_TAGS}
+			<App
+				tags={TEST_TAGS}
 				uniqueTags={false} />
 		);
 
@@ -336,8 +325,8 @@ describe('Tags - "uniqueTags"', () => {
 
 	it('should not allow duplicate tags to be created', () => {
 		const tags = renderIntoDocument(
-			<Tags
-				initialTags={TEST_TAGS}
+			<App
+				tags={TEST_TAGS}
 				uniqueTags={true} />
 		);
 
@@ -358,8 +347,8 @@ describe('Tags - "maxTags"', () => {
 	describe('when maxTags is set to 3', () => {
 		it('should allow no more than 3 tags to be added', () => {
 			const tags = renderIntoDocument(
-				<Tags
-					initialTags={TEST_TAGS}
+				<App
+					tags={TEST_TAGS}
 					maxTags={3} />
 			);
 
@@ -385,8 +374,9 @@ describe('Tags - "deleteOnKeyPress"', () => {
 	describe('when deleteOnKeyPress is false', () => {
 		it('should not remove tags on backspace', () => {
 			const tags = renderIntoDocument(
-				<Tags
-					initialTags={TEST_TAGS}
+				<App
+					tags={TEST_TAGS}
+					addKeys={[13, 9, 32, 188]}
 					deleteOnKeyPress={false} />
 			);
 

__tests__/__fixtures__/App.js

@@ -0,0 +1,41 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import Tags from '../../src/component/js/Tags';
+
+class App extends Component {
+	state = {
+		tags: this.props.tags
+	};
+
+	constructor(props){
+		super(props);
+	}
+
+	onTagAdded(tag) {
+		this.setState({
+			tags: [...this.state.tags, tag]
+		});
+	}
+
+	onTagRemoved(tag, index) {
+		this.setState({
+			tags: this.state.tags.filter((tag, i) => i !== index)
+		});
+	}
+
+	render () {
+		return (
+			<div>
+				<Tags
+					{...this.props}
+					{...this.state}
+					onAdded={::this.onTagAdded}
+					onRemoved={::this.onTagRemoved} />
+			</div>
+		);
+	}
+}
+
+export default App;