108 lines
3.1 KiB
CoffeeScript
108 lines
3.1 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: LocationStore.countries || {US: {name: 'United States', regions: []}}}
|
|
|
|
onLocationsChanged: (countries) ->
|
|
@setState({countries: countries})
|
|
|
|
onCountryChanged: (e) ->
|
|
val = $(e.target).val()
|
|
@changed(val, null, null)
|
|
@setState({selectedCountry: val, selectedRegion: null, selectedCity: null})
|
|
|
|
if val?
|
|
LocationActions.selectCountry(val)
|
|
|
|
onRegionChanged: (e) ->
|
|
val = $(e.target).val()
|
|
@changed(this.currentCountry(), val, null)
|
|
@setState({selectedRegion: val, selectedCity: null})
|
|
|
|
if val? && this.props.showCity
|
|
LocationActions.selectRegion(this.currentCountry(), val)
|
|
|
|
onCityChanged: (e) ->
|
|
val = $(e.target).val()
|
|
@changed(this.currentCountry(), this.currentRegion(), val)
|
|
@setState({selectedCity: val})
|
|
|
|
|
|
changed: (country, region, city) ->
|
|
if country == ''
|
|
country = null
|
|
|
|
if region == ''
|
|
region = null
|
|
|
|
if city == ''
|
|
city = null
|
|
|
|
@props.onItemChanged(country, region, city)
|
|
|
|
currentCity: () ->
|
|
this.state.selectedCity || this.props.selectedCity
|
|
|
|
currentCountry: () ->
|
|
this.state.selectedCountry || this.props.selectedCountry || 'US'
|
|
|
|
currentRegion: () ->
|
|
this.state.selectedRegion || this.props.selectedRegion
|
|
|
|
defaultText: () ->
|
|
if this.props.defaultText?
|
|
this.props.defaultText
|
|
else
|
|
'Any'
|
|
|
|
render: () ->
|
|
countries = [`<option key="" value="">{this.defaultText()}</option>`]
|
|
for countryId, countryInfo of @state.countries
|
|
countries.push(`<option key={countryId} value={countryId}>{countryInfo.name}</option>`)
|
|
|
|
|
|
country = @state.countries[this.currentCountry()]
|
|
|
|
regions = [`<option key="" value="">{this.defaultText()}</option>`]
|
|
|
|
cities = [`<option key="" value="">{this.defaultText()}</option>`]
|
|
|
|
|
|
if country? && country.regions
|
|
for region in country.regions
|
|
regions.push(`<option key={region.id} value={region.id}>{region.name}</option>`)
|
|
|
|
if this.currentRegion() == region.id && this.props.showCity
|
|
for city in region.cities
|
|
cities.push(`<option key={city} value={city}>{city}</option>`)
|
|
|
|
if !this.props.hideCountry
|
|
countryJsx = `<div><h3>Country:</h3>
|
|
<select name="countries" onChange={this.onCountryChanged} value={this.currentCountry()}>{countries}</select>
|
|
</div>`
|
|
|
|
disabled = regions.length == 1
|
|
if this.props.showCity
|
|
cityJsx = `<div><h3>City:</h3>
|
|
<select name="cities" disabled={cities.length == 1} onChange={this.onCityChanged} value={this.currentCity()}>{cities}</select>
|
|
</div>`
|
|
|
|
`<div className="SelectLocation">
|
|
{countryJsx}
|
|
<h3>State/Region:</h3>
|
|
<select name="regions" disabled={disabled} onChange={this.onRegionChanged}
|
|
value={this.currentRegion()}>{regions}</select>
|
|
{cityJsx}
|
|
</div>`
|
|
}) |