yylib-quick-mobile/dist/yylib/checkbox/YYCheckboxGroup.js

yylib-quick-mobile

import React from 'react';
import {List} from 'antd-mobile';
import YYCheckbox from './YYCheckbox'
import classnames from 'classnames';
import {isFunction} from '../../utils/FunctionUtil';
import './YYCheckboxGroup.less'
class YYCheckboxGroup extends React.Component {
    state={
        value:this.props.value!==undefined?this.props.value:this.props.defaultValue
    }

    componentWillReceiveProps = (nextProps) => {
      let {getFieldValue} = this.props.form;
      let valueField = getFieldValue(this.props.field);
        if ('defaultValue' in nextProps) {
            if (this.props.defaultValue != nextProps.defaultValue) {
                this.setState({value: nextProps.defaultValue});
            }
        }
        //value优先级高于defaultValue
        if ('value' in nextProps) {
            if (this.props.value != nextProps.value) {
                this.setState({value: nextProps.value});
            }
        }
        if (valueField) {
            this.setState({
              value:valueField
            });
        }
    }
    validateCallBack = (rule, value, callback) => {
        if (isFunction(this.props.validateCallBack)) {
            this.props.validateCallBack(rule, value, callback);
            callback();
        } else {
            callback();
        }
    }
    _onChange = (value, event) => {
        if (event && event.target) {
            // 赋值value，以在表单里统一通过value取值处理
            event.target.value = event.target.checked;
        }
        let values = this.state.value;
        let index = values.indexOf(value)
        if(index>-1){//有了则减
            values.splice(index, 1);
        }else{//原来没有则加
            values.push(value)
        }
        this.setState({value:values},()=>{
            //为了在外部表单中获取到
            let fields = {};
            fields[this.props.field] = {
                name: this.props.field,
                value: values
            }
            this.props.form.setFields(fields);
            if (isFunction(this.props.onChange)) {
                this.props.onChange(values);
            }
        });

    }
    render() {
        let {getFieldProps} = this.props.form;
        const {field, label, options,visible,required,trigger,disabled,
            findUI, offline,parentType, uiorigin, RunInDesign, uititle, uitype, uikey, nid,control_event,...restProps} = this.props;
        let wrapClz = classnames('yy-checkbox-group', (!visible&&'hidden'),this.props.className);
        let {value} = this.state;
        let optionsDesign = [{label:'a',value:'a',checked:true},{label:'b',value:'b',checked:false},{label:'c',value:'c',checked:false}]
        let requiredMsg = '必填项' + label + '未选择';
        return (
            <List {...restProps}
                  className={wrapClz}
                  {...isFunction(getFieldProps) ? getFieldProps(field, {
                      initialValue: value,
                      rules: [
                        {required, message: requiredMsg},
                        {validator: this.validateCallBack},
                      ],
                      trigger: trigger,
                      valuePropName: 'value',
                  }) : null}
                  renderHeader={label}
            >
                {options && options.length > 0 ? options.map(i => (
                    <YYCheckbox key={i.value} checked={value&&value.length>0&&value.indexOf(i.value)!='-1'} onChange={this._onChange.bind(this, i.value)} disabled={disabled}>
                        {i.label}
                    </YYCheckbox>
                )) : null}
                {RunInDesign ? optionsDesign.map(i => (
                    <YYCheckbox key={i.value} checked={value&&value.length>0&&value.indexOf(i.value)!='-1'} onChange={this._onChange.bind(this, i.value)} disabled={disabled}>
                        {i.label}
                    </YYCheckbox>
                )) : null}
            </List>
        )
    }
}
YYCheckboxGroup.defaultProps = {
    field: 'default',
    label: '',
    options: null,
    defaultValue:[],
	visible:true,
    required:false,
    disabled:false,
    //设计器需要的props,不添加会warning
    findUI:'',
    offline:false,
    parentType:'',
    uiorigin:'',
    RunInDesign:false,
    uititle:'',
    uitype:'',
    uikey:'',
    nid:'',
    control_event:{},
};

export default YYCheckboxGroup;