forgeplus-react/src/forge/Merge/MergeItem.js

import React , { Component } from 'react';
import { Link } from 'react-router-dom';
import {Popconfirm} from "antd";

class MergeItem extends Component{
  constructor(props){
    super(props);
    this.state={
      //显示 隐藏
      isdisplay:false,
      orderid:'',
    }
  }

  onMouseMove=(type)=>{
    this.setState({
      isdisplay:true,
      orderid:type
    })
  }

  onMouseOut=()=>{
    this.setState({
      isdisplay:false
    })
  }

  set_issue_tags =(issue_tags)=>{
    if(issue_tags && issue_tags.length > 0){
      return(
        issue_tags.map((item,key)=>{
          return(
            <span className="issue-tag-show" style={{background: item.color}}>{item.name}</span>
          )
        })
      )
    }else{
      return("--")
    }
  }

  render(){
    const { issues , search_count , page , limit } = this.props;
    const { projectsId } = this.props.match.params;
    const { current_user } = this.props;
    const renderList =()=>{
      if(issues && issues.length > 0){
        return(
          issues.map((item,key)=>{
            return(
              <div className="issueItem">
              <div className="flex-1">
                  <p className="mb15 df">
                    <span className={item.issue_status==="关闭"? "issueNo":"issueNo issueOpen"}># {search_count - (key + (page-1) * limit)}</span>
                    <Link to={`/projects/${projectsId}/merge/${item.pull_request_id}/Messagecount`} className="flex-1 hide-1 font-16 color-grey-3 lineh-30">{item.name}</Link>
                  </p>
                  <p className="color-grey-6 font-12">
                    <span>{item.format_time}</span><span className="ml5">发布</span>
                    {
                      item.updated_at === item.format_time ?
                        ""
                        :
                        <span className="ml20"><span>{item.updated_at}</span><span className="ml5">更新</span></span>
                    }
                  </p>
                </div>
                  <ul className="topWrapper_select no-cursor" onMouseMove={()=>this.onMouseMove(item.id)} onMouseOut={()=>this.onMouseOut()}>
                  <li>{this.set_issue_tags(item.issue_tags)}</li>
                  {/*<li>{item.issue_type || "--"}</li>*/}
                  <li>{item.version || "--"}</li>
                  <li>
                  {
                      item.assign_user_name ?
                      <Link to={`/users/${item.assign_user_login}/projects`} className="show-user-link">
                        {item.assign_user_name}
                      </Link>
                      : "--"
                    }
                    </li>
                  <li>
                    <div className="flex-1">
                      <p>
                        { item.journals_count ? <Link to={`/projects/${projectsId}/merge/${item.pull_request_id}/Messagecount`}><i className="iconfont icon-pinglun1 mr3 font-16"></i>{item.journals_count}</Link> : "" }
                      </p>
                      {
                        current_user && current_user.login ?
                          <div className="milepostleft" style={{display:this.state.orderid===item.id&&this.state.isdisplay?'flex':'none'}}>
                            <div className="grid-item mr15 color-grey-9">
                              <Link to={`/projects/${projectsId}/merge/${item.pull_request_id}/updatemerge`} className="color-grey-9"><i className="iconfont icon-bianji3 font-14 mr5"></i></Link>
                            </div>
                          </div>
                          :""
                      }

                    </div>
                  </li>
                </ul>
              </div>
            )
          })
        )
      }
    }
    return(
      <div>
        {renderList()}
      </div>
    )
  }
}

export default MergeItem;