efunbox-mobile-8/pages/components/RegionModal.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	ImageBackground,
	TextInput,
	Button,
	StatusBar,
	Modal,
	ScrollView,
	TouchableHighlight,
	DeviceEventEmitter,
	findNodeHandle,
	UIManager
} from 'react-native';

import CitysData from '../../data/citys.json';
import ModalView from '../utils/ModalUtil';

type Props = {};
export default class RegionModal extends Component<Props> {
	state = {
		modalVisible: false,
		cityjson: JSON.parse(JSON.stringify(CitysData.provinces)),
		provinces: CitysData.provinces[0].provinces,
		provinces_views: [],
		provinces_views_index: -1,
		city_data: CitysData.provinces[0].citys,
		city_views: [],
		city_views_index: -1,
		click_provinces_name: '',
		click_city_name: '',
		text_height: -1
	};

	render() {
		return (
			<ModalView
				close={() => {
					this.setState({ modalVisible: false });
				}}
				visible={this.state.modalVisible}
				customerlayout={{ flex: 1, justifyContent: 'flex-end' }}
				contentView={this.getView}
			/>
		);
	}

	getView = () => {
		return (
			<Modal
				animationType="slide"
				transparent={true}
				visible={this.state.modalVisible}
				onRequestClose={() => {
					this.setState({ modalVisible: false });
				}}
			>
				<View
					style={{
						flex: 1,
						flexDirection: 'column'
					}}
				>
					<TouchableOpacity
						style={{
							flex: 3.2,
							width: '100%'
						}}
						activeOpacity={1}
						onPress={() =>
							this.setState({
								modalVisible: false
							})}
					/>
					<View
						style={{
							flex: 2,
							backgroundColor: 'white',
							flexDirection: 'column',
							justifyContent: 'center',
							alignItems: 'center',
							width: '100%'
						}}
					>
						<View
							style={{
								flex: 1,
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'center'
							}}
						>
							<TouchableOpacity
								style={{
									flex: 1
								}}
								activeOpacity={1}
								onPress={() => this.cancel()}
							>
								<View
									style={{
										flex: 1,
										alignItems: 'center',
										justifyContent: 'center'
									}}
								>
									<Text
										style={{
											fontSize: 20,
											color: 'rgba(59, 59, 59, 1)',
											textAlignVertical: 'center'
										}}
									>
										取消
									</Text>
								</View>
							</TouchableOpacity>
							<View style={{ flex: 3.5 }} />
							<TouchableOpacity
								style={{
									flex: 1
								}}
								activeOpacity={1}
								onPress={() => this.commit()}
							>
								<View
									style={{
										flex: 1,
										alignItems: 'center',
										justifyContent: 'center'
									}}
								>
									<Text
										style={{
											fontSize: 20,
											color: 'rgba(59, 59, 59, 1)',
											textAlignVertical: 'center'
										}}
									>
										完成
									</Text>
								</View>
							</TouchableOpacity>
						</View>
						<View
							style={{
								flex: 0.05,
								width: '90%',
								backgroundColor: 'rgba(246, 247, 248, 1)'
								// backgroundColor: "red"
							}}
						/>
						<View
							style={{
								flex: 5,
								flexDirection: 'row'
							}}
						>
							<View
								style={{
									flex: 1
								}}
							>
								<ScrollView
									style={{
										flex: 1
									}}
									ref={(view) => (this.provinces_scroll = view)}
									onLayout={() => this.provinces_onlayout()}
									showsVerticalScrollIndicator={false}
								>
									{this.scroll_item()}
								</ScrollView>
							</View>
							<View
								style={{
									flex: 1
								}}
							>
								<ScrollView
									ref={(view) => (this.city_scroll = view)}
									onLayout={() => this.city_onlayout()}
									style={{
										flex: 1
									}}
									showsVerticalScrollIndicator={false}
								>
									{this.scroll_city_item(this.state.city_data)}
								</ScrollView>
							</View>
						</View>
					</View>
				</View>
			</Modal>
		);
	};
	componentWillMount() {
		for (var i = 0; i < this.state.cityjson.length; i++) {
			if (this.props.provinceName === CitysData.provinces[i].provinceName) {
				this.state.provinces_views_index = i;
				this.state.click_provinces_name = this.props.provinceName;
				this.state.city_data = CitysData.provinces[i].citys;
				for (var j = 0; j < this.state.city_data.length; j++) {
					if (this.props.citys === this.state.city_data[j].citysName) {
						this.state.city_views_index = j;
						this.state.click_city_name = this.props.citys;
					}
				}
			}
		}
	}
	provinces_onlayout() {
		if (this.state.provinces_views_index != -1) {
			this.provinces_scroll.scrollTo({
				x: 0,
				y: (this.state.text_height + 20) * this.state.provinces_views_index,
				duration: 500
			});
		}
	}

	city_onlayout() {
		if (this.state.city_views_index != -1) {
			this.city_scroll.scrollTo({
				x: 0,
				y: (this.state.text_height + 20) * this.state.city_views_index,
				duration: 500
			});
		}
	}
	commit() {
		if (this.state.provinces_views_index == -1 || this.state.city_views_index == -1) {
			alert('请选择完整地区');
		} else {
			this.props.cityscommit(this.state.click_provinces_name, this.state.click_city_name);
			this.setModalVisible(false);
		}
	}

	cancel() {
		this.setModalVisible(false);
	}

	setModalVisible(visible) {
		this.setState({
			modalVisible: visible
		});
	}

	scroll_item() {
		// console.log(this.state.cityjson);
		for (var i = 0; i < this.state.cityjson.length; i++) {
			let index = i;
			let textstyle = null;
			if (this.state.provinces_views_index == i) {
				textstyle = styles.item_text_click;
			} else {
				textstyle = styles.item_text;
			}
			this.state.provinces_views[i] = (
				<Text
					style={textstyle}
					key={i}
					onPress={() => this.get_city(index)}
					onLayout={(event) => this.onLayout(event)}
				>
					{CitysData.provinces[i].provinceName}
				</Text>
			);
		}
		return this.state.provinces_views;
	}
	onLayout = (event) => {
		if (this.state.text_height == -1) {
			this.setState({
				text_height: event.nativeEvent.layout.height
			});
		} else {
		}
	};

	get_city(index) {
		this.setState({
			city_data: CitysData.provinces[index].citys,
			text_color: 'blue',
			provinces_views_index: index,
			city_views_index: -1,
			click_provinces_name: CitysData.provinces[index].provinceName,
			click_city_name: ''
		});

		this.city_scroll.scrollTo({
			x: 0,
			y: 0,
			duration: 100
		});
		// this.forceUpdate();
	}

	scroll_city_item(citys) {
		this.state.city_views = [];
		for (var i = 0; i < citys.length; i++) {
			let index = i;
			// console.log("this.state.city_views_index:" + this.state.city_views_index);
			if (this.state.city_views_index == i) {
				textstyle = styles.item_text_click;
			} else {
				textstyle = styles.item_text;
			}
			this.state.city_views[i] = (
				<Text style={textstyle} key={i} onPress={() => this.click_citys(index)}>
					{citys[i].citysName}
				</Text>
			);
		}
		return this.state.city_views;
	}

	click_citys(index) {
		this.setState({
			city_views_index: index,
			click_city_name: this.state.city_data[index].citysName
		});
	}
}
const styles = StyleSheet.create({
	item_text: {
		color: 'rgba(77, 77, 77, 1)',
		fontSize: 18,
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 20,
		width: '100%',
		textAlignVertical: 'center',
		textAlign: 'center'
	},
	item_text_click: {
		color: 'rgba(59, 149, 243, 1)',
		fontSize: 18,
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 20,
		width: '100%',
		textAlignVertical: 'center',
		textAlign: 'center'
	}
});