123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- import React, { Component } from 'react';
- import style from './index.less';
- import close from './img/close.png'
- import search from './img/search.png'
- import DiagnosticItem from '@containers/DiagnosticItem'
- import config from '@config/index';
- import $ from 'jquery';
- class DiagResultSearch extends Component {
- constructor(props) {
- super(props);
- this.state = {
- showClose: false,
- focus: true,
- timer:null
- };
- this.searchInput = React.createRef();
- this.handleInput = this.handleInput.bind(this);
- this.clearInput = this.clearInput.bind(this);
- this.handleFocus = this.handleFocus.bind(this);
- this.handleBlur = this.handleBlur.bind(this);
- }
- componentWillReceiveProps(){
- const { searchResult, clearSearchResult } = this.props;
- this.setState({focus: true})
- if( searchResult && searchResult.length > 0) {
- clearSearchResult();//清除上次搜索结果
- }
- }
- componentDidMount () {
- const that = this
- $(document).click(function (e) {
- var diagSearch=$('#diagSearch')[0];
- var addDiag = $('#addDiag')[0];
- var confirm = $('#confirm')[0];
- if(diagSearch) {
- if(confirm) {
-
- } else {
- if (e.target!= diagSearch && e.target!= addDiag && e.target.parentNode!= addDiag && !$.contains(diagSearch, e.target) ) {
- that.setState({
- showSearch: !that.props.showSearch
- });
- that.clearInput()
- that.props.hideSearch();
- }
- }
-
- }
-
- })
- }
- handleInput(value) {
- const { setSearchValue, getSearchResult } = this.props;
- value.length > 0 ? this.setState({showClose: true}) : this.setState({showClose: false});
- clearTimeout(this.state.timer);
- let timer = setTimeout(()=>{
- clearTimeout(this.state.timer);
- if(value.trim() == ''){
- return getSearchResult('');
- }
- getSearchResult(value.trim());
- },config.delayTime);
- this.setState({
- timer
- });
- }
- clearInput() {
- const { setSearchValue, getSearchResult } = this.props;
- this.searchInput.current.value = '';
- getSearchResult('');
- this.setState({showClose: false})
- }
- handleFocus() {
- this.setState({focus: true})
- }
- handleBlur() {
- this.setState({focus: false})
- }
-
- render(){
- const { showClose } = this.state
- const { show, searchResult, getSearchResult } = this.props
- return(
- show && <div id='diagSearch' className={style['search-box']}>
- <div className={style['search']}>
- <input ref={this.searchInput}
- type="text"
- placeholder='搜索'
- onFocus={this.handleFocus}
- onBlur = {this.handleBlur}
- className={style['search-input']}
- style = {this.state.focus ? {border: '1px solid #3B9ED0'} :{border: '1px solid #979797'}}
- onInput={(e)=>this.handleInput(e.target.value)}
- onPropertyChange={(e)=>this.handleInput(e.target.value)}
- />
- <img className={style['search-img']} src={search} alt="搜索"/>
- <img className={style['search-close']} onClick={this.clearInput} style={showClose ? '': {display: 'none'}} src={close} alt=""/>
- </div>
- <div className={style['search-result']}>
- {
- searchResult && searchResult.map((item) => {
- return(<div key={item.id} className={style['search-result-item']}><DiagnosticItem title={true} item={item} clearInput={this.clearInput}/></div>)
- })
- }
- </div>
- </div>
- )
- }
- }
- export default DiagResultSearch;
|