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 { 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;