123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- import React,{Component} from 'react';
- import style from './index.less';
- import config from "@config/index";
- import {filterArr,handleEnter} from '@utils/tools.js';
- import Notify from '../Notify/index.js';
- /*****
- * author:zn@2018-12-10
- * 自由文本输入组件
- * 接收参数:
- * value:默认显示文字
- * handleChange:输入变化时触发函数,接收以下参数:
- * * boxMark:病例项标识
- * * i:标签index
- * * text:标签内文字
- *
- * ****/
- class EditableSpan extends Component{
- constructor(props){
- super(props);
- this.state={
- timer:null,
- clearTimer:null,
- oldText:props.value,
- labelVal:'', //存放标签原有的值--主诉字数限制用
- };
- this.$span = React.createRef();
- this.handleFocus = this.handleFocus.bind(this);
- this.onChange = this.onChange.bind(this);
- this.handleBlur = this.handleBlur.bind(this);
- }
- handleFocus(e){
- e.stopPropagation();
- const {setFocusIndex,i,boxMark}= this.props;
- let text = e.target.innerText;
- setFocusIndex&&setFocusIndex({i,boxMark,dom:this.$span});
- this.setState({
- labelVal:text
- });
- }
- onChange(e){
- e.stopPropagation();
- const {handleChange,boxMark,i,handleSearch,value,mainSaveText,mainIds} = this.props;
- const {labelVal,oldText} = this.state;
- const text1 =e.target.innerText;
- let mainText = filterArr(mainSaveText);//主诉字数
- if(+boxMark==1){
- if(mainText.length >= config.limited){
- if(text1.length > labelVal.length){
- e.target.innerText = labelVal;
- Notify.info(config.limitText);
- return
- }else if(text1.length == labelVal.length){
- this.setState({
- labelVal:text1
- });
- }else{
- handleChange&&handleChange({text1,boxMark,i});
- }
- return
- }
- }
- this.setState({
- labelVal:text1
- });
- const that = this;
- handleChange&&handleChange({text1,boxMark,i});
- //延迟搜索
- clearTimeout(this.state.timer);
- const timer = setTimeout(function(){
- let newText = e.target.innerText;
- let temp = '';
- let search='';
- clearTimeout(that.state.timer);
- temp = newText.replace(oldText.replace(/(^\s*)|(\s*$)/g,''),'');
- search = temp.replace(/(^\s*)|(\s*$)/g,'');
- //console.log(111,oldText,333,newText,444,search);
- handleSearch&&handleSearch({text:search,boxMark,mainIds});
- that.setState({
- oldText:newText
- })
- },config.delayTime);
- this.setState({
- timer
- });
- }
- handleBlur(e){//为了阻止冒泡事件
- const {boxMark,handleClear,handleChange,i} = this.props;
- e.stopPropagation();
- // 延时清空搜索结果,不延时会影响选中
- clearTimeout(this.state.clearTimer);
- const clearTimer = setTimeout(function(){
- handleClear && handleClear({boxMark})
- },config.delayTime);
- this.setState({
- clearTimer
- });
- }
- /*shouldComponentUpdate(next){
- if(JSON.stringify(next) == JSON.stringify(this.props)){
- return false;
- }
- return true;
- }*/
- componentWillReceiveProps(next){
- const isRead = this.props.isRead;
- if(next.isRead != isRead){
- this.$span.current.innerText = next.value||'';
- }
- }
- componentDidMount(){
- const {value} = this.props;
- if(value){
- this.$span.current.innerText = value||'';
- }
- }
- render() {
- return <span className={style['editable-span']}
- contentEditable='true'
- ref={this.$span}
- onInput={this.onChange}
- onFocus={this.handleFocus}
- onBlur={this.handleBlur}
- onkeydown={handleEnter}></span>;
- }
- }
- export default EditableSpan;
|