newICSS/src/components/SearchDrop/index.jsx

import React,{Component} from 'react';
import classNames from 'classnames';
import ScrollArea from 'react-scrollbar';

import style from "./index.less";
/****
 * 搜索结果下拉
 * 接收参数：
 * data: json数组
 * show:true/false
 * textKey: 选项文字字段名
 * idKey: 选项id字段名
 * type: text选项为纯文本,label选项为标签
 * onSelect: 选中事件
 * showType：1-本体，2-同义词，3-子项，同义词展示在括号内
 * retrievalName：同义词
 * name：本体
 **/

class SearchDrop extends Component{
  constructor(props){
    super(props);
    this.handleSelect = this.handleSelect.bind(this);
    this.state={
      data:props.data||[]
    }
  }
  getClass(){
    let name = style['text-list'];
    let isHide = this.props.show?'':style['hide'];
    switch (this.props.type){
      case 'text':
        name = style['text-list'];
        break;
      case 'label':
        name = style['label-list'];
        break;
      default:
        name = style['text-list'];
    }
    return classNames(style['list'],name,isHide);
  }
  getStyle(){
    const {left,top} = this.props;
    return {
      left:left?left+'px':'',
      top:top?top+'px':''
    }
  }
  handleSelect(e,item){
    // onClick事件换成onmouseup--点击清除后谷歌下搜索结果点击不上去的情况
    e.stopPropagation();
    const {onSelect,onShow} = this.props;
    onSelect&&onSelect(item);
    // onShow&&onShow(e,false);
  }
  render(){
    const {mainEmpty,data} = this.props;
    let litext = '';
    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    if(mainEmpty){
      return <div className={this.getClass()} id="searchBox" style={this.getStyle()}>
        <ScrollArea speed={0.8}
                    horizontal={false}
                    stopScrollPropagation={data.length>6?true:false}
                    style={{maxHeight:'225px'}}
                    className={style["area"]}
                    verticalContainerStyle={contStyle}
                    verticalScrollbarStyle={barStyle}
                    contentClassName="content">
          <ul>
            {data&&data.map((it)=>{
              litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
              return <li onClick={(e)=>this.handleSelect(e,it)} title={litext}>{litext}</li>
            })}
          </ul>
        </ScrollArea>
        </div>
    }else{
      
      return <div className={this.getClass()} id="searchBox" style={this.getStyle()}>
        <ScrollArea speed={0.8}
                    horizontal={false}
                    stopScrollPropagation={data.length>6?true:false}
                    style={{maxHeight:'225px'}}
                    className={style["area"]}
                    verticalContainerStyle={contStyle}
                    verticalScrollbarStyle={barStyle}
                    contentClassName="content">
          <ul>
            {data&&data.map((it)=>{
              litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
              return <li onClick={(e)=>this.handleSelect(e,it)} title={litext}>{litext}</li>
            })}
          </ul>
        </ScrollArea>
        </div>;
    }
    
  }
}

export default SearchDrop;