import React, { Component } from 'react'; import { Select, Spin } from 'antd'; import { Dispatch } from 'redux'; import { connect } from 'dva'; import { CityType, ProvinceType } from '../data.d'; import styles from './GeographicView.less'; const { Option } = Select; interface SelectItem { label: string; key: string; } const nullSelectItem: SelectItem = { label: '', key: '', }; interface GeographicViewProps { dispatch?: Dispatch; province?: ProvinceType[]; city?: CityType[]; value?: { province: SelectItem; city: SelectItem; }; loading?: boolean; onChange?: (value: { province: SelectItem; city: SelectItem }) => void; } @connect( ({ BLOCK_NAME_CAMEL_CASE, loading, }: { BLOCK_NAME_CAMEL_CASE: { province: ProvinceType[]; city: CityType[]; }; loading: any; }) => { const { province, city } = BLOCK_NAME_CAMEL_CASE; return { province, city, loading: loading.models.BLOCK_NAME_CAMEL_CASE, }; }, ) class GeographicView extends Component { componentDidMount = () => { const { dispatch } = this.props; if (dispatch) { dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/fetchProvince', }); } }; componentDidUpdate(props: GeographicViewProps) { const { dispatch, value } = this.props; if (!props.value && !!value && !!value.province) { if (dispatch) { dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/fetchCity', payload: value.province.key, }); } } } getProvinceOption() { const { province } = this.props; if (province) { return this.getOption(province); } return []; } getCityOption = () => { const { city } = this.props; if (city) { return this.getOption(city); } return []; }; getOption = (list: CityType[] | ProvinceType[]) => { if (!list || list.length < 1) { return ( ); } return (list as CityType[]).map(item => ( )); }; selectProvinceItem = (item: SelectItem) => { const { dispatch, onChange } = this.props; if (dispatch) { dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/fetchCity', payload: item.key, }); } if (onChange) { onChange({ province: item, city: nullSelectItem, }); } }; selectCityItem = (item: SelectItem) => { const { value, onChange } = this.props; if (value && onChange) { onChange({ province: value.province, city: item, }); } }; conversionObject() { const { value } = this.props; if (!value) { return { province: nullSelectItem, city: nullSelectItem, }; } const { province, city } = value; return { province: province || nullSelectItem, city: city || nullSelectItem, }; } render() { const { province, city } = this.conversionObject(); const { loading } = this.props; return ( ); } } export default GeographicView;