forked from Gitlink/forgeplus-react
454 lines
19 KiB
JavaScript
454 lines
19 KiB
JavaScript
import React , { useEffect , useState } from 'react';
|
||
import { WhiteBack , Box , LongWidth , ShortWidth , Gap , AlignCenter , FlexAJ } from '../Component/layout';
|
||
import { Dropdown , Menu , Divider , Spin, Button } from 'antd';
|
||
import { getImageUrl } from "educoder";
|
||
import { Link } from 'react-router-dom';
|
||
import CloneAddress from '../Branch/CloneAddress';
|
||
|
||
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 UpdateDescModal from './sub/UpdateDescModal';
|
||
import Nodata from '../Nodata';
|
||
|
||
/**
|
||
* projectDetail.type:0是托管项目，1是镜像项目，2是同步镜像项目(为2时不支持在线创建、在线上传、在线修改、在线删除、创建合并请求等功能)
|
||
*/
|
||
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 [ mainFlag ,setMainFlag ] = useState(false);
|
||
const [ openModal , setOpenModal ] = useState(false);
|
||
const [ desc , setDesc ] = useState(undefined);
|
||
const [ website , setWebsite ] = useState(undefined);
|
||
const [ lesson_url , setLessonUrl ] = useState(undefined);
|
||
const [ readme , setReadme ] = useState(undefined)
|
||
|
||
const owner = props.match.params.owner;
|
||
const projectsId = props.match.params.projectsId;
|
||
const branchName = props.match.params.branchName;
|
||
const details = props.projectDetail;
|
||
let pathname = props.history.location.pathname;
|
||
|
||
useEffect(()=>{
|
||
if(details){
|
||
setProjectDetail(details);
|
||
setDesc(details.description);
|
||
setWebsite(details.website);
|
||
setLessonUrl(details.lesson_url);
|
||
}
|
||
},[details])
|
||
|
||
useEffect(()=>{
|
||
if(treeValue){
|
||
setTreeValuePath(treeValue.split('/'));
|
||
}else{
|
||
setTreeValuePath(undefined);
|
||
}
|
||
},[treeValue])
|
||
|
||
|
||
useEffect(()=>{
|
||
if (projectsId && owner){
|
||
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));
|
||
}
|
||
}
|
||
},[projectsId,owner,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.committer);
|
||
setMainFlag(true);
|
||
setReadOnly(true);
|
||
setReadme(result.data.readme);
|
||
}
|
||
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.committer);
|
||
setMainFlag(false);
|
||
setReadOnly(true);
|
||
}
|
||
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><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${branchName || (projectDetail && projectDetail.default_branch)}/uploadfile${treeValue === undefined ? "" : `/${treeValue}`}`)}>上传文件</a></Menu.Item>
|
||
<Menu.Item><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${branchName || (projectDetail && projectDetail.default_branch)}/newfile${treeValue === undefined ? "" : `/${treeValue}`}`)}>新建文件</a></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);
|
||
}
|
||
|
||
function urlLink(link){
|
||
if(props.checkIfLogin()===false){
|
||
props.showLoginDialog()
|
||
return false;
|
||
}
|
||
props.history.push(link);
|
||
}
|
||
|
||
const downloadMenu = (
|
||
<div className="downMenu">
|
||
<div style={{padding:"20px",borderBottom:"1px solid #eee"}}>
|
||
<CloneAddress
|
||
http_url={projectDetail && projectDetail.clone_url}
|
||
showNotification={props.showNotification}/>
|
||
</div>
|
||
<Menu className="edu-txt-center">
|
||
<Menu.Item><a href={zip_url}>下载 ZIP</a></Menu.Item>
|
||
<Menu.Item><a href={tar_url}>下载 TAR.GZ</a></Menu.Item>
|
||
</Menu>
|
||
</div>
|
||
)
|
||
// 确认修改简介、website、实践课程链接
|
||
function okUpdate(d,w,l){
|
||
const url = `/${owner}/${projectsId}.json`;
|
||
axios.put(url,{
|
||
description:d,website:w,lesson_url:l
|
||
}).then(result=>{
|
||
if(result && result.data && result.data.id){
|
||
setDesc(result.data.description);
|
||
setWebsite(result.data.website);
|
||
setLessonUrl(result.data.lesson_url);
|
||
}
|
||
})
|
||
}
|
||
|
||
let n = fileInfo && fileInfo.name;
|
||
const mdFlag = n && n.substring(n.length-3,n.length) === ".md";
|
||
|
||
return(
|
||
<WhiteBack>
|
||
<UpdateDescModal desc={desc} website={website} lesson_url={lesson_url} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/>
|
||
<Spin spinning={isSpin}>
|
||
{
|
||
(dirInfo || fileInfo) &&
|
||
<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)}
|
||
list = {mainFlag ? dirInfo : undefined}
|
||
/>
|
||
<div className="drawerBtn" onClick={()=>setVisible(true)}>
|
||
<i className="iconfont icon-youjiantou font-16"></i>
|
||
<span>目录</span>
|
||
</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">
|
||
{
|
||
projectDetail.type !== 2 &&
|
||
<a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/pulls/new`)} >+ 合并请求</a>
|
||
}
|
||
<a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/issues/new`)} >+ 任务</a>
|
||
</div>
|
||
{ type === "dir" && projectDetail.type !== 2 &&
|
||
<Dropdown overlay={fileMenu} className="mr20" trigger={['click']}>
|
||
<Button type="default">文件 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-grey-9"></i></Button>
|
||
</Dropdown>
|
||
}
|
||
|
||
<Dropdown overlay={downloadMenu} placement="bottomRight" trigger={['click']}>
|
||
<Button type={'primary'}>下载 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-white"></i></Button>
|
||
</Dropdown>
|
||
</AlignCenter>
|
||
</FlexAJ>
|
||
{
|
||
dirInfo || fileInfo ?
|
||
<div className="listtable">
|
||
{
|
||
lastCommit &&
|
||
<div className="listtablehead">
|
||
<User url={getImageUrl(`/${lastCommitAuthor && lastCommitAuthor.image_url}`)} name={lastCommitAuthor && lastCommitAuthor.name} id={lastCommitAuthor && lastCommitAuthor.id} login={lastCommitAuthor && lastCommitAuthor.login}/>
|
||
<div className={hideBtn && hide ? "ellipsistxt hide" :"ellipsistxt"}><pre id="ptxt">{lastCommit && lastCommit.message}</pre></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 ? <Link to={`/projects/${owner}/${projectsId}/commits`} className="ml12 color-grey-9"><i className="iconfont icon-tijiao mr3 font-17 color-grey-9"></i>{commitCount}次提交</Link>:"" }
|
||
</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}
|
||
md={mdFlag}
|
||
onEdit={onEdit}
|
||
currentBranch={branchName || (projectDetail && projectDetail.default_branch)}
|
||
type={projectDetail.type}
|
||
></CoderRootFileDetail>
|
||
}
|
||
</ul>
|
||
</div>
|
||
: ""
|
||
}
|
||
{
|
||
(dirInfo && dirInfo.length === 0) && (fileInfo && fileInfo.length === 0) ? <Nodata _html="暂未发现文件"/> :""
|
||
}
|
||
{/* readme文件显示(显示文件详情时不显示readme文件) */}
|
||
{ dirInfo && readme ? <ReadMe ChangeFile={ChangeFile} readme={readme} operate={props && (props.isManager || props.isDeveloper) && projectDetail.type !==2 } history={props.history} /> :"" }
|
||
</div>
|
||
</LongWidth>
|
||
{
|
||
!fileInfo &&
|
||
<ShortWidth>
|
||
<Gap style={{paddingLeft:"30px"}}>
|
||
<div className="panelmenu">
|
||
<FlexAJ className="font-18 color-grey-6 mb20" style={{lineHeight:"28px"}}>简介
|
||
{projectDetail.permission && (projectDetail.permission==="Admin" || projectDetail.permission==="Owner") && <i onClick={()=>setOpenModal(true)} className="iconfont icon-anquanshezhi color-grey-9 font-15"></i>}
|
||
</FlexAJ>
|
||
{desc && <p className="font-14 color-grey-9 mb15 task-hide-2" style={{lineHeight:"22px",WebkitLineClamp:"4",textAlign:"justify",wordBreak:"break-all"}}>{desc}</p>}
|
||
{
|
||
website &&
|
||
<p className="color-grey-6 df">
|
||
<i className="iconfont icon-lianjie2 font-15 mr10 color-grey-9"></i>
|
||
<a href={website} className="color-grey-6" target="_blank" style={{wordBreak:"break-all",lineHeight:"20px",marginTop:"5px",textDecoration:"underline"}}>{website}</a>
|
||
</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-6"></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-3"></i>
|
||
<span>{projectDetail.license_name}</span>
|
||
</p>
|
||
}
|
||
</div>
|
||
{
|
||
lesson_url &&
|
||
<div>
|
||
<Divider />
|
||
<p className="font-16 color-grey-6">实践课程</p>
|
||
<a href={lesson_url} target="_blank" className="color-grey-6" style={{textDecoration:"underline"}}>{lesson_url}</a>
|
||
</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 &&
|
||
<Contributors contributors={projectDetail && projectDetail.contributors} owner={owner} projectsId={projectsId} />
|
||
}
|
||
{/* 语言 */}
|
||
{ projectDetail && projectDetail.languages &&
|
||
<React.Fragment>
|
||
<Divider />
|
||
<LanguagePower languages={projectDetail.languages}/>
|
||
</React.Fragment>
|
||
}
|
||
</Gap>
|
||
</ShortWidth>
|
||
}
|
||
</Box>
|
||
}
|
||
</div>
|
||
</Spin>
|
||
</WhiteBack>
|
||
)
|
||
}
|
||
export default CoderDepot; |