newICSS/src/components/RadioDrop/index.jsx

import React,{Component} from 'react';
import {handleEnter,getPageCoordinate,windowEventHandler} 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,
      boxLeft:0,
      boxTop:0,
      tmpScroll:0,
      tmpTop:0,
    };
    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,placeholder,show,isImports} = this.props;
    const blueBorder = this.state.editable?style['blue-border']:'';
    const orgBorder = isImports?style['orange-border']:'';
    if(show){
      $(this.$cont.current).addClass(style['borderd']);
    }else{
      $(this.$cont.current).removeClass(style['borderd']);
    }
    if(hideTag){
      return style['no-tag'];
    }
    if(value){
      return blueBorder?classNames(style['selected-tag'],blueBorder):style['selected-tag'];
    }
    return classNames(style['tag'],orgBorder);
  }
  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(function(){
      if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
        return
      }else {
        handleShow && handleShow({ikey,id:patId||id});
      }
    },300);
    
    this.setState({
      timer,
      boxLeft:getPageCoordinate(e).boxLeft,
      boxTop:getPageCoordinate(e).boxTop,
      tmpScroll: $("#addScrollEvent")[0].scrollTop,
      tmpTop:getPageCoordinate(e).boxTop
    });
    windowEventHandler('scroll',()=>{      //弹窗跟随滚动条滚动或者关闭弹窗
      let scrollYs = $("#addScrollEvent")[0].scrollTop;
      this.setState({
        boxTop:this.state.tmpTop - scrollYs + this.state.tmpScroll
      })
    },$("#addScrollEvent")[0])
  }
  componentDidMount(){    //默认值选中
    const {data,ikey,handleSelect,hideTag,mainSaveText,value} = this.props;
    const selected = data.find((it)=>{
      return it.selected === undefined&&+it.defaultSelect===1;
    });
    if(!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;
    if(!this.isIE){
      ev.target.innerText?(ev.target.innerText = ''):(ev.target.innerHTML = '');
    }
    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
      });
    };
    //失焦关闭编辑状态
    setTimeout(()=>{
      e.target.focus();
    })
    handleDbclick&&handleDbclick({id:patId||id});
  }
  render(){
    const {data,prefix,suffix,placeholder,show,value,hideTag} = this.props;
    const {boxLeft,boxTop} = this.state;
    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} left={boxLeft} top={boxTop} show={show} hideTag={hideTag}/>
    </div>
  }
}

export default RadioDrop;