#658 Allow Create functionality [WIP]

examples/src/app.js

@@ -10,6 +10,7 @@ import CustomRender from './components/CustomRender';
 import Multiselect from './components/Multiselect';
 import NumericSelect from './components/NumericSelect';
 import States from './components/States';
+import AllowCreate from './components/AllowCreate';
 
 ReactDOM.render(
 	<div>
@@ -19,9 +20,7 @@ ReactDOM.render(
 		<NumericSelect label="Numeric Values" />
 		<CustomRender label="Custom Render Methods"/>
 		<CustomComponents label="Custom Option and Value Components" />
-		{/*
-		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's NOT in the list, then hit return" />
-		*/}
+		<AllowCreate label="Option Creation (tags mode)" allowCreate />
 	</div>,
 	document.getElementById('example')
 );

examples/src/components/AllowCreate.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import Select from 'react-select';
+
+const FLAVOURS = [
+	{ label: 'Chocolate', value: 'chocolate' },
+	{ label: 'Vanilla', value: 'vanilla' },
+	{ label: 'Strawberry', value: 'strawberry' },
+	{ label: 'Caramel', value: 'caramel' },
+	{ label: 'Cookies and Cream', value: 'cookiescream' },
+	{ label: 'Peppermint', value: 'peppermint' },
+];
+
+var AllowCreate = React.createClass({
+	displayName: 'AllowCreate',
+
+	propTypes: {
+		allowCreate: React.PropTypes.bool,
+		label: React.PropTypes.string,
+	},
+
+	getInitialState () {
+		return {
+			disabled: false,
+			crazy: false,
+			options: FLAVOURS,
+			value: [],
+		};
+	},
+
+	onLabelClick (data, event) {
+		console.log(data, event);
+	},
+
+	handleSelectChange (value){
+		this.setState({ value });
+	},
+
+	renderHint () {
+		return (
+			<div className="hint">Create options in tag mode</div>
+		);
+	},
+
+	render () {
+		return (
+			<div className="section">
+				<h3 className="section-heading">{this.props.label}</h3>
+				<Select
+					allowCreate={this.props.allowCreate}
+					value={this.state.value}
+					multi={true}
+					placeholder="Select your favourite(s)"
+					options={this.state.options}
+					onChange={this.handleSelectChange} />
+				{this.renderHint()}
+			</div>
+		);
+	}
+});
+
+module.exports = AllowCreate;

src/Option.js

@@ -11,6 +11,7 @@ const Option = React.createClass({
 		onFocus: React.PropTypes.func,                 // method to handle mouseEnter on option element
 		onUnfocus: React.PropTypes.func,               // method to handle mouseLeave on option element
 		option: React.PropTypes.object.isRequired,     // object that is base for that option
+		addLabelText: React.PropTypes.string,		   // text to display with value while creating new option
 	},
 	blockEvent (event) {
 		event.preventDefault();
@@ -39,7 +40,6 @@ const Option = React.createClass({
 	render () {
 		var { option } = this.props;
 		var className = classNames(this.props.className, option.className);
-
 		return option.disabled ? (
 			<div className={className}
 				onMouseDown={this.blockEvent}
@@ -53,7 +53,7 @@ const Option = React.createClass({
 				onMouseEnter={this.handleMouseEnter}
 				onMouseMove={this.handleMouseMove}
 				title={option.title}>
-				{this.props.children}
+				{ option.create ? this.props.addLabelText.replace('{label}', option.label) : this.props.children }
 			</div>
 		);
 	}

src/Select.js

@@ -582,9 +582,19 @@ const Select = React.createClass({
 	},
 
 	renderMenu (options, valueArray, focusedOption) {
-		if (options && options.length) {
+		if (options && options.length || this.props.allowCreate) {
 			let Option = this.props.optionComponent;
 			let renderLabel = this.props.optionRenderer || this.getOptionLabel;
+			let inputValue = this.state.inputValue.trim();
+			if (this.props.allowCreate && inputValue) {
+				options = options.slice();
+				let newOption = this.props.newOptionCreator ? this.props.newOptionCreator(inputValue) : {
+					value: inputValue,
+					label: inputValue,
+					create: true
+				};
+				options.unshift(newOption);
+			}
 			return options.map((option, i) => {
 				let isSelected = valueArray && valueArray.indexOf(option) > -1;
 				let isFocused = option === focusedOption;
@@ -606,12 +616,15 @@ const Select = React.createClass({
 						option={option}
 						isSelected={isSelected}
 						ref={optionRef}
+						addLabelText={this.props.addLabelText}
 						>
 						{renderLabel(option)}
 					</Option>
 				);
 			});
-		} else {
+		} else if (this.props.allowCreate){
+
+		} else{
 			return (
 				<div className="Select-noresults">
 					{this.props.noResultsText}

test/Async-test.js

@@ -178,7 +178,7 @@ describe('Async', () => {
 				noResultsText="Searching..."
 				placeholder="Loading..."
 			/>);
-		})
+		});
 	});
 
 	describe('with a cache', () => {

test/Select-test.js

@@ -1047,7 +1047,7 @@ describe('Select', () => {
 	describe('with allowCreate=true', () => {
 
 		// TODO: allowCreate hasn't been implemented yet in 1.x
-		return;
+		// return;
 
 		beforeEach(() => {
 
@@ -1060,20 +1060,22 @@ describe('Select', () => {
 				{ value: 'three', label: 'Three' },
 				{ value: 'zzzzz', label: 'test value' }
 			];
-
+			setValueProp('xyz');
+
 			// Render an instance of the component
 			wrapper = createControlWithWrapper({
 				value: 'one',
 				options: options,
 				allowCreate: true,
 				searchable: true,
 				addLabelText: 'Add {label} to values?'
+			}, {
+				wireUpOnChangeToValue: true
 			});
 		});
 
 		it('has an "Add xyz" option when entering xyz', () => {
 			typeSearchText('xyz');
-
 			expect(ReactDOM.findDOMNode(instance), 'queried for', '.Select-menu .Select-option',
 				'to have items satisfying', 'to have text', 'Add xyz to values?');
 		});
@@ -1108,28 +1110,12 @@ describe('Select', () => {
 
 		it('displays an add option when a value with spaces is entered', () => {
 
-			typeSearchText('got');
+			typeSearchText(' got ');
 
 			expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option')[0],
 				'to have text', 'Add got to values?');
 		});
 
-		it('displays an add option when a value with spaces is entered', () => {
-
-			typeSearchText('got');
-
-			expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option')[0],
-				'to have text', 'Add got to values?');
-		});
-
-		it('displays an add option when a label with spaces is entered', () => {
-
-			typeSearchText('test');
-
-			expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option')[0],
-				'to have text', 'Add test to values?');
-		});
-
 		it('does not display the option label when an existing value is entered', () => {
 
 			typeSearchText('zzzzz');