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

import React,{Component} from 'react';
import style from './index.less';
import Notify from '../Notify/index.js';
import ReactDom from "react-dom";
import backspace from '../../images/backspace.png';
/**
* 时间单位组件下拉(tagType=1,controlType=5)
* 
*/

class NumberUnitPan extends Component{
  constructor(props){
    super(props);
    this.state = {
      value:''
    }
    this.handleSelect = this.handleSelect.bind(this);
    this.getUnitTable = this.getUnitTable.bind(this);
  }
  handleSelect(e){
    e.stopPropagation();
    const {handleSelect,toClear} = this.props;
    const text = e.target.innerText || e.target.innerHTML;
    const preValue = this.state.value;
    // if(+text==0 && !preValue){//第一位不能是0
    //   Notify.info("请输入正确时间");
    //   return false;
    // }
    const value = toClear?'':this.state.value;     //键盘输入替换已有的值
    this.setState({
      value: value+text
    });
    handleSelect&&handleSelect({text:value+text,mark:true});//增加mark参数，清空删除不提示字数限制
  }
  handleClear(e){
    e.stopPropagation();
    const onSelect = this.props.handleSelect;
    this.setState({
      value: ''
    });
    onSelect&&onSelect({text:'',mark:false});
  }
  handleClose(e){
    e.stopPropagation();
    //关闭弹窗
    const {onClose} = this.props;
    onClose&&onClose();
  }
  handleBack(e){
    e.stopPropagation();
     const {handleSelect,value} = this.props;
    if(value===undefined||value==''){
      return;
    }
    const len = value.length-1;
    const text = value.substring(0,len);
    this.setState({
      value:text
    });
    handleSelect&&handleSelect({text,mark:false});
  }
  getStyle(){
    const {left,top,show} = this.props;
    return {
      /*left:left?left+'px':'0',
      top:top?top+'px':'0',*/
      display:show?'table':'none'
    }
  }
  getUnitTable(){
    const {unitType} = this.props;
    if(unitType == 8){
      return <table className={style['pan']} >
        <tr>
          <td><span onClick={this.handleSelect}>1</span></td>
          <td><span onClick={this.handleSelect}>2</span></td>
          <td><span onClick={this.handleSelect}>3</span></td>
          <td><span onClick={this.handleSelect}>ml</span></td>
          <td><span onClick={this.handleSelect}>qd</span></td>
          <td><span onClick={this.handleClose.bind(this)} className={style.borderNone}>.</span></td>
        </tr>
        <tr>
          <td><span onClick={this.handleSelect}>4</span></td>
          <td><span onClick={this.handleSelect}>5</span></td>
          <td><span onClick={this.handleSelect}>6</span></td>
          <td><span onClick={this.handleSelect}>mg</span></td>
          <td><span onClick={this.handleSelect}>bid</span></td>
          <td><span onClick={this.handleClose.bind(this)} className={style.borderNone}>.</span></td>
        </tr>
        <tr>
          <td><span onClick={this.handleSelect}>7</span></td>
          <td><span onClick={this.handleSelect}>8</span></td>
          <td><span onClick={this.handleSelect}>9</span></td>
          <td><span onClick={this.handleSelect}>g</span></td>
          <td><span onClick={this.handleSelect}>tid</span></td>
          <td><span onClick={this.handleClose.bind(this)} className={style.borderNone}>.</span></td>
        </tr>
        <tr>
          <td><span onClick={this.handleSelect}>.</span></td>
          <td><span onClick={this.handleSelect}>0</span></td>
          <td><span onClick={this.handleSelect}>粒</span></td>
          <td><span onClick={this.handleSelect}>片</span></td>
          <td><span onClick={this.handleSelect}>qid</span></td>
          <td className={style['imgN']}><img src={backspace} onClick={this.handleBack.bind(this)} /></td>
        </tr>
        <tr>
          <td colspan="3"><span onClick={this.handleClear.bind(this)} className={style['clearN']}>清空</span></td>
          <td colspan="3"><span onClick={this.handleClose.bind(this)} className={style['comf']}>确定</span></td>
        </tr>
      </table>
    }
    return <table className={style['pan']} >
      <tr>
        <td><span onClick={this.handleSelect}>1</span></td>
        <td><span onClick={this.handleSelect}>2</span></td>
        <td><span onClick={this.handleSelect}>3</span></td>
        <td><span onClick={this.handleSelect}>分钟</span></td>
        <td><span onClick={this.handleSelect}>周</span></td>
        <td><span onClick={this.handleSelect}>余</span></td>
      </tr>
      <tr>
        <td><span onClick={this.handleSelect}>4</span></td>
        <td><span onClick={this.handleSelect}>5</span></td>
        <td><span onClick={this.handleSelect}>6</span></td>
        <td><span onClick={this.handleSelect}>小时</span></td>
        <td><span onClick={this.handleSelect}>年</span></td>
        <td><span onClick={this.handleSelect}>次</span></td>
      </tr>
      <tr>
        <td><span onClick={this.handleSelect}>7</span></td>
        <td><span onClick={this.handleSelect}>8</span></td>
        <td><span onClick={this.handleSelect}>9</span></td>
        <td><span onClick={this.handleSelect}>天</span></td>
        <td><span onClick={this.handleSelect}>月</span></td>
        <td><span onClick={this.handleSelect}>岁</span></td> 
      </tr>
      <tr>
        <td><span onClick={this.handleSelect}>.</span></td>
        <td><span onClick={this.handleSelect}>0</span></td>
        <td><span onClick={this.handleSelect}>～</span></td>
        <td><span onClick={this.handleSelect}>/</span></td>
        <td><span onClick={this.handleSelect}>秒</span></td>
        <td className={style['imgN']}><img src={backspace} onClick={this.handleBack.bind(this)} /></td>
      </tr>
      <tr>
        <td colspan="3"><span onClick={this.handleClear.bind(this)} className={style['clearN']}>清空</span></td>
        <td colspan="3"><span onClick={this.handleClose.bind(this)} className={style['comf']}>确定</span></td>
      </tr>
    </table>
  }
  componentWillReceiveProps(nextProps){
    //重新选择的值替换 不追加
     if(!nextProps.show){
      this.setState({
        value:''
      });
     }
  }
  render(){
    const domNode = document.getElementById('root');
    return <div className={style['panBox']} onBlur={(e)=>e.stopPropagation()} style={this.getStyle()}>
        {this.getUnitTable()}
      </div>
  }
}

export default NumberUnitPan;