mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-16 07:08:55 +00:00
debug merge
This commit is contained in:
ilearnit
@@ -1,87 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { gettext, repoID, serviceUrl, slug, siteRoot } from './constance';
|
||||
import Search from './search';
|
||||
import Account from './account';
|
||||
import MarkdownViewer from './markdown-viewer';
|
||||
import TreeDirView from './tree-dir-view/tree-dir-view';
|
||||
|
||||
class MainPanel extends Component {
|
||||
|
||||
onMenuClick = () => {
|
||||
this.props.onMenuClick();
|
||||
}
|
||||
|
||||
onEditClick = (e) => {
|
||||
// const w=window.open('about:blank')
|
||||
e.preventDefault();
|
||||
window.location.href= serviceUrl + '/lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
|
||||
}
|
||||
|
||||
onMainNavBarClick = (e) => {
|
||||
this.props.onMainNavBarClick(e.target.dataset.path);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let filePathList = this.props.filePath.split('/');
|
||||
let nodePath = "";
|
||||
let pathElem = filePathList.map((item, index) => {
|
||||
if (item === "") {
|
||||
return;
|
||||
}
|
||||
if (index === (filePathList.length - 1)) {
|
||||
return (
|
||||
<span key={index}><span className="path-split">/</span>{item}</span>
|
||||
)
|
||||
} else {
|
||||
nodePath += "/" + item;
|
||||
return (
|
||||
<a key={index} className="custom-link" data-path={nodePath} onClick={this.onMainNavBarClick}><span className="path-split">/</span>{item}</a>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="wiki-main-panel o-hidden">
|
||||
<div className="main-panel-top panel-top">
|
||||
<span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.onMenuClick}></span>
|
||||
<div className={`wiki-page-ops ${this.props.permission === 'rw' ? '' : 'hide'}`}>
|
||||
<a className="btn btn-secondary btn-topbar" onClick={this.onEditClick}>{gettext("Edit Page")}</a>
|
||||
</div>
|
||||
<div className="common-toolbar">
|
||||
<Search onSearchedClick={this.props.onSearchedClick}/>
|
||||
<Account />
|
||||
</div>
|
||||
</div>
|
||||
<div className="cur-view-main">
|
||||
<div className="cur-view-path">
|
||||
<div className="path-containter">
|
||||
<a href={siteRoot + 'wikis/'} className="normal">{gettext("Wikis")}</a>
|
||||
<span className="path-split">/</span>
|
||||
<a href={siteRoot + 'wikis/' + slug} className="normal">{slug}</a>
|
||||
{pathElem}
|
||||
</div>
|
||||
</div>
|
||||
<div className="cur-view-container">
|
||||
{ this.props.isViewFileState && <MarkdownViewer
|
||||
markdownContent={this.props.content}
|
||||
latestContributor={this.props.latestContributor}
|
||||
lastModified = {this.props.lastModified}
|
||||
onLinkClick={this.props.onLinkClick}
|
||||
isFileLoading={this.props.isFileLoading}
|
||||
/>}
|
||||
{ !this.props.isViewFileState &&
|
||||
<TreeDirView
|
||||
node={this.props.changedNode}
|
||||
onMainNodeClick={this.props.onMainNodeClick}
|
||||
>
|
||||
</TreeDirView>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MainPanel;
|
||||
@@ -1,164 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import TreeView from './tree-view/tree-view';
|
||||
import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from './constance';
|
||||
import NodeMenu from './menu-component/node-menu';
|
||||
import MenuControl from './menu-component/node-menu-control';
|
||||
|
||||
const gettext = window.gettext;
|
||||
|
||||
class SidePanel extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
currentNode: null,
|
||||
isNodeItemFrezee: false,
|
||||
isShowMenu: false,
|
||||
menuPosition: {
|
||||
left: 0,
|
||||
top: 0
|
||||
},
|
||||
isLoadFailed: false,
|
||||
isMenuIconShow: false
|
||||
}
|
||||
this.searchedPath = null;
|
||||
}
|
||||
|
||||
closeSide = () => {
|
||||
this.props.onCloseSide();
|
||||
}
|
||||
|
||||
onMouseEnter = () => {
|
||||
this.setState({
|
||||
isMenuIconShow: true
|
||||
})
|
||||
}
|
||||
|
||||
onMouseLeave = () => {
|
||||
this.setState({
|
||||
isMenuIconShow: false
|
||||
})
|
||||
}
|
||||
|
||||
onNodeClick = (e, node) => {
|
||||
this.setState({currentNode: node})
|
||||
this.props.onNodeClick(e, node)
|
||||
}
|
||||
|
||||
onShowContextMenu = (e, node) => {
|
||||
let left = e.clientX - 8*16;
|
||||
let top = e.clientY + 10;
|
||||
let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
|
||||
this.setState({
|
||||
isShowMenu: !this.state.isShowMenu,
|
||||
currentNode: node,
|
||||
menuPosition: position,
|
||||
isNodeItemFrezee: true
|
||||
})
|
||||
}
|
||||
|
||||
onHeadingMenuClick = (e) => {
|
||||
e.nativeEvent.stopImmediatePropagation();
|
||||
let node = this.props.treeData.root;
|
||||
let left = e.clientX - 8*16;
|
||||
let top = e.clientY + 10;
|
||||
let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
|
||||
this.setState({
|
||||
isShowMenu: !this.state.isShowMenu,
|
||||
currentNode: node,
|
||||
menuPosition: position
|
||||
})
|
||||
}
|
||||
|
||||
onHideContextMenu = () => {
|
||||
this.setState({
|
||||
isShowMenu: false,
|
||||
isNodeItemFrezee: false
|
||||
})
|
||||
}
|
||||
|
||||
onAddFolderNode = (dirPath) => {
|
||||
this.props.onAddFolderNode(dirPath);
|
||||
}
|
||||
|
||||
onAddFileNode = (filePath) => {
|
||||
this.props.onAddFileNode(filePath);
|
||||
}
|
||||
|
||||
onRenameNode = (newName) => {
|
||||
let node = this.state.currentNode;
|
||||
this.props.onRenameNode(node, newName)
|
||||
}
|
||||
|
||||
onDeleteNode = () => {
|
||||
let node = this.state.currentNode;
|
||||
this.props.onDeleteNode(node);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('click', this.onHideContextMenu);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setState({
|
||||
currentNode: nextProps.changedNode
|
||||
})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('click', this.onHideContextMenu);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
|
||||
<div className="side-panel-top panel-top">
|
||||
<a href={siteRoot} id="logo">
|
||||
<img src={mediaUrl + logoPath} title={siteTitle} alt="logo" width={logoWidth} height={logoHeight} />
|
||||
</a>
|
||||
<a title="Close" aria-label="Close" onClick={this.closeSide} className="sf2-icon-x1 sf-popover-close side-panel-close op-icon d-md-none "></a>
|
||||
</div>
|
||||
<div id="side-nav" className="wiki-side-nav" role="navigation">
|
||||
<h3
|
||||
className="wiki-pages-heading"
|
||||
onMouseEnter={this.onMouseEnter}
|
||||
onMouseLeave={this.onMouseLeave}
|
||||
>
|
||||
{gettext("Pages")}
|
||||
<div className="heading-icon">
|
||||
<MenuControl
|
||||
isShow={this.state.isMenuIconShow}
|
||||
onClick={this.onHeadingMenuClick}
|
||||
/>
|
||||
</div>
|
||||
</h3>
|
||||
<div className="wiki-pages-container">
|
||||
{this.props.treeData &&
|
||||
<TreeView
|
||||
permission={this.props.permission}
|
||||
currentFilePath={this.props.currentFilePath}
|
||||
treeData={this.props.treeData}
|
||||
currentNode={this.state.currentNode}
|
||||
isNodeItemFrezee={this.state.isNodeItemFrezee}
|
||||
onNodeClick={this.onNodeClick}
|
||||
onShowContextMenu={this.onShowContextMenu}
|
||||
onDirCollapse={this.props.onDirCollapse}
|
||||
/>
|
||||
}
|
||||
<NodeMenu
|
||||
isShowMenu={this.state.isShowMenu}
|
||||
menuPosition={this.state.menuPosition}
|
||||
currentNode={this.state.currentNode}
|
||||
onHideContextMenu={this.onHideContextMenu}
|
||||
onDeleteNode={this.onDeleteNode}
|
||||
onAddFileNode={this.onAddFileNode}
|
||||
onAddFolderNode={this.onAddFolderNode}
|
||||
onRenameNode={this.onRenameNode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default SidePanel;
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import Search from '../../components/search';
|
||||
import MarkdownViewer from '../../components/markdown-viewer';
|
||||
import Account from '../../components/account';
|
||||
import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../components/constance';
|
||||
import Search from '../../components/search';
|
||||
import Account from '../../components/account';
|
||||
import MarkdownViewer from '../../components/markdown-viewer';
|
||||
import TreeDirView from '../../components/tree-dir-view/tree-dir-view';
|
||||
|
||||
class MainPanel extends Component {
|
||||
|
||||
@@ -16,15 +17,27 @@ class MainPanel extends Component {
|
||||
window.location.href= serviceUrl + '/lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
|
||||
}
|
||||
|
||||
onMainNavBarClick = (e) => {
|
||||
this.props.onMainNavBarClick(e.target.dataset.path);
|
||||
}
|
||||
|
||||
render() {
|
||||
var filePathList = this.props.filePath.split('/');
|
||||
var pathElem = filePathList.map((item, index) => {
|
||||
if (item == "") {
|
||||
|
||||
let filePathList = this.props.filePath.split('/');
|
||||
let nodePath = "";
|
||||
let pathElem = filePathList.map((item, index) => {
|
||||
if (item === "") {
|
||||
return;
|
||||
} else {
|
||||
}
|
||||
if (index === (filePathList.length - 1)) {
|
||||
return (
|
||||
<span key={index}><span className="path-split">/</span>{item}</span>
|
||||
)
|
||||
} else {
|
||||
nodePath += "/" + item;
|
||||
return (
|
||||
<a key={index} className="custom-link" data-path={nodePath} onClick={this.onMainNavBarClick}><span className="path-split">/</span>{item}</a>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
@@ -36,8 +49,8 @@ class MainPanel extends Component {
|
||||
<a className="btn btn-secondary btn-topbar" onClick={this.onEditClick}>{gettext("Edit Page")}</a>
|
||||
</div>
|
||||
<div className="common-toolbar">
|
||||
<Search seafileAPI={this.props.seafileAPI} onSearchedClick={this.props.onSearchedClick}/>
|
||||
<Account seafileAPI={this.props.seafileAPI} />
|
||||
<Search onSearchedClick={this.props.onSearchedClick}/>
|
||||
<Account />
|
||||
</div>
|
||||
</div>
|
||||
<div className="cur-view-main">
|
||||
@@ -50,13 +63,20 @@ class MainPanel extends Component {
|
||||
</div>
|
||||
</div>
|
||||
<div className="cur-view-container">
|
||||
<MarkdownViewer
|
||||
{ this.props.isViewFileState && <MarkdownViewer
|
||||
markdownContent={this.props.content}
|
||||
latestContributor={this.props.latestContributor}
|
||||
lastModified = {this.props.lastModified}
|
||||
onLinkClick={this.props.onLinkClick}
|
||||
isFileLoading={this.props.isFileLoading}
|
||||
/>
|
||||
/>}
|
||||
{ !this.props.isViewFileState &&
|
||||
<TreeDirView
|
||||
node={this.props.changedNode}
|
||||
onMainNodeClick={this.props.onMainNodeClick}
|
||||
>
|
||||
</TreeDirView>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import TreeView from '../../components/tree-view/tree-view';
|
||||
import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from '../../components/constance';
|
||||
import Tree from '../../components/tree-view/tree';
|
||||
import Node from '../../components/tree-view/node'
|
||||
import NodeMenu from '../../components/menu-component/node-menu';
|
||||
import MenuControl from '../../components/menu-component/node-menu-control';
|
||||
|
||||
const gettext = window.gettext;
|
||||
|
||||
class SidePanel extends Component {
|
||||
@@ -12,7 +11,6 @@ class SidePanel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
tree_data: new Tree(),
|
||||
currentNode: null,
|
||||
isNodeItemFrezee: false,
|
||||
isShowMenu: false,
|
||||
@@ -43,10 +41,8 @@ class SidePanel extends Component {
|
||||
}
|
||||
|
||||
onNodeClick = (e, node) => {
|
||||
this.setState({
|
||||
currentNode: node
|
||||
})
|
||||
this.props.onFileClick(e, node)
|
||||
this.setState({currentNode: node})
|
||||
this.props.onNodeClick(e, node)
|
||||
}
|
||||
|
||||
onShowContextMenu = (e, node) => {
|
||||
@@ -63,7 +59,7 @@ class SidePanel extends Component {
|
||||
|
||||
onHeadingMenuClick = (e) => {
|
||||
e.nativeEvent.stopImmediatePropagation();
|
||||
let node = this.state.tree_data.root;
|
||||
let node = this.props.treeData.root;
|
||||
let left = e.clientX - 8*16;
|
||||
let top = e.clientY + 10;
|
||||
let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
|
||||
@@ -82,191 +78,31 @@ class SidePanel extends Component {
|
||||
}
|
||||
|
||||
onAddFolderNode = (dirPath) => {
|
||||
this.props.editorUtilities.createDir(dirPath).then(res => {
|
||||
let tree = this.state.tree_data.copy();
|
||||
let index = dirPath.lastIndexOf("/");
|
||||
let name = dirPath.substring(index+1);
|
||||
let parentPath = dirPath.substring(0, index);
|
||||
if (!parentPath) {
|
||||
parentPath = "/";
|
||||
}
|
||||
let node = new Node({name : name, type: "dir", isExpanded: false, children: []});
|
||||
let parentNode = tree.getNodeByPath(parentPath);
|
||||
tree.addChildToNode(parentNode, node);
|
||||
tree.setOneNodeToActived({node});
|
||||
this.setState({
|
||||
tree_data: tree
|
||||
})
|
||||
|
||||
})
|
||||
this.props.onAddFolderNode(dirPath);
|
||||
}
|
||||
|
||||
onAddFileNode = (filePath) => {
|
||||
this.props.editorUtilities.createFile(filePath).then(res => {
|
||||
let tree = this.state.tree_data.copy();
|
||||
let index = filePath.lastIndexOf("/");
|
||||
let name = filePath.substring(index+1);
|
||||
let parentPath = filePath.substring(0, index);
|
||||
if (!parentPath) {
|
||||
parentPath = "/";
|
||||
}
|
||||
let node = new Node({name : name, type: "file", isExpanded: false, children: []});
|
||||
let parentNode = tree.getNodeByPath(parentPath);
|
||||
tree.addChildToNode(parentNode, node);
|
||||
tree.setOneNodeToActived({node});
|
||||
this.setState({
|
||||
tree_data: tree
|
||||
})
|
||||
})
|
||||
this.props.onAddFileNode(filePath);
|
||||
}
|
||||
|
||||
|
||||
onRenameNode = (newName) => {
|
||||
let tree = this.state.tree_data.copy();
|
||||
let node = this.state.currentNode;
|
||||
let type = node.type;
|
||||
let filePath = node.path;
|
||||
if (type === 'file') {
|
||||
this.props.editorUtilities.renameFile(filePath, newName).then(res => {
|
||||
if (this.isModifyCurrentFile()) {
|
||||
tree.updateNodeParamValue(node, "name", newName);
|
||||
node.name = newName; //repair current node
|
||||
this.props.onFileClick(null, node);
|
||||
tree.setOneNodeToActived({node});
|
||||
this.setState({tree_data: tree});
|
||||
} else {
|
||||
tree.updateNodeParamValue(node, "name", newName);
|
||||
this.setState({tree_data: tree});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (type === 'dir') {
|
||||
let _this = this;
|
||||
this.props.editorUtilities.renameDir(filePath, newName).then(res => {
|
||||
let tree = this.state.tree_data.copy();
|
||||
let currentNode = this.state.currentNode;
|
||||
if (this.isModifyContainsCurrentFile()) {
|
||||
let nodePath = currentNode.path;
|
||||
let filePath = _this.props.currentFilePath;
|
||||
let start = filePath.indexOf(nodePath);
|
||||
let node = currentNode.getNodeByPath(filePath.slice(start));
|
||||
if (node) {
|
||||
tree.updateNodeParamValue(currentNode, "name", newName);
|
||||
currentNode.name = newName;
|
||||
this.props.onFileClick(null, node);
|
||||
tree.setOneNodeToActived({node});
|
||||
this.setState({tree_data: tree});
|
||||
}
|
||||
} else {
|
||||
tree.updateNodeParamValue(currentNode, "name", newName);
|
||||
this.setState({tree_data: tree});
|
||||
}
|
||||
})
|
||||
}
|
||||
this.props.onRenameNode(node, newName)
|
||||
}
|
||||
|
||||
|
||||
onDeleteNode = () => {
|
||||
var currentNode = this.state.currentNode;
|
||||
let filePath = currentNode.path;
|
||||
let type = currentNode.type;
|
||||
if (type === 'file') {
|
||||
this.props.editorUtilities.deleteFile(filePath);
|
||||
}
|
||||
|
||||
if (type === 'dir') {
|
||||
this.props.editorUtilities.deleteDir(filePath);
|
||||
}
|
||||
|
||||
let isCurrentFile = false;
|
||||
if (this.state.currentNode.type === "dir") {
|
||||
isCurrentFile = this.isModifyContainsCurrentFile();
|
||||
} else {
|
||||
isCurrentFile = this.isModifyCurrentFile();
|
||||
}
|
||||
|
||||
let tree = this.state.tree_data.copy();
|
||||
tree.removeNodeFromTree(currentNode);
|
||||
|
||||
if (isCurrentFile) {
|
||||
let homeNode = this.getHomeNode();
|
||||
this.props.onFileClick(null, homeNode);
|
||||
tree.setNoneNodeActived();
|
||||
this.setState({tree_data: tree})
|
||||
} else {
|
||||
this.setState({tree_data: tree})
|
||||
}
|
||||
}
|
||||
|
||||
isModifyCurrentFile() {
|
||||
let nodeName = this.state.currentNode.name;
|
||||
let filePath = this.props.currentFilePath;
|
||||
let index = filePath.lastIndexOf("/");
|
||||
let fileName = filePath.slice(index+1);
|
||||
return nodeName === fileName;
|
||||
}
|
||||
|
||||
isModifyContainsCurrentFile() {
|
||||
let filePath = this.props.currentFilePath;
|
||||
let nodePath = this.state.currentNode.path;
|
||||
|
||||
if (filePath.indexOf(nodePath) > -1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
initializeTreeData() {
|
||||
this.props.editorUtilities.getFiles().then((files) => {
|
||||
// construct the tree object
|
||||
var rootObj = {
|
||||
name: '/',
|
||||
type: 'dir',
|
||||
isExpanded: true
|
||||
}
|
||||
var treeData = new Tree();
|
||||
treeData.parseFromList(rootObj, files);
|
||||
let homeNode = this.getHomeNode(treeData);
|
||||
this.setState({
|
||||
tree_data: treeData,
|
||||
currentNode: homeNode
|
||||
})
|
||||
}, () => {
|
||||
console.log("failed to load files");
|
||||
this.setState({
|
||||
isLoadFailed: true
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
getHomeNode(treeData) {
|
||||
let root = null;
|
||||
if (treeData) {
|
||||
root = treeData.root;
|
||||
} else {
|
||||
root = this.state.tree_data.root;
|
||||
}
|
||||
let homeNode = root.getNodeByPath(decodeURI("/home.md"));
|
||||
return homeNode;
|
||||
let node = this.state.currentNode;
|
||||
this.props.onDeleteNode(node);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//init treeview data
|
||||
this.initializeTreeData();
|
||||
document.addEventListener('click', this.onHideContextMenu);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let path = nextProps.searchedPath; //handle search module
|
||||
if (path !== this.searchedPath) {
|
||||
let node = this.state.tree_data.getNodeByPath(path);
|
||||
this.searchedPath = path;
|
||||
this.props.onFileClick(null, node);
|
||||
let tree = this.state.tree_data.copy();
|
||||
tree.setOneNodeToActived({node});
|
||||
this.setState({
|
||||
tree_data: tree
|
||||
})
|
||||
}
|
||||
this.setState({
|
||||
currentNode: nextProps.changedNode
|
||||
})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@@ -297,15 +133,16 @@ class SidePanel extends Component {
|
||||
</div>
|
||||
</h3>
|
||||
<div className="wiki-pages-container">
|
||||
{this.state.tree_data &&
|
||||
{this.props.treeData &&
|
||||
<TreeView
|
||||
permission={this.props.permission}
|
||||
currentFilePath={this.props.currentFilePath}
|
||||
treeData={this.state.tree_data}
|
||||
treeData={this.props.treeData}
|
||||
currentNode={this.state.currentNode}
|
||||
isNodeItemFrezee={this.state.isNodeItemFrezee}
|
||||
onNodeClick={this.onNodeClick}
|
||||
onShowContextMenu={this.onShowContextMenu}
|
||||
onDirCollapse={this.props.onDirCollapse}
|
||||
/>
|
||||
}
|
||||
<NodeMenu
|
||||
|
||||
Reference in New Issue
Block a user