|
@@ -10,8 +10,6 @@ import {handleEnter} from '@utils/tools.js';
|
|
|
* value:输入的值
|
|
|
* placeholder
|
|
|
* suffix:后缀文字
|
|
|
- * canEditable: 切换父元素框(主诉同级框)的可编辑属性,
|
|
|
- * PS:父元素框可编辑时子元素onBlur无法触发,因为此时focus的元素为父元素框
|
|
|
*
|
|
|
***/
|
|
|
class InlineTag extends Component {
|
|
@@ -19,9 +17,12 @@ class InlineTag extends Component {
|
|
|
super(props);
|
|
|
this.$box = React.createRef();
|
|
|
this.$span = React.createRef();
|
|
|
+ this.$pre = React.createRef();
|
|
|
+ this.$suf = React.createRef();
|
|
|
this.state = {
|
|
|
editable:false,
|
|
|
- value:props.value||''
|
|
|
+ value:props.value||'',
|
|
|
+ placeholder:props.placeholder||''
|
|
|
};
|
|
|
this.changeToEdit = this.changeToEdit.bind(this);
|
|
|
this.changeToClick = this.changeToClick.bind(this);
|
|
@@ -29,7 +30,6 @@ class InlineTag extends Component {
|
|
|
this.handleInput = this.handleInput.bind(this);
|
|
|
this.handleFocus = this.handleFocus.bind(this);
|
|
|
this.handleFixClick = this.handleFixClick.bind(this);
|
|
|
- this.handleBoxInput = this.handleBoxInput.bind(this);
|
|
|
}
|
|
|
changeToEdit(e){
|
|
|
const {handledbClick,id} = this.props;
|
|
@@ -44,45 +44,34 @@ class InlineTag extends Component {
|
|
|
//埋点记录
|
|
|
handledbClick&&handledbClick({id});
|
|
|
}
|
|
|
- handleBoxInput(e){
|
|
|
- const {handleInput,ikey,prefix,suffix} = this.props;
|
|
|
- const total = e.target.innerText;
|
|
|
- const text = this.$span.current.innerText;
|
|
|
- if(!total){
|
|
|
- handleInput&&handleInput({text:total,ikey});
|
|
|
- }
|
|
|
- }
|
|
|
- changeToClick(event){
|
|
|
- event.returnValue = true;
|
|
|
- const {canEditable} = this.props;
|
|
|
- canEditable&&canEditable();
|
|
|
+ changeToClick(e){
|
|
|
+ e.stopPropagation();
|
|
|
+ const {saveEditText,ikey} = this.props;
|
|
|
this.setState({
|
|
|
editable:false
|
|
|
});
|
|
|
+ saveEditText&&saveEditText({
|
|
|
+ changeVal:this.$span.current.innerText,
|
|
|
+ totalVal:this.$box.current.innerText,
|
|
|
+ prefix:this.$pre.current.innerText,
|
|
|
+ suffix:this.$suf.current.innerText,
|
|
|
+ ikey
|
|
|
+ });
|
|
|
}
|
|
|
handleInput(e){ //输入时保存临时值,在修改灰显为黑色时判断用
|
|
|
e.stopPropagation();
|
|
|
- const {handleInput,ikey,prefix,suffix} = this.props;
|
|
|
- const text = e.target.innerText || e.target.innerHTML;
|
|
|
- // 内容全部删除时,要把空值存到store,否则会遗留最后一个字且为灰色无法删除
|
|
|
- if(!text){
|
|
|
- this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML=''); //修改生成文字变成输入的2倍bug
|
|
|
- handleInput&&handleInput({text:text,ikey,prefix,suffix});
|
|
|
- this.setState({
|
|
|
- value:" "
|
|
|
- });
|
|
|
- return
|
|
|
- }
|
|
|
- this.setState({
|
|
|
- value:text
|
|
|
- });
|
|
|
- // e.target.innerText = text;
|
|
|
}
|
|
|
handleBlur(e){ //鼠标离开是保存值到store中
|
|
|
e.stopPropagation(); //不阻止会触发外层div的失焦事件
|
|
|
- const {value} = this.state;
|
|
|
- const {handleInput,ikey,prefix,suffix} = this.props;
|
|
|
- this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML=''); //修改生成文字变成输入的2倍bug
|
|
|
+ const value = e.target.innerText;
|
|
|
+ const {handleInput,ikey,prefix,suffix,placeholder} = this.props;
|
|
|
+ if(!value.trim()){
|
|
|
+ this.setState({
|
|
|
+ placeholder:placeholder,
|
|
|
+ value:''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML=''); //修改生成文字变成输入的2倍bug
|
|
|
handleInput&&handleInput({text:value.trim(),ikey,prefix,suffix});
|
|
|
this.setState({
|
|
|
value:value.trim()
|
|
@@ -92,20 +81,22 @@ class InlineTag extends Component {
|
|
|
e.stopPropagation();
|
|
|
const text = e.target.innerText || e.target.innerHTML;
|
|
|
const {placeholder} = this.props;
|
|
|
- if(text==placeholder){
|
|
|
- e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML='');
|
|
|
+ if(text.trim()==placeholder){
|
|
|
+ this.setState({
|
|
|
+ placeholder:''
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
getStyle(){
|
|
|
- const {value} = this.state;
|
|
|
- const {hideTag} = this.props;
|
|
|
+ const {hideTag,placeholder} = this.props;
|
|
|
+ const value = this.$span.current&&this.$span.current.innerText.trim();
|
|
|
if(hideTag){
|
|
|
if(value){
|
|
|
return classNames(style['selected-no-tag']);
|
|
|
}
|
|
|
return style['no-tag'];
|
|
|
}
|
|
|
- if(!value){
|
|
|
+ if(!value||value.trim()==placeholder){
|
|
|
return classNames(style['gray']);
|
|
|
}
|
|
|
return style['selected-tag'];
|
|
@@ -133,27 +124,25 @@ class InlineTag extends Component {
|
|
|
this.$span.current.style.minWidth=spanWidth;
|
|
|
}
|
|
|
render(){
|
|
|
- const {placeholder,value,prefix,suffix} = this.props;
|
|
|
- const {editable} = this.state;
|
|
|
- const inp = this.state.value;
|
|
|
+ const {prefix,suffix} = this.props;
|
|
|
+ const {editable,placeholder,value} = this.state;
|
|
|
return <div className={this.getStyle()}
|
|
|
onDoubleClick={this.changeToEdit}
|
|
|
- onClick={!editable?this.handleFixClick:''}
|
|
|
- onkeydown={handleEnter}
|
|
|
+ /*onClick={!editable?this.handleFixClick:''}*/
|
|
|
+ onKeyDown={handleEnter}
|
|
|
onBlur={this.changeToClick}
|
|
|
ref={this.$box}
|
|
|
- contentEditable={editable}
|
|
|
- onInput={this.handleBoxInput}>
|
|
|
- {prefix}
|
|
|
+ contentEditable={editable}>
|
|
|
+ <span ref={this.$pre}> {prefix}</span>
|
|
|
<span className={style['free-in']}
|
|
|
contentEditable={true}
|
|
|
onBlur={this.handleBlur}
|
|
|
onInput={this.handleInput}
|
|
|
onFocus={this.handleFocus}
|
|
|
- onClick={e=>e.stopPropagation()}
|
|
|
- onkeydown={handleEnter}
|
|
|
- ref={this.$span}>{value||(inp?'':placeholder)}</span>
|
|
|
- {suffix}
|
|
|
+ /*onClick={e=>e.stopPropagation()}*/
|
|
|
+ onKeyDown={handleEnter}
|
|
|
+ ref={this.$span}> {value||placeholder}</span>
|
|
|
+ <span ref={this.$suf}> {suffix}</span>
|
|
|
</div>;
|
|
|
}
|
|
|
}
|