GeographicView.tsx 3.65 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import React, { Component } from 'react';
陈帅's avatar
陈帅 committed
2
import { Select, Spin } from 'antd';
陈帅's avatar
陈帅 committed
3

陈帅's avatar
陈帅 committed
4
import { Dispatch } from 'redux';
陈帅's avatar
陈帅 committed
5
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
6
import { CityType, ProvinceType } from '../data.d';
陈帅's avatar
陈帅 committed
7 8
import styles from './GeographicView.less';

陈帅's avatar
陈帅 committed
9 10
const { Option } = Select;

陈帅's avatar
陈帅 committed
11 12 13 14
interface SelectItem {
  label: string;
  key: string;
}
陈帅's avatar
陈帅 committed
15
const nullSelectItem: SelectItem = {
陈帅's avatar
陈帅 committed
16 17 18 19
  label: '',
  key: '',
};

陈帅's avatar
陈帅 committed
20
interface GeographicViewProps {
陈帅's avatar
陈帅 committed
21
  dispatch?: Dispatch<any>;
陈帅's avatar
陈帅 committed
22 23
  province?: ProvinceType[];
  city?: CityType[];
陈帅's avatar
陈帅 committed
24 25 26
  value?: {
    province: SelectItem;
    city: SelectItem;
陈帅's avatar
陈帅 committed
27
  };
陈帅's avatar
陈帅 committed
28 29 30 31 32 33 34 35 36 37
  loading?: boolean;
  onChange?: (value: { province: SelectItem; city: SelectItem }) => void;
}

@connect(
  ({
    BLOCK_NAME_CAMEL_CASE,
    loading,
  }: {
    BLOCK_NAME_CAMEL_CASE: {
陈帅's avatar
陈帅 committed
38 39
      province: ProvinceType[];
      city: CityType[];
陈帅's avatar
陈帅 committed
40 41 42 43 44 45 46 47 48
    };
    loading: any;
  }) => {
    const { province, city } = BLOCK_NAME_CAMEL_CASE;
    return {
      province,
      city,
      loading: loading.models.BLOCK_NAME_CAMEL_CASE,
    };
陈帅's avatar
陈帅 committed
49
  },
陈帅's avatar
陈帅 committed
50 51
)
class GeographicView extends Component<GeographicViewProps> {
陈帅's avatar
陈帅 committed
52
  componentDidMount = () => {
陈帅's avatar
陈帅 committed
53
    const { dispatch } = this.props;
陈帅's avatar
陈帅 committed
54
    if (dispatch) {
陈帅's avatar
陈帅 committed
55 56 57
      dispatch({
        type: 'BLOCK_NAME_CAMEL_CASE/fetchProvince',
      });
陈帅's avatar
陈帅 committed
58
    }
陈帅's avatar
陈帅 committed
59
  };
陈帅's avatar
陈帅 committed
60

陈帅's avatar
陈帅 committed
61
  componentDidUpdate(props: GeographicViewProps) {
陈帅's avatar
陈帅 committed
62 63 64
    const { dispatch, value } = this.props;

    if (!props.value && !!value && !!value.province) {
陈帅's avatar
陈帅 committed
65
      if (dispatch) {
陈帅's avatar
陈帅 committed
66 67 68 69
        dispatch({
          type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
          payload: value.province.key,
        });
陈帅's avatar
陈帅 committed
70
      }
jim's avatar
jim committed
71 72
    }
  }
陈帅's avatar
陈帅 committed
73

陈帅's avatar
陈帅 committed
74
  getProvinceOption() {
陈帅's avatar
陈帅 committed
75
    const { province } = this.props;
陈帅's avatar
陈帅 committed
76 77 78 79
    if (province) {
      return this.getOption(province);
    }
    return [];
陈帅's avatar
陈帅 committed
80
  }
陈帅's avatar
陈帅 committed
81

陈帅's avatar
陈帅 committed
82
  getCityOption = () => {
陈帅's avatar
陈帅 committed
83
    const { city } = this.props;
陈帅's avatar
陈帅 committed
84 85 86 87
    if (city) {
      return this.getOption(city);
    }
    return [];
陈帅's avatar
陈帅 committed
88
  };
陈帅's avatar
陈帅 committed
89

陈帅's avatar
陈帅 committed
90
  getOption = (list: CityType[] | ProvinceType[]) => {
陈帅's avatar
陈帅 committed
91 92 93 94 95 96 97
    if (!list || list.length < 1) {
      return (
        <Option key={0} value={0}>
          没有找到选项
        </Option>
      );
    }
陈帅's avatar
陈帅 committed
98 99 100
    return (list as CityType[]).map(item => (
      <Option key={item.key} value={item.key}>
        {item.label}
101 102
      </Option>
    ));
陈帅's avatar
陈帅 committed
103
  };
陈帅's avatar
陈帅 committed
104

陈帅's avatar
陈帅 committed
105
  selectProvinceItem = (item: SelectItem) => {
陈帅's avatar
陈帅 committed
106
    const { dispatch, onChange } = this.props;
陈帅's avatar
陈帅 committed
107

陈帅's avatar
陈帅 committed
108
    if (dispatch) {
陈帅's avatar
陈帅 committed
109 110 111 112
      dispatch({
        type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
        payload: item.key,
      });
陈帅's avatar
陈帅 committed
113 114
    }
    if (onChange) {
陈帅's avatar
陈帅 committed
115 116
      onChange({
        province: item,
陈帅's avatar
陈帅 committed
117
        city: nullSelectItem,
陈帅's avatar
陈帅 committed
118
      });
陈帅's avatar
陈帅 committed
119
    }
陈帅's avatar
陈帅 committed
120
  };
陈帅's avatar
陈帅 committed
121

陈帅's avatar
陈帅 committed
122
  selectCityItem = (item: SelectItem) => {
陈帅's avatar
陈帅 committed
123
    const { value, onChange } = this.props;
陈帅's avatar
陈帅 committed
124 125 126 127 128 129
    if (value && onChange) {
      onChange({
        province: value.province,
        city: item,
      });
    }
陈帅's avatar
陈帅 committed
130
  };
陈帅's avatar
陈帅 committed
131

陈帅's avatar
陈帅 committed
132 133 134 135
  conversionObject() {
    const { value } = this.props;
    if (!value) {
      return {
陈帅's avatar
陈帅 committed
136 137
        province: nullSelectItem,
        city: nullSelectItem,
陈帅's avatar
陈帅 committed
138 139 140 141
      };
    }
    const { province, city } = value;
    return {
陈帅's avatar
陈帅 committed
142 143
      province: province || nullSelectItem,
      city: city || nullSelectItem,
陈帅's avatar
陈帅 committed
144 145
    };
  }
陈帅's avatar
陈帅 committed
146

陈帅's avatar
陈帅 committed
147 148
  render() {
    const { province, city } = this.conversionObject();
149
    const { loading } = this.props;
陈帅's avatar
陈帅 committed
150
    return (
151
      <Spin spinning={loading} wrapperClassName={styles.row}>
陈帅's avatar
陈帅 committed
152
        <Select
153
          className={styles.item}
陈帅's avatar
陈帅 committed
154 155 156 157 158 159 160 161
          value={province}
          labelInValue
          showSearch
          onSelect={this.selectProvinceItem}
        >
          {this.getProvinceOption()}
        </Select>
        <Select
162
          className={styles.item}
陈帅's avatar
陈帅 committed
163 164 165 166 167 168 169 170 171 172 173
          value={city}
          labelInValue
          showSearch
          onSelect={this.selectCityItem}
        >
          {this.getCityOption()}
        </Select>
      </Spin>
    );
  }
}
lijiehua's avatar
lijiehua committed
174 175

export default GeographicView;