forked from Gitlink/forgeplus-react
375 lines
16 KiB
JavaScript
375 lines
16 KiB
JavaScript
import React , { useEffect , useState } from 'react';
|
||
import { WhiteBack , Box , LongWidth , ShortWidth , Gap , AlignCenter , FlexAJ } from '../Component/layout';
|
||
import { Dropdown , Menu , Divider , Spin } from 'antd';
|
||
import { getImageUrl } from "educoder";
|
||
import { Link } from 'react-router-dom';
|
||
|
||
import SelectBranch from '../Branch/Select';
|
||
import User from '../Component/User';
|
||
import axios from 'axios';
|
||
import Path from './CoderDepotPath';
|
||
import Catalogue from './CoderDepotCatalogue';
|
||
import ReadMe from './CoderDepotReadme';
|
||
import CoderRootFileDetail from './CoderRootFileDetail';
|
||
import './Index.scss';
|
||
import Releases from '../Component/Releases';
|
||
import Contributors from '../Component/Contributors';
|
||
import LanguagePower from '../Component/LanguagePower';
|
||
import DrawerPanel from '../Component/DrawerPanel';
|
||
import Nodata from '../Nodata';
|
||
|
||
|
||
function CoderDepot(props){
|
||
const [ projectDetail , setProjectDetail ]= useState(undefined);
|
||
const [ treeValue , setTreeValue ] = useState(undefined);
|
||
const [ treeValuePath , setTreeValuePath ] = useState(undefined);
|
||
const [ lastCommit,setLastCommit ] = useState(undefined);
|
||
const [ lastCommitAuthor,setLastCommitAuthor ] = useState(undefined);
|
||
const [ type ,setType ] = useState('dir');
|
||
const [ hide , setHide ] = useState(true);
|
||
const [ hideBtn , setHideBtn ] = useState(false);
|
||
const [ commitCount ,setCommitCount ] = useState(0);
|
||
const [ dirInfo ,setDirInfo ] = useState(undefined);//文件夹目录列表
|
||
const [ fileInfo ,setFileInfo ] = useState(undefined);//文件内容信息
|
||
const [ zip_url , setZip_url ] = useState(undefined);
|
||
const [ tar_url , setTar_url ] = useState(undefined);
|
||
const [ readOnly , setReadOnly] = useState(true);
|
||
const [ isSpin , setIsSpin] = useState(true);
|
||
const [ visible ,setVisible ] = useState(false);
|
||
|
||
const owner = props.match.params.owner;
|
||
const projectsId = props.match.params.projectsId;
|
||
const branchName = props.match.params.branchName;
|
||
let pathname = props.history.location.pathname;
|
||
|
||
useEffect(()=>{
|
||
if(props.projectDetail){
|
||
setProjectDetail(props.projectDetail);
|
||
}
|
||
},[props])
|
||
|
||
useEffect(()=>{
|
||
if(treeValue){
|
||
setTreeValuePath(treeValue.split('/'));
|
||
}else{
|
||
setTreeValuePath(undefined);
|
||
}
|
||
},[treeValue])
|
||
|
||
useEffect(()=>{
|
||
if (pathname){
|
||
if(pathname.indexOf(`/projects/${owner}/${projectsId}`) > -1 && pathname.indexOf(`/tree/${branchName}/`) > -1) {
|
||
let url = pathname.split(`/tree/${branchName}/`)[1];
|
||
setTreeValue(url);
|
||
getFileInfo(url,branchName);
|
||
}else{
|
||
setTreeValue(undefined);
|
||
getDirInfo(branchName ||(projectDetail && projectDetail.default_branch));
|
||
}
|
||
}
|
||
},[pathname])
|
||
|
||
// 获取主目录列表
|
||
function getDirInfo(branch){
|
||
setIsSpin(true);
|
||
const url = `/${owner}/${projectsId}/entries.json`;
|
||
axios.get(url, {
|
||
params: { ref: branch }
|
||
}).then((result) => {
|
||
if (result) {
|
||
setCommitCount(result.data.commits_count);
|
||
setDirInfo(result.data.entries);
|
||
setFileInfo(undefined);
|
||
setTar_url(result.data.tar_url);
|
||
setZip_url(result.data.zip_url);
|
||
let c = result.data.last_commit
|
||
setLastCommit(c && c.commit);
|
||
setLastCommitAuthor(c && (c.author || (c.commit && c.commit.author)));
|
||
}
|
||
setTimeout(function(){setIsSpin(false);},500);
|
||
}).catch(error=>{setIsSpin(false);})
|
||
}
|
||
|
||
useEffect(()=>{
|
||
if(projectDetail && lastCommit)
|
||
{
|
||
let ele = document.getElementById("ptxt");
|
||
if(ele){
|
||
let h = ele.offsetHeight;
|
||
if( h > 18 ) setHideBtn(true)
|
||
}
|
||
}
|
||
},[projectDetail,lastCommit])
|
||
// 获取子目录列表
|
||
function getFileInfo(path, ref){
|
||
setIsSpin(true);
|
||
const url = `/${owner}/${projectsId}/sub_entries.json`;
|
||
axios.get(url, {
|
||
params:{
|
||
filepath:path,
|
||
ref:ref || branchName,
|
||
type
|
||
}
|
||
}).then((result) => {
|
||
if (result) {
|
||
let en = result.data.entries;
|
||
if(en.type){
|
||
setDirInfo(undefined);
|
||
setFileInfo(en);
|
||
setType(en.type);
|
||
}else{
|
||
setFileInfo(undefined);
|
||
setDirInfo(en);
|
||
setType("dir");
|
||
}
|
||
let c = result.data.last_commit
|
||
setLastCommit(c && c.commit);
|
||
setLastCommitAuthor(c && (c.author || (c.commit && c.commit.author)));
|
||
}
|
||
setTimeout(function(){setIsSpin(false);},500)
|
||
}).catch(error=>{setIsSpin(false);})
|
||
}
|
||
|
||
// 切换分支或者标签
|
||
function changeBranch(value){
|
||
let url = `/projects/${owner}/${projectsId}${value && `/tree/${value}`}${treeValue ? `/${treeValue}`:""}`;
|
||
props.history.push(url);
|
||
}
|
||
|
||
// 文件相关的下拉项
|
||
const fileMenu =(
|
||
<Menu>
|
||
<Menu.Item><Link to={`/projects/${owner}/${projectsId}/${branchName || (projectDetail && projectDetail.default_branch)}/uploadfile${treeValue === undefined ? "" : `/${treeValue}`}`}>上传文件</Link></Menu.Item>
|
||
<Menu.Item><Link to={`/projects/${owner}/${projectsId}/${branchName || (projectDetail && projectDetail.default_branch)}/newfile${treeValue === undefined ? "" : `/${treeValue}`}`}>新建文件</Link></Menu.Item>
|
||
</Menu>
|
||
)
|
||
|
||
function getPathUrl(array,index){
|
||
if(array && array.length>0 && index){
|
||
let str = "";
|
||
for(let i=0;i<index;i++){
|
||
str += `/${array[i]}`;
|
||
}
|
||
return str.substr(1);
|
||
}
|
||
}
|
||
// 页面地址返回到主目录
|
||
function returnMain(){
|
||
setTreeValue(undefined);
|
||
let branch = branchName || (projectDetail && projectDetail.default_branch);
|
||
props.history.push(`/projects/${owner}/${projectsId}/tree/${branch}`);
|
||
};
|
||
// 子目录路径返回链接
|
||
function returnUlr(url){
|
||
props.history.push(`/projects/${owner}/${projectsId}/tree${branchName?`/${branchName}`:""}/${url}`);
|
||
}
|
||
// 点击跳转到子目录
|
||
function goToSubRoot(path,type,filename){
|
||
setType(type);
|
||
props.history.push(`/projects/${owner}/${projectsId}${`/tree/${branchName || (projectDetail && projectDetail.default_branch)}`}${path?`/${path}`:""}`);
|
||
}
|
||
|
||
function onEdit(readOnly){
|
||
setReadOnly(readOnly);
|
||
}
|
||
function ChangeFile(path, readOnly){
|
||
//点击直接跳转页面 加载一次路由
|
||
props.history.push(`/projects/${owner}/${projectsId}/tree/${branchName || (projectDetail && projectDetail.default_branch)}/${path}`);
|
||
setType("file");
|
||
setReadOnly(readOnly);
|
||
};
|
||
|
||
function changeHide(hide){
|
||
setHide(!hide);
|
||
}
|
||
|
||
const downloadMenu = (
|
||
<Menu>
|
||
<Menu.Item><a href={zip_url}>ZIP</a></Menu.Item>
|
||
<Menu.Item><a href={tar_url}>TAR.GZ</a></Menu.Item>
|
||
</Menu>
|
||
)
|
||
return(
|
||
<WhiteBack>
|
||
<Spin spinning={isSpin}>
|
||
{
|
||
dirInfo &&
|
||
<React.Fragment>
|
||
<DrawerPanel
|
||
history={props.history}
|
||
owner={owner}
|
||
projectsId={projectsId}
|
||
name={projectDetail && projectDetail.name}
|
||
branch={branchName || (projectDetail && projectDetail.default_branch)}
|
||
visible={visible}
|
||
onClose={()=>setVisible(false)}
|
||
/>
|
||
<div className="drawerBtn" onClick={()=>setVisible(true)}><i className="iconfont icon-youjiantou"></i></div>
|
||
</React.Fragment>
|
||
}
|
||
<div style={{minHeight:"500px"}}>
|
||
{
|
||
projectDetail &&
|
||
<Box className="Panels">
|
||
<LongWidth>
|
||
<div className="panelmenu">
|
||
<FlexAJ>
|
||
<AlignCenter>
|
||
<div className="mr20">
|
||
{
|
||
props && props.platform ?
|
||
<SelectBranch
|
||
repo_id={projectDetail && projectDetail.repo_id}
|
||
projectsId={projectsId}
|
||
branch={branchName || (projectDetail && projectDetail.default_branch)}
|
||
changeBranch={changeBranch}
|
||
owner={owner}
|
||
history={props.history}
|
||
branchList={projectDetail && projectDetail.branches && projectDetail.branches.list}
|
||
></SelectBranch>
|
||
:
|
||
<span>分支：<span className="color-grey-6">{branchName || (projectDetail && projectDetail.default_branch)}</span></span>
|
||
}
|
||
</div>
|
||
<AlignCenter className="mr20">
|
||
<Link to={`/projects/${owner}/${projectsId}/branchs`} className="color-grey-9">
|
||
<i className="iconfont icon-fenzhi2 font-18 color-grey-9 mr3"></i>
|
||
<span className="color-grey-6 mr3">{projectDetail && projectDetail.branches && projectDetail.branches.total_count}个</span>分支
|
||
</Link>
|
||
</AlignCenter>
|
||
<AlignCenter className="mr20">
|
||
<Link to={`/projects/${owner}/${projectsId}/tag`} className="color-grey-9">
|
||
<i className="iconfont icon-biaoqian3 font-16 color-grey-9 mr3"></i>
|
||
<span className="color-grey-6 mr3">{projectDetail && projectDetail.tags && projectDetail.tags.total_count}个</span>标签
|
||
</Link>
|
||
</AlignCenter>
|
||
</AlignCenter>
|
||
<AlignCenter>
|
||
<div className="mr20 addOptionBtn">
|
||
<Link to={`/projects/${owner}/${projectsId}/pulls/new`}>+ 合并请求</Link>
|
||
<Link to={`/projects/${owner}/${projectsId}/issues/new`}>+ 任务</Link>
|
||
</div>
|
||
{ type === "dir" && <Dropdown.Button overlay={fileMenu} className="mr20">文件</Dropdown.Button>}
|
||
<Dropdown.Button overlay={downloadMenu} type={'primary'}>下载</Dropdown.Button>
|
||
</AlignCenter>
|
||
</FlexAJ>
|
||
{
|
||
dirInfo || fileInfo ?
|
||
<div className="listtable">
|
||
{
|
||
lastCommit &&
|
||
<div className="listtablehead">
|
||
<User url={getImageUrl(`images/${lastCommitAuthor && lastCommitAuthor.image_url}`)} name={lastCommitAuthor && lastCommitAuthor.name} />
|
||
<div className={hideBtn && hide ? "ellipsistxt hide" :"ellipsistxt"}><p id="ptxt">{lastCommit && lastCommit.message}</p></div>
|
||
{ hideBtn && <span className="ellipsis" onClick={()=>changeHide(hide)}><i className="iconfont icon-shenglvehao"></i></span> }
|
||
|
||
<span className="ml12 color-grey-9 mt3">{lastCommit && lastCommit.time_from_now}</span>
|
||
{ commitCount ? <span className="ml12 color-grey-9"><i className="iconfont icon-tijiao mr3 font-17 color-grey-9"></i>{commitCount}次提交</span>:"" }
|
||
</div>
|
||
}
|
||
<ul className="listtablebody">
|
||
{
|
||
treeValuePath && treeValuePath.length > 0 &&
|
||
<Path
|
||
identifier={projectDetail && projectDetail.identifier}
|
||
treeValuePath={treeValuePath}
|
||
returnUlr={returnUlr}
|
||
returnMain={returnMain}
|
||
getPathUrl={getPathUrl}
|
||
/>
|
||
}
|
||
{
|
||
dirInfo && dirInfo.length > 0 &&
|
||
dirInfo.map((item,key)=>{
|
||
return(
|
||
<Catalogue
|
||
owner={owner}
|
||
item={item}
|
||
projectsId={projectsId}
|
||
goToSubRoot={goToSubRoot}
|
||
/>
|
||
)
|
||
})
|
||
}
|
||
{
|
||
fileInfo &&
|
||
<CoderRootFileDetail
|
||
{...props}
|
||
detail={fileInfo}
|
||
readOnly={readOnly}
|
||
onEdit={onEdit}
|
||
currentBranch={branchName || (projectDetail && projectDetail.default_branch)}
|
||
></CoderRootFileDetail>
|
||
}
|
||
</ul>
|
||
</div>
|
||
: <Nodata _html="暂未发现文件"/>
|
||
}
|
||
{/* readme文件显示(显示文件详情时不显示readme文件) */}
|
||
{ dirInfo && <ReadMe ChangeFile={ChangeFile} readme={projectDetail && projectDetail.readme} operate={props && (props.isManager || props.isDeveloper)} history={props.history} /> }
|
||
</div>
|
||
</LongWidth>
|
||
{
|
||
!fileInfo &&
|
||
<ShortWidth>
|
||
<Gap style={{paddingLeft:"30px"}}>
|
||
<div className="panelmenu">
|
||
<p className="font-18 color-grey-6 mb20" style={{lineHeight:"28px"}}>简介</p>
|
||
<p className="font-14 color-grey-9 mb15" style={{lineHeight:"22px"}}>{projectDetail && projectDetail.content}</p>
|
||
{
|
||
projectDetail && projectDetail.website &&
|
||
<p className="color-grey-6 df">
|
||
<i className="iconfont icon-lianjie2 font-15 mr10 color-grey-9"></i>
|
||
<span style={{wordBreak:"break-all",lineHeight:"20px",marginTop:"5px"}}>{projectDetail.website}</span>
|
||
</p>
|
||
}
|
||
<p>
|
||
<i className="iconfont icon-wenjian4 font-15 mr10 color-grey-9"></i>
|
||
<a href="#readme" className="color-grey-6">README.md</a>
|
||
</p>
|
||
<p className="color-grey-6">
|
||
<i className="iconfont icon-dataBase font-15 mr10 color-grey-9"></i>
|
||
<span>{projectDetail && projectDetail.size}</span>
|
||
</p>
|
||
{
|
||
projectDetail && projectDetail.license_name &&
|
||
<p className="color-grey-6">
|
||
<i className="iconfont icon-tianping font-16 mr10 color-grey-9"></i>
|
||
<span>{projectDetail.license_name}</span>
|
||
</p>
|
||
}
|
||
</div>
|
||
{/* 发布 */}
|
||
{
|
||
projectDetail && projectDetail.release_versions &&
|
||
<React.Fragment>
|
||
<Divider />
|
||
<Releases owner={owner} projectsId={projectsId} releaseVersions={projectDetail.release_versions} history={props.history}/>
|
||
</React.Fragment>
|
||
}
|
||
{/* 贡献者 */}
|
||
{
|
||
projectDetail && projectDetail.contributors &&
|
||
<React.Fragment>
|
||
<Divider />
|
||
<Contributors contributors={projectDetail && projectDetail.contributors} owner={owner} projectsId={projectsId}/>
|
||
</React.Fragment>
|
||
}
|
||
{/* 语言 */}
|
||
{ projectDetail && projectDetail.languages &&
|
||
<React.Fragment>
|
||
<Divider />
|
||
<LanguagePower languages={projectDetail.languages}/>
|
||
</React.Fragment>
|
||
}
|
||
</Gap>
|
||
</ShortWidth>
|
||
}
|
||
</Box>
|
||
}
|
||
</div>
|
||
</Spin>
|
||
</WhiteBack>
|
||
)
|
||
}
|
||
export default CoderDepot; |