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

import React,{Component} from 'react';
import style from './index.less';
import config from '@config/index.js';
import Notify from '../Notify/index.js';
import ReactDom from "react-dom";
import backspace from '../../images/backspace.png'

class NumberUnitPan extends Component{
  constructor(props){
    super(props);
    this.state = {
      value:''
    }
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(e){
    e.stopPropagation();
    const text = e.target.innerText || e.target.innerHTML;
    const preValue = this.state.value;
    if(+text==0 && !preValue){//第一位不能是0
      Notify.info("请输入正确时间");
      return false;
    }
    const value = this.props.toClear?'':this.state.value;     //键盘输入替换已有的值
    const onSelect = this.props.handleSelect;
    this.setState({
      value: value+text
    });
    onSelect&&onSelect({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 value = this.state.value;
    const value = this.props.value;
    const len = value.length-1;
    if(len<0){
      return;
    }
    const onSelect = this.props.handleSelect;
    const text = value.substring(0,len);
    this.setState({
      value:text
    });
    onSelect&&onSelect({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'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
    }
  }
  componentWillReceiveProps(nextProps){
    //重新选择的值替换 不追加
     if(!nextProps.show){
      this.setState({
        value:''
      });
     }
  }
  render(){
    // const select = this.handleSelect.bind(this);
    const domNode = document.getElementById('root');
    return ReactDom.createPortal( 
      <div className={style['panBox']} onBlur={(e)=>e.stopPropagation()} style={this.getStyle()}>
        <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 colspan="2" 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>
      </div>
    ,domNode)
  }
}

export default NumberUnitPan;