diff --git a/spikes/fuzzy-search/react-select/src/root.js b/spikes/fuzzy-search/react-select/src/root.js index db47983b..c4cf6ebb 100644 --- a/spikes/fuzzy-search/react-select/src/root.js +++ b/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 ( - +
+ + + +
); }; diff --git a/spikes/fuzzy-search/react-select/src/search-async.js b/spikes/fuzzy-search/react-select/src/search-async.js new file mode 100644 index 00000000..c8f9ace5 --- /dev/null +++ b/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 ( +
+

Async Search

+ +
+ ) + } +}) + +module.exports = SearchAsync \ No newline at end of file diff --git a/spikes/fuzzy-search/react-select/src/search-single.js b/spikes/fuzzy-search/react-select/src/search-single.js deleted file mode 100644 index 874e38d6..00000000 --- a/spikes/fuzzy-search/react-select/src/search-single.js +++ /dev/null @@ -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 ( -
-

Single Search

- +
+ ) + } +}) module.exports = Search \ No newline at end of file