adding in async select type

This commit is contained in:
Alex Windett 2017-01-05 17:12:31 +00:00
parent 06822f57c5
commit bdc7af27de
4 changed files with 110 additions and 57 deletions

View File

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

View File

@ -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

View File

@ -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

View File

@ -1,14 +1,48 @@
const React = require('react'); const React = require('react');
const SearchSingle = require('./search-single'); const Select = require('react-select');
const Search = () => { const Search = React.createClass({
return ( getInitialState: function() {
<div> return {
<SearchSingle /> selectValue: ''
</div> }
) },
}
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> {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 module.exports = Search