kara-module-forward/src/searchResults.js

kara module forward

/* eslint-disable react/no-string-refs, react/no-array-index-key */
import React from 'react';
import PropTypes from 'prop-types';
import style from './index.scss';
import Scroll from 'react-scroller-plugin';
import 'react-scroller-plugin/lib/scroll.css'

class SearchResultItems extends React.Component {
  getCommonElements = (arr1, arr2, property) => {
    if (Array.isArray(arr1) && Array.isArray(arr2)) {
      // eslint-disable-next-line
      let newMap = new Map();
      const newArr = arr1.concat(arr2);
      newArr.forEach((ele) => {
        const key = ele[property] ? ele[property] : null;
        if (!key) return false;
        if (newMap.has(key)) {
          newMap.set(key, newMap.get(key) + 1);
        } else {
          newMap.set(key, 1);
        }
        return ele;
      });
      return newMap;
    }
    return new Map();
  }
  getSelectedItems = () => {
    const { searchResults, selectedList } = this.props;
    return this.getCommonElements(searchResults, selectedList, 'id');
  }
  getSelectedRecent = () => {
    const { recentContacts, selectedList } = this.props;
    return this.getCommonElements(recentContacts, selectedList, 'id');
  }
  selectItem = (item) => {
    this.props.selectItem(item.id, item);
  }

  render() {
    const {
      searchResults,
      show,
      first,
      showNoResult,
      accountType,
      recentContacts,
      showRecent } = this.props;
    // eslint-disable-next-line
    const imgSrc = require('./file-empty.png');
    const recentHgt = 72 * recentContacts.length;
    const recentItemMap = this.getSelectedRecent();
    if (!show) {
      return <div className={style['n-hidden']} />;
    }
    // 转发默认显示最近联系人
    if ((showRecent && show) || first) {
      return (<div className={style['m-list']} style={{ height: `${recentHgt}px` }}>
        <Scroll>
          <ul>
            <span className={style['l-tip-info']}>最近联系</span>
            {
              (recentContacts.map((item, index) => {
                const that = this;
                const isAdded = (recentItemMap && recentItemMap.get(item.id) > 1);
                if (item.type === 'staff') {
                  return (
                    <li key={index} onClick={() => { that.selectItem(item); }}>
                      <img src={item.iconUrl} alt="item.name" onError={this.useDefaultPic} />
                      {
                        accountType === 'External' || item.accountType === 'External' ?
                          <div className={isAdded ? `${style['l-info-staff']} ${style.added}` : style['l-info-staff']}>
                            <p className={style.extenal}>
                              <strong>{item.name}({item.staffAccount})</strong>
                            </p>
                          </div>
                          :
                          <div className={isAdded ? `${style['l-info-staff']} ${style.added}` : style['l-info-staff']}>
                            <p><strong>{item.name}({item.staffAccount})</strong></p>
                            <p>
                              <span className={style.location}>{item.orgName}</span>
                              <span className={style.manager}>上级经理：{item.parrentStaffName}</span>
                              <span className={isAdded ? style.isAdded : style['n-hidden']}>已添加</span>
                            </p>
                          </div>
                      }
                    </li>
                  );
                } else if (item.type === 'channel') {
                  return (
                    <li key={index} onClick={() => { that.selectItem(item); }}>
                      <img src={item.iconUrl} alt="item.name" onError={this.useDefaultPic} />
                      <div className={isAdded ? `${style['l-info-channel']} ${style.added}` : style['l-info-channel']} >
                        <p>
                          <strong>{item.name}（{item.members}人）</strong>
                          <span className={isAdded ? style.isAdded : style['n-hidden']}>已添加</span>
                        </p>
                      </div>
                    </li>
                  );
                }
                return <li className={style['n-hidden']} />;
              }))
            }
          </ul>
        </Scroll>
      </div>);
      // return <div className={style['n-hidden']} />;
    } else if (showNoResult) {
      return (
        <div className={style['no-result']}>
          <img src={imgSrc} alt="" />
        </div>
      );
    }

    const contentHgt = 72 * searchResults.length;
    const commonItemMap = this.getSelectedItems();
    return (
      (<div className={style['m-list']} style={{ height: `${contentHgt}px` }}>
        <Scroll>
          <ul>
            {
              searchResults.map((item, index) => {
                const that = this;
                const isAdded = (commonItemMap && commonItemMap.get(item.id) > 1);
                if (item.type === 'staff') {
                  return (
                    <li
                      key={index}
                      onClick={() => {
                        that.selectItem(item);
                        that.props.clearSearchText();
                      }}
                    >
                      <img src={item.iconUrl} alt="item.name" onError={this.useDefaultPic} />
                      {
                        accountType === 'External' || item.accountType === 'External' ?
                          <div className={isAdded ? `${style['l-info-staff']} ${style.added}` : style['l-info-staff']}>
                            <p className={style.extenal}>
                              <strong>{item.name}({item.staffAccount})</strong>
                            </p>
                          </div>
                          :
                          <div className={isAdded ? `${style['l-info-staff']} ${style.added}` : style['l-info-staff']}>
                            <p><strong>{item.name}({item.staffAccount})</strong></p>
                            <p>
                              <span className={style.location}>{item.orgName}</span>
                              <span className={style.manager}>上级经理：{item.parrentStaffName}</span>
                              <span className={isAdded ? style.isAdded : style['n-hidden']}>已添加</span>
                            </p>
                          </div>
                      }
                    </li>
                  );
                } else if (item.type === 'channel') {
                  return (
                    <li
                      key={index}
                      onClick={() => {
                        that.selectItem(item);
                        that.props.clearSearchText();
                      }}
                    >
                      <img src={item.iconUrl} alt="item.name" onError={this.useDefaultPic} />
                      <div className={isAdded ? `${style['l-info-channel']} ${style.added}` : style['l-info-channel']} >
                        <p>
                          <strong>{item.name}（{item.members}人）</strong>
                          <span className={isAdded ? style.isAdded : style['n-hidden']}>已添加</span>
                        </p>
                      </div>
                    </li>
                  );
                }
                return <li className={style['n-hidden']} />;
              })
            }
          </ul>
        </Scroll>
      </div>)
    );
  }
}

SearchResultItems.defaultProps = {
  accountType: '',
};

SearchResultItems.propTypes = {
  searchResults: PropTypes.arrayOf(PropTypes.object).isRequired,
  recentContacts: PropTypes.arrayOf(PropTypes.object).isRequired,
  show: PropTypes.bool.isRequired,
  first: PropTypes.bool.isRequired,
  showRecent: PropTypes.bool.isRequired,
  showNoResult: PropTypes.bool.isRequired,
  selectedList: PropTypes.arrayOf(PropTypes.object).isRequired,
  selectItem: PropTypes.func.isRequired,
  accountType: PropTypes.string,
};

export default SearchResultItems;