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

import React, { Component } from 'react';
import { Tooltip } from 'antd';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import '../css/index.scss';
import Nodata from '../Nodata';
import './list.css';
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;
    const renderList = (
      projects && projects.length > 0 ? projects.map((item, key) => {
        return (
          <div className="p-r-Item" key={key}>
            {
              item.platform === "educoder" ?
              <a style={{cursor:"default"}} className="show-user-link">
                <img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
              </a>
              :
              <Link to={`/users/${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">
                <a onClick={()=>this.projectHref(`/projects/${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 mt8 color-grey-3 " style={{ maxHeight: "44px",lineHeight:"22px" }}>{item.description}</p>

              <div className="p-r-about">
                <span className="p-r-detail">
                  {/* <span><label>浏览量：</label>{item.visits}</span> */}
                  {/* {item.category && item.category.id && <span>{item.category.name}</span>} */}
                  {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>
    )
    return (
      <div className="project-list minH-670">
        <SpecialModal {...this.props} visible={visible} hideModal={this.hideModal} user_apply_signatures={user_apply_signatures} project_id={project_id} sureModal={this.sureModal}></SpecialModal>
        {renderList}
      </div>
    )
  }
}
export default IndexItem;