newICSS/src/components/MultSpread/index.jsx

import React,{Component} from 'react';
import classNames from 'classnames';
import RadioDrop from "@containers/RadioDrop";
import NumberDrop from "@containers/NumberDrop";
import RadioInpDrop from "@containers/RadioInpDrop";
import InlineTag from '@containers/InlineTag';
import Multiple from '@containers/Multiple';
import addIcon from '@images/addItem.png';
import style from "./index.less";
import tools from '@utils/tools';
import NumberUnitDrop from '@containers/NumberUnitDrop';

/****
 * 多标签组合
 * author:zn@2018-11.26
 * 接收参数：
 * data:标签内容数据
 * showArr:显示下拉总对象
 * ikey：当前组件唯一标识，由模块index+标签index+标签内index三个组成的字符串
 *
 *
 *
 * ***/

class MultSpread extends Component{
  constructor(props){
    super(props);
    this.state = {
      editable: false,
    };
    this.$cont = React.createRef();
    this.changeToEdit = this.changeToEdit.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }
  getClass(){
    const {saveText,ikey,showAdd,isImports} = this.props;
    const labelInx = ikey.substr(1);
    const text = saveText&&saveText[+labelInx];
    const orgBorder = isImports&&!text?style['orange-border']:'';
    const isSelected = text?style['selected']:style['container'];
    const hasAdd = showAdd?style['add']:'';
    return classNames(isSelected,hasAdd,orgBorder);
  }
  getLabels(){
    const {data,ikey,showArr,copyId,selecteds,boxMark} = this.props;
    const {editable}= this.state;
    let show = false;
    let inx = '';
    const list = data.map((it,i)=>{
      inx=ikey+''+i;
      show = editable?false:showArr&&showArr[inx];
      switch (true){
        case +it.tagType===8:
          return it.name;
        case +it.controlType===1:
          const list = it.questionDetailList&&it.questionDetailList.length>0?it.questionDetailList:it.questionMapping;
          return <RadioDrop data={list}
                            boxMark={boxMark}
                            prefix={it.labelPrefix}
                            suffix={it.labelSuffix}
                            placeholder={it.name}
                            show={show}
                            value = {it.value}
                            ikey={inx}
                            id={it.id}
                            patId = {copyId}
                            hideTag={true}></RadioDrop>;
        case +it.controlType===2:
          const dataList = it.questionDetailList&&it.questionDetailList.length>0?it.questionDetailList:it.questionMapping;
          return <Multiple data={dataList}
                           ikey={inx}
                           placeholder={it.name}
                           value={it.value}
                           copyType={it.copyType}
                           selecteds={selecteds ?selecteds[i]:[]}
                           show={showArr&&showArr[inx]}
                           order={it.textGenerate}
                           type={boxMark}
                           textPrefix={it.labelPrefix}
                           textSuffix={it.labelSuffix}
                           id={it.id}
                           hideTag={true}></Multiple>;
        case +it.controlType===5://带单位数字键盘
        return <NumberUnitDrop prefix={it.labelPrefix}
                               suffix={it.labelSuffix}
                               placeholder={it.name}
                               boxMark={ikey.substr(0,1)}
                               id={it.id}
                               show={show}
                               ikey={inx}
                               value={it.value}
                               hideTag={true}></NumberUnitDrop>;
        case +it.controlType===3:
        case +it.controlType===6:
          return <InlineTag prefix={it.labelPrefix}
                            suffix={it.labelSuffix}
                            placeholder={it.name}
                            value={it.value}
                            id={it.id}
                            ikey={inx} hideTag={true}></InlineTag>;
        case +it.controlType===7:
          const min = it.minValue!=null&&it.minValue!=undefined?it.minValue-1:undefined;
          const max = it.maxValue!=null&&it.maxValue!=undefined?+it.maxValue+1:undefined;
          return <NumberDrop prefix={it.labelPrefix}
                             suffix={it.labelSuffix}
                             placeholder={it.name}
                             min={min}
                             max={max}
                             show={show}
                             allClick={false}
                             ikey={inx}
                             id={it.id}
                             patId = {copyId}
                             value={it.value}
                             hideTag={true}></NumberDrop>;
        case +it.controlType===11:
          return <RadioInpDrop data={it.questionDetailList}
                             vals={it.vals}
                             placeholder={it.name}
                             show={showArr&&showArr[inx]}
                             value = {it.value}
                             boxMark={boxMark}
                             id={it.id}
                             ikey={inx}
                             hideTag={true}></RadioInpDrop>;
        default:
          return it.name;
      }
    });
    return list;
  }
  changeToEdit(e){
    const {name,copyId,ikey,placeholder,handleDbclick,saveText,prefix,suffix} = this.props;
    const labelInx = ikey.substr(1);
    const text = saveText&&saveText[+labelInx];
    //clearTimeout(this.state.timer);//取消延时的单击事件
    e.preventDefault();
    if(text&&text.trim()) {//有选中值的标签才能双击编辑
      this.setState({
        editable: true
      });
      //失焦关闭编辑状态
      setTimeout(()=>{
        this.$cont.current.focus();
      });
      //双击埋点记录
      handleDbclick && handleDbclick({id:copyId});
    }
  }
  handleEdit(e){
    const {saveEditText,ikey} = this.props;
    if(!this.state.editable) return;
    this.setState({
      editable: false
    });
    let totalVal = e.target.innerText || e.target.innerHTML;
    saveEditText && saveEditText({ikey,type:'4',totalVal});
  }
  componentDidMount(){
    //挂载完成保存有加号的项目数据
    const {saveAddItem,fullData,copyId,showAdd} = this.props;
    if(showAdd){
      const data = tools.deepClone(fullData);
      saveAddItem&&saveAddItem(copyId,data);
    }
  }
  getContClass(){
    const {editable} = this.state;
    const edit = editable?style['blue-border']:'';
    return classNames(edit);
  }
  render(){
    const {showAdd,addLabelItem,ikey,copyId,textPrefix,textSuffix} = this.props;
    return (<div className={this.getContClass()}
                 style={{display:'inline-block'}}
                 onDoubleClick={this.changeToEdit}
                 ref = {this.$cont}
                 contentEditable={this.state.editable}
                 onBlur={this.handleEdit}
                 onkeydown={tools.handleEnter}>
      {textPrefix?<span>{textPrefix}</span>:''}
      <div className={this.getClass()}>
      {this.getLabels()}
      {textSuffix?<span>{textSuffix}</span>:''}
      {showAdd?<img src={addIcon} alt="添加血压项"
                    className={style['add-icon']}
                    onClick={()=>addLabelItem({ikey,copyId})}/>:''}
    </div>
    </div>)
  }
}

export default MultSpread;