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";

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 (
      <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,
              backgroundColor: "rgba(0, 0, 0, 0.5)",
              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);
    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++;
      }
    }
    console.log(parseInt(date.getDate()));
    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"
  }
});