yylib-quick-mobile/dist/yylib/picker/YYPicker.js

yylib-quick-mobile

/**
 * Created by hezx on 2017/8/24.
 */
import React, {Component} from 'react';
import {List, Picker} from 'antd-mobile';
import YYIcon from '../icon/YYIcon';
import classnames from 'classnames';
const Item = List.Item;
import {isFunction} from '../../utils/FunctionUtil';
import './YYPicker.less'

class YYPicker extends Component {
    state = {
        visible: false
    }

    clearDate = () => {
        //设值到fieldStore
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: null
        }
        this.props.form.setFields(fields);
        this.setState({
            visible: false
        })
    }

    onChange = (value) => {
        //设值到fieldStore
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: value
        }
        this.props.form.setFields(fields);

        if (isFunction(this.props.onChange)) this.props.onChange(value);
    }

    onOk = (value) => {
        if (isFunction(this.props.onOk)){
            this.setState({
                visible: false
            })
            this.props.onOk(value);
        }else{
            this.setState({
                visible: false
            })
        }
    }

    onDismiss = (value) => {
        if (isFunction(this.props.onDismiss)){
            this.props.onDismiss(value);
        }else{
            this.setState({
                visible: false
            })
        }
    }

    validateCallBack = (rule, value, callback) => {
        if (isFunction(this.props.validateCallBack)) {
            this.props.validateCallBack(rule, value, callback);
            callback();
        } else {
            callback();
        }
    }
    pickerChange = (value)=>{
        if (isFunction(this.props.onPickerChange)){
            this.props.onPickerChange(value);
        }
    }

    render() {
        const {label, field, data, required, errorMsg, disabled, extra, visible,
            trigger, form, value, cols,cascade,arrow,style,showIcon,icon,iconColor,wrap,...restProps} = this.props;
        let getFieldProps = form ? form.getFieldProps : null;
        let labelClassName  = required?classnames('yy-label-required'):classnames('');
        let wrapClz = classnames('yy-picker',(!visible&&'hidden'), this.props.className);
        return (
            <div onClick={() => disabled ? null : this.setState({visible: true})} className={wrapClz}>
                <Picker {...restProps}
                        style={Object.assign({},style,{display: visible ? '' : 'none'})} data={data}
                        extra={extra}
                        title={<a style={{color: '#108ee9'}} onClick={this.clearDate}>清除</a>}
                        cols={cols}
                        visible={this.state.visible}
                        disabled={disabled}
                        cascade={cascade}
                        onPickerChange={this.pickerChange}
                        onOk={this.onOk}
                        onDismiss={this.onDismiss}
                        {...isFunction(getFieldProps) ? getFieldProps(field, {
                            initialValue: value,
                            rules: [
                                { required, message: errorMsg },
                                { validator: this.validateCallBack },
                            ],
                            trigger: trigger,
                            valuePropName: 'value',
                        }) : null}>
                    <Item arrow={arrow} wrap={wrap}>
                        {showIcon && <YYIcon type={icon} color={iconColor} style={{float:'left',paddingRight:'8px'}} size="xs"/>}
                        <span className={labelClassName} style={disabled?{marginLeft:'0rem',color:'gray'}:{marginLeft:'0rem'}}>{label}</span>
                    </Item>
                </Picker>
            </div>
        );
    }
}

YYPicker.defaultProps = {
    form: {},
    label: "选择",
    field: "default",
    cols:1,
    errorMsg: "请输入必填项!",
    required: false,
    disabled: false,
    value: null,
    extra: "",
    visible: true,
    trigger: "onChange",
    cascade:true,
    arrow:"horizontal",
    showIcon: false,
    icon: "Home",
    iconColor: "red",
    data:[],
    wrap:false
}
export default YYPicker;