jam-cloud/web/app/assets/javascripts/react-components/SelectLocation.js.jsx.coffee

62 lines
1.8 KiB
CoffeeScript

context = window
rest = window.JK.Rest()
logger = context.JK.logger
@SelectLocation = React.createClass({
mixins: [Reflux.listenTo(@LocationStore,"onLocationsChanged")]
propTypes: {
onItemChanged: React.PropTypes.func.isRequired
}
getInitialState:() ->
{selectedCountry: null, countries:{US: {name: 'United States', region: null}}}
onLocationsChanged: (countries) ->
@setState({countries: countries})
onCountryChanged: (e) ->
val = $(e.target).val()
@changed(val, null)
@setState({selectedCountry: val, selectedRegion: null })
if val?
LocationActions.selectCountry(val)
onRegionChanged: (e) ->
val = $(e.target).val()
@changed(@state.selectedCountry, val)
@setState({selectedRegion: val })
changed: (country, region) ->
if country == ''
country = null
if region == ''
region = null
@props.onItemChanged(country, region)
render: () ->
countries = [`<option key="" value="">Any</option>`]
for countryId, countryInfo of @state.countries
countries.push(`<option key={countryId} value={countryId}>{countryInfo.name}</option>`)
country = @state.countries[@state.selectedCountry]
regions = [`<option key="" value="">Any</option>`]
if country? && country.regions
for region in country.regions
regions.push(`<option key={region.id} value={region.id}>{region.name}</option>`)
disabled = regions.length == 1
`<div className="SelectLocation">
<h3>Country:</h3>
<select name="countries" onChange={this.onCountryChanged} value={this.state.selectedCountry}>{countries}</select>
<h3>State/Region:</h3>
<select name="regions" disabled={disabled} onChange={this.onRegionChanged} value={this.state.selectedRegion}>{regions}</select>
</div>`
})