forgeplus-react/src/forge/Merge/components/fileDrop.jsx

import React ,{useEffect,useState } from 'react';
import { truncateCommitId } from '../../common/util';
import { AlignCenter , FlexAJ } from '../../Component/layout';
import { Tooltip , Progress , Spin } from 'antd';
import "../Index.scss";
import axios from 'axios';


function FileDrop({prekey,item,projectsId,owner , history , mergeId,parentsSha}){
    const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径");
    const [ sections, setSections ] = useState(undefined);
    const [ show, setShow ] = useState(true);
    const [ isSpin, setIsSpin ] = useState(false);

    useEffect(()=>{
        if(prekey < 3 && item && item.filename){
            showDown(item.filename);
        }
    },[prekey,item])

    function copyFileName(fileName){
      var copyCont = document.createElement('input');
      copyCont.defaultValue = fileName;
      document.body.appendChild(copyCont);
      copyCont.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      copyCont.className = 'copyCont';
      copyCont.style.display='none';
      setCopyfileTipTitle("复制成功");
    }
    function subStrContent(content){
      return content ? " " + content.slice(1) :"";
    }

    function showDown(filename){
        if(!sections){
            setIsSpin(true);
            const url = `/v1/${owner}/${projectsId}/${mergeId}/files.json`;
            axios.get(url,{
                params:{filepath:filename}
            }).then(res=>{
                if(res){
                    let files = res.data && res.data.files && res.data.files.length>0 && res.data.files[0];
                    setSections(files.sections);
                    setShow(true);
                    setIsSpin(false);
                }
            })
        }else{
            setShow(!show);
        }
    }
    return(
        <div key={prekey}>
            <Spin spinning={isSpin}>
                <FlexAJ className="filesInfo">
                    <AlignCenter onClick={()=>setShow(!show)} style={{cursor:!item.is_bin && item.changes !== 0?"pointer":"default"}}>
                        {(!item.is_bin && item.changes !== 0) ? <div style={{width:20}}><i className={show ?"iconfont icon-sanjiaoxing-down color-grey-9":"iconfont icon-triangle font-15 color-grey-9"}></i></div>:""}
                        <span className="cursor-pointer" data-clipboard-text={item.name}>
                        { item.is_renamed && item.old_name}
                        { item.is_renamed && <i className="iconfont icon-youjiang font-12 color-grey-8 ml5 mr5"></i> }
                        {item.filename}
                        </span>
                        <Tooltip
                            title={copyfileTipTitle}
                            onVisibleChange={()=>setCopyfileTipTitle("复制文件路径")}
                            >
                        <i className="iconfont icon-fuzhiicon ml6" onClick={(e)=>{e.stopPropagation();copyFileName(item.filename);}}></i>
                        </Tooltip>
                    </AlignCenter>
                    <div className="see-file">
                        <Tooltip placement="top" title={`${item.additions + item.deletions}处更改${item.additions + item.deletions > 0 ? "：":""} ${item.additions > 0 ? item.additions + "处添加" : ""}${item.additions > 0 && item.deletions > 0 ? "和" : ""}${item.deletions > 0 ? item.deletions + "处删除" : ""}`}>
                        <Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.additions/(item.additions+item.deletions)*100} />
                        <span className="ml10">{item.additions+item.deletions}处</span>
                        </Tooltip>
                        {
                        !item.is_submodule &&
                        <span className="see-file-btn" onClick={()=>{history.push(`/${owner}/${projectsId}${item.is_deleted ? `/commits/${truncateCommitId(parentsSha)}`:`/tree/${truncateCommitId(item.sha)}/${item.filename}`}`)}}>查看文件</span>
                        }
                    </div>
                </FlexAJ>
                {
                    (!item.is_bin && item.changes !== 0) && show &&
                    <div className="filesContent">
                        {
                        (sections && sections.length > 0) ? sections.map((i,k)=>{
                            return(
                            i.lines && i.lines.length>0 && i.lines.map((item,keys)=>{
                                return(
                                <div key={k+keys} className={(item.type === 2) ? "linesContent add" : item.type === 3 ? "linesContent reduce": item.type===4?"linesContent translate":"linesContent"}>
                                    <span className="lines">
                                        <span>{item.left_index && item.left_index !=="0" ? item.left_index :"" }</span>
                                        <span>{item.right_index && item.right_index !=="0" ? item.right_index :"" }</span>
                                    </span>
                                    <div style={{display:"flex"}}>
                                        <span className="linetype">{item.type===2 ? "+" : item.type===3 ? "-" :""}</span>
                                        <div>
                                            <span style={{whiteSpace:"pre-wrap"}}>{(item.type===3 || item.type===2) ? subStrContent(item.content) : item.content}</span>
                                        </div>
                                    </div>
                                </div>
                                )
                            })
                            )
                        })
                        :
                        <div className='diffDesc'>
                            <a onClick={()=>showDown(item.filename)} className='color-blue'>加载差异</a>差异被折叠
                        </div>
                        }
                    </div>
                }
            </Spin>
        </div>
    )
}
export default FileDrop;