newICSS/src/components/OtherHistory/index.jsx

import React,{Component} from 'react';
import {Button,InlineTag,ItemBox,Textarea,Notify} from '@commonComp';
import chooseType from '@containers/eleType.js';
import SearchDrop from '@components/SearchDrop';
import {filterDataArr,getPageCoordinate,windowEventHandler,isIE} from '@utils/tools'
import $ from 'jquery';

class OtherHistory extends Component{
  constructor(props){
    super(props);
    this.state = {
      boxMark:'3',
      editable:true,
      boxLeft:0,
      boxTop:0,
      tmpScroll:0,
      tmpTop:0
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleSearchSelect = this.handleSearchSelect.bind(this);
    this.getData = this.getData.bind(this);
  }
  
  componentWillReceiveProps(nextProps){
    this.setState({boxLeft:nextProps.boxLeft})
  }
  handleSearchSelect(obj){
    const {questionId,name} = obj;
    const {fetchModules,focusTextIndex,span,searchInEnd} = this.props;
    fetchModules&&fetchModules({id:questionId,index:focusTextIndex,name,span,searchInEnd});
  }
  getLabels(){
    const {data,showArr,selecteds,saveText} = this.props;
    const {boxMark} = this.state;
    let list = data.map((item,i)=>{
      return chooseType({item,boxMark,i,hideTag:false,showArr,selecteds,saveText});
    });
    return list;
  }
  getData(){
    //第一次聚焦其他史时，主诉有数据则获取最近一次其他史记录（没有的话显示初始模板），主诉无数据则显示提示；其他时间其他史模板数据不调接口
    const {hasMain,type,setInitData,isEmpty} = this.props;
    //无主诉提示在EditableSpan里
    //智能模式有主诉或者文本模式获取最近历史
    if((+type===0&&hasMain&&isEmpty!=false)||(+type===1&&isEmpty!=false)){
      setInitData();
    }
  }
  handleClick(e){//让搜索框跟随鼠标点击移动
    //e.stopPropagation();
    const {getSearchLocation} = this.props;
    //若使用e.target，因为是onClick事件中，值可能是itembox的而不是span因此会有bug
    this.getData();
    let leftL=0;      //用焦点元素的左边距替换鼠标点击的左边距，高度还是鼠标点击的位置
    if(isIE()){
      leftL = getPageCoordinate(e).boxLeft
    }else{
      const ele = document.activeElement;
      if(ele.toString().indexOf('HTMLSpanElement') != -1){     //点击的不是span无法聚焦就不再设置位置
        leftL = ele.offsetLeft+90
      }
    }
    getSearchLocation(getPageCoordinate(e).boxTop,leftL)
    this.setState({
      // boxLeft:getPageCoordinate(e).boxLeft,
      // boxLeft:leftL,
      // boxTop:getPageCoordinate(e).boxTop,
      tmpScroll: $("#addScrollEvent")[0].scrollTop,
      tmpTop:getPageCoordinate(e).boxTop
    });
    windowEventHandler('scroll',()=>{      //弹窗跟随滚动条滚动或者关闭弹窗
      let scrollYs = $("#addScrollEvent")[0].scrollTop;
      let boxTop = this.state.tmpTop - scrollYs + this.state.tmpScroll
      getSearchLocation(boxTop,this.state.boxLeft)
    },$("#addScrollEvent")[0])
  }
  render(){
    const {hasMain,searchData,totalHide,isRead,type,fetchPushInfos,handleInput,saveText,boxTop,boxLeft} = this.props;
    if(+type===1){      //文本模式
      return <Textarea title='其他史' boxMark='3'
                       isRead={isRead}
                       value={saveText[0]}
                       handlePush={fetchPushInfos}
                       handleInput={handleInput}
                       handleFocus={this.getData}
                       hasMain={hasMain}/>;
    }
    return  <div>
      <ItemBox title='其他史' isRead={isRead} handleClick={this.handleClick}>
        {this.getLabels()}
        {searchData && searchData.length>0?<SearchDrop data={searchData} show={!totalHide} left={boxLeft} top={boxTop} onSelect={this.handleSearchSelect}></SearchDrop>:''}
      </ItemBox>
    </div>
  }
}

export default OtherHistory;