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

89 lines
3.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React ,{useEffect,useState } from 'react';
import { truncateCommitId } from '../common/util';
import { AlignCenter , FlexAJ } from '../Component/layout';
import { Button } from 'antd';
import Nodata from '../Nodata';
import './merge.css';
function Files({data,history,owner,projectsId}){
const [ files , setFiles ] = useState(data && data.files);
useEffect(()=>{
if(data){
setFiles(data.files);
}
},[data])
function showDown(flag,index,isBin){
if(!isBin){
var lists = files.concat();
lists[index].flag = !flag ? true : false;
lists.splice();
setFiles(lists);
}
}
return(
files ?
<div>
<AlignCenter className="color-grey-9 pb10" style={{borderBottom:"1px solid #eee"}}>
<i className="iconfont icon-sanjiaoxing-down mr5"></i>
<span>
共有<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_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""}
</span>
</AlignCenter>
{
files && files.length>0 &&
<div>
{
files.map((item,key)=>{
return(
<div className="files" key={key}>
<FlexAJ className="filesInfo" style={{cursor:item.isBin ? "default":"pointer"}} onClick={()=>showDown(item.flag,key,item.isBin)}>
<AlignCenter>
{!item.isBin ? <i className={!item.flag?"iconfont icon-xiajiantou font-16 mr15 color-grey-9":"iconfont icon-youjiantou font-16 mr15 color-grey-9"}></i>:""}
<i className="iconfont icon-wenjia font-16 mr8 color-grey-9"></i>
<span>{item.name}</span>
</AlignCenter>
<span>
<Button className="mr20" onClick={()=>{history.push(`/projects/${owner}/${projectsId}?${item.sha ? `branch=${truncateCommitId(item.sha)}&`:""}url=${item.name}`)}}>查看文件</Button>
<span className="color-green">+{item.addition}</span>
<span className="color-red ml20">-{item.deletion}</span>
</span>
</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>
:
<Nodata _html="暂无文件提交~"/>
)
}
export default Files;