Wiki improve (#2894)

frontend/src/components/index-viewer.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
 
 const viewerPropTypes = {
-  onLinkClick: PropTypes.func,
-  onContentRendered: PropTypes.func.isRequired,
-  indexContent: PropTypes.string,
+  indexContent: PropTypes.string.isRequired,
+  onLinkClick: PropTypes.func.isRequired,
 };
 
 class IndexContentViewer extends React.Component {
@@ -15,6 +14,10 @@ class IndexContentViewer extends React.Component {
     this.props.onLinkClick(event);
   }
 
+  onContentRendered = () => {
+    // todo
+  }
+
   render() {
     return (
       <div className="markdown-content">

frontend/src/components/tree-view-2/tree-node-view.js

@@ -1,167 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import TreeNodeMenu from './tree-node-menu';
-import { permission } from '../../utils/constants';
-
-const propTypes = {
-  node: PropTypes.object.isRequired,
-  currentPath: PropTypes.string.isRequired,
-  paddingLeft: PropTypes.number.isRequired,
-  isItemFreezed: PropTypes.bool.isRequired,
-  onNodeClick: PropTypes.func.isRequired,
-  onNodeExpanded: PropTypes.func.isRequired,
-  onNodeCollapse: PropTypes.func.isRequired,
-  onNodeDragStart: PropTypes.func.isRequired,
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnFreezedItem: PropTypes.func.isRequired,
-};
-
-class TreeNodeView extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isHighlight: false,
-      isShowOperationMenu: false
-    };
-  }
-
-  onMouseEnter = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        isShowOperationMenu: true,
-        isHighlight: true,
-      });
-    }
-  }
-
-  onMouseLeave = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        isShowOperationMenu: false,
-        isHighlight: false,
-      });
-    }
-  }
-
-  onNodeClick = () => {
-    this.props.onNodeClick(this.props.node);
-  }
-
-  onLoadToggle = () => {
-    let { node } = this.props;
-    if (node.isExpanded) {
-      this.props.onNodeCollapse(node);
-    } else {
-      this.props.onNodeExpanded(node);
-    }
-  }
-
-  onNodeDragStart = (e) => {
-    this.props.onNodeDragStart(e, this.props.node);
-  }
-
-  onUnFreezedItem = () => {
-    this.setState({isShowOperationMenu: false});
-    this.props.onUnFreezedItem();
-  }
-
-  onMenuItemClick = (operation, node) => {
-    this.props.onMenuItemClick(operation, node);
-  }
-
-  getNodeTypeAndIcon = () => {
-    let { node } = this.props;
-    let icon = '';
-    let type = '';
-    if (node.object.type === 'dir') {
-      icon = <i className="far fa-folder"></i>
-      type = 'dir';
-    } else {
-      let index = node.object.name.lastIndexOf('.');
-      if (index === -1) {
-        icon = <i className="far fa-file"></i>
-        type = 'file';
-      } else {
-        let suffix = node.object.name.slice(index).toLowerCase();
-        if (suffix === '.png' || suffix === '.jpg') {
-          icon = <i className="far fa-image"></i>
-          type = 'image';
-        } else {
-          icon = <i className="far fa-file"></i>
-          type = 'file';
-        }
-      }
-    }
-    return {icon, type};
-  }
-
-  renderChildren = () => {
-    let { node, paddingLeft } = this.props;
-    if (!node.hasChildren()) {
-      return '';
-    }
-    return (
-      <div className="children" style={{paddingLeft: paddingLeft}}>
-        {node.children.map(item => {
-          return (
-            <TreeNodeView 
-              key={item.path}
-              node={item}
-              paddingLeft={paddingLeft}
-              currentPath={this.props.currentPath}
-              isItemFreezed={this.props.isItemFreezed}
-              onNodeClick={this.props.onNodeClick}
-              onNodeCollapse={this.props.onNodeCollapse}
-              onNodeExpanded={this.props.onNodeExpanded}
-              onFreezedItem={this.props.onFreezedItem}
-              onMenuItemClick={this.onMenuItemClick}
-              onUnFreezedItem={this.onUnFreezedItem}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-
-  render() {
-    let { currentPath, node } = this.props;
-    let { type, icon } = this.getNodeTypeAndIcon();
-    let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
-    if (node.path === currentPath) {
-      hlClass = 'tree-node-hight-light';
-    }
-    return (
-      <div className="tree-node">
-        <div type={type} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''}`}>
-          <div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick}>{node.object.name}</div>
-          <div className="left-icon">
-            {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
-              <i 
-                className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}
-                onMouseDown={e => e.stopPropagation()}
-                onClick={this.onLoadToggle}
-              ></i>
-            )}
-            <i className="tree-node-icon">{icon}</i>
-          </div>
-          <div className="right-icon">
-            {(permission && this.state.isShowOperationMenu) && (
-              <TreeNodeMenu 
-                node={this.props.node}
-                onMenuItemClick={this.onMenuItemClick}
-                onUnFreezedItem={this.onUnFreezedItem}
-                onFreezedItem={this.props.onFreezedItem}
-              />
-            )}
-          </div>
-        </div>
-        {node.isExpanded && this.renderChildren()}
-      </div>
-    );
-  }
-}
-
-TreeNodeView.propTypes = propTypes;
-
-export default TreeNodeView;

frontend/src/components/tree-view-2/tree-view.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import TreeNodeView from './tree-node-view';
-
-const propTypes = {
-  treeData: PropTypes.object.isRequired,
-  currentPath: PropTypes.string.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-  onNodeClick: PropTypes.func.isRequired,
-  onNodeExpanded: PropTypes.func.isRequired,
-  onNodeCollapse: PropTypes.func.isRequired,
-};
-
-const PADDING_LEFT = 12;
-
-class TreeView extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemFreezed: false,
-    };
-  }
-
-  onNodeDragStart = (e, node) => {
-    // todo
-  }
-
-  onFreezedItem = () => {
-    this.setState({isItemFreezed: true});
-  }
-
-  onUnFreezedItem = () => {
-    this.setState({isItemFreezed: false});
-  }
-
-  render() {
-    return (
-      <div className="tree-view tree">
-        <TreeNodeView 
-          node={this.props.treeData.root}
-          currentPath={this.props.currentPath}
-          paddingLeft={PADDING_LEFT}
-          isItemFreezed={this.state.isItemFreezed}
-          onNodeClick={this.props.onNodeClick}
-          onMenuItemClick={this.props.onMenuItemClick}
-          onNodeExpanded={this.props.onNodeExpanded}
-          onNodeCollapse={this.props.onNodeCollapse}
-          onNodeDragStart={this.onNodeDragStart}
-          onFreezedItem={this.onFreezedItem}
-          onUnFreezedItem={this.onUnFreezedItem}
-        />
-      </div>
-    );
-  }
-}
-
-TreeView.propTypes = propTypes;
-
-export default TreeView;

frontend/src/components/tree-view-2/tree.js

@@ -1,139 +0,0 @@
-import TreeNode from './tree-node';
-
-class Tree {
-
-  constructor() {
-    this.root = null;
-  }
-
-  clone() {
-    let tree = new Tree();
-    if (this.root) {
-      tree.root = this.root.clone();
-    }
-    return tree;
-  }
-
-  setRoot(node) {
-    this.root = node;
-  }
-
-  getNodeByPath(path) { 
-    let findNode = null;
-    function callback(currentNode) {
-      if (currentNode.path === path) {
-        findNode = currentNode;
-        return true;
-      }
-      return false;
-    }
-    this.traverseDF(callback);
-    return findNode;
-  }
-
-  getNodeChildrenObject(node) {
-    let objects = node.children.map(item => {
-      let object = item.object;
-      return object;
-    });
-    return objects;
-  }
-
-  addNodeToParent(node, parentNode) {
-    parentNode.addChild(node);
-  }
-
-  addNodeListToParent(nodeList, parentNode) {
-    nodeList.forEach(node => {
-      parentNode.addChild(node);
-    });
-  }
-
-  deleteNode(node) {
-    let parentNode = this.getNodeByPath(node.parentNode.path);
-    parentNode.deleteChild(node);
-  }
-
-  deleteNodeList(nodeList) {
-    nodeList.forEach(node => {
-      this.deleteNode(node);
-    });
-  }
-
-  renameNode(node, newName) {
-    node.rename(newName);
-  }
-
-  updateNode(node, keys, newValues) {
-    node.updateObjectParam(keys, newValues);
-  }
-
-  moveNode(node, destNode) {
-    this.deleteNode(node);
-    destNode.addChild(node);
-  }
-
-  copyNode(node, destNode) {
-    destNode.addChild(node);
-  }
-
-  traverseDF(callback) {
-    let stack = [];
-    let found = false;
-    stack.unshift(this.root);
-    let currentNode = stack.shift();
-    while (!found && currentNode) {
-      found = callback(currentNode) == true ? true : false;
-      if (!found) {
-        stack.unshift(...currentNode.children);
-        currentNode = stack.shift();
-      }
-    }
-  }
-
-  traverseBF(callback) {
-    let queue = [];
-    let found = false;
-    queue.push(this.root);
-    let currentNode = queue.shift();
-    while (!found && currentNode) {
-      found = callback(currentNode) === true ? true : false;
-      if (!found) {
-        queue.push(...currentNode.children);
-        currentNode = queue.shift();
-      }
-    }
-  }
-
-  expandNode(node) {
-    node.isExpanded = true;
-    while (node.parentNode) {
-      node.parentNode.isExpanded = true;
-      node = node.parentNode;
-    }
-  }
-  
-  collapseNode(node) {
-    node.isExpanded = false;
-  }
-
-  isNodeChild(node, parentNode) {
-    return parentNode.children.some(item => {
-      return item.path === node.path;
-    });
-  }
-
-  serializeToJson() {
-    return this.root.serializeToJson();
-  }
-
-  deserializefromJson(json) {
-    let root = TreeNode.deserializefromJson(json);
-    let tree = new Tree();
-    tree.setRoot(root);
-    return tree;
-  }
-
-}
-
-export default Tree;

frontend/src/components/tree-view/node-menu.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-
-const propTypes = {
-  menuPosition: PropTypes.object.isRequired,
-  currentNode: PropTypes.object.isRequired,
-  toggleRename: PropTypes.func.isRequired,
-  toggleDelete: PropTypes.func.isRequired,
-  toggleAddFile: PropTypes.func.isRequired,
-  toggleAddFolder: PropTypes.func.isRequired,
-};
-
-class NodeMenu extends React.Component {
-
-  toggleAddFile = () => {
-    this.props.toggleAddFile();
-  }
-  
-  toggleAddFolder = () => {
-    this.props.toggleAddFolder();
-  }
-
-  toggleRename = () => {
-    this.props.toggleRename();
-  }
-  
-  toggleDelete = () => {
-    this.props.toggleDelete();
-  }
-
-  renderNodeMenu() {
-    let position = this.props.menuPosition;
-    let style = {position: 'fixed',left: position.left, top: position.top, display: 'block'};
-
-    if (this.props.currentNode.type === 'dir') {
-      if (this.props.currentNode.name === '/') {
-        return (
-          <ul className="dropdown-menu" style={style}>
-            <li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
-            <li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
-          </ul>
-        );
-      }
-      
-      return (
-        <ul className="dropdown-menu" style={style}>
-          <li className="dropdown-item" onClick={this.toggleAddFolder}>{gettext('New Folder')}</li>
-          <li className="dropdown-item" onClick={this.toggleAddFile}>{gettext('New File')}</li>
-          <li className="dropdown-item" onClick={this.toggleRename}>{gettext('Rename')}</li>
-          <li className="dropdown-item" onClick={this.toggleDelete}>{gettext('Delete')}</li>
-        </ul>
-      );
-    }
-
-    return (
-      <ul className="dropdown-menu" style={style}>
-        <li className="dropdown-item" onClick={this.toggleRename}>{gettext('Rename')}</li>
-        <li className="dropdown-item" onClick={this.toggleDelete}>{gettext('Delete')}</li>
-      </ul>
-    );
-    
-  }
-
-  render() {
-    if (!this.props.currentNode) {
-      return (<div className="node-menu-module"></div>);
-    }
-    return (
-      <div className="node-menu-module">
-        {this.renderNodeMenu()}
-      </div>
-    );
-  }
-}
-
-NodeMenu.propTypes = propTypes;
-
-export default NodeMenu;

frontend/src/components/tree-view/node.js

@@ -1,128 +0,0 @@
-class Node {
-
-  static deserializefromJson(object) {
-    const {name, type, size, last_update_time, permission, parent_path, isExpanded = true, children = []} = object;
-
-    const node = new Node({
-      name,
-      type,
-      size,
-      last_update_time,
-      permission,
-      parent_path,
-      isExpanded,
-      children: children.map(item => Node.deserializefromJson(item)),
-    });
-
-    return node;
-  }
-
-  constructor({name, type, size, last_update_time, permission, parent_path, isExpanded, children}) {
-    this.name = name;
-    this.type = type;
-    this.size = size;
-    this.last_update_time = last_update_time;
-    this.permission = permission;
-    this.parent_path = parent_path;
-    this.isExpanded = isExpanded !== undefined ? isExpanded : true;
-    this.children = children ? children : [];
-    this.parent = null;
-  }
-
-  clone() {
-    var n = new Node({
-      name: this.name,
-      type: this.type,
-      size: this.size,
-      last_update_time: this.last_update_time,
-      permission: this.permission,
-      parent_path: this.parent_path,
-      isExpanded: this.isExpanded
-    });
-    n.children = this.children.map(child => {
-      var newChild = child.clone();
-      newChild.parent = n;
-      return newChild;
-    });
-    return n;
-  }
-
-  get path() {
-    if (!this.parent) {
-      return this.name;
-    } else {
-      let p = this.parent.path;
-      return p === '/' ? (p + this.name) : (p + '/' + this.name);
-    }
-  }
-
-  hasChildren() {
-    return this.children.length > 0;
-  }
-
-  isRoot() {
-    return this.parent === undefined;
-  }
-
-  isMarkdown() {
-    if (this.isDir()) {
-      return false;
-    }
-    let index = this.name.lastIndexOf('.');
-    if (index == -1) {
-      return false;
-    } else {
-      let type = this.name.substring(index).toLowerCase();
-      if (type == '.md' || type == '.markdown') {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  }
-
-  isFile() {
-    return this.type === 'file';
-  }
-
-  isDir() {
-    return this.type == 'dir';
-  }
-
-  isImage() {
-    let index = this.name.lastIndexOf('.');
-    if (index == -1) {
-      return false;
-    } else {
-      let type = this.name.substring(index).toLowerCase();
-      if (type == '.png' || type == '.jpg') {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  }
-
-  serializeToJson() {
-    var children = [];
-    if (this.hasChildren()) {
-      children = this.children.map(m => m.toJSON());
-    }
-
-    const object = {
-      name: this.name,
-      type: this.type,
-      size: this.size,
-      last_update_time: this.last_update_time,
-      permission: this.permission,
-      parent_path: this.parent_path,
-      isExpanded: this.isExpanded,
-      children: children
-    };
-
-    return object;
-  }
-
-}
-
-export default Node;

frontend/src/components/tree-view/tree-node-view.js

@@ -1,210 +1,169 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MenuControl from '../menu-control';
+import TreeNodeMenu from './tree-node-menu';
 import { permission } from '../../utils/constants';
 
 const propTypes = {
-  isNodeItemFrezee: PropTypes.bool.isRequired,
+  node: PropTypes.object.isRequired,
   currentPath: PropTypes.string.isRequired,
   paddingLeft: PropTypes.number.isRequired,
-  node: PropTypes.object.isRequired,
-  treeView: PropTypes.object.isRequired,
-  onDirCollapse: PropTypes.func.isRequired,
+  isNodeMenuShow: PropTypes.bool.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
+  onNodeClick: PropTypes.func.isRequired,
+  onNodeExpanded: PropTypes.func.isRequired,
+  onNodeCollapse: PropTypes.func.isRequired,
+  onNodeDragStart: PropTypes.func.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  onUnFreezedItem: PropTypes.func.isRequired,
 };
 
-function sortByType(a, b) {
-  if (a.type == 'dir' && b.type != 'dir') {
-    return -1;
-  } else if (a.type != 'dir' && b.type == 'dir') {
-    return 1;
-  } else {
-    return a.name.localeCompare(b.name);
-  }
-}
-
 class TreeNodeView extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      isMenuIconShow: false
+      isHighlight: false,
+      isShowOperationMenu: false
     };
   }
 
-  onClick = () => {
-    // e.nativeEvent.stopImmediatePropagation();
-    let { node } = this.props;
-    this.props.treeView.onNodeClick(node);
-  }
-
   onMouseEnter = () => {
-    if (!this.props.isNodeItemFrezee) {
+    if (!this.props.isItemFreezed) {
       this.setState({
-        isMenuIconShow: true
+        isShowOperationMenu: true,
+        isHighlight: true,
       });
     }
   }
 
   onMouseLeave = () => {
-    if (!this.props.isNodeItemFrezee) {
+    if (!this.props.isItemFreezed) {
       this.setState({
-        isMenuIconShow: false
+        isShowOperationMenu: false,
+        isHighlight: false,
       });
     }
   }
 
-  handleCollapse = (e) => {
-    e.stopPropagation();
-    this.props.onDirCollapse(this.props.node);
+  onNodeClick = () => {
+    this.props.onNodeClick(this.props.node);
   }
 
-  onDragStart = (e) => {
-    const { node } = this.props;
-    this.props.treeView.onDragStart(e, node);
-  }
-
-  onMenuControlClick = (e) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    const { node } = this.props;
-    this.props.treeView.onShowContextMenu(e, node);
-  }
-
-  hideMenuIcon = () => {
-    this.setState({
-      isMenuIconShow: false
-    });
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.hideMenuIcon);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.hideMenuIcon);
-  }
-
-  renderCollapse = () => {
-    const { node } = this.props;
-
-    if (node.hasChildren()) {
-      const { isExpanded } = node;
-      return (
-        <i
-          className={isExpanded ? 'folder-toggle-icon fa fa-caret-down' : 'folder-toggle-icon fa fa-caret-right'}
-          onMouseDown={e => e.stopPropagation()}
-          onClick={this.handleCollapse}
-        />
-      );
+  onLoadToggle = () => {
+    let { node } = this.props;
+    if (node.isExpanded) {
+      this.props.onNodeCollapse(node);
+    } else {
+      this.props.onNodeExpanded(node);
     }
-
-    return null;
   }
 
-  renderChildren = () => {
-    const { node } = this.props;
-    if (node.children && node.children.length) {
-      const childrenStyles = {
-        paddingLeft: this.props.paddingLeft
-      };
-      var l = node.children.sort(sortByType);
-      /*
-        the `key` property is needed. Otherwise there is a warning in the console
-      */
-      return (
-        <div className="children" style={childrenStyles}>
-          {l.map(child => {
-            return (
-              <TreeNodeView
-                node={child}
-                key={child.path}
-                paddingLeft={this.props.paddingLeft}
-                treeView={this.props.treeView}
-                isNodeItemFrezee={this.props.isNodeItemFrezee}
-                currentPath={this.props.currentPath}
-                onDirCollapse={this.props.onDirCollapse}
-              />
-            );
-          })}
-        </div>
-      );
-    }
-
-    return null;
+  onNodeDragStart = (e) => {
+    this.props.onNodeDragStart(e, this.props.node);
   }
 
-  renderMenuController() {
-    if (permission) {
-      let isShow = (this.props.node.path === this.props.currentPath);
-      return (
-        <div className="right-icon">
-          <MenuControl
-            isShow={this.state.isMenuIconShow || isShow}
-            onClick={this.onMenuControlClick}
-          />
-        </div>
-      );
-    }
-    return;
+  onUnFreezedItem = () => {
+    this.setState({isShowOperationMenu: false});
+    this.props.onUnFreezedItem();
   }
 
-  getNodeTypeAndIcon() {
-    const node = this.props.node;
+  onMenuItemClick = (operation, node) => {
+    this.props.onMenuItemClick(operation, node);
+  }
+
+  getNodeTypeAndIcon = () => {
+    let { node } = this.props;
     let icon = '';
     let type = '';
-    if (node.type === 'dir') {
-      icon = <i className="far fa-folder"/>;
+    if (node.object.type === 'dir') {
+      icon = <i className="far fa-folder"></i>
       type = 'dir';
     } else {
-      let index = node.name.lastIndexOf('.');
-      if (index ===  -1) {
-        icon = <i className="far fa-file"/>;
+      let index = node.object.name.lastIndexOf('.');
+      if (index === -1) {
+        icon = <i className="far fa-file"></i>
         type = 'file';
       } else {
-        type = node.name.substring(index).toLowerCase();
-        if (type === '.png' || type === '.jpg') {
-          icon = <i className="far fa-image"/>;
+        let suffix = node.object.name.slice(index).toLowerCase();
+        if (suffix === '.png' || suffix === '.jpg') {
+          icon = <i className="far fa-image"></i>
           type = 'image';
         } else {
-          icon = <i className="far fa-file"/>;
+          icon = <i className="far fa-file"></i>
           type = 'file';
         }
       }
     }
-
-    return { type, icon };
+    return {icon, type};
   }
 
-  render() {
-    const styles = {};
-    let node = this.props.node;
-    let { type, icon } = this.getNodeTypeAndIcon();
-    let hlClass = '';
-    if (node.path === this.props.currentPath) {
-      hlClass = 'tree-node-hight-light';
+  renderChildren = () => {
+    let { node, paddingLeft } = this.props;
+    if (!node.hasChildren()) {
+      return '';
     }
-
     return (
-      <div type={type} className="tree-node" style={styles}>
-        <div
-          onMouseLeave={this.onMouseLeave}
-          onMouseEnter={this.onMouseEnter}
-          onClick={this.onClick}
-          type={type}
-          className={`tree-node-inner text-nowrap ${hlClass} ${node.name === '/'? 'hide': ''}`}
-        >
-          <div className="tree-node-text" type={type} draggable="true" onDragStart={this.onDragStart}>{node.name}</div>
-          <div className="left-icon">
-            {this.renderCollapse()}
-            <i type={type} className="tree-node-icon">{icon}</i>
-          </div>
-          {this.renderMenuController()}
-        </div>
-        {node.isExpanded ? this.renderChildren() : null}
+      <div className="children" style={{paddingLeft: paddingLeft}}>
+        {node.children.map(item => {
+          return (
+            <TreeNodeView 
+              key={item.path}
+              node={item}
+              paddingLeft={paddingLeft}
+              currentPath={this.props.currentPath}
+              isNodeMenuShow={this.props.isNodeMenuShow}
+              isItemFreezed={this.props.isItemFreezed}
+              onNodeClick={this.props.onNodeClick}
+              onNodeCollapse={this.props.onNodeCollapse}
+              onNodeExpanded={this.props.onNodeExpanded}
+              onFreezedItem={this.props.onFreezedItem}
+              onMenuItemClick={this.onMenuItemClick}
+              onUnFreezedItem={this.onUnFreezedItem}
+            />
+          );
+        })}
       </div>
     );
   }
 
+  render() {
+    let { currentPath, node, isNodeMenuShow } = this.props;
+    let { type, icon } = this.getNodeTypeAndIcon();
+    let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
+    if (node.path === currentPath) {
+      hlClass = 'tree-node-hight-light';
+    }
+    return (
+      <div className="tree-node">
+        <div type={type} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''}`}>
+          <div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick}>{node.object.name}</div>
+          <div className="left-icon">
+            {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
+              <i 
+                className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}
+                onMouseDown={e => e.stopPropagation()}
+                onClick={this.onLoadToggle}
+              ></i>
+            )}
+            <i className="tree-node-icon">{icon}</i>
+          </div>
+          {isNodeMenuShow && (
+            <div className="right-icon">
+              {(permission && this.state.isShowOperationMenu) && (
+                <TreeNodeMenu 
+                  node={this.props.node}
+                  onMenuItemClick={this.onMenuItemClick}
+                  onUnFreezedItem={this.onUnFreezedItem}
+                  onFreezedItem={this.props.onFreezedItem}
+                />
+              )}
+            </div>
+          )}
+        </div>
+        {node.isExpanded && this.renderChildren()}
+      </div>
+    );
+  }
 }
 
 TreeNodeView.propTypes = propTypes;

frontend/src/components/tree-view/tree-view.js

@@ -1,62 +1,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TreeNodeView from './tree-node-view';
-import editorUtilities from '../../utils/editor-utilties';
 
 const propTypes = {
-  permission: PropTypes.string,
-  isNodeItemFrezee: PropTypes.bool.isRequired,
-  currentPath: PropTypes.string.isRequired,
+  isNodeMenuShow: PropTypes.bool.isRequired,
   treeData: PropTypes.object.isRequired,
-  onShowContextMenu: PropTypes.func.isRequired,
+  currentPath: PropTypes.string.isRequired,
+  onMenuItemClick: PropTypes.func,
   onNodeClick: PropTypes.func.isRequired,
-  onDirCollapse: PropTypes.func.isRequired,
+  onNodeExpanded: PropTypes.func.isRequired,
+  onNodeCollapse: PropTypes.func.isRequired,
 };
 
-class TreeView extends React.PureComponent {
+const PADDING_LEFT = 12;
 
-  change = (tree) => {
-    /*
-    this._updated = true;
-    if (this.props.onChange) this.props.onChange(tree.obj);
-    */
+class TreeView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false,
+    };
   }
 
-  onDragStart = (e, node) => {
-    const url = editorUtilities.getFileURL(node);
-    e.dataTransfer.setData('text/uri-list', url);
-    e.dataTransfer.setData('text/plain', url);
+  onNodeDragStart = (e, node) => {
+    // todo
   }
 
-  onNodeClick = (node) => {
-    this.props.onNodeClick(node);
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
   }
 
-  onShowContextMenu = (e, node) => {
-    this.props.onShowContextMenu(e, node);
+  onUnFreezedItem = () => {
+    this.setState({isItemFreezed: false});
   }
 
   render() {
-    if (!this.props.treeData.root) {
-      return <div>Loading...</div>;
-    }
-
     return (
       <div className="tree-view tree">
-        <TreeNodeView
-          paddingLeft={12}
-          treeView={this}
+        <TreeNodeView 
           node={this.props.treeData.root}
-          isNodeItemFrezee={this.props.isNodeItemFrezee}
-          permission={this.props.permission}
           currentPath={this.props.currentPath}
-          onShowContextMenu={this.props.onShowContextMenu}
-          onDirCollapse={this.props.onDirCollapse}
+          paddingLeft={PADDING_LEFT}
+          isNodeMenuShow={this.props.isNodeMenuShow}
+          isItemFreezed={this.state.isItemFreezed}
+          onNodeClick={this.props.onNodeClick}
+          onMenuItemClick={this.props.onMenuItemClick}
+          onNodeExpanded={this.props.onNodeExpanded}
+          onNodeCollapse={this.props.onNodeCollapse}
+          onNodeDragStart={this.onNodeDragStart}
+          onFreezedItem={this.onFreezedItem}
+          onUnFreezedItem={this.onUnFreezedItem}
         />
       </div>
     );
   }
-
 }
 
 TreeView.propTypes = propTypes;

frontend/src/components/tree-view/tree.js

@@ -1,181 +1,82 @@
-import Node from './node';
-import moment from 'moment';
-import { Utils } from '../../utils/utils';
-
-const lang = window.app.config.lang;
-moment.locale(lang);
+import TreeNode from './tree-node';
 
 class Tree {
-  
+
   constructor() {
     this.root = null;
   }
 
   clone() {
-    var t = new Tree();
-    if (this.root)
-      t.root = this.root.clone();
-    return t;
+    let tree = new Tree();
+    if (this.root) {
+      tree.root = this.root.clone();
+    }
+    return tree;
   }
 
   setRoot(node) {
     this.root = node;
   }
 
-  addNodeToParent(node, parentNode) {
-    node.parent = parentNode;
-    parentNode.children.push(node);
-    return node;
-  }
-
-  removeNodeFromParent(node, parentNode) {
-    let children = parentNode.children;
-    let removeNode = null;
-    let index = null;
-    for (let i = 0; i < children.length; i++) {
-      if (node.path === children[i].path) {
-        removeNode = children[i];
-        index = i;
-        break;
+  getNodeByPath(path) { 
+    let findNode = null;
+    function callback(currentNode) {
+      if (currentNode.path === path) {
+        findNode = currentNode;
+        return true;
       }
+      return false;
     }
-    node.parent = null;
-    parentNode.children.splice(index, 1);
-    return removeNode ? removeNode : null;
+    this.traverseDF(callback);
+    return findNode;
   }
 
-  addNode(node) {
-    let treeNodeParent = this.findNodeParentFromTree(node);
-    if (treeNodeParent) {
-      this.addNodeToParent(node, treeNodeParent);
-      return true;
-    }
-    return false;
+  getNodeChildrenObject(node) {
+    let objects = node.children.map(item => {
+      let object = item.object;
+      return object;
+    });
+    return objects;
+  }
+
+  addNodeToParent(node, parentNode) {
+    parentNode.addChild(node);
+  }
+
+  addNodeListToParent(nodeList, parentNode) {
+    nodeList.forEach(node => {
+      parentNode.addChild(node);
+    });
   }
 
   deleteNode(node) {
-    let treeNodeParent = this.findNodeParentFromTree(node);
-    if (treeNodeParent) {
-      this.removeNodeFromParent(node, treeNodeParent);
-      return true;
-    }
-    return false;
+    let parentNode = this.getNodeByPath(node.parentNode.path);
+    parentNode.deleteChild(node);
   }
 
-  deleteNodeByPath(path) {
-    let node = this.getNodeByPath(path);
-    this.deleteNode(node);
-  }
-
-  moveNode(node, moveToNode, isDestroy) {
-    let moveNode = node.clone();
-    this.addNodeToParent(moveNode, moveToNode);
-    if (isDestroy) {
+  deleteNodeList(nodeList) {
+    nodeList.forEach(node => {
       this.deleteNode(node);
-    }
+    });
   }
 
-  moveNodeByPath(path, moveToPath, isDestroy) {
-    let node = this.getNodeByPath(path);
-    let moveToNode = this.getNodeByPath(moveToPath);
-    this.moveNode(node, moveToNode, isDestroy);
+  renameNode(node, newName) {
+    node.rename(newName);
   }
 
-  updateNodeParam(node, param, newValue) {
-    let treeNode = this.findNodeFromTree(node);
-    if (treeNode && treeNode[param]) {
-      treeNode[param] = newValue;
-      return true;
-    }
-    return false;
+  updateNode(node, keys, newValues) {
+    node.updateObjectParam(keys, newValues);
   }
 
-  updateNodeParamByPath(path, param, newValue) {
-    let node = this.getNodeByPath(path);
-    this.updateNodeParam(node, param, newValue);
+  moveNode(node, destNode) {
+    this.deleteNode(node);
+    destNode.addChild(node);
   }
 
-  findNode(node) {
-    return this.findNodeFromTree(node);
+  copyNode(node, destNode) {
+    destNode.addChild(node);
   }
 
-  findNodeFromTree(node) {
-    let findNode = this.getNodeByPath(node.path);
-    return findNode;
-  }
-
-  findNodeParentFromTree(node) {
-    let parentNode = node.parent;
-    let findNode = null;
-    function cb(treeNode) {
-      if (treeNode.path === parentNode.path) {
-        findNode = treeNode;
-        return true;
-      }
-      return false;
-    }
-    this.traverseDF(cb);
-    return findNode;
-  }
-
-  expandNode(node) {
-    let treeNode = this.findNodeFromTree(node);
-    if (treeNode) {
-      treeNode.isExpanded = true;
-      while (treeNode.parent) {
-        treeNode.parent.isExpanded = true;
-        treeNode = treeNode.parent;
-      }
-      return true;
-    }
-    return false;
-  }
-
-  collapseNode(node) {
-    let treeNode = this.findNodeFromTree(node);
-    if (treeNode) {
-      treeNode.isExpanded = false;
-      return true;
-    }
-    return false;
-  }
-
-  resetTreeState() {
-    function cb(treeNode) {
-      treeNode.isExpanded = false;
-      return false;
-    }
-    this.traverseBF(cb);
-    this.root.isExpanded = true;
-    return true;
-  }
-
-  getNodeByPath(path) {
-    let findNode = null;
-    function cb(treeNode) {
-      if (treeNode.path === path) {
-        findNode = treeNode;
-        return true;
-      }
-      return false;
-    }
-    this.traverseBF(cb);
-    return findNode;
-  }
-
-  isNodeChild(parentNode, node) {
-    let isChild = false;
-    while(node.parent){
-      if(node.parent.path === parentNode.path){
-        isChild = true;
-        break;
-      }
-      node = node.parent;
-    }
-    return isChild;
-  }
-
-
   traverseDF(callback) {
     let stack = [];
     let found = false;
@@ -204,82 +105,33 @@ class Tree {
     }
   }
 
-  parseModelToTree(model) {
-    var node = new Node({
-      name: model.name,
-      type: model.type,
-      size: Utils.bytesToSize(model.size),
-      last_update_time: moment.unix(model.last_update_time).fromNow(),
-      permission: model.permission,
-      parent_path: model.parent_path,
-      isExpanded: false
-    });
-    if (model.children instanceof Array) {
-      for (let child of model.children) {
-        this.addNodeToParent(this.parseNodeToTree(child), node);
-      }
+  expandNode(node) {
+    node.isExpanded = true;
+    while (node.parentNode) {
+      node.parentNode.isExpanded = true;
+      node = node.parentNode;
     }
-    return node;
+  }
+  
+  collapseNode(node) {
+    node.isExpanded = false;
   }
 
-  parseListToTree(nodeList) {
-    
-    function getNodePath(parentPath, nodeName) {
-      return parentPath === '/' ? (parentPath + nodeName) : (parentPath + '/' + nodeName);
-    }
-
-    let root = new Node({name: '/', type: 'dir', isExpanded: true});
-    this.root = root;
-
-    let map = new Map();
-    map.set(root.name, root);
-    let treeNodeList = [];
-    for (let nodeObj of nodeList) {
-      let node = new Node({
-        name: nodeObj.name,
-        type: nodeObj.type,
-        size: Utils.bytesToSize(nodeObj.size),
-        last_update_time: moment.unix(nodeObj.last_update_time).fromNow(),
-        permission: nodeObj.permission,
-        parent_path: nodeObj.parent_path,
-        isExpanded: false
-      });
-      node.parent_path = nodeObj.parent_path;
-      treeNodeList.push(node);
-      if (node.isDir()) {
-        map.set(getNodePath(node.parent_path, node.name), node);
-      }
-    }
-
-    for (let node of treeNodeList) {
-      let p = map.get(node.parent_path);
-      if (p === undefined) {
-        /* eslint-disable */
-        console.log('warning: node ' + node.parent_path + ' not exist');
-        /* eslint-enable */
-      } else {
-        this.addNodeToParent(node, p);
-      }
-    }
-
+  isNodeChild(node, parentNode) {
+    return parentNode.children.some(item => {
+      return item.path === node.path;
+    });
   }
 
-  parseNodeToTree(node) {
-    var newNode = new Node({
-      name: node.name,
-      type: node.type,
-      size: Utils.bytesToSize(node.size),
-      last_update_time: moment.unix(node.last_update_time).fromNow(),
-      permission: node.permission,
-      parent_path: node.parent_path,
-      isExpanded: false
-    });
-    if (node.children instanceof Array) {
-      for (let child of node.children) {
-        this.addNodeToParent(this.parseNodeToTree(child), newNode);
-      }
-    }
-    return newNode;
+  serializeToJson() {
+    return this.root.serializeToJson();
+  }
+
+  deserializefromJson(json) {
+    let root = TreeNode.deserializefromJson(json);
+    let tree = new Tree();
+    tree.setRoot(root);
+    return tree;
   }
 
 }

frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js

@@ -4,17 +4,17 @@ import { siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
-  node: PropTypes.object.isRequired,
-  onMainNodeClick: PropTypes.func.isRequired,
+  path: PropTypes.string.isRequired,
+  dirent: PropTypes.object.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
 };
 
-class TreeDirList extends React.Component {
+class WikiDirListItem extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
       highlight: false,
-      isOperationShow: false,
     };
   }
 
@@ -26,22 +26,22 @@ class TreeDirList extends React.Component {
     this.setState({highlight: false});
   }
 
-  onMainNodeClick = (e) => {
+  onDirentClick = (e) => {
     e.preventDefault();
-    this.props.onMainNodeClick(this.props.node);
+    this.props.onDirentClick(this.props.dirent);
   }
 
   render() {
-    let node = this.props.node;
-    let href = siteRoot + 'wikis' + node.path;
+    let { path, dirent } = this.props;
+    let href = siteRoot + 'wikis' + Utils.joinPath(path, dirent.name);
 
     let size = Utils.isHiDPI() ? 48 : 24;
     let iconUrl = '';
-    if (node.type === 'file') {
-      iconUrl = Utils.getFileIconUrl(node.name, size);
+    if (dirent.type === 'file') {
+      iconUrl = Utils.getFileIconUrl(dirent.name, size);
     } else {
       let isReadOnly = false;
-      if (node.permission === 'r' || node.permission === 'preview') {
+      if (dirent.permission === 'r' || dirent.permission === 'preview') {
         isReadOnly = true;
       }
       iconUrl = Utils.getFolderIconUrl({isReadOnly, size});
@@ -53,15 +53,15 @@ class TreeDirList extends React.Component {
           <img src={iconUrl} width="24" alt="" />
         </td>
         <td className="name">
-          <a href={href} onClick={this.onMainNodeClick}>{node.name}</a>
+          <a href={href} onClick={this.onDirentClick}>{dirent.name}</a>
         </td>
-        <td>{node.size}</td>
-        <td title={node.last_update_time}>{node.last_update_time}</td>
+        <td>{dirent.size}</td>
+        <td title={dirent.last_update_time}>{dirent.last_update_time}</td>
       </tr>
     );
   }
 }
 
-TreeDirList.propTypes = propTypes;
+WikiDirListItem.propTypes = propTypes;
 
-export default TreeDirList;
+export default WikiDirListItem;

frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js

@@ -1,19 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
-import TreeDirList from './tree-dir-list';
+import WikiDirListItem from './wiki-dir-list-item';
 
 const propTypes = {
-  node: PropTypes.object.isRequired,
-  onMainNodeClick: PropTypes.func.isRequired,
+  path: PropTypes.string.isRequired,
+  direntList: PropTypes.array.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
 };
 
-class TreeDirView extends React.Component {
+class WikiDirListView extends React.Component {
 
   render() {
-    let node = this.props.node;
-    let children = node.hasChildren() ? node.children : null;
-
     return (
       <table>
         <thead>
@@ -25,9 +23,9 @@ class TreeDirView extends React.Component {
           </tr>
         </thead>
         <tbody>
-          {children && children.map((node, index) => {
+          {this.props.direntList.length !== 0 && this.props.direntList.map((dirent, index) => {
             return (
-              <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/>
+              <WikiDirListItem key={index} path={this.props.path} dirent={dirent} onDirentClick={this.props.onDirentClick}/>
             );
           })}
         </tbody>
@@ -36,6 +34,6 @@ class TreeDirView extends React.Component {
   }
 }
 
-TreeDirView.propTypes = propTypes;
+WikiDirListView.propTypes = propTypes;
 
-export default TreeDirView;
+export default WikiDirListView;