newICSS/src/components/Multiple/SlideItem/index.jsx

import react from "react";
import style from "./index.less";
import $ from 'jquery';
import classNames from 'classnames';
import {handleEnter,isIE,filterArr,deepClone,filterDataArr} from '@utils/tools.js';
import {Notify} from '@commonComp';
import ReactDom from "react-dom";
import config from '@config/index.js';
/**
  单列多选组件（tagtype=1,controlType=2）
  2019-2-20 By_liucf
  参数：
  placeholder：标签名
  value：标签选中的值
  show：是否展示下拉
  data：下拉数据
  type：标识哪一项数据（1-主诉，2-现病史，3-其他史，4-查体）
**/

class Multiple extends react.Component{
  constructor(props){
    super(props);
    const {seleData,seleId} = deepClone(props.selecteds||[]);
    this.state={
      editable:false,
      timer:null,
      labelVal:"",
      seleData:seleData||"",
      seleId:seleId||[],
      boxLeft:null,
      boxTop:null
    }
    this.$div = React.createRef();
    this.handleSelect = this.handleSelect.bind(this);
    this.onChange = this.onChange.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleComfirn = this.handleComfirn.bind(this);
  }

  getListClass(){
    let name = style['text-list'];
    let isHide = this.props.show?'':style['hide'];
    return classNames(style['list'],name,isHide);
  }

  getSeleStyle(id){
    const {seleId} = this.state;
    if(seleId.includes(id)){
      return style['selected'];
    }
    return '';
  }

  handleSelect(e,item){
    e&&e.stopPropagation();
    let {seleData,seleId} = this.state;
    const {name,id} = item;
    if(seleId.includes(id)){
      seleId.splice(seleId.indexOf(id),1);
      seleData = seleData.replace(name,'');
    }else{
      seleId.push(id);
      seleData += name;
    }
    this.setState({
      seleData,
      seleId
    })
  }

  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 || e.target.innerHTML;
      if(!isIE()){
        e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML='');      //避免出现重复输入值
      }
      handleLabelChange && handleLabelChange({ikey,changeVal,type});
    }
    this.setState({
      editable:false
    });
  }

  handleClear(e){
    e&&e.stopPropagation();
    this.setState({
      seleData:"",
      seleId:[]
    })
  }

  handleComfirn(e){
    e&&e.stopPropagation();
    const {handleConfirm,ikey,order,mainSaveText,value,handleHide,type} = this.props;
    const params = Object.assign({},this.state,{ikey,order,mainSaveText,value,type});
    handleConfirm&&handleConfirm(params);
    handleHide&&handleHide();
  }

  componentDidMount(){
    if(isIE()){
      $(this.$div.current).onIe8Input(function(e){
        this.onChange(e)
      },this);
    }
  }
  getStyle(){
    const {left,top,show} = this.props;
    return {
      left:left?left+'px':'0',
      top:top?top+'px':'0',
      display:show?'table':'none'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
    }
  }
  render(){
    const {placeholder,value,show,data} = this.props;
    const {editable,boxTop,boxLeft} = this.state;
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(
      <div className={this.getListClass()} style={this.getStyle()} contentEditable="false">
        <ul>
          {data&&data.map((it)=>{
          return <li onClick={(e)=>this.handleSelect(e,it)} className={this.getSeleStyle(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
        })}
          <li onClick={this.handleClear} className={style['mClear']}>清空选项</li>
          <li onClick={this.handleComfirn} className={style['mConfirm']}>确定</li>
        </ul>
      </div>,domNode)
  }
}

export default Multiple;