newICSS/src/common/components/SearchBox/index.jsx

import React from 'react';
import styles from './index.less';
import clear from './imgs/clear.png';
import search from './imgs/search.png';
import PropTypes from "prop-types";
import config from '@config/index';
import $ from 'jquery';
import classNames from 'classnames';
import SearchDrop from '@components/SearchDrop';
import ScrollArea from 'react-scrollbar';
/**
 * 搜索框
 * handleChangeValue  函数参数为输入框的value值
 */
class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            val:'',
            showBox:false, //显示搜索结果
            border:'',
            show:false, //显示清空icon
            timer:null,
            searchData:[]
        }
        this.textInput = React.createRef();
        this.handleClearVal = this.handleClearVal.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
        this.clickIcon = this.clickIcon.bind(this);
        this.handleSearchSelect = this.handleSearchSelect.bind(this);
    }
    componentDidMount(){
      // this.props.handleChangeValue('');
    }
    handleClearVal(){
        const { handleChangeValue } = this.props;
        this.textInput.current.value = '';
        this.textInput.current.focus();
        this.setState({
            val:'',
            show:false
        });
        handleChangeValue('');
    }
    handleSearchSelect(e,item){
      e.stopPropagation();
      e.preventDefault();
      const {cliIndex,chooseSearch,clearSearch} = this.props;
      console.log("选择数据:",item);
      this.setState({
        val:'',
        show:false
      });
      chooseSearch&&chooseSearch({item:item,index:cliIndex})
      clearSearch&&clearSearch();
      this.textInput.current.innerText = "";
    }
    handleInput(e){
      e.stopPropagation();
      e.preventDefault();
      const { getSearchData ,mainIds} = this.props;
        clearTimeout(this.state.timer);
        let timer = setTimeout(()=>{
            clearTimeout(this.state.timer);
            if(e.target.value.trim() == ''){
                this.setState({
                  show:false
                })
                return
            }
            this.setState({
                val:e.target.value,
                show:true
            })
            getSearchData && getSearchData({inpStr:e.target.value.replace('<br>',''),boxMark:1,itemType:0,mainIds:mainIds});
        },config.delayTime);
        this.setState({
            timer
        });
    }
    handleFocus(e){
      e.stopPropagation();
      e.preventDefault();
      if(this.state.val.trim() != ''){
        return;
      }else{
          this.setState({border:true})
      }
    }
    handleBlur(e){
      e.stopPropagation();
      e.preventDefault();
      this.setState({border:false,val:''})
    }
    clickIcon(){
      this.setState({showBox:true,val:''})
      setTimeout(()=>{
        this.textInput.current.focus();
      },0)
    }
    componentWillReceiveProps(next){
      // 隐藏时，清空搜索框内文字，清空搜索结果，隐藏搜索框
      const { clearSearch } = this.props;
      if(!next.show && next.show != this.props.show){
        clearSearch();
        this.textInput.current.innerText = "";
        this.setState({
          showBox:false,
          val:'',
          border:false,
          searchData:[]
        })
      }
    }
    render() {
        const { children,visible,mainSearchData } = this.props;
        const { show ,border, showBox,searchData} = this.state;
        const showBd = showBox?styles['borderNone']:'';
        const borderCor = border?styles['border']:'';
        const isShow = showBox?styles['show']:styles['hide'];
        let litext = '';
        const contStyle={
          opacity:'0.4',
          right:'0',
          top:'1px',
          zIndex:'15',
          width:'14px',
          background:'#f1f1f1'};
        const barStyle={background:'#777',width:'100%'};
        return (
            <div className={classNames(styles['search'])} onClick={(e)=>{e.stopPropagation();}}>
                <img className={styles.searchVal} src={search} alt="搜索" onClick={this.clickIcon}/>
                <img style={{display:show?'block':'none'}} className={styles.clearVal} src={clear} onClick={this.handleClearVal} alt="清空" />
                <input
                    className={classNames(isShow,showBd,borderCor)}
                    type="text"
                    maxLength="30"
                    ref={this.textInput}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    onInput={(e) => { 
                        this.handleInput(e)
                    }}
                    onPropertyChange={(e) => {  // 兼容ie
                        this.handleInput(e)
                    }}
                />
                {mainSearchData&&mainSearchData.length>0 ? <div className={styles.autoList}>
                    <ScrollArea speed={0.8}
                      horizontal={false}
                      stopScrollPropagation={mainSearchData.length>6?true:false}
                      style={{maxHeight:'225px'}}
                      verticalContainerStyle={contStyle}
                      verticalScrollbarStyle={barStyle}
                      contentClassName="content">
                      <ul>
                        {mainSearchData&&mainSearchData.map((it)=>{
                          litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
                          return <li key={it.conceptId} onClick={(e)=>this.handleSearchSelect(e,it)} title={litext}>{litext}</li>
                        })}
                      </ul>
                    </ScrollArea>
                  </div>:''}
            </div>
        )
    }
}
/*SearchBox.defaultProps = {
    visible: false
};

SearchBox.propTypes = {
    visible:PropTypes.bool,
    handleChangeValue: PropTypes.func
};*/
export default SearchBox;