kara-module-forward/src/selectedList.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'

const imgChatBgd = require('./start-chat.png');

class SelectedListItems extends React.Component {
  removeItem = (id, type) => {
    this.props.removeItem(id, type);
  }
  render() {
    const { selectedList, save } = this.props;
    if (!selectedList) {
      return <div className={style['n-hidden']} />;
    } else if (selectedList.length === 0) {
      return (
        <div className={(style.content)}>
          <img src={imgChatBgd} alt="" />
        </div>
      );
    }
    const that = this;
    return (
      <div className={style['selected-list']}>
        <p className={style['select-title']}>已选择</p>
        <div className={style['l-choiced']}>
          <Scroll>
            <ul className={style.c}>
              {selectedList.map((i, key) =>
                <li key={key} title={i.name}>
                  <i
                    onClick={() => { that.removeItem(i.id, i.type); }}
                    className={`i-f i-close small ${style['btn-selected']}`}
                  />
                  <img src={i.iconUrl} alt="i.name" onError={this.useDefaultPic} />
                  <p>{i.name}</p>
                </li>)}
            </ul>
          </Scroll>
          <div className={style['u-button-save']} onClick={save}>转发</div>
        </div>
      </div>
    );
  }
}

SelectedListItems.defaultProps = {
  save: () => {},
};

SelectedListItems.propTypes = {
  removeItem: PropTypes.func.isRequired,
  selectedList: PropTypes.arrayOf(PropTypes.object).isRequired,
  save: PropTypes.func
};
export default SelectedListItems;