forgeplus-react/src/forge/Main/IndexItem.js

import React, { Component } from 'react';
import { Tooltip } from 'antd';
import { getImageUrl } from 'educoder';
import { AlignCenter } from '../Component/layout';
import { Link } from 'react-router-dom';
import '../css/index.scss';
import Nodata from '../Nodata';
import './list.scss';
import img_parise from '../Images/parise.png';
import SpecialModal from './SpecialModal';

class IndexItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      user_apply_signatures: [],
      project_id: undefined
    }
  }
  TurnToDetail = (login, url) => {
    this.props.history.push({
      pathname: url,
      state: login
    })
  }
  /**
   * link:跳转到详情的地址
   * user_apply_signatures:是否已经发送访问特殊开源项目的文件
   * project_id：项目id
   * is_secret:是否是特殊开源许可证项目
   * id：创建者login
   * is_member:是否是项目成员(如果是项目成员可以直接进入项目)
   * */
  projectHref = (link, user_apply_signatures, project_id, is_secret, id, is_member) => {
    const { user, showLoginDialog } = this.props;
    if (is_secret && (!user || (user && !user.login))) {
      showLoginDialog();
      return;
    }
    let signa = user_apply_signatures && user_apply_signatures[0];
    if ((is_secret && !is_member && (!signa || (signa && signa.status !== "passed"))) && user.login !== id) {
      this.setState({
        visible: true,
        user_apply_signatures: user_apply_signatures.length > 0 ? user_apply_signatures[0] : undefined,
        project_id
      })
    } else {
      this.props.history.push(link);
    }
  }
  hideModal = () => {
    this.setState({
      visible: false
    })
  }

  sureModal = () => {
    this.hideModal();
    const { getListData } = this.props;
    getListData && getListData(1);
  }

  render() {
    const { projects } = this.props;
    const { visible, user_apply_signatures, project_id } = this.state;
    return (
      <div className="project-list minH-670" style={{ padding: "0px 20px" }}>
        <SpecialModal {...this.props} visible={visible} hideModal={this.hideModal} user_apply_signatures={user_apply_signatures} project_id={project_id} sureModal={this.sureModal}></SpecialModal>
        {projects && projects.length > 0 ? projects.map((item, key) => {
          return (
            <div className="p-r-Item" key={key}>
              {
                item.platform === "educoder" ?
                  <a href="javascript:void(0)" style={{ cursor: "default" }} className="show-user-link">
                    <img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
                  </a>
                  :
                  <Link to={`/${item.author && item.author.login}`} className="show-user-link">
                    <img className="p-r-photo" alt="" src={getImageUrl(`/${item.author && item.author.image_url}`)} ></img>
                  </Link>
              }
              <div className="p-r-Infos">
                <div className="p-r-name">
                  {/* <AlignCenter>
                    <Link to={`/${item.author.login}/${item.identifier}`} title={`${item.author.name}/${item.name}`} className="color-grey-3 font-18 task-hide " style={{maxWidth: 470 }}>
                      {item.author.name}/{item.name}
                    </Link>
                    { !item.is_public && <span className="privateTag">私有</span> }
                    {
                      item.forked_from_project_id ?
                        <Tooltip title="该项目是一个fork仓库" className="ml5">
                          <i className="iconfont icon-fork font-18 color-orange" />
                        </Tooltip>
                        : ""
                    }
                    {
                      item.type && item.type === 2 ?
                      <Tooltip title="该项目是一个同步镜像仓库" className="ml5">
                        <i className="iconfont icon-banbenku font-18 color-green" />
                      </Tooltip>:""
                    }
                  </AlignCenter> */}
                  <a onClick={() => this.projectHref(`/${item.author.login}/${item.identifier}`, item.user_apply_signatures, item.id, item.is_secret, item.author.login, item.is_member)} className="hide-1 color-grey-3 font-18 task-hide fwt-500 " style={{ whiteSpace: "wrap", display: 'flex', width: 400 }}>
                    {item.author.name}/{item.name}
                    {
                      item.forked_from_project_id ?
                        <span className="ml5">
                          <i className="iconfont icon-fork font-18 color-orange" />
                        </span>
                        : ""
                    }
                    {
                      item.type && item.type !== 0 ?
                        item.type === 2 ?
                          <Tooltip title="该项目是一个镜像" className="ml5">
                            <i className="iconfont icon-banbenku font-18 color-green" />
                          </Tooltip> :
                          <span className="ml5">
                            <i className="iconfont icon-jingxiang font-18 color-green" />
                          </span> : ""
                    }
                  </a>
                  <span className="p-r-tags">
                    <span className="pariseTag">
                      <img src={img_parise} alt="" className="pariseImg" />赞 {item.praises_count}
                    </span>
                    <span>
                      <i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork {item.forked_count}
                    </span>
                  </span>
                </div>
                <p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px", lineHeight: "22px" }}>{item.description}</p>

                <div className="p-r-about">
                  <span className="p-r-detail">
                    {item.last_update_time ? <span><label>更新于</label>{item.time_ago}</span> : ""}
                    {item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
                  </span>
                </div>
              </div>
            </div>
          )
        }) : <Nodata _html="暂无数据~"></Nodata>
        }
      </div>
    )
  }
}
export default IndexItem;