forgeplus-react/src/forge/Merge/Files.jsx

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

function Files({ data,history,owner,projectsId , parentsSha }){
  const [ files , setFiles ] = useState(data && data.files);
  const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径");
  const [ isOpen, setIsOpen] = useState(false);
  
  useEffect(()=>{
    if(data){
      setFiles(data.files);
    }
  },[data]);

  useEffect(()=>{
    document.addEventListener('click',()=>{setIsOpen(false)})
  })

  function showDown(flag,index,isBin){
    if(!isBin){
      var lists = files.concat();
      lists[index].flag = !flag ? true : false;
      lists.splice();
      setFiles(lists);
    }
  }

  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("复制成功");
  }

  const folderOpen = (
    <div className="folders">
      <div className="folderList">
        {files && files.map((item, key) => {
          return (
            <a href={`#value${key}`}>
              <FlexAJ className="filesInfo" key={key} onClick={() => {item.flag && showDown(item.flag, key, item.isBin);setIsOpen(false);}}>
                <AlignCenter>
                  <i className="iconfont icon-wenjianicon mr4"></i>
                  <span className="cursor-pointer" data-clipboard-text={item.name}>{item.name}</span>
                </AlignCenter>
                <div className="see-file">
                  <Tooltip placement="top" title={`${item.addition+item.deletion}处更改${item.addition + item.deletion > 0 && "："}${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}>
                    <Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
                    {item.addition >0 && <span className="color-green ml10">+{item.addition}</span>}
                    {item.deletion >0 && <span className="color-red ml10">-{item.deletion}</span>}
                  </Tooltip>
                </div>
              </FlexAJ>
            </a>
          )
        })}
      </div>
    </div>
  )

  return(
    <div onClick={(e)=>{e.nativeEvent.stopImmediatePropagation()}}>
      <AlignCenter className="color-grey-9" style={{position:'relative'}}>
        <div onClick={()=>{setIsOpen(!isOpen)}}>
          <i className={`iconfont mr5 ${isOpen? "font-18 icon-sanjiaoxing-down":"font-16 icon-triangle"}`}></i>
          <span className="color-grey-6 update-file-count">
          共有<span className="color-grey-3"> {data && data.files_count} 个文件 </span>被更改，包括
          { data && data.total_addition ? <span className="color-green"> {data && data.total_addition} 次插入</span>:"" }
          { data && data.total_addition && data.total_deletion ? " 和 ":""}
          { data && data.total_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""}
          </span>
        </div>
        {isOpen && folderOpen}
      </AlignCenter>
      {
        files && files.length>0 &&
        <div className="fileList">
          {
            files.map((item,key)=>{
              return(
                <div className="files" key={key}>
                  <a id= {`value${key}`} className="anchorPoint"></a>
                  <FlexAJ className="filesInfo">
                    <AlignCenter>
                      {!item.isBin ? <i className={!item.flag?"iconfont icon-sanjiaoxing-down color-grey-9 mt4":"iconfont icon-triangle font-15 color-grey-9"} onClick={()=>showDown(item.flag,key,item.isBin)}></i>:""}
                      <span className="cursor-pointer" data-clipboard-text={item.name} onClick={()=>showDown(item.flag,key,item.isBin)}>{item.name}</span>
                      <Tooltip
                        title={copyfileTipTitle}
                        onVisibleChange={()=>setCopyfileTipTitle("复制文件路径")}
                      >
                        <i className="iconfont icon-fuzhiicon ml6" onClick={()=>copyFileName(item.name)}></i>
                      </Tooltip>
                    </AlignCenter>
                    <div className="see-file">
                      <Tooltip placement="top" title={`${item.addition + item.deletion}处更改${item.addition + item.deletion > 0 && "："} ${item.addition > 0 ? item.addition + "处添加" : ""}${item.addition > 0 && item.deletion > 0 ? "和" : ""}${item.deletion > 0 ? item.deletion + "处删除" : ""}`}>
                        <Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
                        <span className="ml10">{item.addition+item.deletion}处</span>
                      </Tooltip>
                      {
                        !item.isSubmodule &&
                        <span className="see-file-btn" onClick={()=>{history.push(`/${owner}/${projectsId}${item.isDeleted ? `/commits/${truncateCommitId(parentsSha)}`:`/tree/${truncateCommitId(item.sha)}/${item.name}`}`)}}>查看文件</span>
                      }
                    </div>
                  </FlexAJ>
                  {
                    item.sections && item.sections.length >= 1 && !item.flag &&
                    <div className="filesContent">
                      {
                        item.sections.map((i,k)=>{
                          return(
                            i.lines && i.lines.length>0 && i.lines.map((item,key)=>{
                              return(
                                <div key={k+key} className={(item.type === 2) ? "linesContent add" : item.type === 3 ? "linesContent reduce": item.type===4?"linesContent translate":"linesContent"}>
                                  <span className="lines">
                                    <span>{item.leftIdx && item.leftIdx !=="0" ? item.leftIdx :"" }</span>
                                    <span>{item.rightIdx && item.rightIdx !=="0" ? item.rightIdx :"" }</span>
                                  </span>
                                  <p>{item.content}</p>
                                </div>
                              )
                            })
                          )
                        })
                      }
                    </div>
                  }
                </div>
              )
            })
          }
        </div>
      }
    </div>
  )
}
export default Files;