diff --git a/frontend/src/components/main-panel.js b/frontend/src/components/main-panel.js deleted file mode 100644 index ff8943ba80..0000000000 --- a/frontend/src/components/main-panel.js +++ /dev/null @@ -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 ( - /{item} - ) - } else { - nodePath += "/" + item; - return ( - /{item} - ) - } - }); - - return ( -
-
- -
- {gettext("Edit Page")} -
-
- - -
-
-
-
-
- {gettext("Wikis")} - / - {slug} - {pathElem} -
-
-
- { this.props.isViewFileState && } - { !this.props.isViewFileState && - - - } -
-
-
- ) - } -} - -export default MainPanel; diff --git a/frontend/src/components/Notification.js b/frontend/src/components/notification.js similarity index 100% rename from frontend/src/components/Notification.js rename to frontend/src/components/notification.js diff --git a/frontend/src/components/side-panel.js b/frontend/src/components/side-panel.js deleted file mode 100644 index 97ade803f8..0000000000 --- a/frontend/src/components/side-panel.js +++ /dev/null @@ -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 ( -
-
- - -
- -
- ) - } -} -export default SidePanel; diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js index b3adb1f74e..5783d1f46e 100644 --- a/frontend/src/pages/wiki/main-panel.js +++ b/frontend/src/pages/wiki/main-panel.js @@ -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 ( /{item} ) + } else { + nodePath += "/" + item; + return ( + /{item} + ) } }); @@ -36,8 +49,8 @@ class MainPanel extends Component { {gettext("Edit Page")}
- - + +
@@ -50,13 +63,20 @@ class MainPanel extends Component {
- + />} + { !this.props.isViewFileState && + + + }
diff --git a/frontend/src/pages/wiki/side-panel.js b/frontend/src/pages/wiki/side-panel.js index fa94d651d1..b02b0d2236 100644 --- a/frontend/src/pages/wiki/side-panel.js +++ b/frontend/src/pages/wiki/side-panel.js @@ -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 {
- {this.state.tree_data && + {this.props.treeData && }