forgeplus-react/src/forge/Main/Diff.jsx

import React, { useEffect, useState , useRef } from "react";
import styled from "styled-components";
import { Button ,Spin } from "antd";
import { timeFormat, truncateCommitId } from '../common/util';
import { getImageUrl } from 'educoder';
import Files from '../Merge/Files';
import Tree from "./img/tree.png";
import User from "../Component/User";
import RenderHtml  from "../../components/render-html";
import axios from "axios";
import { Link } from "react-router-dom";

const Infos = styled.div`
  border: 1px solid #FAFCFF;
  margin-bottom:15px;
  & .commitinfos {
    background-color: #f1f8ff;
    border: 1px solid rgba(42, 97, 255, 0.23);
    border-radius: 3px 3px 0px 0px;
    padding: 10px 20px 10px 16px;
    & .markdown-body table{
      background: #f1f8ff;
    }
    & .btnblue{
      margin-top: 12px;
    }
    & .task-hide{
      width: 65rem;
      overflow:hidden;
      white-space:normal;
      word-break:break-all;
      font-weight: bold;
      color: #333333;
      font-size: 16px;
    }
  }
  & > .f-wrap-between {
    padding: 14px 20px 14px 16px;
    border-radius: 0px 0px 3px 3px;
    border: 1px solid #D0D0D0;
    border-top: none;
    .df{
      align-items: center;
      & .underline:hover{
        text-decoration: underline;
      }
    }
  }
`;
//提交详情页
export default (props) => {
  const {match , history, projectDetail } = props;
  const [data, setData] = useState({undefined});
  const [commit, setCommit] = useState(undefined);
  const [parents, setParents] = useState(undefined);
  const [committer, setCommitter] = useState(undefined);
  const [isSpin, setIsSpin] = useState(true);
  const { sha , projectsId, owner } = match.params;

  const [ dropLoading, setDropLoading] = useState(false); //加载loading
  const limit = 100;
  const fRef = useRef();

  useEffect(()=>{
    window.addEventListener("scroll",scrollListener);
    return ()=>{window.removeEventListener("scroll",scrollListener);}
  },[])

  const scrollListener=()=>{
    let scrollHeight = document.documentElement.scrollHeight;
    let clientHeight = document.documentElement.clientHeight;
    let scrollTop = document.documentElement.scrollTop;
    if(Math.ceil(scrollTop+clientHeight) >= scrollHeight-5){
      InitDiffData();
    }
  }

  useEffect(()=>{
    if(projectDetail){
      const { author, name} = projectDetail;
      document.title = `${commit && commit.message ? commit.message+'-' : ''}${sha}-${author.name}/${name}`;
    }
  }, [projectDetail, sha, commit])

  useEffect(() => {
    if (projectsId && owner && sha) {
      InitDiffData();

      const url = `/${owner}/${projectsId}/commits/${sha}.json`;
      axios
        .get(url)
        .then(result => {
          if (result) {
            // setData(result.data);
            setCommit(result.data.commit);
            setParents(result.data.parents);
            setCommitter(result.data.committer || (result.data.commit && result.data.commit.committer));
            setIsSpin(false);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }, [projectsId , owner, sha]);

  async function InitDiffData (){
    let f = fRef.current ? fRef.current.files : [];
    let p = fRef.current ? fRef.current.page : 1;
    let hm = fRef.current ? fRef.current.hasMore : true;
    if (!hm || dropLoading || !isSpin) {
      return;
    }
    setDropLoading(true);
    const url = `/v1/${owner}/${projectsId}/commits/${sha}/files.json`;
    await axios.get(url,{
      params:{page:p,limit}
    }).then(res=>{
      if(res?.status === 200){
        let arr = p === 1 ? res.data.files : [...f,...res.data.files];
        setData(res.data);
        fRef.current = {files:arr,page:p+1,hasMore:arr.length === limit};
        setDropLoading(false);
      }
    })
  }

  return (
    <div className="main" style={{padding:"0px",border:"none"}}>
      <Spin spinning={isSpin}>
        <Infos>
          <div className="commitinfos">
            <div className="f-wrap-between">
              <div>
                {commit && commit.message &&
                  <RenderHtml className="task-hide" value={commit.message}/>
                }
                <Link to={`/${owner}/${projectsId}/tree/${data.branch}`}><i className="iconfont icon-fenzhi2 font-18"></i>{data.branch}</Link>
              </div>
              <Button type="primary" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(sha)}`)}} className="btnblue" style={{height:"36px"}}>浏览文件</Button>
            </div>
          </div>
          <div className="f-wrap-between" style={{ alignItems: "center" }}>
            <ul className="df">
              <User
                id = {committer && committer.id}
                url={(committer && getImageUrl(`/${committer.image_url}`))}
                name={committer && committer.name}
                login={committer && committer.login}
              />
              {commit && commit.timestamp && <li className="ml4">提交于{timeFormat(commit.timestamp)}</li>}
            </ul>
            <li className="df">
              {
                parents && parents.length > 0 && parents.map((item,key)=>{
                  return(
                    <div className="ml40 f-wrap-alignCenter">
                      <label className="mr8">父节点</label>
                      <img src={Tree} alt="sha" width={"16px"} className="mr4"/>
                      <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}/${data.branch}`} className="underline">{truncateCommitId(item.sha)}</Link>
                    </div>
                  )
                })
              }
              <div className="ml40 f-wrap-alignCenter">
                <label className="mr8">当前节点</label>
                <img src={Tree} alt="sha" width={"16px"} className="mr4"/>
                <span>{truncateCommitId(sha)}</span>
              </div>
            </li>
          </div>
        </Infos>
        <Files 
          history={history} 
          data={data} 
          filesData={fRef.current && fRef.current.files}
          owner={owner} 
          projectsId={projectsId} 
          parentsSha={parents && parents.length > 0 && parents[0].sha}
          mergeId={`commits/${sha}`}
        />
        { dropLoading && <p style={{textAlign:"center",color:"#999",padding:"10px"}}>文件加载中...</p>}
      </Spin>
    </div>
  );
};