Merge remote-tracking branch 'origin/ChronicMag' into dev/new1

src/common/components/NumberPan/index.jsx

@@ -9,6 +9,7 @@ class NumberPan extends Component{
     this.state = {
       value:''
     }
+    this.handleSelect = this.handleSelect.bind(this);
   }
   handleSelect(e){
     e.stopPropagation();
@@ -57,7 +58,7 @@ class NumberPan extends Component{
     }
   }
   render(){
-    const select = this.handleSelect.bind(this); 
+    const select = this.handleSelect;
     const domNode = document.getElementById('root');
     return ReactDom.createPortal(
        <div className={style['panBox']} 

src/components/MultSpread/index.jsx

@@ -27,6 +27,7 @@ class MultSpread extends Component{
     super(props);
     this.state = {
       editable: false,
+      numDoms:[]
     };
     this.$cont = React.createRef();
     this.changeToEdit = this.changeToEdit.bind(this);
@@ -41,11 +42,22 @@ class MultSpread extends Component{
     const hasAdd = showAdd?style['add']:'';
     return classNames(isSelected,hasAdd,orgBorder);
   }
+  saveDoms(it){
+    const doms = this.state.numDoms;
+    doms.push(it);
+    this.setState({
+      numDoms:doms
+    });
+  }
+  setNextFocus(i){
+    const doms = this.state.numDoms;
+    doms[i+1]&&doms[i+1].current.focus();
+  }
   getLabels(){
     const {data,ikey,showArr,copyId,selecteds,boxMark} = this.props;
     const {editable}= this.state;
     let show = false;
-    let inx = '';
+    let inx = '',count=0;
     const list = data.map((it,i)=>{
       inx=ikey+''+i;
       show = editable?false:showArr&&showArr[inx];
@@ -104,6 +116,10 @@ class MultSpread extends Component{
           return <NumberDrop prefix={it.labelPrefix}
                              suffix={it.labelSuffix}
                              placeholder={it.name}
+                             //inputRef = {this['$inp'+(count++)]}
+                             saveDoms={this.saveDoms.bind(this)}
+                             reFocus={this.setNextFocus.bind(this)}
+                             num = {count++}
                              min={min}
                              max={max}
                              show={show}

src/components/NumberDrop/index.jsx

@@ -32,14 +32,14 @@ class NumberDrop extends Component{
     this.$pre = React.createRef();
     this.$suf = React.createRef();
     this.$cont = React.createRef();
-    this.select = this.select.bind(this);
+    //this.select = this.select.bind(this);
     this.numInpBlur = this.numInpBlur.bind(this);
     this.handleSpanInp = this.handleSpanInp.bind(this);
     this.handleNumClick = this.handleNumClick.bind(this);
     this.handleNumFocus = this.handleNumFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.changeToEdit = this.changeToEdit.bind(this);
-    // this.handleKeyDowm = this.handleKeyDowm.bind(this);
+    this.handleKeyDowm = this.handleKeyDowm.bind(this);
     this.beyondArea = this.beyondArea.bind(this);
   }
   select(text){        //选中键盘上数字事件
@@ -93,6 +93,13 @@ class NumberDrop extends Component{
     }
     e.stopPropagation();
   }
+  handleKeyDowm(e){
+    if(e.keyCode==13){
+      const {reFocus,num,handleHide} = this.props;
+      reFocus&&reFocus(num);
+      handleHide && handleHide();
+    }
+  }
   handleNumClick(e){     //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
     const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
     if(show) {
@@ -191,21 +198,9 @@ class NumberDrop extends Component{
     const {handleHide} = this.props;
     handleHide&&handleHide();
   }
-  // handleKeyDowm(e){
-    // handleEnter();
-    //只能输入数字
-    /*const key = e.key;
-    const ctrlOn = e.ctrlKey;
-    const isCopyPaste = ctrlOn&&(key=='v'||key=='c');
-    if((!/[0-9|.|～|\/]/.test(key)&&key.length==1&&!isCopyPaste)){
-      e.preventDefault();
-      return false;
-    }*/
-  // }
   getClasses(){         //整个标签是否有值的状态
     const {hideTag,placeholder,value,isImports} = this.props;
-    const $span = this.$span.current;
-    const val = value;//$span&&$span.innerText.trim()||value;
+    const val = value;
     const blueBorder = this.state.editable?style['blue-border']:'';
     const isSelected = val&&val!=placeholder?style['selected']:style['container'];
     const orgBorder = isImports&&!(val&&val!=placeholder)?style['orange-border']:'';
@@ -252,6 +247,11 @@ class NumberDrop extends Component{
     //设置最小宽度避免输入后宽度跳动
     const spanWidth = window.getComputedStyle(this.$span.current).width;
     this.$span.current.style.minWidth=spanWidth;
+    //保存输入框dom以便聚焦
+    const {saveDoms,num} = this.props;
+    //console.log(num);
+    saveDoms&&saveDoms(this.$span);
+    //console.log(this.props.inputRef)
   }
   render(){
     const {prefix,suffix,show,value,handleHide,allClick} = this.props;
@@ -270,12 +270,13 @@ class NumberDrop extends Component{
             contentEditable={true}
             style={{minWidth:'10px',display:'inline-block',textAlign:'center'}}
             ref = {this.$span}
+            onkeydown={this.handleKeyDowm}
             onBlur={this.numInpBlur}
             onInput={this.handleSpanInp}
             className={this.getSpanClass()}
             >&nbsp;{value||placeholder}</span>
       <span ref = {this.$suf}>&nbsp;{suffix}</span>
-      <NumberPan handleSelect={(text)=>this.select(text)}
+      <NumberPan handleSelect={this.select.bind(this)}
                  onClose={handleHide}
                  show={show} 
                  toClear={!hasSelect}