newICSS/src/components/NumberUnitDrop/index.jsx

import React,{Component} from 'react';
import className from 'classnames';
import {NumberUnitPan} from '@commonComp';
import style from './index.less';
import config from '@config/index.js';
import {filterArr,handleEnter,isIE,getPageCoordinate,filterDataArr} from '@utils/tools.js';
import {Notify} from '@commonComp';
import $ from 'jquery';
/***
 * 带单位数字组件
 * 接收参数：
 * value: 默认选中的值
 * placeholder：灰显文字
 * handleSelect: 选中事件
 * show: 是否显示下拉
 *
 * ***/
class NumberUnitDrop extends Component{
  constructor(props){
    super(props);
    this.state={
      editable:false,      //标签是否可输入
      numEditable:true,      //数字框是否可输入
      timer:null,
      hasSelect:false,       //是否点过下拉键盘
      isClosed:false,
      value:props.value,
      placeholderFlag:false,
      labelVal:'',
      boxLeft:0,
      boxTop:0,
      tmpTop:0,
      tmpScroll:0
    };
    this.$span = React.createRef();
    this.$cont = React.createRef();
    this.select = this.select.bind(this);
    this.numInpBlur = this.numInpBlur.bind(this);
    this.handleSpanInp = this.handleSpanInp.bind(this);
    this.handleNumClick = this.handleNumClick.bind(this);
    this.changeToEdit = this.changeToEdit.bind(this);
  }
  select(obj){         //选中键盘上数字事件
    const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
    this.setState({
      hasSelect:true
    });
    if(!obj.text){
      this.setState({
        value:''
      });
    }
    handleSelect&&handleSelect({ikey,text:obj.text,suffix,prefix,mainSaveText,mark:obj.mark});
  }
  
  handleNumClick(e){ 
    e.stopPropagation();
    const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
    const {hasSelect} = this.state;
    const that = this;
    //双击时不显示下拉
    clearTimeout(this.state.timer);
    const timer = setTimeout(function(){
      const {hasSelect,editable,isClosed} = that.state;
      if(editable||isClosed){
        return;
      }
      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
    });
    $("#addScrollEvent").scroll(()=>{
      let scrollYs = $("#addScrollEvent")[0].scrollTop;
      this.setState({
        boxTop:this.state.tmpTop - scrollYs + this.state.tmpScroll
      })
    })
    handleHide&&handleHide();
  }
  //数字框失焦，保存值到store中
  numInpBlur(e){
    e.stopPropagation();
    const {handleSelect,ikey,suffix,prefix,mainSaveText,handleLabelChange,boxMark} = this.props;
    const {editable} = this.state;
    if(editable){
      const text = e.target.innerText || e.target.innerHTML;
      // this.$span.current.innerText='';      //修改生成文字变成输入的2倍bug 
      // handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
      handleLabelChange&&handleLabelChange({ikey,changeVal:text,suffix,prefix,mainSaveText,type:boxMark});
      
    }
    this.setState({
      isClosed:false,
      numEditable:true,
      hasSelect:false,
      editable:false
    });
    
  }

  handleSpanInp(e){ //数字框输入事件
    e.stopPropagation();
    // 主诉字数达到上限时不允许输入
    const {mainSaveText,ikey,type,handleSelect,suffix,prefix,boxMark} = this.props;
    const {labelVal,editable} = this.state;
    let mainText = filterDataArr(mainSaveText);//主诉字数
    if(editable){//避免IE中点击标签也会触发
      let val = e.target.innerText || e.target.innerHTML;
      if(+boxMark==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{
            handleSelect&&handleSelect({ikey,text:val,suffix,prefix,mainSaveText});
          }
        }
      }
    }
  }
  getClasses(){         //整个标签是否有值的状态
    const {value,hideTag,show} = this.props;
    const inpValue = this.state.value;
    const blueBorder = this.state.editable?style['blue-border']:'';
    const isSelected = value||inpValue?style['selected']:style['container'];
    const noTag = hideTag?style['no-tag']:'';
    if(show){
      $(this.$cont.current).addClass(style['borderd']);
    }else{
      $(this.$cont.current).removeClass(style['borderd']);
    }
    return className(isSelected,noTag,blueBorder);
  }
  changeToEdit(e){        //整个标签双击编辑状态
    e.stopPropagation();
    const {value,id,handleDbclick,patId} = this.props;
    const text = e.target.innerText || e.target.innerHTML;
    // clearTimeout(this.state.timer);//取消延时的单击事件
    if(value&&value.trim()) {//有选中值的标签才能双击编辑
      this.setState({
        editable: true,
        labelVal:text
      });
      //失焦关闭编辑状态
      setTimeout(()=>{
        e.target.focus();
      })
      //双击埋点记录
      handleDbclick && handleDbclick({id:patId||id});
    }
  }
  componentDidMount(){
    if(isIE()){
      $(this.$span.current).onIe8Input(function(e){
        this.handleSpanInp(e)
      },this);
    }
  }

  render(){
    const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
    const {numEditable,editable,hasSelect,placeholderFlag,boxLeft,boxTop} = this.state;
    return <div className={this.getClasses()} ref={this.$cont}>
      <span>{prefix}</span>
      <span onClick={this.handleNumClick}
            contentEditable={editable}
            ref = {this.$span}
            onBlur={this.numInpBlur}
            onInput={this.handleSpanInp}
            onDoubleClick={this.changeToEdit}
            onkeydown={handleEnter}
            style={{cursor:editable?'text':'pointer'}}>{value||placeholder}</span>
      <span>{suffix}</span>
      <NumberUnitPan handleSelect={(obj)=>this.select(obj)}
                 onClose={handleHide}
                 top={boxTop}
                 left={boxLeft}
                 show={show} toClear={!hasSelect} value={value}/>
    </div>
  }
}

export default NumberUnitDrop;