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

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Tag } from "antd";
import { AlignCenter } from '../Component/layout';
import { getImageUrl } from "educoder";
import "./merge.css";

function turnbar(str){
  if(str && str.length>0 && str.indexOf("/")>-1){
    return str.replaceAll('/','%2F');
  }
  return str;
}
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={{ color: item.color }}>
            {item.name}
          </span>
        );
      });
    } else {
      return "--";
    }
  };

  render() {
    const { issues, project_name, project_author_name , user_admin_or_developer} = this.props;
    const { projectsId , owner } = this.props.match.params;
    const { current_user } = this.props;
    const renderList = () => {
      if (issues && issues.length > 0) {
        return issues.map((item, key) => {
          let status = item.pull_request_staus;
          return (
            <div className="issueItem">
              <div className="flex-1">
                <p className="mb15 df" style={{ alignItems: "center" }}>
                  <i className={`iconfont icon-hebingqingqiu1 font-14 mr3 i_${status}`}></i>
                  <Link
                    to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}`}
                    className="hide-1 font-15 color-grey-3 fwb lineh-30 mr10"
                    style={{ maxWidth: "600px" }}
                  >
                    {item.name}
                  </Link>
                  <Tag className={`pr_tags_${status}`}>
                    {status === "merged"
                      ? "已合并"
                      : status === "closed"
                      ? "已拒绝"
                      : "开启的"}
                  </Tag>
                </p>
                <p className="grid-item font-13">
                  <Link
                    to={`/${item && item.author_login}`}
                    className="show-user-link"
                  >
                    <img
                      className="radius"
                      src={getImageUrl(`/${item && item.avatar_url}`)}
                      alt=""
                      width="24"
                      height="24"
                    />
                  </Link>
                  <AlignCenter>
                    <Link
                      to={`/${item && item.author_login}`}
                      className="show-user-link color-grey-8 ml5"
                    >
                      {item && item.author_name}
                    </Link>
                    <span className="ml15 color-grey-8">
                      {item.pull_request_staus === "open"
                        ? "创建于"
                        : item.pull_request_staus === "merged"
                        ? "合并于"
                        : "更新于"}
                    </span>
                    <span className="color-grey-8">{item.pr_time}</span>
                    <span className="ml15">
                      {
                        item.pull_request_head &&
                        <Tag className="pr-branch-tag">
                          <Link
                            to={`/${item.is_original ? item.fork_project_user : owner}/${ item.is_original ? item.fork_project_identifier : projectsId }/tree/${turnbar(item.pull_request_head)}`}
                            className="maxW200px task-hide ver-middle" style={{maxWidth:"200px"}}
                          >
                            {item.is_original
                              ? item.fork_project_user
                              : project_author_name}
                            :{item.pull_request_head}
                          </Link>
                        </Tag>
                      }
                      {
                        item.pull_request_base && 
                        <span className="mr8 ver-middle">
                          <i
                            className={
                              "iconfont icon-youjiang color-grey-c font-16"
                            }
                          ></i>
                        </span>
                      }
                      {
                        item.pull_request_base && 
                        <Tag className="pr-branch-tag">
                          <Link
                            to={`/${owner}/${projectsId}/tree/${turnbar(item.pull_request_base)}`}
                            className="maxW200px task-hide ver-middle" style={{maxWidth:"200px"}}
                          >
                            {/* {item.is_fork ? item.pull_request_base : `${item.author_name}:${item.pull_request_base}`} */}
                            {project_author_name}:{item.pull_request_base}
                          </Link>
                        </Tag>
                      }
                      
                    </span>
                  </AlignCenter>
                </p>
              </div>
              <ul
                className="topWrapper_select no-cursor"
                onMouseMove={() => this.onMouseMove(item.id)}
                onMouseOut={() => this.onMouseOut()}
              >
                <li>{item.priority}</li>
                <li>{this.set_issue_tags(item.issue_tags)}</li>
                <li>
                  {item.assign_user_name ? (
                    <Link
                      to={`/${item.assign_user_login}`}
                      className="show-user-link"
                    >
                      {item.assign_user_name}
                    </Link>
                  ) : (
                    "--"
                  )}
                </li>
                <li>{item.version || "--"}</li>

                <li>
                  <div
                    className="flex1 df"
                    style={{ justifyContent: "center" }}
                  >
                    {item.journals_count ? (
                      <Link
                        className="mr5 color-grey-8"
                        to={`/${owner}/${projectsId}/pulls/${item.pull_request_id}`}
                      >
                        <i className="iconfont icon-huifu1 font-15 mr5 ver-middle"></i>
                        {item.journals_count}
                      </Link>
                    ) : (
                      ""
                    )}
                    {user_admin_or_developer && item.pull_request_status === 0 ? (
                      <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={`/${owner}/${projectsId}/pulls/${item.pull_request_id}/edit`}
                            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;