newICSS/src/components/RadioDrop/index.jsx

import React,{Component} from 'react';
import {handleEnter,windowEventHandler,setFontColorSize} from '@utils/tools.js';
import {DropList} from '@commonComp';
import classNames from 'classnames';
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,
      tmpDom:null
    };
    this.$cont = React.createRef();
    this.isIE = navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"")=="MSIE8.0";
    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,show,isImports,isExtBlue} = this.props;
    const ext = isExtBlue?style['ext']:'';
    const orgBorder = isImports?style['orange-border']:'';      //橙色框高亮
    const editBorder = this.state.editable?style['blue-border']:'';
    if(show){
      $(this.$cont.current).addClass(style['borderd']);
    }else{
      $(this.$cont.current).removeClass(style['borderd']);
    }
    // if(hideTag){
    //   return classNames(style['no-tag'],ext,setFontColorSize(isExtBlue?2:''));
    // }
    if(value){
      if(hideTag){
        return classNames(style['no-tag'],ext,setFontColorSize(isExtBlue?2:''));
      }
      return classNames(style['selected-tag'],ext,editBorder,setFontColorSize());
    }else{
      if(hideTag){
        return isExtBlue?classNames(setFontColorSize(2)):classNames(setFontColorSize(2),'prefixUnsetColor')
      }
      return classNames(style['tag'],orgBorder,ext,setFontColorSize(1));
    }
  }
  handleSelect(item){
    const {handleSelect,ikey,mainSaveText,value} = 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,value});
  }
  handleShow(e){
    // e.stopPropagation();
    const {handleShow,ikey,id,patId} = this.props;
    const that = this;
    const timer = setTimeout(()=>{
      if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
        return
      }else {
        document.activeElement.blur()//chrome41有效，但是失去焦点的span仍能编辑
        $(e.target).parent().prev().attr({"contentEditable":false})
        this.setState({
          tmpDom:e.target
        })
        handleShow && handleShow({ikey,id:patId||id});
      }
    },300);
    
    this.setState({
      timer,
    });
  }
  componentDidMount(){    //默认值选中
    const {data,ikey,handleSelect,hideTag,mainSaveText,value,boxMark,readDefault,confDefault,isGeneray} = this.props;
    const showDefault = readDefault===-1||readDefault===undefined?confDefault:readDefault;
    const configed =  (+showDefault===1&&isGeneray)||!isGeneray;      //是一般情况且设置默认值显示或者不是一般情况
    const selected = data.find((it)=>{
      return it.selected === undefined&&+it.defaultSelect===1&&configed;
    });
    if(boxMark!=1&&!hideTag&&selected){
      // const text = selected.labelPrefix+selected.name+selected.labelSuffix;
      const text = selected.name;
      handleSelect&&handleSelect({ikey,id:selected.id,text,mainSaveText,value});
    }
  }
  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 || ev.target.innerHTML;
    //fireFox括号删完有<br>2270
    changeVal=changeVal=="<br>"?'':changeVal;
    if(!this.isIE){
      ev.target.innerText?(ev.target.innerText = ''):(ev.target.innerHTML = '');
    }
    handleLabelEdit && handleLabelEdit({ikey,changeVal,type:boxMark});
  }
  handledbClick(e){
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    const {value,id,handleDbclick,patId} = this.props;
    clearTimeout(this.state.timer);//取消延时的单击事件
    //e.preventDefault();
    if(value&&value.trim()) {//有选中值的标签才能双击编辑
      this.setState({
        editable: true
      });
    };
    //失焦关闭编辑状态
    setTimeout(()=>{
      e.target.focus();
    })
    handleDbclick&&handleDbclick({id:patId||id});
  }
  render(){
    const {data,placeholder,show,value,hideTag,boxMark} = this.props;
    const {tmpDom} = this.state
    if(!show&&tmpDom){
      $(tmpDom).parent().prev().attr({"contentEditable":true})
    }
    return <div className={`${style['container']} prefixUnsetColor`} ref = {this.$cont}>
      <div className={this.getClass()}
           onBlur={this.handleEditLabel}
           contentEditable={this.state.editable}
           onDoubleClick={hideTag?null:this.handledbClick}
           onFocus={(e)=>{e.stopPropagation()}}
           onClick={(e)=>this.handleShow(e,true)}
           onKeyDown={handleEnter}>
        {value||placeholder}
      </div>
      <DropList onSelect={this.handleSelect} boxMark={boxMark} data={data} show={show} hideTag={hideTag}/>
    </div>
  }
}

export default RadioDrop;