haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-26 15:26:19 +00:00
Code Issues Releases Wiki Activity

Wiki module optimized (#2884)

Browse Source 
* optimized wiki code

* optimized wiki code
This commit is contained in:
杨顺强
2019-01-25 11:21:55 +08:00
committed by Daniel Pan
parent 908b4c4b39
commit 9ff108f56b
1 changed files with 147 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
frontend/src/pages/wiki/side-panel.js
View File

@@ -1,9 +1,10 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { gettext, siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight, repoID } from '../../utils/constants'; import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import { gettext, siteRoot, repoID } from '../../utils/constants';
import Logo from '../../components/logo';
import TreeView from '../../components/tree-view/tree-view'; import TreeView from '../../components/tree-view/tree-view';
import NodeMenu from '../../components/tree-view/node-menu'; import NodeMenu from '../../components/tree-view/node-menu';
import MenuControl from '../../components/menu-control';
import Delete from '../../components/dialog/delete-dialog'; import Delete from '../../components/dialog/delete-dialog';
import Rename from '../../components/dialog/rename-dialog'; import Rename from '../../components/dialog/rename-dialog';
import CreateFolder from '../../components/dialog/create-folder-dialog'; import CreateFolder from '../../components/dialog/create-folder-dialog';
@@ -43,28 +44,41 @@ class SidePanel extends Component {
}, },
isLoadFailed: false, isLoadFailed: false,
isMenuIconShow: false, isMenuIconShow: false,
showDelete: false, isHeaderMenuShow: false,
showFile: false, isDeleteDialogShow: false,
showFolder: false, isAddFileDialogShow: false,
showRename: false, isAddFolderDialogShow: false,
isRenameDialogShow: false,
}; };
this.searchedPath = null;
} }
closeSide = () => { componentDidMount() {
this.props.onCloseSide(); document.addEventListener('click', this.onHideContextMenu);
}
componentWillReceiveProps(nextProps) {
this.setState({currentNode: nextProps.changedNode});
}
componentWillUnmount() {
document.removeEventListener('click', this.onHideContextMenu);
} }
onMouseEnter = () => { onMouseEnter = () => {
this.setState({ this.setState({isMenuIconShow: true});
isMenuIconShow: true
});
} }
onMouseLeave = () => { onMouseLeave = () => {
this.setState({ this.setState({isMenuIconShow: false});
isMenuIconShow: false }
});
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu();
}
toggleOperationMenu = () => {
this.setState({isHeaderMenuShow: !this.state.isHeaderMenuShow});
} }
onNodeClick = (e, node) => { onNodeClick = (e, node) => {
@@ -84,19 +98,6 @@ class SidePanel extends Component {
}); });
} }
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 = () => { onHideContextMenu = () => {
if (!this.state.isShowMenu) { if (!this.state.isShowMenu) {
return; return;
@@ -107,76 +108,62 @@ class SidePanel extends Component {
}); });
} }
toggleAddFile = () => { onAddFolderToggle = () => {
this.setState({showFile: !this.state.showFile}); this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
this.onHideContextMenu(); this.onHideContextMenu();
} }
toggleAddFolder = () => { onAddFileToggle = () => {
this.setState({showFolder: !this.state.showFolder}); this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
this.onHideContextMenu(); this.onHideContextMenu();
} }
toggleRename = () => { onRenameToggle = () => {
this.setState({showRename: !this.state.showRename}); this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
this.onHideContextMenu(); this.onHideContextMenu();
} }
toggleDelete = () => { onDeleteToggle = () => {
this.setState({showDelete: !this.state.showDelete}); this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
this.onHideContextMenu(); this.onHideContextMenu();
} }
onAddFolderNode = (dirPath) => { onAddFolderNode = (dirPath) => {
this.setState({showFolder: !this.state.showFolder}); this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
this.props.onAddFolderNode(dirPath); this.props.onAddFolderNode(dirPath);
} }
onAddFileNode = (filePath) => { onAddFileNode = (filePath) => {
this.setState({showFile: !this.state.showFile}); this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
this.props.onAddFileNode(filePath); this.props.onAddFileNode(filePath);
} }
onRenameNode = (newName) => { onRenameNode = (newName) => {
this.setState({showRename: !this.state.showRename}); this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
let node = this.state.currentNode; let node = this.state.currentNode;
this.props.onRenameNode(node, newName); this.props.onRenameNode(node, newName);
} }
onDeleteNode = () => { onDeleteNode = () => {
this.setState({showDelete: !this.state.showDelete}); this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
let node = this.state.currentNode; let node = this.state.currentNode;
this.props.onDeleteNode(node); this.props.onDeleteNode(node);
} }
componentDidMount() {
document.addEventListener('click', this.onHideContextMenu);
}
componentWillReceiveProps(nextProps) {
this.setState({
currentNode: nextProps.changedNode
});
}
componentWillUnmount() {
document.removeEventListener('click', this.onHideContextMenu);
}
addFolderCancel = () => { addFolderCancel = () => {
this.setState({showFolder: !this.state.showFolder}); this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
} }
addFileCancel = () => { addFileCancel = () => {
this.setState({showFile: !this.state.showFile}); this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
} }
deleteCancel = () => { deleteCancel = () => {
this.setState({showDelete: !this.state.showDelete}); this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
} }
renameCancel = () => { renameCancel = () => {
this.setState({showRename: !this.state.showRename}); this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
} }
onEditClick = (e) => { onEditClick = (e) => {
@@ -188,17 +175,8 @@ class SidePanel extends Component {
// todo // todo
} }
render() { renderIndexView = () => {
return ( return (
<div className={`side-panel 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 action-icon d-md-none "></a>
</div>
<div id="side-nav" className="wiki-side-nav" role="navigation">
{this.props.hasIndex ?
<Fragment> <Fragment>
<h3 className="wiki-pages-heading"> <h3 className="wiki-pages-heading">
{gettext('Contents')} {gettext('Contents')}
@@ -213,23 +191,36 @@ class SidePanel extends Component {
indexContent={this.props.indexContent} indexContent={this.props.indexContent}
/> />
</div> </div>
</Fragment> : </Fragment>
);
}
renderTreeView = () => {
return (
<Fragment> <Fragment>
<h3 <h3 className="wiki-pages-heading" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
className="wiki-pages-heading"
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
{gettext('Pages')} {gettext('Pages')}
<div className="heading-icon"> <div className="heading-icon">
<MenuControl {this.state.isMenuIconShow && (
isShow={this.state.isMenuIconShow} <Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
onClick={this.onHeadingMenuClick} <DropdownToggle
tag="i"
className="fas fa-ellipsis-v"
title={gettext('More Operations')}
data-toggle="dropdown"
aria-expanded={this.state.isHeaderMenuShow}
onClick={this.onDropdownToggleClick}
/> />
<DropdownMenu right>
<DropdownItem onClick={this.onAddFolderToggle}>{gettext('New Folder')}</DropdownItem>
<DropdownItem onClick={this.onAddFileToggle}>{gettext('New File')}</DropdownItem>
</DropdownMenu>
</Dropdown>
)}
</div> </div>
</h3> </h3>
<div className="wiki-pages-container"> <div className="wiki-pages-container">
{this.props.treeData && {this.props.treeData && (
<TreeView <TreeView
currentPath={this.props.currentPath} currentPath={this.props.currentPath}
treeData={this.props.treeData} treeData={this.props.treeData}
@@ -239,49 +230,59 @@ class SidePanel extends Component {
onShowContextMenu={this.onShowContextMenu} onShowContextMenu={this.onShowContextMenu}
onDirCollapse={this.props.onDirCollapse} onDirCollapse={this.props.onDirCollapse}
/> />
} )}
{this.state.isShowMenu && {this.state.isShowMenu && (
<NodeMenu <NodeMenu
menuPosition={this.state.menuPosition} menuPosition={this.state.menuPosition}
currentNode={this.state.currentNode} currentNode={this.state.currentNode}
toggleAddFile={this.toggleAddFile} toggleAddFile={this.onAddFileToggle}
toggleAddFolder={this.toggleAddFolder} toggleAddFolder={this.onAddFolderToggle}
toggleRename={this.toggleRename} toggleRename={this.onRenameToggle}
toggleDelete={this.toggleDelete} toggleDelete={this.onDeleteToggle}
/> />
} )}
{this.state.showDelete && {this.state.isDeleteDialogShow && (
<Delete <Delete
currentNode={this.state.currentNode} currentNode={this.state.currentNode}
handleSubmit={this.onDeleteNode} handleSubmit={this.onDeleteNode}
toggleCancel={this.deleteCancel} toggleCancel={this.deleteCancel}
/> />
} )}
{this.state.showFile && {this.state.isAddFileDialogShow && (
<CreateFile <CreateFile
fileType={'.md'} fileType={'.md'}
parentPath={this.state.currentNode.path} parentPath={this.state.currentNode.path}
onAddFile={this.onAddFileNode} onAddFile={this.onAddFileNode}
addFileCancel={this.addFileCancel} addFileCancel={this.addFileCancel}
/> />
} )}
{this.state.showFolder && {this.state.isAddFolderDialogShow && (
<CreateFolder <CreateFolder
parentPath={this.state.currentNode.path} parentPath={this.state.currentNode.path}
onAddFolder={this.onAddFolderNode} onAddFolder={this.onAddFolderNode}
addFolderCancel={this.addFolderCancel} addFolderCancel={this.addFolderCancel}
/> />
} )}
{this.state.showRename && {this.state.isRenameDialogShow && (
<Rename <Rename
currentNode={this.state.currentNode} currentNode={this.state.currentNode}
onRename={this.onRenameNode} onRename={this.onRenameNode}
toggleCancel={this.renameCancel} toggleCancel={this.renameCancel}
/> />
} )}
</div> </div>
</Fragment> </Fragment>
)
} }
render() {
return (
<div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '': 'left-zero'}`}>
<div className="side-panel-top panel-top">
<Logo onCloseSidePanel={this.props.onCloseSide} />
</div>
<div id="side-nav" className="wiki-side-nav" role="navigation">
{this.props.hasIndex ? this.renderIndexView() : this.renderTreeView()}}
</div> </div>
</div> </div>
); );