/**
 * 其中一点小小不同：
 * selector 跟 multiSelector 实现过程中有点区别，state.value 存的是索引，而 multiSelector 存的是 value 值
 */ import * as React from 'react' ; import AntPicker from '@ant-design/react-native/lib/picker' ; import { noop } from '../../utils' ; import { SelectorProps , SelectorState } from './PropsType' ; import { TouchableWithoutFeedback } from 'react-native' ; function convertToObj ( item ? , rangeKey = '' ) { if ( typeof item === 'object' ) { return { value : item [ rangeKey ] , label : item [ rangeKey ] } ; } else { return { value : item , label : item } ; } } export default class Selector extends React . Component < SelectorProps , SelectorState > { static defaultProps = { range : [ ] , value : 0 , } ; state : any = { pRange : [ ] , range : [ ] , value : 0 , pValue : '' , } ; dismissByOk = false ; static getDerivedStateFromProps ( nextProps , lastState ) { let ret = null ; if ( nextProps . range !== lastState . pRange ) { ret = { pRange : nextProps . range , range : ( nextProps . range || [ ] ) . map ( ( item ) => { return convertToObj ( item , nextProps . rangeKey ) ; } ) } ; } if ( nextProps . value !== lastState . pValue ) { ret = ret || { } ; ret . value = nextProps . value ; ret . pValue = nextProps . value ; } return ret ; } onChange = ( ) : void => { const { onChange = noop } = this . props ; const { value } = this . state ; onChange ( { detail : { value } } ) ; } ; onPickerChange = ( value ) : void => { const { range } = this . state ; let selectedIndex = 0 ; for ( let i = 0 ; i < range . length ; i ++ ) { if ( range [ i ] . value === value [ 0 ] ) { selectedIndex = i ; break ; } } this . setState ( { value : selectedIndex } ) ; } ; 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 { range , value , } = this . state ; const selected = range [ value ] ; return ( < AntPicker data = { range } value = { [ selected && selected . value ] } cols = { 1 } onChange = { this . onChange } onPickerChange = { this . onPickerChange } onOk = { this . onOk } onVisibleChange = { this . onVisibleChange } disabled = { disabled } > < TouchableWithoutFeedback > { children } < /TouchableWithoutFeedback> < /AntPicker>); } }