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

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

function Files({ data , filesData , history,owner,projectsId , parentsSha , mergeId }){
  const [ files , setFiles ] = useState(filesData);
  const [ isOpen, setIsOpen] = useState(false);
  
  useEffect(()=>{
    if(filesData){
      setFiles(filesData);
    }
  },[filesData]);

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

  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.is_bin);setIsOpen(false);}}>
                <AlignCenter>
                  <i className="iconfont icon-wenjianicon mr4"></i>
                  <span className="cursor-pointer" data-clipboard-text={item.filename}>{item.filename}</span>
                </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} />
                    {item.additions >0 && <span className="color-green ml10">+{item.additions}</span>}
                    {item.deletions >0 && <span className="color-red ml10">-{item.deletions}</span>}
                  </Tooltip>
                </div>
              </FlexAJ>
            </a>
          )
        })}
      </div>
    </div>
  )


  return(
    <div onClick={(e)=>{e.nativeEvent.stopImmediatePropagation()}}>
      <AlignCenter className="color-grey-9" style={{position:'relative'}} onClick={()=>{setIsOpen(!isOpen)}}>
        <div style={{width:20}}><i className={`iconfont mr5 ${isOpen? "font-18 icon-sanjiaoxing-down":"font-16 icon-triangle"}`}></i></div>
        <span className="color-grey-6 update-file-count">
        共有<span className="color-grey-3"> {data && data.file_nums} 个文件 </span>被更改
        { data && data.total_addition ? <span>，包括 <span className="color-green">{data && data.total_addition} 次插入</span></span>:"" }
        { data && data.total_addition && data.total_deletion ? " 和 ":""}
        { data && data.total_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""}
        </span>
        {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>
                  <FileDrop item={item} prekey={key} projectsId={projectsId} owner={owner} history={history} parentsSha={parentsSha} mergeId={mergeId}/>
                </div>
              )
            })
          }
        </div>
      }
    </div>
  )
}
export default Files;