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

import React from 'react';
import styles from './index.less';
import clear from './imgs/clear.png';
import search from './imgs/search.png';
import slide from '../../images/show.png';
import PropTypes from "prop-types";
import config from '@config/index';
import $ from 'jquery';
/**
 * 前提条件父元素有定位
 * visible  搜索显示隐藏
 * handleChangeValue  函数参数为输入框的value值
 */
class SearchOption extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            val:'',
            border:'',
            show:false,
            timer:null,
            showInsp:false,
            txt:''
        }
        this.textInput = React.createRef();
        this.handleClearVal = this.handleClearVal.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
        this.setShowInsp = this.setShowInsp.bind(this);
        this.detailClick = this.detailClick.bind(this);
    }
    componentDidMount(){
      this.props.handleChangeValue('');
      const {windowHeight,pageTop,height,refreshScroller,searchType} = this.props;
      if(searchType==1){
          this.setState({txt:'细项'})
      }else if(searchType==2){
        this.setState({txt:'药品'})
      }
      refreshScroller()&&refreshScroller().refresh();    //点开搜索弹窗更新滚动条，
      if(windowHeight - pageTop < height){
        //$("#searchOption")[0].scrollIntoView(false);
        refreshScroller()&&refreshScroller().scrollBottom();
      }
      this.textInput.current.focus();
    }
    setShowInsp(){
        this.setState({
            showInsp:!this.state.showInsp
        })
    }
    handleClearVal(){
        const { handleChangeValue } = this.props;
        this.textInput.current.value = '';
        this.textInput.current.focus();
        this.setState({
            val:'',
            show:false
        });
        handleChangeValue('','clear');
    }
    detailClick(val,txt){
        const { detailClick,handleChangeValue } = this.props;
        detailClick(val)
        this.setState({txt:txt})
        let value = this.textInput.current.value||''

        if(value.trim() == ''){
            this.setState({
                show:false
            })
            return  handleChangeValue('');
        }
        this.setState({
            show:true
        })
        handleChangeValue(value)
    }
    handleInput(e){
      const { handleChangeValue } = this.props;
        clearTimeout(this.state.timer);
        let timer = setTimeout(()=>{
            clearTimeout(this.state.timer);
            if(e.target.value.trim() == ''){
                this.setState({
                    show:false
                })
                return  handleChangeValue('');
            }
            this.setState({
                val:e.target.value,
                show:true
            })
            handleChangeValue(e.target.value);
        },config.delayTime);
        this.setState({
            timer
        });
    }
    handleFocus(){

      this.setState({showInsp:false})
      if(this.state.val.trim() != ''){
        return;
      }else{
          this.setState({border:true})
      }
    }
    handleBlur(){

      this.setState({border:false,val:''})
    }
    render() {
        const { children,visible,searchType } = this.props;
        const { show,showInsp,txt } = this.state;
        return (
            searchType == 1||searchType == 2?
            <div id="searchOption" className={visible?`${styles.search} ${styles.searchSpecial} ${styles.show} searchOption`:`${styles.search} ${styles.searchSpecial} ${styles.hide} searchOption`}>
                <img className={`${styles.searchVal} ${styles.seleImg}`} src={slide} alt="选择" onClick={this.setShowInsp} />
                <img className={`${styles.searchVal} ${styles.searchInsp}`} src={search} alt="搜索" />
                <img style={{display:show?'block':'none'}} className={styles.clearVal} src={clear} onClick={this.handleClearVal} alt="清空" />
                <div className={styles.selectLis} onClick={this.setShowInsp}>
                    <span id="shTxt">{txt}</span>
                    {
                        searchType == 1?
                        <ul className={styles.lisul} style={{'display':showInsp?'block':'none'}}>
                            <li onClick={()=>{this.detailClick(2,'细项')}}>细项</li>
                            <li onClick={()=>{this.detailClick(1,'套餐')}}>套餐</li>
                        </ul>:
                        <ul className={styles.lisul} style={{'display':showInsp?'block':'none'}}>
                            <li onClick={()=>{this.detailClick(5,'药品')}}>药品</li>
                            <li onClick={()=>{this.detailClick(6,'手术/操作')}}>手术/操作</li>
                            <li onClick={()=>{this.detailClick(8,'输血')}}>输血</li>
                        </ul>
                    }
                </div>
                <input
                    className={this.state.border ?`${styles.border}`:`${styles.borderNone}`}
                    type="text"
                    maxLength="30"
                    ref={this.textInput}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    onInput={(e) => {
                        this.handleInput(e)
                    }}
                    onPropertyChange={(e) => {  // 兼容ie
                        this.handleInput(e)
                    }}
                    placeholder="搜索"
                />
                <div style={{'clear':'both'}}></div>
                <div className={styles.autoList}>
                    {children}
                </div>
            </div>:<div id="searchOption" className={visible?`${styles.search} ${styles.show} searchOption`:`${styles.search} ${styles.hide} searchOption`}>
                <img className={styles.searchVal} src={search} alt="搜索" />
                <img style={{display:show?'block':'none'}} className={styles.clearVal} src={clear} onClick={this.handleClearVal} alt="清空" />
                <input
                    className={this.state.border ?`${styles.border}`:`${styles.borderNone}`}
                    type="text"
                    maxLength="30"
                    ref={this.textInput}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    onInput={(e) => { 
                        this.handleInput(e)
                    }}
                    onPropertyChange={(e) => {  // 兼容ie
                        this.handleInput(e)
                    }}
                    placeholder="搜索"
                />
                <div className={styles.autoList}>
                    {children}
                </div>
            </div>
        )
    }
}
SearchOption.defaultProps = {
    visible: false
};

SearchOption.propTypes = {
    visible:PropTypes.bool,
    handleChangeValue: PropTypes.func
};
export default SearchOption;