forked from JedWatson/react-select
/
Creatable.js
69 lines (67 loc) · 1.73 KB
/
Creatable.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';
var CreatableDemo = createClass({
displayName: 'CreatableDemo',
propTypes: {
hint: PropTypes.string,
label: PropTypes.string
},
getInitialState () {
return {
multi: true,
multiValue: [],
options: [
{ value: 'R', label: 'Red' },
{ value: 'G', label: 'Green' },
{ value: 'B', label: 'Blue' }
],
value: undefined
};
},
handleOnChange (value) {
const { multi } = this.state;
if (multi) {
this.setState({ multiValue: value });
} else {
this.setState({ value });
}
},
render () {
const { multi, multiValue, options, value } = this.state;
return (
<div className="section">
<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/Creatable.js">(Source)</a></h3>
<Select.Creatable
multi={multi}
options={options}
onChange={this.handleOnChange}
value={multi ? multiValue : value}
/>
<div className="hint">{this.props.hint}</div>
<div className="checkbox-list">
<label className="checkbox">
<input
type="radio"
className="checkbox-control"
checked={multi}
onChange={() => this.setState({ multi: true })}
/>
<span className="checkbox-label">Multiselect</span>
</label>
<label className="checkbox">
<input
type="radio"
className="checkbox-control"
checked={!multi}
onChange={() => this.setState({ multi: false })}
/>
<span className="checkbox-label">Single Value</span>
</label>
</div>
</div>
);
}
});
module.exports = CreatableDemo;