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

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 (
      <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)"
                // 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>
    );
  }

  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) {
    console.log(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;
      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: 20,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    width: "100%",
    textAlignVertical: "center",
    textAlign: "center"
  },
  item_text_click: {
    color: "rgba(59, 149, 243, 1)",
    fontSize: 20,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    width: "100%",
    textAlignVertical: "center",
    textAlign: "center"
  }
});