newICSS/src/components/RadioDrop/index.jsx

import React,{Component} from 'react';
import {handleEnter} from '@utils/tools.js';
import {DropList} from '@commonComp';
import style from "./index.less";
import $ from "jquery";

/****
 * 单选下拉
 * author:zn@2018-11.13
 * 接收参数：
 * placeholder:灰显文字
 * data:下拉内容数据
 * hideTag：是否隐藏括号
 * handleSelect:选中事件
 * prefix:前缀
 * suffix:后缀
 *
 * ***/

class RadioDrop extends Component{
  constructor(props){
    super(props);
    this.state={
      editable:false,
      timer:null
    };
    this.$cont = React.createRef();
    this.handleSelect = this.handleSelect.bind(this);
    this.handleShow = this.handleShow.bind(this);
    this.handledbClick = this.handledbClick.bind(this);
    this.handleEditLabel = this.handleEditLabel.bind(this);
  }
  getClass(){
    const {value,hideTag,placeholder,show} = this.props;
    if(show){
      $(this.$cont.current).addClass(style['borderd']);
    }else{
      $(this.$cont.current).removeClass(style['borderd']);
    }
    if(hideTag){
      return style['no-tag'];
    }
    if(value){
      return style['selected-tag'];
    }
    return style['tag'];
  }
  handleSelect(item){
    const {handleSelect,ikey,mainSaveText} = this.props;
    if(!item){      //清空
      handleSelect&&handleSelect({ikey});
      return ;
    }
    let text = '';
    switch(true){
      case +item.controlType ===6:
      case +item.controlType===7:
      case +item.tagType===3:
       text = item;
        break;
      case 3:
      default:
        // text = item.labelPrefix+item.name+item.labelSuffix;
        text = item.name;
        // text = item.questionDetailList&&item.questionDetailList.length>0?item.questionDetailList[0].name: item.name;
    }
    handleSelect&&handleSelect({ikey,id:item.id,text,mainSaveText});
  }
  handleShow(e){
    //e.stopPropagation();
    const {handleShow,ikey,id,patId} = this.props;
    const that = this;
    const timer = setTimeout(function(){
      if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
        return
      }else {
        handleShow && handleShow({ikey,id:patId||id});
      }
    },300);
    this.setState({
      timer
    });
  }
  componentDidMount(){    //默认值选中
    const {data,ikey,handleSelect} = this.props;
    const selected = data.find((it)=>{
      return it.selected === undefined&&+it.defaultSelect===1;
    });
    if(selected){
      // const text = selected.labelPrefix+selected.name+selected.labelSuffix;
      const text = selected.name;
      handleSelect&&handleSelect({ikey,id:selected.id,text});
    }
  }
  handleEditLabel(e){
    e.stopPropagation();
    if(!this.state.editable){     //ie8点开下拉未选值存值bug修改
      return;
    }
    const {ikey,boxMark,handleLabelEdit} = this.props;
    this.setState({
      editable:false
    });  
   // 更改标签的value值
    const ev = e || window.event;
    let changeVal = ev.target.innerText;
    handleLabelEdit && handleLabelEdit({ikey,changeVal,type:boxMark});
  }
  handledbClick(e){
    const {value,id,handleDbclick,patId} = this.props;
    clearTimeout(this.state.timer);//取消延时的单击事件
    //e.preventDefault();
    if(value&&value.trim()) {//有选中值的标签才能双击编辑
      this.setState({
        editable: true
      });
    };
    handleDbclick&&handleDbclick({id:patId||id});
  }
  render(){
    const {data,prefix,suffix,placeholder,show,value} = this.props;
    return <div className={style['container']} ref = {this.$cont}>
      {prefix}
      <div className={this.getClass()}
           onBlur={this.handleEditLabel}
           contentEditable={this.state.editable}
           onDoubleClick={this.handledbClick}
           onClick={(e)=>this.handleShow(e,true)}
           onkeydown={handleEnter}>
        {value||placeholder}
      </div>
      {suffix}
      <DropList onSelect={this.handleSelect} data={data}
                show={show}/>
    </div>
  }
}

export default RadioDrop;