forked from Gitlink/forgeplus-react
79 lines
3.4 KiB
JavaScript
79 lines
3.4 KiB
JavaScript
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; |