|
@@ -20,18 +20,13 @@ class RadioInpDrop extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
- editable:false,
|
|
|
- timer:null,
|
|
|
texts:props.vals||{0:props.value||props.placeholder},
|
|
|
over:false,
|
|
|
- tmpDom:null
|
|
|
};
|
|
|
this.$cont = React.createRef();
|
|
|
this.isIE = navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"")=="MSIE8.0";
|
|
|
this.handleSelect = this.handleSelect.bind(this);
|
|
|
this.handleShow = this.handleShow.bind(this);
|
|
|
- this.handledbClick = this.handledbClick.bind(this);
|
|
|
- this.handleEditLabel = this.handleEditLabel.bind(this);
|
|
|
this.parseInputDom = this.parseInputDom.bind(this);
|
|
|
this.handleInnerInp = this.handleInnerInp.bind(this);
|
|
|
}
|
|
@@ -76,25 +71,11 @@ class RadioInpDrop extends Component{
|
|
|
handleSelect&&handleSelect({ikey,id:item.id,values:vals,mainSaveText,value});
|
|
|
}
|
|
|
handleShow(e){
|
|
|
- //e.stopPropagation();
|
|
|
+ e.stopPropagation();
|
|
|
const {handleShow,ikey,id,patId} = this.props;
|
|
|
- const that = this;
|
|
|
- const timer = setTimeout(()=>{
|
|
|
- if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
|
|
|
- return
|
|
|
- }else {
|
|
|
- document.activeElement.blur()//chrome41有效,但是失去焦点的span仍能编辑
|
|
|
- $(e.target).parent().parent().prev().attr({"contentEditable":false})
|
|
|
- this.setState({
|
|
|
- tmpDom:e.target
|
|
|
- })
|
|
|
- handleShow && handleShow({ikey,id:patId||id});
|
|
|
- }
|
|
|
- },300);
|
|
|
-
|
|
|
- this.setState({
|
|
|
- timer,
|
|
|
- });
|
|
|
+ document.activeElement.blur()//chrome41有效,但是失去焦点的span仍能编辑
|
|
|
+ handleShow && handleShow({ikey,id:patId||id});
|
|
|
+
|
|
|
windowEventHandler('scroll',()=>{ //弹窗跟随滚动条滚动或者关闭弹窗
|
|
|
let scrollYs = $("#addScrollEvent")[0].scrollTop;
|
|
|
this.setState({
|
|
@@ -102,49 +83,6 @@ class RadioInpDrop extends Component{
|
|
|
})
|
|
|
},$("#addScrollEvent")[0])
|
|
|
}
|
|
|
- /*componentDidMount(){ //默认值选中
|
|
|
- const {data,ikey,handleSelect} = this.props;
|
|
|
- const selected = data.find((it)=>{
|
|
|
- return it.selected === undefined&&+it.defaultSelect===1;
|
|
|
- });
|
|
|
- if(selected){
|
|
|
- // const text = selected.labelPrefix+selected.name+selected.labelSuffix;
|
|
|
- const text = selected.name;
|
|
|
- handleSelect&&handleSelect({ikey,id:selected.id,text});
|
|
|
- }
|
|
|
- }*/
|
|
|
- handleEditLabel(e){
|
|
|
- e.stopPropagation();
|
|
|
- if(!this.state.editable){ //ie8点开下拉未选值存值bug修改
|
|
|
- return;
|
|
|
- }
|
|
|
- const {ikey,boxMark,handleLabelEdit} = this.props;
|
|
|
- this.setState({
|
|
|
- editable:false
|
|
|
- });
|
|
|
- // 更改标签的value值
|
|
|
- const ev = e || window.event;
|
|
|
- let changeVal = ev.target.innerText || ev.target.innerHTML;
|
|
|
- if(!this.isIE){
|
|
|
- ev.target.innerText?(ev.target.innerText = ''):(ev.target.innerHTML = '');
|
|
|
- }
|
|
|
- handleLabelEdit && handleLabelEdit({ikey,changeVal,type:boxMark});
|
|
|
- }
|
|
|
- handledbClick(e){
|
|
|
- const {value,id,handleDbclick,patId} = this.props;
|
|
|
- clearTimeout(this.state.timer);//取消延时的单击事件
|
|
|
- //e.preventDefault();
|
|
|
- if(value&&value.trim()) {//有选中值的标签才能双击编辑
|
|
|
- this.setState({
|
|
|
- editable: true
|
|
|
- });
|
|
|
- };
|
|
|
- //失焦关闭编辑状态
|
|
|
- setTimeout(()=>{
|
|
|
- e.target.focus();
|
|
|
- })
|
|
|
- handleDbclick&&handleDbclick({id:patId||id});
|
|
|
- }
|
|
|
handleInnerInp(i,val){
|
|
|
const {ikey,boxMark,handleSaveInp,mainSaveText} = this.props;
|
|
|
let vals = this.state.texts;
|
|
@@ -183,7 +121,7 @@ class RadioInpDrop extends Component{
|
|
|
for(let i in texts){
|
|
|
temp = texts[i];
|
|
|
if(typeof temp=='object'){
|
|
|
- list.push(<InputComp handleInp={this.handleInnerInp} editable={true} index={i} value={temp.value} over={over}></InputComp>);
|
|
|
+ list.push(<InputComp handleInp={this.handleInnerInp} index={i} value={temp.value} over={over}></InputComp>);
|
|
|
}else{
|
|
|
list.push(<span> {temp}</span>);
|
|
|
}
|
|
@@ -191,18 +129,10 @@ class RadioInpDrop extends Component{
|
|
|
return list;
|
|
|
}
|
|
|
render(){
|
|
|
- const {data,show,vals,placeholder,hideTag} = this.props;
|
|
|
- const {tmpDom} = this.state
|
|
|
- if(!show&&tmpDom){
|
|
|
- $(tmpDom).parent().parent().prev().attr({"contentEditable":true})
|
|
|
- }
|
|
|
- // 移除双击编辑 onDoubleClick={hideTag?null:this.handledbClick}
|
|
|
+ const {data,show,vals,placeholder} = this.props;
|
|
|
return <div className={style['container']} ref = {this.$cont}>
|
|
|
<div className={this.getClass()}
|
|
|
- onBlur={this.handleEditLabel}
|
|
|
- contentEditable={this.state.editable}
|
|
|
-
|
|
|
- onClick={(e)=>this.handleShow(e,true)}
|
|
|
+ onClick={(e)=>this.handleShow(e)}
|
|
|
onKeyDown={handleEnter}>
|
|
|
{vals?this.parseInputDom():<span>{placeholder}</span>}
|
|
|
</div>
|
|
@@ -238,13 +168,13 @@ class InputComp extends Component{
|
|
|
}
|
|
|
}
|
|
|
render(){
|
|
|
- const {editable,value} = this.props;
|
|
|
- return editable?<span contentEditable={true}
|
|
|
+ const {value} = this.props;
|
|
|
+ return <span contentEditable={true}
|
|
|
ref={this.$inp}
|
|
|
className={style['inner-inp']}
|
|
|
onClick={(e)=>{e.stopPropagation()}}
|
|
|
onFocus={(e)=>{e.stopPropagation()}}
|
|
|
- onBlur={this.handleBlur}> {value}</span>:<span> {value}</span>
|
|
|
+ onBlur={this.handleBlur}> {value}</span>
|
|
|
}
|
|
|
}
|
|
|
|