nbugs-pc-select-user/src/components/Search/index.js

https://nbugs.yuque.com/front-end/components/project-readme

import React, { Component } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { connect } from 'dva-no-router';
import Input from 'antd/lib/input';
import 'antd/lib/input/style';
import 'antd/lib/icon/style';
import 'antd/lib/message/style';
import './index.less';
import loadingIcon from '../../assets/image/Ellipsis-1s-200px.svg';

const { Search } = Input;

class SearchWrap extends Component {
  // defaultProps
  static defaultProps = {
    onCheck: null,
    className: '',
    selectType: 'user',
  };

  /* eslint-disable react/require-default-props, react/no-unused-prop-types */
  // props 校验
  static propTypes = {
    APIEnv: PropTypes.oneOf(['dev', 'production']),
    selectType: PropTypes.oneOf(['dept', 'user']),
    maxSearchResultNum: PropTypes.number,
    onCheck: PropTypes.func,
    className: PropTypes.string,
  };
  /* eslint-enable */

  constructor(props) {
    super(props);

    this.state = {
      showResult: false,
    };

    this.handleSearch = this.handleSearch.bind(this);
  }

  renderLoading = () => {
    return (
      <div className={classNames('result-wrap')}>
        <img src={loadingIcon} alt="loading" className={classNames('loading-icon')} />
      </div>
    );
  };

  handleSearch(value) {
    const { dispatch, fetchOptions, selectType, maxSearchResultNum } = this.props;
    const key = String(value).trim();

    if (!key) {
      return false;
    }

    this.setState({
      showResult: true,
    });

    dispatch({
      type: 'search/searchByKey',
      params: {
        fetchOptions,
        selectType,
        maxSearchResultNum,
        key,
      },
    });
  }

  handleSelect(selectedItem) {
    const { onCheck, searchType } = this.props;

    this.setState({
      showResult: false,
    });

    if (typeof onCheck === 'function') {
      const temp = Object.assign({}, selectedItem);
      delete temp.active;
      onCheck({ selectedItem: temp, searchType });
    }
  }

  renderDeptList() {
    const { resultList } = this.props;

    return resultList.map(item => {
      const { deptId, deptName } = item;
      return (
        <div key={deptId} className={classNames('result-item')}>
          <p
            className={classNames('result-item-dept')}
            style={{ color: '#333' }}
            onClick={this.handleSelect.bind(this, item)}
          >
            {deptName}
          </p>
        </div>
      );
    });
  }

  renderUserList() {
    const { resultList } = this.props;

    return resultList.map(item => {
      const { deptId, deptName, userId, userName } = item;
      return (
        <div key={deptId + userId} className={classNames('result-item')}>
          <p className={classNames('result-item-dept')}>{deptName}</p>
          <p
            className={classNames('result-item-user')}
            onClick={this.handleSelect.bind(this, item)}
          >
            {userName}
          </p>
        </div>
      );
    });
  }

  renderResult() {
    const { loading, searchType, resultList } = this.props;

    if (loading) {
      return this.renderLoading();
    }

    if (!resultList.length) {
      return (
        <div className={classNames('result-wrap')}>
          <p className={classNames('no-result')}>无匹配结果</p>
        </div>
      );
    }

    return (
      <div className={classNames('result-wrap')}>
        {searchType === 'dept' && this.renderDeptList()}
        {searchType === 'user' && this.renderUserList()}
      </div>
    );
  }

  render() {
    const { className } = this.props;
    const { showResult } = this.state;
    const searchCls = classNames(['nbugs-pc-search', className]);
    const placeholder = '搜索人员姓名';

    return (
      <div className={searchCls}>
        <Search placeholder={placeholder} onSearch={this.handleSearch} style={{ width: '100%' }} />
        {showResult && this.renderResult()}
      </div>
    );
  }
}

export default connect(({ global, ...rest }) => ({
  loading: rest.loading.effects['search/searchUserByKey'],
  resultList: rest.search.resultList,
  searchType: rest.search.searchType,
}))(SearchWrap);