newICSS/src/common/components/MixCheckBox/index.jsx

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import style from './index.less';
import Select from '../CheckBox/Select';
import Radio from '../RadioB';
import Normal from '../Normal';
import CheckBox from '../CheckBox';
import className from 'classnames';
import Multiple from '../CheckBox/Multiple';

/***
单选多选混合组件
接收参数：
datas：数据源，为数组，必须;
showDrop:控制填写单显示与隐藏，必须；
confirmCheckBox：点击确定，必须
clearCheckBox：点击清空，必须
noSpecial:无殊选中标识，true为选中，有无殊时必须；
noSpecialFlag:互斥标识，2选中其他 1选中无殊 0默认无选中;
noSpecialClick：无殊点击事件；
handleRadioClick：单选点击事件，有单选列时必须；
handleCheckBoxClick：多选点击事件，有多选时必须；
**/

class MixCheckBox extends React.Component{
  constructor(props){
    super(props);
    this.handleBtnConfirm = this.handleBtnConfirm.bind(this);
    this.handleBtnClear = this.handleBtnClear.bind(this);
  }

  getLabs(){
    const {datas,noSpecial,noSpecialFlag,noSpecialClick,checkBoxId,flag} = this.props;
    let list = datas && datas.map((v,i)=>{
      if(+v.formPosition == 1){//正常无殊
         return <Normal datas={v.questionDetailList} noSpecialFlag={noSpecialFlag} noSpecial={noSpecial} noSpecialClick={noSpecialClick}/>
      }else{
        if(v.controlType==1 && v.formPosition !== 1){//单选
          return <Radio datas={v.questionDetailList} handleClick={this.props.handleCheckBoxClick} parentId={v.id} disabled={noSpecialFlag}/>;
        }else if(v.controlType==2){//2多选
          return <Select datas={v.questionDetailList} handleClick={this.props.handleCheckBoxClick} parentId={v.id} noSpecialFlag={noSpecialFlag} checkBoxId={checkBoxId} flag={flag}/>
        }
        /*else if(v.controlType==4 || v.controlType==99){//4 伴/无 99推送
          return <Multiple datas={v.questionDetailList} handleClick={this.props.handleCheckBoxClick} parentId={v.id} />
        }*/
      }
    })
    return list;
  }

  handleBtnConfirm(e){//确定
    e.stopPropagation();
    const {confirmCheckBox,checkBoxId,flag} = this.props;
    let item = {
      checkBoxId,
      flag
    };
    confirmCheckBox && confirmCheckBox(item);   
  }

  handleBtnClear(e){//清空
    e.stopPropagation();
    const {clearCheckBox,checkBoxId,flag} = this.props;
    let item = {
      checkBoxId,
      flag
    };
    clearCheckBox && clearCheckBox(item);
  }

  getContainerStyle(){
    const {showDrop} = this.props;
    const isShow = showDrop?'':style['ishide'];
    return className(style['cb-container'],isShow);
  }
  render(){
    return <div className={this.getContainerStyle()} >
          <div style={{whiteSpace: 'nowrap'}}>{this.getLabs()}</div>
          <div className={style['btn']}>
            <button onClick={this.handleBtnClear} className={style['clear']}>清空选项</button>
            <button onClick={this.handleBtnConfirm} className={style['confirm']}>确定</button> 
          </div>         
        </div>
    }
}

MixCheckBox.propTypes = {
    handleClick:PropTypes.func,
    items:PropTypes.array
};
export default MixCheckBox;