import * as React from 'react' ; import AntPicker from '@ant-design/react-native/lib/picker' ; import { PickerData } from '@ant-design/react-native/lib/picker/PropsType' ; import { regionData } from './regionData' ; import { noop } from '../../utils' ; import { RegionProps , RegionState , RegionObj } from './PropsType' ; import { TouchableWithoutFeedback } from 'react-native' ; function formateRegionData ( clObj = [ ] , customItem ? , depth = 2 ) { const l = depth ; const obj = [ ] ; if ( customItem ) { const objClone = { value : customItem , label : customItem } ; const panding = { ... objClone } ; let loop = panding ; while ( depth -- > 0 ) { loop . children = [ { ... objClone } ] ; loop = loop . children [ 0 ] ; } obj . push ( panding ) ; } for ( let i = 0 ; i < clObj . length ; i ++ ) { const region = { value : clObj [ i ] . value , label : clObj [ i ] . value , } ; if ( clObj [ i ] . children ) { region . children = formateRegionData ( clObj [ i ] . children , customItem , l - 1 ) ; } obj . push ( region ) ; } return obj ; } export default class RegionSelector extends React . Component < RegionProps , RegionState > { constructor ( props ) { super ( props ) ; this . regionData = formateRegionData ( props . regionData || regionData , props . customItem ) ; } static defaultProps = { value : [ ] , } ; static getDerivedStateFromProps ( nextProps , lastState ) { if ( nextProps . value !== lastState . pValue ) { return { value : nextProps . value , pValue : nextProps . value } ; } return null ; } state = { value : [ ] , pValue : [ ] } ; dismissByOk = false ; regionData : PickerData [ ] ; onChange = ( value ) : void => { const { onChange = noop } = this . props ; let tmp = this . props . regionData || regionData ; const postcode = [ ] ; const code = value . map ( ( item ) => { for ( let i = 0 ; i < tmp . length ; i ++ ) { if ( tmp [ i ] . value === item ) { const code = tmp [ i ] . code ; postcode . push ( tmp [ i ] . postcode ) ; tmp = tmp [ i ] . children || [ ] ; return code ; } } } ) . filter ( code => ! ! code ) ; const detail = { value , code } ; if ( postcode [ 2 ] ) detail . postcode = postcode [ 2 ] ; onChange ( { detail } ) ; } ; onPickerChange = ( value ) : void => { this . setState ( { value } ) ; } ; onOk = ( ) : void => { this . dismissByOk = true ; } ; onVisibleChange = ( visible ) : void => { if ( ! visible && ! this . dismissByOk ) { const { onCancel = noop } = this . props ; onCancel ( ) ; } this . dismissByOk = false ; } ; render ( ) { const { children , disabled , } = this . props ; const { value , } = this . state ; return ( < AntPicker data = { this . regionData } value = { value } onChange = { this . onChange } onPickerChange = { this . onPickerChange } onOk = { this . onOk } onVisibleChange = { this . onVisibleChange } disabled = { disabled } > < TouchableWithoutFeedback > { children } < /TouchableWithoutFeedback> < /AntPicker>); } }