|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
|
import CodeRepositoryView from './CodeRepositoryView'
|
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
import './CodeRepositoryView.css'
|
|
|
|
|
|
// 自己处理path，加上父节点的path, 这里是处理树节点了，所以是set key
|
|
|
function addPrePath(treeData, parentNodePath) {
|
|
|
return treeData.map(item => {
|
|
|
return {
|
|
|
...item,
|
|
|
key: `${parentNodePath}/${item.name}`
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
function getNewTreeData(treeData, curKey, child, level) {
|
|
|
const loop = (data) => {
|
|
|
data.forEach((item) => {
|
|
|
// 这里不能用indexOf 同一级可能出现test目录和test.py文件
|
|
|
if (item.key == curKey) {
|
|
|
child = addPrePath(child, curKey);
|
|
|
item.children = child;
|
|
|
} else {
|
|
|
if (item.children) {
|
|
|
loop(item.children);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
loop(treeData);
|
|
|
}
|
|
|
|
|
|
function fileData2TreeData(repoFilesData) {
|
|
|
if(repoFilesData!=null){
|
|
|
const fileTreeData = [];
|
|
|
repoFilesData.forEach((item) => {
|
|
|
if (item.kind === 'file') {
|
|
|
fileTreeData.push({
|
|
|
key: item.path,
|
|
|
name: item.name,
|
|
|
isLeaf: true
|
|
|
})
|
|
|
} else {
|
|
|
fileTreeData.push({
|
|
|
key: item.path,
|
|
|
name: item.name,
|
|
|
// isLeaf: false
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
return fileTreeData;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
class CodeRepositoryViewContainer extends Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
|
|
|
this.showFilesDrawer = this.showFilesDrawer.bind(this)
|
|
|
this.onRepositoryViewExpand = this.onRepositoryViewExpand.bind(this)
|
|
|
|
|
|
this.state = {
|
|
|
drawerOpen: false,
|
|
|
loadingFirstRepoFiles: false,
|
|
|
fileTreeData: "",
|
|
|
fileTreeSelectedKeys: [],
|
|
|
codeRepositoryViewExpanded: false,
|
|
|
tabIndex: 0,
|
|
|
|
|
|
settingDrawerOpen: false
|
|
|
}
|
|
|
}
|
|
|
showSettingDrawer = (open) => {
|
|
|
this.setState({settingDrawerOpen: open})
|
|
|
}
|
|
|
tabIndexChange = (index) => {
|
|
|
this.setState({tabIndex: index});
|
|
|
}
|
|
|
onRepositoryViewExpand() {
|
|
|
window.repository_extend_and_zoom();
|
|
|
this.setState({
|
|
|
evaluateViewExpanded: !this.state.evaluateViewExpanded
|
|
|
}, () => {
|
|
|
setTimeout(()=>{
|
|
|
window.__tpiOnResize()
|
|
|
}, 300)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
showFilesDrawer(open) {
|
|
|
if (this.props.loading === true) {
|
|
|
return;
|
|
|
}
|
|
|
if (!this.state.fileTreeData) {
|
|
|
this.fetchRepoFiles();
|
|
|
}
|
|
|
|
|
|
this.setState({
|
|
|
drawerOpen: open,
|
|
|
})
|
|
|
}
|
|
|
loadRepoFiles = () => {
|
|
|
if (!this.state.fileTreeData) {
|
|
|
this.fetchRepoFiles();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentWillReceiveProps(newProps, oldProps) {
|
|
|
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
|
|
|
}
|
|
|
|
|
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
|
const { game, challenge } = this.props
|
|
|
if (this.props.game && (!prevProps.game || prevProps.game.identifier !== this.props.game.identifier) ) {
|
|
|
this.setState({
|
|
|
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ]
|
|
|
})
|
|
|
// 初始化
|
|
|
} else if (this.state.fileTreeSelectedKeys.length === 0 && challenge && challenge.path) {
|
|
|
this.setState({
|
|
|
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ]
|
|
|
})
|
|
|
} else if (challenge && prevProps && prevProps.challenge
|
|
|
&& challenge.pathIndex != prevProps.challenge.pathIndex
|
|
|
&& challenge.pathIndex !== -1) {
|
|
|
this.setState({
|
|
|
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path ]
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
handleDialogClose() {
|
|
|
this.setState({
|
|
|
dialogOpen: false
|
|
|
})
|
|
|
}
|
|
|
onLoadData = (treeNode) => {
|
|
|
if (treeNode.props.children && treeNode.props.children.length) {
|
|
|
return new Promise((resolve) => {
|
|
|
resolve();
|
|
|
});
|
|
|
}
|
|
|
return new Promise((resolve, reject) => {
|
|
|
this.fetchRepoFiles(treeNode, resolve, reject)
|
|
|
});
|
|
|
}
|
|
|
map2OldData = (treeData) => {
|
|
|
if (!treeData || treeData.length === 0) return treeData;
|
|
|
treeData = treeData.map(item => {
|
|
|
return {
|
|
|
kind: item.type == "blob" ? "file" : "dir", // blob->file tree->dir
|
|
|
path: item.name,
|
|
|
name: item.name
|
|
|
}
|
|
|
})
|
|
|
return treeData;
|
|
|
}
|
|
|
|
|
|
fetchRepoFiles(treeNode, resolve, reject) {
|
|
|
// http://localhost:3000/api/v1/games/829al3mst4fy/entries?path=src/step1&rev=master
|
|
|
if (!this.props.challenge || !this.props.game) {
|
|
|
return;
|
|
|
}
|
|
|
// var ar = this.props.challenge.path.split('/');
|
|
|
// ar.length = ar.length - 2;
|
|
|
// var _path = ar.join('/');
|
|
|
var _path = treeNode ? treeNode.props.eventKey : '' ;
|
|
|
if (_path.charAt(0) === '/') {
|
|
|
_path = _path.substring(1)
|
|
|
}
|
|
|
// var url = `/api/v1/games/${this.props.game.identifier}/entries?path=${_path}&rev=master&gpid=${this.props.myshixun.gpid}`
|
|
|
let url = `/myshixuns/${this.props.myshixun.identifier}/repository.json`
|
|
|
|
|
|
|
|
|
if (!this.state.fileTreeData || this.state.fileTreeData.length === 0) {
|
|
|
this.setState({
|
|
|
loadingFirstRepoFiles: true,
|
|
|
})
|
|
|
}
|
|
|
var that = this;
|
|
|
axios.post(url, {
|
|
|
path: _path
|
|
|
// withCredentials: true,
|
|
|
})
|
|
|
.then((response) => {
|
|
|
const repoFilesData = this.map2OldData(response.data.trees)
|
|
|
if (!this.state.fileTreeData || this.state.fileTreeData.length === 0) { // 还没树节点，没加载过
|
|
|
|
|
|
const fileTreeData = fileData2TreeData(repoFilesData)
|
|
|
this.setState({
|
|
|
fileTreeData,
|
|
|
loadingFirstRepoFiles: false,
|
|
|
});
|
|
|
} else {
|
|
|
var _treeNode = treeNode;
|
|
|
var _eventKey = _treeNode.props.eventKey;
|
|
|
|
|
|
const fileTreeData = that.state.fileTreeData;
|
|
|
// 新的数组放置到treenode下
|
|
|
|
|
|
const tempFileTreeData = fileData2TreeData(repoFilesData)
|
|
|
|
|
|
getNewTreeData(fileTreeData, _eventKey, tempFileTreeData, 2);
|
|
|
this.setState({
|
|
|
fileTreeData,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
resolve && resolve();
|
|
|
|
|
|
})
|
|
|
.catch(function (error) {
|
|
|
console.log(error);
|
|
|
reject && reject();
|
|
|
});
|
|
|
}
|
|
|
onTreeSelect = (selectedKeys, info) => {
|
|
|
const isLeaf = info.node.props.isLeaf;
|
|
|
if (isLeaf) { // 叶子节点
|
|
|
selectedKeys.length && this.setState({
|
|
|
fileTreeSelectedKeys: selectedKeys
|
|
|
})
|
|
|
const { fetchRepositoryCode, onPathChange, showSnackbar, challenge } = this.props;
|
|
|
|
|
|
const nodePath = info.node.props.eventKey;
|
|
|
let isCurrentFile = false;
|
|
|
// 设置pathIndex为-1，那么代码文件下拉可以切回可编辑的文件
|
|
|
if (!challenge.multiPath) { // 单path任务 多path任务 path是数组
|
|
|
if (challenge.path.trim() == nodePath.trim()) {
|
|
|
if (challenge.pathIndex === 0) {
|
|
|
showSnackbar(`当前编辑文件已经是${nodePath}`)
|
|
|
} else {
|
|
|
fetchRepositoryCode(null, nodePath, 1);
|
|
|
onPathChange(0)
|
|
|
}
|
|
|
return;
|
|
|
} else {
|
|
|
onPathChange(-1)
|
|
|
}
|
|
|
} else {
|
|
|
|
|
|
let cur_index = -1;
|
|
|
if (challenge.path && challenge.path.forEach) {
|
|
|
challenge.path.forEach((item, index) => {
|
|
|
if (nodePath == item) {
|
|
|
isCurrentFile = true;
|
|
|
cur_index = index;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
if (isCurrentFile) {
|
|
|
if (challenge.pathIndex == cur_index) {
|
|
|
showSnackbar(`当前编辑文件已经是${nodePath}`)
|
|
|
}
|
|
|
onPathChange(cur_index)
|
|
|
// showSnackbar(`当前编辑文件已经是${nodePath}`)
|
|
|
} else {
|
|
|
onPathChange(-1)
|
|
|
}
|
|
|
}
|
|
|
if (nodePath) {
|
|
|
const filetype = nodePath.split('.').pop().toLowerCase();
|
|
|
if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
|
|
|
|| filetype == 'jar'
|
|
|
|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
|
|
|
showSnackbar(`不支持加载${filetype}类型的文件。`)
|
|
|
return;
|
|
|
}
|
|
|
fetchRepositoryCode(null, nodePath, 1);
|
|
|
} else {
|
|
|
console.error('no eventKey:', info.node)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
|
|
|
render() {
|
|
|
|
|
|
return (
|
|
|
<React.Fragment>
|
|
|
{this.props.isOnlyContainer == true ?
|
|
|
React.Children.map(this.props.children, child => {
|
|
|
if(!child) {
|
|
|
return ''
|
|
|
}
|
|
|
return React.cloneElement(child, Object.assign({...this.state}, {
|
|
|
loadRepoFiles: this.loadRepoFiles,
|
|
|
onTreeSelect: this.onTreeSelect,
|
|
|
onLoadData: this.onLoadData,
|
|
|
}))
|
|
|
})
|
|
|
|
|
|
:
|
|
|
|
|
|
<CodeRepositoryView {...this.props}
|
|
|
{...this.state}
|
|
|
showFilesDrawer={this.showFilesDrawer}
|
|
|
loadRepoFiles={this.loadRepoFiles}
|
|
|
onLoadData={this.onLoadData}
|
|
|
onTreeSelect={ this.onTreeSelect }
|
|
|
onRepositoryViewExpand={this.onRepositoryViewExpand}
|
|
|
tabIndexChange={this.tabIndexChange}
|
|
|
showSettingDrawer={this.showSettingDrawer}
|
|
|
></CodeRepositoryView> }
|
|
|
</React.Fragment>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default CodeRepositoryViewContainer;
|
