2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2015-09-21 11:01:52 +03:00
|
|
|
import Autocomplete from '../../components/autocomplete';
|
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class AutocompleteTest extends React.Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
state = {
|
2015-11-08 18:49:00 +03:00
|
|
|
simple: 'Spain',
|
2016-05-20 17:24:17 +03:00
|
|
|
simpleShowAll: 'England',
|
2016-11-30 16:43:15 +03:00
|
|
|
multipleArray: ['ES-es', 'TH-th'],
|
|
|
|
multipleObject: {'ES-es': 'Spain', 'TH-th': 'Thailand'},
|
2016-07-28 05:53:09 +03:00
|
|
|
countriesArray: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
|
2016-11-30 16:43:15 +03:00
|
|
|
countriesObject: {
|
|
|
|
'EN-gb': 'England',
|
|
|
|
'EN-en': 'United States of America', 'EN-nz': 'New Zealand'
|
|
|
|
}
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-09-21 11:01:52 +03:00
|
|
|
|
2016-11-30 16:43:15 +03:00
|
|
|
handleMultipleArrayChange = (value) => {
|
2016-07-28 05:53:09 +03:00
|
|
|
this.setState({
|
2016-11-30 16:43:15 +03:00
|
|
|
multipleArray: value,
|
2016-07-28 05:53:09 +03:00
|
|
|
countriesObject: {
|
|
|
|
...this.state.countriesObject,
|
2016-10-28 19:42:59 +03:00
|
|
|
...(value[0] && !this.state.countriesObject[value[0]]) ? {[value[0]]: value[0]} : {}
|
2016-07-28 05:53:09 +03:00
|
|
|
}
|
|
|
|
});
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-09-21 11:01:52 +03:00
|
|
|
|
2016-11-30 16:43:15 +03:00
|
|
|
handleMultipleObjectChange = (value) => {
|
|
|
|
this.setState({
|
|
|
|
multipleObject: value
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2015-11-08 18:49:00 +03:00
|
|
|
handleSimpleChange = (value) => {
|
|
|
|
this.setState({simple: value});
|
|
|
|
};
|
2015-09-21 11:01:52 +03:00
|
|
|
|
2016-05-20 17:24:17 +03:00
|
|
|
handleSimpleShowAllChange = (value) => {
|
|
|
|
this.setState({simpleShowAll: value});
|
|
|
|
};
|
|
|
|
|
2015-11-08 18:49:00 +03:00
|
|
|
render () {
|
2015-09-21 11:01:52 +03:00
|
|
|
return (
|
|
|
|
<section>
|
2015-10-08 17:35:34 +03:00
|
|
|
<h5>Autocomplete</h5>
|
|
|
|
<p>You can have a multiple or simple autocomplete.</p>
|
2015-09-21 11:01:52 +03:00
|
|
|
|
|
|
|
<Autocomplete
|
2016-08-06 20:28:30 +03:00
|
|
|
allowCreate
|
2016-11-18 20:47:39 +03:00
|
|
|
keepFocusOnChange
|
2015-12-20 19:39:10 +03:00
|
|
|
label="Pick multiple elements..."
|
2016-11-30 16:43:15 +03:00
|
|
|
onChange={this.handleMultipleArrayChange}
|
|
|
|
source={this.state.countriesObject}
|
|
|
|
suggestionMatch="anywhere"
|
|
|
|
value={this.state.multipleArray}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Autocomplete
|
|
|
|
allowCreate
|
2016-11-30 18:05:52 +03:00
|
|
|
label="Pick multiple elements with object value..."
|
2016-11-30 16:43:15 +03:00
|
|
|
onChange={this.handleMultipleObjectChange}
|
|
|
|
showSelectedWhenNotInSource
|
2016-07-28 05:53:09 +03:00
|
|
|
source={this.state.countriesObject}
|
2016-06-15 20:16:11 +03:00
|
|
|
suggestionMatch="anywhere"
|
2016-11-30 16:43:15 +03:00
|
|
|
value={this.state.multipleObject}
|
2015-11-08 18:49:00 +03:00
|
|
|
/>
|
2015-09-21 11:01:52 +03:00
|
|
|
|
|
|
|
<Autocomplete
|
2016-03-25 03:31:36 +03:00
|
|
|
hint="Elements up to you..."
|
2016-08-06 20:28:30 +03:00
|
|
|
label="Choose a country"
|
2015-09-21 11:01:52 +03:00
|
|
|
multiple={false}
|
2015-11-08 18:49:00 +03:00
|
|
|
onChange={this.handleSimpleChange}
|
2016-07-28 05:53:09 +03:00
|
|
|
source={this.state.countriesArray}
|
2015-11-08 18:49:00 +03:00
|
|
|
value={this.state.simple}
|
2016-05-20 17:24:17 +03:00
|
|
|
/>
|
|
|
|
|
|
|
|
<Autocomplete
|
|
|
|
hint="Elements up to you..."
|
2016-08-06 20:28:30 +03:00
|
|
|
label="Choose a country (showing all suggestions)"
|
2016-05-20 17:24:17 +03:00
|
|
|
multiple={false}
|
|
|
|
onChange={this.handleSimpleShowAllChange}
|
2016-08-06 20:28:30 +03:00
|
|
|
showSuggestionsWhenValueIsSet
|
2016-07-28 05:53:09 +03:00
|
|
|
source={this.state.countriesArray}
|
2016-05-20 17:24:17 +03:00
|
|
|
value={this.state.simpleShowAll}
|
2015-11-08 18:49:00 +03:00
|
|
|
/>
|
2015-09-21 11:01:52 +03:00
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
2015-10-21 13:25:07 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
|
|
|
export default AutocompleteTest;
|