newICSS/src/components/SpreadDrop/index.jsx

import React,{Component} from 'react';
import classNames from 'classnames';
import config from '@config/index.js';
import style from './index.less';
import {setPosition,deepClone,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
import {Notify} from '@commonComp';
import ListItems from '@components/ListItems';
import $ from 'jquery';
/****
 * 标签组合下拉,选中的项目展开
 * author:zn@2018-11-21
 * 接收参数：
 * data:下拉内容
 * value:选中成文
 * placeholder:灰显文字
 * ikey：当前标签的index
 * copyType:选中后是否复制本身（仅展开类型使用）
 * data.selecteds：选中选项（仅展开类型使用）
 * show：是否显示下拉
 * order：成文顺序，0点选顺序，1从上到下从左到右
 * isImports：是否高亮显示（仅查体中使用）
 * type:所在模块：现病史、查体等
 * tagType：标签类型
 * id:id
 * flag:仅主诉中使用
 * isExtBlue:是否为查体生命体征标签蓝色显示
 *
 * ***/


class SpreadDrop extends Component{
  constructor(props){
    super(props);
    const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName} = deepClone(props.selecteds||[]);
    this.state = {
      nones:nones||'',       //无,字符串拼接
      exists:exists||[],      //主症状id
      excluName:excluName||'',
      withs:withs||[],       //伴随 id
      noneIds:noneIds||[],
      noneOn:noneOn||false,       //无是否选中
      withOn:withOn||false,       //伴是否选中
      nowOn:nowOn||'',           //最近选中“无”还是“伴”
      exclusion:exclusion||'',      //选中互斥项id
      timer:null,  //延时，区分单击双击
      ban:{},  //放'伴'字段
      editable:false,      //双击编辑
      labelVal:'',  //存放标签原有的值--主诉字数限制用
      left:'auto',
      tmpDom:null
    };
    this.$div = React.createRef();
    this.$list = React.createRef();
    this.handleSelect = this.handleSelect.bind(this);
    this.clearState = this.clearState.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleShow = this.handleShow.bind(this);
    this.handleConfirm = this.handleConfirm.bind(this);
    this.changeToEdit = this.changeToEdit.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.onChange = this.onChange.bind(this);
    /*是否点击确定按钮标记，处理点击其他等同于确定操作bug,
      如不区分确定按钮提交和点击其他提交，确定按钮提交后会多更新一次状态导致数据重复*/
    this.btnClickFlag = false;
  }
  handleShow(e){//单击
    e&&e.stopPropagation();
    const {ikey,handleShow,placeholder,flag,id,value,tagType,type,data,windowWidth,setHighter} = this.props;
    let num = 0;//判断为五类切超出页面
    data && data.map((item)=>{
      if(item.formPosition != 1){
        ++num
      }
    });
    const listWidth = 30+$(this.$list.current).width();
    if(num >= 4 && windowWidth-getPageCoordinate(e).boxLeft < listWidth){
      this.setState({
        left:windowWidth-listWidth-150
      })
    }
    //高度超出时,增加左侧大容器padding
    setPosition(e,this.$list.current,setHighter);
    // window.event? window.event.cancelBubble = true : e.stopPropagation();
     this.setStateInit();      //恢复初始选中状态
    const that = this;
    this.btnClickFlag = false;
    clearTimeout(this.state.timer);
    this.state.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,placeholder,flag,id,value,tagType,type});
      }
    },300)

  }

  changeToEdit(e){//双击
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    const {value,id,placeholder,handleDbclick,handleHide} = this.props;
    let text = e.target.innerText || e.target.innerHTML;
    handleHide&&handleHide();       //展开情况下双击收起
    // clearTimeout(this.state.timer);//取消延时的单击事件
    e.stopPropagation();
    // e.preventDefault();
    if(value&&value.trim()){//有选中值的标签才能双击编辑
      this.setState({
        labelVal:text,
        editable:true
      });
      //失焦关闭编辑状态
      setTimeout(()=>{
        e.target.focus();
      })
      handleDbclick && handleDbclick({value,id,placeholder});
    }
  }

  onChange(e){
    const {mainSaveText,ikey,type,handleLabelChange} = this.props;
    const {labelVal,editable} = this.state;
    let mainText = filterDataArr(mainSaveText);//主诉字数
    if(editable){//避免IE中点击标签也会触发
      let val = e.target.innerText || e.target.innerHTML;
      if(+type==1){// 主诉字数达到上限时不允许输入
        if(mainText.length >= config.limited){
          if(val.length > labelVal.length){
            e.target.innerText?(e.target.innerText = labelVal):(e.target.innerHTML = labelVal);
            Notify.info(config.limitText);
            return
          }else if(val.length == labelVal.length){
            this.setState({
              labelVal:val
            });
          }else{
            handleLabelChange && handleLabelChange({ikey,changeVal:val,type});
          }
        }
      }
    }
  }

  handleBlur(e){
    e.stopPropagation();
    const {ikey,type,handleLabelChange} = this.props;
    const {editable} = this.state;
    const ev = e || window.event;
    if(editable){
      // 更改标签的value值
      let changeVal = ev.target.innerText || ev.target.innerHTML;
      if(!isIE()){
        e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML = '');      //避免出现重复输入值
      }
      handleLabelChange && handleLabelChange({ikey,changeVal,type});
    }
    this.setState({
      editable:false
    });


  }
  setStateInit(){
    const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName,ban} = deepClone(this.props.selecteds||[]);
    this.setState({
      nones:nones||'',
      exists:exists||[],
      excluName:excluName||'',
      withs:withs||[],
      noneIds:noneIds||[],
      noneOn:noneOn||false,
      withOn:withOn||false,
      nowOn:nowOn||'',
      exclusion:exclusion||'',
      ban:ban||{},
    });
  }
  clearState(){
    this.setState({
      nones:'',
      exists:[],
      //existsName:{},
      //withsName:{},
      withs:[],
      noneIds:[],
      noneOn:false,
      withOn:false,
      nowOn:'',
      exclusion:'',
      excluName:'',
      ban:{}
    });
    this.btnClickFlag = false;
  }
  handleClear(e){
    e.stopPropagation();
    this.clearState();
  }
  handleConfirm(e){
    // e.stopPropagation();
    const {handleConfirm,ikey,type,tagType,order,mainSaveText,copyType,value,mainData} = this.props;
    const params = Object.assign({},this.state,{ikey,type,tagType,order,mainSaveText,copyType,value,mainData});
    delete params.tmpDom;       //避免上面deepClone selecteds报错
    handleConfirm&&handleConfirm(params);
	this.btnClickFlag = true;
    //点确定后隐藏弹窗
    this.props.handleHide();
  }
  handleSelect(item,isExclu,joint,listIndex,selected){
    let {withOn,withs,noneOn,exclusion,exists,nowOn,nones,noneIds,ban} = this.state;
    const id = item.id;
    const linkStr = joint||'';
    const name = item.name+linkStr;
    if(isExclu){      //操作“互斥项”
      if([...noneIds,...exists,...withs].length>0){     //已选非互斥项，清空已选项，选中该互斥项
        this.clearState();
        this.setState({
          exclusion:id,
          excluName:name
        });
        return;
      }
      //未选中互斥项，直接选中该互斥项
      let temp = '';
      if(exclusion==''){
        temp = id;
      }else if(exclusion!=''&&exclusion!==id){
        temp = exclusion;
      }
      this.setState({
        exclusion:temp,
        excluName:temp ===''?'':name
      });
      return;
    }
    //操作单选项
    if(selected){
      const tIndex= exists.findIndex((it)=>it.questionId===item.questionId);
      const bIndex= withs.findIndex((it)=>it.questionId===item.questionId);
      if(tIndex!=-1){
        exists.splice(tIndex,1,Object.assign({},item,{name}));    //修改单选列连接字符不显示bug
        this.setState({
          exists,
        })
      }
      if(bIndex!=-1){
        withs.splice(tIndex,1,item);
        this.setState({
          withs,
        })
      }
      return;
    }
    if(exclusion!==''){     //互斥项已选中，清空互斥项
      this.setState({
        exclusion:'',
        excluName:''
      });
    }
    if(+item.code===1){     //操作“伴”类型
      this.setState({
        withOn:!withOn,
        // withs:withOn?[]:[...withs,id],     //取消“伴”选中，伴随症状全部取消选中    
        // withs:withOn?[]:[...withs,{id:item.id,name:name}],
        withs:withOn?[]:withs,
        ban:withOn?{}:{id:id,name:name,value:name},
        //withsName:withOn?"":withsName+name,     //取消“伴”选中，伴随症状全部取消选中
        nowOn:withOn?(noneOn?'none':''):'with'
      });
      return;
    }
    if(+item.code===2){     //操作“无”类型
      this.setState({
        noneOn:!noneOn,
        noneIds:noneOn?[]:[...noneIds,id],
        nones:noneOn?'':name,
        nowOn:noneOn?(withOn?'with':''):'none'
      });
      return;
    }
    //操作普通项
    let existsIds = exists.length>0? getIds(exists):[];
    let withsIds = withs.length>0? getIds(withs):[];


    if(existsIds.includes(id)){
      let existsData = exists;
      exists.forEach((it,i)=>{
        if(it.id==id){
         existsData.splice(i,1); 
        }
      })
      exists = existsData;
    }else if(noneIds.includes(id)){
      nones = nones.replace(name+'、','');
      noneIds.splice(noneIds.indexOf(id),1);
    }else if(withsIds.includes(id)){
      let withsData = withs;
      withs.forEach((it,i)=>{
        if(it.id==id){
         withsData.splice(i,1); 
        }
      })
      withs = withsData;
    }else{        //选中普通项
      if(nowOn=='none'){
        nones += name+'、';
        noneIds.push(id);
      }else if(nowOn=='with'){
        // withs.push({id:id,name:name,questionId:item.questionId});
        withs.push({id:id,name:name,questionId:item.questionId,conceptId:item.conceptId});
      }else{
        // exists.push({id:id,name:name,listIndex,questionId:item.questionId});
        exists.push({id:id,name:name,listIndex,questionId:item.questionId,conceptId:item.conceptId});
      }
    }
    this.setState({
      nones,
      noneIds,
      exists,
      withs,
      ban
      //existsName,
      //withsName,
    });
  }
  getClass(){
    const {isImports,show,value,isExtBlue} = this.props;
    const blueBorder = this.state.editable?style['blue-border']:'';
    const orgBorder = isImports&&!value?style['orange-border']:'';
    const ext = isExtBlue?style['ext']:'';
    if(show){
      $(this.$div.current).addClass(style['borderd']);
    }else{
      $(this.$div.current).removeClass(style['borderd']);
    }
    if(value){
      return classNames(style['selected-tag'],blueBorder);
    }
    return classNames(style['tag'],orgBorder,ext);
  }

  componentDidMount(){
    if(isIE()){
      $(this.$div.current).onIe8Input(function(e){
        this.onChange(e)
      },this);
    }
  }
  /*componentWillReceiveProps(nextProps){
    const {setHighter} = this.props;
    if(!nextProps.show){console.log(22)
      setHighter&&setHighter(48);
    }
  }*/
  render(){
    const {placeholder,value,show,data,order,type,tagType,ikey,pos} = this.props;
    const {tmpDom,left} = this.state
    const clickIndx = ikey.split('-')[1];//展开下拉的index
    if(!show&&tmpDom){
      $(tmpDom).parent().prev().attr({"contentEditable":true})
    }
    const {editable} = this.state;
    return  <div className={style['container']}
              /*onFocus={(e)=>e.stopPropagation()}*/
              onBlur={(e)=>e.stopPropagation()}
              onInput={(e)=>e.stopPropagation()}>
        <div
        ref={this.$div}
        onClick={this.handleShow}
        className={this.getClass()}
        contentEditable={editable}
        onDoubleClick={this.changeToEdit}
        onBlur={this.handleBlur}
        onInput={this.onChange}
        onkeydown={handleEnter}
        >{value||placeholder}</div>
          <ListItems parDiv={this.$list} pos={pos} data={data} order={order} left={left} boxMark={type} tagType={tagType}
             show={show} handleSelect={this.handleSelect} handleConfirm={this.handleConfirm} handleClear={this.handleClear} {...this.state}></ListItems>
      </div>
  }
}

export default SpreadDrop;