react-toolbox/spec/components/autocomplete.jsx

49 lines
1.2 KiB
React
Raw Normal View History

import React from 'react';
2015-09-21 11:01:52 +03:00
import Autocomplete from '../../components/autocomplete';
2015-11-08 18:49:00 +03:00
const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
2015-10-22 02:31:17 +03:00
class AutocompleteTest extends React.Component {
state = {
2015-11-08 18:49:00 +03:00
simple: 'Spain',
multiple: ['ES-es', 'TH-th']
};
2015-09-21 11:01:52 +03:00
2015-11-08 18:49:00 +03:00
handleMultipleChange = (value) => {
this.setState({multiple: value});
2015-10-22 02:31:17 +03:00
};
2015-09-21 11:01:52 +03:00
2015-11-08 18:49:00 +03:00
handleSimpleChange = (value) => {
this.setState({simple: value});
};
2015-09-21 11:01:52 +03:00
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
2015-11-08 18:49:00 +03:00
label="Choose countries"
onChange={this.handleMultipleChange}
placeholder="Pick multiple elements..."
source={countriesObject}
value={this.state.multiple}
/>
2015-09-21 11:01:52 +03:00
<Autocomplete
2015-11-08 18:49:00 +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}
placeholder="Elements up to you..."
source={countriesArray}
value={this.state.simple}
/>
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;