adding in async select type

spikes/fuzzy-search/react-select/src/root.js

@@ -2,6 +2,8 @@ const ReactRedux = require('react-redux');
 const ReactHotLoader = require('react-hot-loader');
 const React = require('react');
 const Search = require('./search');
+const SearchAsync = require('./search-async')
+
 const {
   AppContainer
 } = ReactHotLoader;
@@ -15,7 +17,11 @@ module.exports = ({
 }) => {
   return (
     <AppContainer>
+      <div>
+        <Search multi />
         <Search />
+        <SearchAsync />
+      </div>
     </AppContainer>
   );
 };

spikes/fuzzy-search/react-select/src/search-async.js

@@ -0,0 +1,61 @@
+const React = require('react');
+const Select = require('react-select');
+const {
+	Async
+} = Select
+
+const SelectAsync = Async
+
+
+const SearchAsync = React.createClass({
+
+	getInitialState: function() {
+		return {
+			selectValue: ''
+		}
+	},
+
+	updateValue: function(newValue) {
+		console.log('State changed to ' + newValue);
+		this.setState({
+			selectValue: newValue
+		});
+	},
+
+	render: function () {
+
+		const options = function(input, callback) {
+			setTimeout(function() {
+				callback(null, {
+					options: [
+						{ value: 'one', label: 'One' },
+						{ value: 'two', label: 'Two' },
+						{ value: 'three', label: 'Three' },
+						{ value: 'four', label: 'Four' },
+						{ value: 'five', label: 'Five' },
+						{ value: 'six', label: 'Six' },
+					],
+					// CAREFUL! Only set this to true when there are no more options,
+					// or more specific queries will not be sent to the server.
+					complete: true
+				}, 1000);
+			});
+		}
+
+		return (
+			<div>
+				<h1> Async Search </h1>
+				<SelectAsync
+					ref="stateSelect"
+					loadOptions={options}
+					value={this.state.selectValue}
+					isLoading={true}
+					onChange={this.updateValue}
+					multi={this.props.multi}
+				/>
+			</div>
+		)
+	}
+})
+
+module.exports = SearchAsync

spikes/fuzzy-search/react-select/src/search-single.js

@@ -1,48 +0,0 @@
-const React = require('react');
-const Select = require('react-select');
-
-
-const SearchSingle = React.createClass({
-
-	getInitialState: function() {
-		return {
-			selectValue: ''
-		}
-	},
-
-	updateValue: function(newValue) {
-		console.log('State changed to ' + newValue);
-		this.setState({
-			selectValue: newValue
-		});
-	},
-
-	render: function () {
-
-		var options = [
-			{ value: 'one', label: 'One' },
-			{ value: 'two', label: 'Two' },
-			{ value: 'three', label: 'Three' },
-			{ value: 'four', label: 'Four' },
-			{ value: 'five', label: 'Five' },
-			{ value: 'six', label: 'Six' },
-		];
-
-		return (
-			<div>
-				<h1> Single Search </h1>
-				<Select
-					ref="stateSelect"
-					autofocus
-					options={options}
-					name="selected-state"
-					value={this.state.selectValue}
-					onChange={this.updateValue}
-					multi={true}
-				/>
-			</div>
-		)
-	}
-})
-
-module.exports = SearchSingle

spikes/fuzzy-search/react-select/src/search.js

@@ -1,14 +1,48 @@
 const React = require('react');
-const SearchSingle = require('./search-single');
+const Select = require('react-select');
 
 
-const Search = () => {
+const Search = React.createClass({
+
+	getInitialState: function() {
+		return {
+			selectValue: ''
+		}
+	},
+
+	updateValue: function(newValue) {
+		console.log('State changed to ' + newValue);
+		this.setState({
+			selectValue: newValue
+		});
+	},
+
+	render: function () {
+
+		var options = [
+			{ value: 'one', label: 'One' },
+			{ value: 'two', label: 'Two' },
+			{ value: 'three', label: 'Three' },
+			{ value: 'four', label: 'Four' },
+			{ value: 'five', label: 'Five' },
+			{ value: 'six', label: 'Six' },
+		];
 
 		return (
 			<div>
-			<SearchSingle />
+				<h1> {this.props.multi ? 'Multi' : 'Single'} Search </h1>
+				<Select
+					ref="stateSelect"
+					autofocus
+					options={options}
+					name="selected-state"
+					value={this.state.selectValue}
+					onChange={this.updateValue}
+					multi={this.props.multi}
+				/>
 			</div>
 		)
 	}
+})
 
 module.exports = Search