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

import React, { Component } from 'react';
import { Tabs } from 'antd';
import Commits from './Commits';
import Files from './Files';

import '../Order/order.css';
import './merge.css';

const { TabPane } = Tabs;

class MergeFooter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }

  changeTab = (index) => {
    this.setState({
      activeKey: index,
    });
  };

  render() {
    const { projectsId, owner } = this.props.match.params;
    const { comparesData = {} } = this.props;
    const { commits, diff, commits_count } = comparesData;
    const { activeKey } = this.state;

    return (commits && commits.length === 0) || !diff ? (
      ''
    ) : (
      <div className="main mergeRequest" style={{ paddingTop: '0px' }}>
        <Tabs
          activeKey={activeKey}
          className="custom-commit-tabs"
          animated={false}
          onChange={this.changeTab}
        >
          {commits && commits.length > 0 && (
            <TabPane
              tab={
                <span>
                  <span className="font-16">提交</span>
                  {commits_count > 0 && (
                    <span className="tabNum">{commits_count}</span>
                  )}
                </span>
              }
              key="1"
            >
              <Commits
                {...this.props}
                commits={commits}
                projectsId={projectsId}
                owner={owner}
              ></Commits>
            </TabPane>
          )}
          {diff && diff.files && diff.files.length > 0 && (
            <TabPane
              tab={
                <span>
                  <span className="font-16">文件</span>
                  {diff.files_count > 0 && (
                    <span className="tabNum">{diff.files_count}</span>
                  )}
                </span>
              }
              key="3"
            >
              <Files
                {...this.props}
                data={diff}
                projectsId={projectsId}
                owner={owner}
              />
            </TabPane>
          )}
        </Tabs>
      </div>
    );
  }
}
export default MergeFooter;