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,filterDataArr,setFontColorSize,handleMouseUp} from '@utils/tools.js';
import {Notify} from '@commonComp';
import $ from 'jquery';
/***
 * 带单位数字组件
 * 接收参数：
 * value: 默认选中的值
 * placeholder：灰显文字
 * handleSelect: 选中事件
 * show: 是否显示下拉
 * 双击编辑效果去掉2019-8-13
 * ***/
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:'',
    };
    this.$span = React.createRef();
    this.$pre = React.createRef();
    this.$suf = React.createRef();
    this.$cont = React.createRef();
    this.select = this.select.bind(this);
    this.handleNumClick = this.handleNumClick.bind(this);
  }
  select(obj){         //选中键盘上数字事件
    const {handleSelect,ikey,suffix,prefix,mainSaveText,formulaCode,mainData} = this.props;
    this.setState({
      hasSelect:true
    });
    if(!obj.text){
      this.setState({
        value:''
      });
    }
    handleSelect&&handleSelect({ikey,text:obj.text,suffix,prefix,mainSaveText,mark:obj.mark,formulaCode,mainData});
  }
  
  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,
    });
    handleHide&&handleHide();
  }
  handleMouseDown(){
    const {i,setSelectArea,boxMark}= this.props;
    setSelectArea({i,boxMark,dir:'start'});
  }
  getClasses(){         //整个标签是否有值的状态
    const {value,hideTag,show,isImports,isExtBlue,mouseSelect} = this.props;
    const inpValue = this.state.value;
    const blueBorder = this.state.editable?style['blue-border']:'';
    const isSelected = value||inpValue?style['selected']:style['container'];
    const orgBorder = isImports&&!(value||inpValue)?style['orange-border']:'';
    const noTag = hideTag?style['no-tag']:'';
    const selectedArea = mouseSelect?style['selected-area']:'';
    if(show){
      $(this.$cont.current).addClass(style['borderd']);
    }else{
      $(this.$cont.current).removeClass(style['borderd']);
    }
    if(value){
      return className(isSelected,noTag,blueBorder,orgBorder,setFontColorSize(isExtBlue?2:''),selectedArea);
    }else{
      if(isExtBlue){
        return classNames(isSelected,noTag,blueBorder,orgBorder, setFontColorSize(2),'prefixUnsetColor',selectedArea);
      }else{
        return className(isSelected,noTag,blueBorder,orgBorder,setFontColorSize(1),selectedArea);
      }
    }
  }

  render(){
    const {placeholder,prefix,suffix,show,value,handleHide,select_start,i,boxMark} = this.props;
    const {editable,hasSelect} = this.state;
    return <div className={this.getClasses()}
                ref={this.$cont}
                onMouseUp={()=>handleMouseUp({select_start,i,boxMark})}
                onMouseDown={this.handleMouseDown.bind(this)}
                onClick={this.handleNumClick}>
      <span ref = {this.$pre} className="prefixUnset">{prefix?prefix+' ':prefix}</span>
      <span ref = {this.$span}
            onKeyDown={handleEnter}
            className="prefixUnset"
            style={{cursor:editable?'text':'pointer',wordBreak:'break-all'}}>{value||placeholder}</span>
      <span ref = {this.$suf} className="prefixUnset">{suffix?' '+suffix:suffix}</span>
      <NumberUnitPan handleSelect={(obj)=>this.select(obj)}
                 onClose={handleHide}
                 show={show} toClear={!hasSelect} value={value}/>
    </div>
  }
}

export default NumberUnitDrop;