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="flex1 df" style={{justifyContent:"center"}}>
                    {item.journals_count ? (
                      <Link
                        className="mr5"
                        to={`/projects/${projectsId}/merge/${item.pull_request_id}/Messagecount`}
                      >
                        <i className="iconfont icon-pinglun1 mr3 font-16"></i>
                        {item.journals_count}
                      </Link>
                    ) : (
                      ""
                    )}
                    {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;