newICSS/src/common/components/EditableSpan/index.jsx

import React,{Component} from 'react';
import style from './index.less';
import config from "@config/index";
import {filterArr,isIE} from '@utils/tools.js';
import Notify from '../Notify/index.js';

import $ from 'jquery';
/*****
 * author:zn@2018-12-10
 * 自由文本输入组件
 * 接收参数：
 * value:默认显示文字
 * handleChange:输入变化时触发函数，接收以下参数：
 * * boxMark:病例项标识
 * * i:标签index
 * * text:标签内文字
 *
 * ****/

class EditableSpan extends Component{
  constructor(props){
    super(props);
    this.state={
      timer:null,
      clearTimer:null,
      oldText:props.value,
      labelVal:'',  //存放标签原有的值--主诉字数限制用
      preVal:'',
      index:null,
      searchPre:''
    };
    this.$span = React.createRef();
    this.handleFocus = this.handleFocus.bind(this);
    this.onChange = this.onChange.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleKeydown = this.handleKeydown.bind(this);
    this.handleKeyup = this.handleKeyup.bind(this);
  }
  handleFocus(e){
    e.stopPropagation();
    const {setFocusIndex,i,boxMark}= this.props;
    let text = e.target.innerText;
    setFocusIndex&&setFocusIndex({i,boxMark,dom:this.$span});
    this.setState({
      labelVal:text,
      index:i,
      searchPre:text
    });
  }
  onChange(e){
    e.stopPropagation();
    const {handleChange,boxMark,i,handleSearch,value,mainSaveText,mainIds} = this.props;
    const {labelVal,searchPre} = this.state;
    const text1 =e.target.innerText;
    let mainText = filterArr(mainSaveText);//主诉字数
    if(+boxMark==1){
      if(mainText.length >= config.limited){
        if(text1.length > labelVal.length){
          e.target.innerText = labelVal;
          Notify.info(config.limitText);
          return
        }else if(text1.length == labelVal.length){
          this.setState({
            labelVal:text1
          });
        }else{
          handleChange&&handleChange({text1,boxMark,i});
        }
        return
      }
    }
    this.setState({
      labelVal:text1
    });

    const that = this;
    handleChange&&handleChange({text1,boxMark,i});

    //延迟搜索
    clearTimeout(this.state.timer);
    const timer = setTimeout(function(){
      let newText = e.target.innerText;
      let temp = '';
      let search='';
      clearTimeout(that.state.timer);
      temp = newText.replace(searchPre,'');
      search = temp.replace(/[(^\s*)|(\s*$)|(^\,*)|(\,*$)]/g,'');
      //console.log(labelVal,'旧：',searchPre,'新：',newText,'搜索：',search);
      handleSearch&&handleSearch({text:search,boxMark,mainIds});
      //搜索后保持现在的值，继续输入时要用于对比
      that.setState({
        searchPre:newText
      });
    },config.delayTime);
    this.setState({
      timer
    });
  }

  handleBlur(e){//为了阻止冒泡事件
    const {boxMark,handleClear,handleChange,i} = this.props;
    e.stopPropagation();
    // 延时清空搜索结果，不延时会影响选中
    clearTimeout(this.state.clearTimer);
    const clearTimer = setTimeout(function(){
      handleClear && handleClear({boxMark})
    },config.delayTime);
    this.setState({
      clearTimer
    });
  }

  handleKeydown(e){
    const ev = e||window.event;
    const target = ev.target||ev.srcElement;
    let innerVal = target.innerText;
    //禁止回车事件
    if(ev.keyCode==13){return false;}
    //backspace事件
    if(ev.keyCode==8){
      //用于对比backspace前后的值
      this.setState({
        preVal:innerVal
      })
    }

  }
  handleKeyup(e){
     const {boxMark,handleKeydown,i,value} = this.props;
     const {preVal,index} = this.state;
    const ev = e||window.event;
    const target = ev.target||ev.srcElement;
    let innerVal = target.innerText;
    if(ev.keyCode==8){
      if(innerVal !==preVal){return}
      let data = innerVal.trim();
      //判断是否为空、中英文：, 。、；,且不是第一位
      let pattern = new RegExp(/^\,?$|^\，?$|^\.?$|^\。?$|^\、?$|^\;?$|^\；?$|^\:?$|^\：?$\s/);
      // if(i!==0 &&data==""||data==","||data=="，"||data==":"||data=="："||data=="."||data=="。"||data=="、"||data==";"||data=="；"){
      if(index!==0 && pattern.test(data)){
        handleKeydown&&handleKeydown({boxMark,i:index});
        this.setState({
          // index:index-1 //连续往前删除，体验不佳
          index: null
        })
      }
    }
  }
  /*shouldComponentUpdate(next){
    if(JSON.stringify(next) == JSON.stringify(this.props)){
      return false;
    }
    return true;
  }*/
  componentWillReceiveProps(next){
    const isRead = this.props.isRead;
    if(next.isRead != isRead){
      this.$span.current.innerText = next.value||'';
    }
  }
  componentDidMount(){
    const {value} = this.props;
    if(value){
      this.$span.current.innerText = value||'';
    }
    if(isIE()){
      $(this.$span.current).onIe8Input(function(e){
        this.onChange(e)
      },this);
    }
  }

  render() {
    return <span className={style['editable-span']}
                      contentEditable='true'
                      ref={this.$span}
                      onInput={this.onChange}
                      onFocus={this.handleFocus}
                      onBlur={this.handleBlur}
                      onkeydown={this.handleKeydown}
                      onkeyup={this.handleKeyup}></span>;

  }
}

export default EditableSpan;