import * as React from 'react' ; import Picker from '../picker-view/Picker' ; import MultiPicker from '../picker-view/MultiPicker' ; import noop from '../_utils/noop' ; import treeFilter from '../_utils/arrayTreeFilter' ; import Cascade from './Cascade' ; import { PickerData } from '../picker-view' ; import PickerPopup from './PickerPopup' ; export interface PopupPickerProps { /**
     * 是否显示
     */ show ? : boolean ; /**
     * 关闭事件回调
     */ onCancel ? : ( ) => void ; /**
     * 确定事件回调
     */ onOk : ( v : any ) => void ; onPickerChange : ( v : any ) => void ; onVisibleChange : ( visible : boolean ) => void ; prefixCls ? : string ; pickerPrefixCls ? : string ; style ? : React . CSSProperties ; data : PickerData [ ] ; cascade ? : boolean ; onChange : ( v : any ) => void ; onLabelChange : ( v : any ) => void ; cols ? : number ; /**
     * 默认选中的数据
     */ defaultSelectedValue ? : any [ ] ; value : string [ ] | number [ ] ; format ? : ( value : any ) => void ; indicatorStyle ? : React . CSSProperties ; itemStyle ? : React . CSSProperties ; } export default class PopupPicker extends React . PureComponent < PopupPickerProps , any > { static defaultProps = { show : false , onCancel : noop , prefixCls : 'Yep-picker' , pickerPrefixCls : 'Yep-picker-col' , data : [ ] , cascade : true , } ; scrollValue : any ; getSel = ( v ) => { const value = this . scrollValue || v || [ ] ; console . log ( '---' + value ) ; let treeChildren ; const { data } = this . props ; if ( this . props . cascade ) { treeChildren = treeFilter ( data , ( c , level ) => { return c . value === value [ level ] ; } ) ; } else { treeChildren = value . map ( ( v , i ) => { return ( data [ i ] as any ) . filter ( ( d ) => d . value === v ) [ 0 ] ; } ) ; } return this . props . format ? this . props . format ( treeChildren . map ( v => { return v . label ; } ) ) : treeChildren . map ( v => { return v . label ; } ) ; } ; getPickerCol = ( ) => { const { data , pickerPrefixCls , itemStyle , indicatorStyle } = this . props ; return data . map ( ( col , index ) => { return ( < Picker key = { index } prefixCls = { pickerPrefixCls } style = { { flex : 1 } } itemStyle = { itemStyle } indicatorStyle = { indicatorStyle } > { col . map ( ( item ) => { return ( < Picker . Item key = { item . value } value = { item . value } > { item . label } < /Picker.Item>); } ) } < /Picker>); } ) ; } ; onOk = ( v ) => { if ( this . scrollValue !== undefined ) { v = this . scrollValue ; } if ( this . props . onChange ) { this . props . onChange ( v ) ; } if ( this . props . onLabelChange ) { this . props . onLabelChange ( this . getSel ( v ) ) ; } if ( this . props . onOk ) { this . props . onOk ( v ) ; } } ; setScrollValue = ( v ) => { this . scrollValue = v ; } ; setCascadeScrollValue = ( v ) => { if ( v && this . scrollValue ) { const length = this . scrollValue . length ; if ( length === v . length && this . scrollValue [ length - 1 ] === v [ length - 1 ] ) { return ; } } this . setScrollValue ( v ) ; } ; onPickerChange = ( v ) => { this . setScrollValue ( v ) ; if ( this . props . onPickerChange ) { this . props . onPickerChange ( v ) ; } } ; onVisibleChange = ( visible ) => { this . setScrollValue ( undefined ) ; if ( this . props . onVisibleChange ) { this . props . onVisibleChange ( visible ) ; } } ; render ( ) { const { show , onCancel , pickerPrefixCls , prefixCls , cascade , data , cols , itemStyle , indicatorStyle , defaultSelectedValue , ... restProps } = this . props ; const picker = cascade ? ( < Cascade prefixCls = { prefixCls } pickerPrefixCls = { pickerPrefixCls } data = { data } cols = { cols } onChange = { this . onPickerChange } onScrollChange = { this . setCascadeScrollValue } pickerItemStyle = { itemStyle } indicatorStyle = { indicatorStyle } defaultValue = { defaultSelectedValue } / > ) : ( < MultiPicker { ... restProps } selectedValue = { defaultSelectedValue } prefixCls = { pickerPrefixCls } onScrollChange = { this . setScrollValue } > { this . getPickerCol ( ) } < /MultiPicker>); return < PickerPopup onCancel = { onCancel } show = { show } onOk = { this . onOk } picker = { picker } / > ; } }