efunbox-mobile-8/pages/components/BirthdayModal.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 ModalView from '../utils/ModalUtil';

type Props = {};
export default class BirthdayModal extends Component<Props> {
	state = {
		text_height: -1,
		modalVisible: false,
		year_type: false, //true为闰年，false为平年
		year_array_views: [],
		year_array: [],
		year_array_views_index: -1,
		month_array_views: [],
		month_array_views_indexs: -1,
		month_array: [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' ],
		day_array: [
			'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'
		],
		day_array_views: [],
		day_array_views_index: -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)'
							}}
						/>
						<View
							style={{
								flex: 5,
								flexDirection: 'row'
							}}
						>
							<View
								style={{
									flex: 1
								}}
							>
								<ScrollView
									style={{
										flex: 1
									}}
									ref={(view) => (this.year_scroll = view)}
									onLayout={() => this.year_onlayout()}
									showsVerticalScrollIndicator={false}
								>
									{this.create_year_item()}
								</ScrollView>
							</View>
							<View
								style={{
									flex: 1
								}}
							>
								<ScrollView
									ref={(view) => (this.month_scroll = view)}
									onLayout={() => this.month_onlayout()}
									style={{
										flex: 1
									}}
									showsVerticalScrollIndicator={false}
								>
									{this.create_month_item()}
								</ScrollView>
							</View>
							<View
								style={{
									flex: 1
								}}
							>
								<ScrollView
									ref={(view) => (this.day_scroll = view)}
									onLayout={() => this.day__onlayout()}
									style={{
										flex: 1
									}}
									showsVerticalScrollIndicator={false}
								>
									{this.create_day_item()}
								</ScrollView>
							</View>
						</View>
					</View>
				</View>
			</Modal>
		);
	};

	componentWillMount() {
		var date = new Date();
		var year = parseInt(this.props.year);
		console.log('========BirthdayModal.js---componentWillMount============================');
		console.log(year);
		if (this.state.year_array.length == 0) {
			let position = 0;
			for (let index = parseInt(year - 50); index < parseInt(year + 10); index++) {
				if (parseInt(year) == index) {
					this.setState({
						year_array_views_index: position
					});
				}

				this.state.year_array.push(index);
				position++;
			}
		}
		this.setState({
			month_array_views_indexs: parseInt(this.props.month - 1),
			day_array_views_index: parseInt(this.props.day - 1)
		});

		// var hour = date.getHours().toString();
		// var minute = date.getMinutes().toString();
	}

	year_onlayout() {
		if (this.state.year_array_views_index != -1) {
			this.year_scroll.scrollTo({
				x: 0,
				y: (this.state.text_height + 20) * this.state.year_array_views_index,
				duration: 500
			});
		}
	}

	month_onlayout() {
		if (this.state.month_array_views_indexs != -1) {
			this.month_scroll.scrollTo({
				x: 0,
				y: (this.state.text_height + 20) * this.state.month_array_views_indexs,
				duration: 500
			});
		}
	}

	day__onlayout() {
		if (this.state.day_array_views_index != -1) {
			this.day_scroll.scrollTo({
				x: 0,
				y: (this.state.text_height + 20) * this.state.day_array_views_index,
				duration: 500
			});
		}
	}

	create_year_item() {
		this.state.year_array_views = [];
		for (var i = 0; i < this.state.year_array.length; i++) {
			let index = i;
			let textstyle = null;
			if (this.state.year_array_views_index == i) {
				textstyle = styles.item_text_click;
			} else {
				textstyle = styles.item_text;
			}
			this.state.year_array_views.push(
				<Text
					style={textstyle}
					key={i}
					onPress={() => this.click_year_item(index)}
					onLayout={(event) => this.text_onLayout(event)}
				>
					{this.state.year_array[i]}年
				</Text>
			);
		}
		return this.state.year_array_views;
	}

	click_year_item(index) {
		this.setState({
			year_array_views_index: index,
			year_type: this.getRunYear(this.state.year_array[index])
		});
	}

	create_month_item() {
		this.state.month_array_views = [];
		for (var i = 0; i < this.state.month_array.length; i++) {
			let index = i;
			let textstyle = null;
			if (this.state.month_array_views_indexs == i) {
				textstyle = styles.item_text_click;
			} else {
				textstyle = styles.item_text;
			}
			this.state.month_array_views.push(
				<Text style={textstyle} key={i} onPress={() => this.click_month_item(index)}>
					{this.state.month_array[i]}月
				</Text>
			);
		}
		return this.state.month_array_views;
	}

	click_month_item(index) {
		this.setState({
			month_array_views_indexs: index
		});
	}

	create_day_item() {
		this.state.day_array_views = [];
		var forNum = 0;
		//获取月份
		var month_index = this.state.month_array_views_indexs;
		switch (month_index + 1) {
			case 1:
			case 3:
			case 5:
			case 7:
			case 8:
			case 10:
			case 12:
				//31天
				forNum = 31;
				break;
			case 4:
			case 6:
			case 9:
			case 11:
				//30天
				forNum = 30;
				break;
			case 2:
				//2月判断平年闰年
				if (this.getRunYear(this.state.year_array[this.state.year_array_views_index])) {
					//闰年2月29
					forNum = 29;
				} else {
					//平年2月28
					forNum = 28;
				}
				break;
		}

		for (var i = 0; i < forNum; i++) {
			//console.log(i);
			let index = i;
			let textstyle = null;
			if (this.state.day_array_views_index == i) {
				textstyle = styles.item_text_click;
			} else {
				textstyle = styles.item_text;
			}
			this.state.day_array_views.push(
				<Text style={textstyle} key={i} onPress={() => this.click_day_item(index)}>
					{this.state.day_array[i]}日
				</Text>
			);
		}

		return this.state.day_array_views;
	}
	click_day_item(index) {
		this.setState({
			day_array_views_index: index
		});
	}

	text_onLayout = (event) => {
		if (this.state.text_height == -1) {
			this.setState({
				text_height: event.nativeEvent.layout.height
			});
		} else {
		}
	};

	commit() {
		if (
			this.state.year_array_views_index == -1 ||
			this.state.month_array_views_indexs == -1 ||
			this.state.day_array_views_index == -1
		) {
			alert('请选择完整日期');
		} else {
			var year = this.state.year_array[this.state.year_array_views_index];

			var month = this.state.month_array[this.state.month_array_views_indexs];

			var day = this.state.day_array[this.state.day_array_views_index];

			this.props.birthdaycommit(year, month, day);
			this.setModalVisible(false);
		}
	}

	cancel() {
		this.setModalVisible(false);
		// alert(this.getmyDate());
	}

	setModalVisible(visible) {
		this.setState({
			modalVisible: visible
		});
	}
	getmyDate() {
		var date = new Date();
		var year = date.getFullYear().toString();
		var month = (date.getMonth() + 1).toString();
		var day = date.getDate().toString();
		var hour = date.getHours().toString();
		var minute = date.getMinutes().toString();

		return year + '年' + month + '月' + day + '日' + ' ' + hour + ':' + minute;
	}

	getRunYear(year) {
		if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
			//闰年2月29
			// console.log("闰年");
			return true;
		} else {
			//平年2月28
			// console.log("平年");
			return false;
		}
	}
}
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'
	}
});