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

import React , { Component } from 'react';
import { Link } from "react-router-dom";
import { Dropdown , Menu , Icon , Tooltip } from 'antd';
import { truncateCommitId } from '../common/util';

import './list.css'
import Top from './DetailTop';

class CoderRootBranch extends Component {
  constructor(porps){
    super(porps);
    this.state={
      data:undefined
    }
  }

  render(){
    const { branchList } = this.props;
    const { projectsId } = this.props.match.params;
    const list =()=>{
      if(branchList && branchList.length>0){
        return(
          <React.Fragment>
          <ul className="branchUl">
            {
              branchList.map((item,key)=>{
                return(
                  <li key={key}>
                    <div>
                      <Link to={`/projects/${projectsId}/coders?branch=${item.name}`} className="color-blue font-15" style={{"maxWidth":"100px"}}>{item.name}</Link>
                      <p className="f-wrap-alignCenter mt15">
                        <span className="mr5 commitKey" style={{marginLeft:0}}>{item.last_commit && truncateCommitId(item.last_commit.id)}</span>
                        <span className="color-grey-3 hide-1 messages leftPoint">{item.last_commit && item.last_commit.message}</span>
                        <span className="color-grey-8 ml30">最后更新于{item.last_commit && item.last_commit.time_from_now}</span>
                      </p>
                    </div>
                    <span>
                      <Link to={`/projects/${projectsId}/merge/new`} className="mr20 color-blue mr30">创建合并请求</Link>
                      <Dropdown overlay={menu(item.zip_url,item.tar_url)} trigger={['click']} placement="bottomRight" className="color-green-file">
                        <a className="ant-dropdown-link">
                          <Tooltip title={`下载分支${item.name}`}><Icon type="cloud-download" className="font-18"/></Tooltip>
                        </a>
                      </Dropdown>
                    </span>
                  </li>
                )
              })
            }
          </ul>
          </React.Fragment>
        )
      }
    }
    const menu =(zip_url,tar_url)=> (
      <Menu>
        <Menu.Item key={'0'}><a href={zip_url}>ZIP</a></Menu.Item>
        <Menu.Item key={'1'}><a href={tar_url}>TAR.GZ</a></Menu.Item>
      </Menu>
    )
    return(
      <React.Fragment>
        <div className="main">
          <div className="branchTable">
            <p className="branchTitle bor-bottom-greyE">分支列表</p>
            {list()}
          </div>
        </div>
      </React.Fragment>
    )
  }

}

export default CoderRootBranch;