forked from JedWatson/react-select
/
States.js
89 lines (84 loc) · 3.04 KB
/
States.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';
const STATES = require('../data/states');
var StatesField = createClass({
displayName: 'StatesField',
propTypes: {
label: PropTypes.string,
searchable: PropTypes.bool,
},
getDefaultProps () {
return {
label: 'States:',
searchable: true,
};
},
getInitialState () {
return {
country: 'AU',
disabled: false,
searchable: this.props.searchable,
selectValue: 'new-south-wales',
clearable: true,
};
},
switchCountry (e) {
var newCountry = e.target.value;
console.log('Country changed to ' + newCountry);
this.setState({
country: newCountry,
selectValue: null,
});
},
updateValue (newValue) {
console.log('State changed to ' + newValue);
this.setState({
selectValue: newValue,
});
},
focusStateSelect () {
this.refs.stateSelect.focus();
},
toggleCheckbox (e) {
let newState = {};
newState[e.target.name] = e.target.checked;
this.setState(newState);
},
render () {
var options = STATES[this.state.country];
return (
<div className="section">
<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/States.js">(Source)</a></h3>
<Select ref="stateSelect" autoFocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
<div style={{ marginTop: 14 }}>
<button type="button" onClick={this.focusStateSelect}>Focus Select</button>
<label className="checkbox" style={{ marginLeft: 10 }}>
<input type="checkbox" className="checkbox-control" name="searchable" checked={this.state.searchable} onChange={this.toggleCheckbox}/>
<span className="checkbox-label">Searchable</span>
</label>
<label className="checkbox" style={{ marginLeft: 10 }}>
<input type="checkbox" className="checkbox-control" name="disabled" checked={this.state.disabled} onChange={this.toggleCheckbox}/>
<span className="checkbox-label">Disabled</span>
</label>
<label className="checkbox" style={{ marginLeft: 10 }}>
<input type="checkbox" className="checkbox-control" name="clearable" checked={this.state.clearable} onChange={this.toggleCheckbox}/>
<span className="checkbox-label">Clearable</span>
</label>
</div>
<div className="checkbox-list">
<label className="checkbox">
<input type="radio" className="checkbox-control" checked={this.state.country === 'AU'} value="AU" onChange={this.switchCountry}/>
<span className="checkbox-label">Australia</span>
</label>
<label className="checkbox">
<input type="radio" className="checkbox-control" checked={this.state.country === 'US'} value="US" onChange={this.switchCountry}/>
<span className="checkbox-label">United States</span>
</label>
</div>
</div>
);
}
});
module.exports = StatesField;