/** * Created on 2017/2/27. */ import React,{ PropTypes } from 'react';
import {
View,Text,Modal,Dimensions,Picker,StyleSheet,TouchableOpacity,Platform,} from 'react-native';
import BaseComponent from './BaseComponent';
import HttpHelper from '../Utils/HttpHelper';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const isIos = Platform.OS === 'ios';
export default class WheelPicker extends BaseComponent {
constructor(props) {
super(props);
this._bind(
'open','close','_handleProvinceChange','_handleCityChange','_handleSubmit','_handleCancel' );
this.state = {
isVisible: this.props.isVisible,provinces: [],citys: [],selectedProvince: this.props.selectedProvince,selectedCity: this.props.selectedCity,selectedProvinceName: this.props.selectedProvinceName,selectedCityName: this.props.selectedCityName,transparent: true,};
}
_filterAllProvinces() {
return this._regionAllData.map((item) => {
return item;
});
}
_filterCitys(provinceId) {
const provinceData = this._regionAllData.find(item => item.area.id == provinceId);
return provinceData.ports;
}
//_regionAllData 为了提高数据@R_403_211@，该变量在应用启动时异步已经获取，并放入global中存入，另外_regionAllData需要按照固定的json格式返回
{"area":{"id":10,"name":"东北"},"ports":[{"id":94,"name":"鲅鱼圈","areaId":10},{"id":84,"name":"丹东","areaId":10}
}]
}
componentDidMount() {
let parentThis = this;
parentThis._regionAllData = global.root.regionAllData;
const provinces = parentThis._filterAllProvinces();
if(!parentThis.state.selectedProvince) {
parentThis.state.selectedProvince = provinces[@H_403_398@0].area.id;
parentThis.state.selectedProvinceName = provinces[@H_403_398@0].area.name;
}
const citys = parentThis._filterCitys(parentThis.state.selectedProvince);
if(!parentThis.state.selectedCity) {
parentThis.state.selectedCity = citys[@H_403_398@0].id;
parentThis.state.selectedCityName = citys[@H_403_398@0].name;
}
parentThis.setState({
provinces,
citys,
});
global.root.requestCity();
}
componentWillReceiveProps(props) {
if (props.isVisible !== this.props.isVisible) {
if (props.isVisible) {
this.open();
} else {
this.close();
}
}else if((props.isVisible && this.props.isVisible)==true){
this.setState({isVisible: props.isVisible});
}
}
close() {
this.setState({ isVisible: false });
}
open() {
this.setState({ isVisible: true });
}
_handleProvinceChange(provinceId,position) {
const cities = this._filterCitys(provinceId);
this.setState({
selectedProvince: provinceId,
selectedProvinceName:this.state.provinces[position].area.name,
selectedCity: cities[@H_403_398@0].id,
selectedCityName:cities[@H_403_398@0].name,
citys:cities
});
}
_handleCityChange(city,position) {
this.setState({
selectedCity: city,
selectedCityName:this.state.citys[position].name
});
}
_handleCancel() {
if (this.props.onCancel) {
this.props.onCancel();
}
}
_handleSubmit() {
if (this.props.onSubmit) {
this.props.onSubmit({
areaId: this.state.selectedProvince,
areaName:this.state.selectedProvinceName,
portId: this.state.selectedCity,
portName:this.state.selectedCityName
});
}
}
renderPicker() {
const { navBtnColor } = this.props;
return (
<View style={styles.overlayStyle}>
<View style={[styles.pickerContainer]}>
<View style={styles.navWrap}>
<TouchableOpacity style={[styles.navBtn,{ borderColor: navBtnColor }]}
activeOpacity={@H_403_398@0.85} onPress={this._handleCancel} >
<Text style={[styles.text,{ color: navBtnColor }]}>取消</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.navBtn,{ backgroundColor: navBtnColor,borderColor: navBtnColor }]}
activeOpacity={@H_403_398@0.85} onPress={this._handleSubmit} >
<Text style={[styles.text,{ color: 'white' }]}>确认</Text>
</TouchableOpacity>
</View>
<View style={styles.pickerWrap}>
<Picker style={styles.pickerItem} onValueChange={this._handleProvinceChange}
selectedValue={this.state.selectedProvince} >
{this.state.provinces.map((province,index) => {
return (
<Picker.Item value={province.area.id+''} label={province.area.name} key={index}/>
); })}
</Picker>
<Picker style={styles.pickerItem} onValueChange={this._handleCityChange}
selectedValue={this.state.selectedCity} >
{this.state.citys.map((city,index) => {
return (
<Picker.Item value={city.id+''} label={city.name} key={index}/>
);
})}
</Picker>
</View>
</View>
</View >
);
}
render() {
const modal = (
<Modal transparent={this.state.transparent} visible={this.state.isVisible}
onRequestClose={this.close}
animationType={this.props.animationType} >
{this.renderPicker()}
</Modal>
);
return (
<View> {modal}
<TouchableOpacity onPress={this.open}>
{this.props.children}
</TouchableOpacity>
</View>
);
}
}
WheelPicker.propTypes = {
isVisible: PropTypes.bool,
selectedProvince: PropTypes.string,
selectedCity: PropTypes.string,
navBtnColor: PropTypes.string,
animationType: PropTypes.string,
transparent: PropTypes.bool,
onSubmit: PropTypes.func,
onCancel: PropTypes.func,
androidPickerHeight: PropTypes.number,
};
WheelPicker.defaultProps = {
isVisible: false,
selectedProvince: '',
selectedCity: '',
navBtnColor: 'blue',
animationType: 'slide',
transparent: true,
onSubmit: () => {},
onCancel: () => {},
androidPickerHeight: @H_403_398@50
};
const styles = StyleSheet.create({
overlayStyle: {
flex: @H_403_398@1,
width: windowWidth,
height: windowHeight,
left: @H_403_398@0,
position: 'absolute',
backgroundColor: 'rgba(0,0.65)',
},
pickerContainer: {
flex: @H_403_398@1,
marginTop: windowHeight * @H_403_398@3 / @H_403_398@5,
backgroundColor: '#FFF',
navWrap: {
paddingHorizontal: @H_403_398@15,
paddingVertical: @H_403_398@8,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
borderBottomWidth: @H_403_398@1,
borderTopWidth: @H_403_398@1,
borderColor: '#ccc'
},
navBtn: {
paddingVertical: @H_403_398@5,
paddingHorizontal: @H_403_398@20,
borderWidth: @H_403_398@1,
borderRadius: @H_403_398@4@H_403_398@
},
text: {
fontSize: @H_403_398@18,
},
pickerWrap: {
flexDirection: 'row'
},
pickerItem: { flex: @H_403_398@1}});
