index.jsx 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import React,{Component} from 'react';
  2. import style from './index.less';
  3. import config from "@config/index";
  4. import {filterArr,handleEnter} from '@utils/tools.js';
  5. import Notify from '../Notify/index.js';
  6. /*****
  7. * author:zn@2018-12-10
  8. * 自由文本输入组件
  9. * 接收参数:
  10. * value:默认显示文字
  11. * handleChange:输入变化时触发函数,接收以下参数:
  12. * * boxMark:病例项标识
  13. * * i:标签index
  14. * * text:标签内文字
  15. *
  16. * ****/
  17. class EditableSpan extends Component{
  18. constructor(props){
  19. super(props);
  20. this.state={
  21. timer:null,
  22. clearTimer:null,
  23. oldText:props.value,
  24. labelVal:'', //存放标签原有的值--主诉字数限制用
  25. };
  26. this.$span = React.createRef();
  27. this.handleFocus = this.handleFocus.bind(this);
  28. this.onChange = this.onChange.bind(this);
  29. this.handleBlur = this.handleBlur.bind(this);
  30. }
  31. handleFocus(e){
  32. e.stopPropagation();
  33. const {setFocusIndex,i,boxMark}= this.props;
  34. let text = e.target.innerText;
  35. setFocusIndex&&setFocusIndex({i,boxMark,dom:this.$span});
  36. this.setState({
  37. labelVal:text
  38. });
  39. }
  40. onChange(e){
  41. e.stopPropagation();
  42. const {handleChange,boxMark,i,handleSearch,value,mainSaveText,mainIds} = this.props;
  43. const {labelVal,oldText} = this.state;
  44. const text1 =e.target.innerText;
  45. let mainText = filterArr(mainSaveText);//主诉字数
  46. if(+boxMark==1){
  47. if(mainText.length >= config.limited){
  48. if(text1.length > labelVal.length){
  49. e.target.innerText = labelVal;
  50. Notify.info(config.limitText);
  51. return
  52. }else if(text1.length == labelVal.length){
  53. this.setState({
  54. labelVal:text1
  55. });
  56. }else{
  57. handleChange&&handleChange({text1,boxMark,i});
  58. }
  59. return
  60. }
  61. }
  62. this.setState({
  63. labelVal:text1
  64. });
  65. const that = this;
  66. handleChange&&handleChange({text1,boxMark,i});
  67. //延迟搜索
  68. clearTimeout(this.state.timer);
  69. const timer = setTimeout(function(){
  70. let newText = e.target.innerText;
  71. let temp = '';
  72. let search='';
  73. clearTimeout(that.state.timer);
  74. temp = newText.replace(oldText.replace(/(^\s*)|(\s*$)/g,''),'');
  75. search = temp.replace(/(^\s*)|(\s*$)/g,'');
  76. //console.log(111,oldText,333,newText,444,search);
  77. handleSearch&&handleSearch({text:search,boxMark,mainIds});
  78. that.setState({
  79. oldText:newText
  80. })
  81. },config.delayTime);
  82. this.setState({
  83. timer
  84. });
  85. }
  86. handleBlur(e){//为了阻止冒泡事件
  87. const {boxMark,handleClear,handleChange,i} = this.props;
  88. e.stopPropagation();
  89. // 延时清空搜索结果,不延时会影响选中
  90. clearTimeout(this.state.clearTimer);
  91. const clearTimer = setTimeout(function(){
  92. handleClear && handleClear({boxMark})
  93. },config.delayTime);
  94. this.setState({
  95. clearTimer
  96. });
  97. }
  98. /*shouldComponentUpdate(next){
  99. if(JSON.stringify(next) == JSON.stringify(this.props)){
  100. return false;
  101. }
  102. return true;
  103. }*/
  104. componentWillReceiveProps(next){
  105. const isRead = this.props.isRead;
  106. if(next.isRead != isRead){
  107. this.$span.current.innerText = next.value||'';
  108. }
  109. }
  110. componentDidMount(){
  111. const {value} = this.props;
  112. if(value){
  113. this.$span.current.innerText = value||'';
  114. }
  115. }
  116. render() {
  117. return <span className={style['editable-span']}
  118. contentEditable='true'
  119. ref={this.$span}
  120. onInput={this.onChange}
  121. onFocus={this.handleFocus}
  122. onBlur={this.handleBlur}
  123. onkeydown={handleEnter}></span>;
  124. }
  125. }
  126. export default EditableSpan;