Wiki mode improve (#2539)

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

@@ -16,7 +16,7 @@ class Node {
 
     return node;
   }
-  
+
   constructor({name, type, size, last_update_time, permission, parent_path, isExpanded, children}) {
     this.name = name;
     this.type = type;
@@ -28,7 +28,7 @@ class Node {
     this.children = children ? children : [];
     this.parent = null;
   }
-  
+
   clone() {
     var n = new Node({
       name: this.name,
@@ -39,10 +39,10 @@ class Node {
       parent_path: this.parent_path,
       isExpanded: this.isExpanded
     });
-    n.children = this.children.map(child => { 
-      var newChild = child.clone(); 
-      newChild.parent = n; 
-      return newChild; 
+    n.children = this.children.map(child => {
+      var newChild = child.clone();
+      newChild.parent = n;
+      return newChild;
     });
     return n;
   }
@@ -122,4 +122,4 @@ class Node {
 
 }
 
-export default Node;
+export default Node;

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

@@ -5,7 +5,7 @@ import { permission } from '../../utils/constants';
 
 const propTypes = {
   isNodeItemFrezee: PropTypes.bool.isRequired,
-  currentFilePath: PropTypes.string.isRequired,
+  currentPath: PropTypes.string.isRequired,
   paddingLeft: PropTypes.number.isRequired,
   node: PropTypes.object.isRequired,
   treeView: PropTypes.object.isRequired,
@@ -31,10 +31,10 @@ class TreeNodeView extends React.Component {
     };
   }
 
-  onClick = (e) => {
+  onClick = () => {
     // e.nativeEvent.stopImmediatePropagation();
     let { node } = this.props;
-    this.props.treeView.onNodeClick(e, node);
+    this.props.treeView.onNodeClick(node);
   }
 
   onMouseEnter = () => {
@@ -55,7 +55,7 @@ class TreeNodeView extends React.Component {
 
   handleCollapse = (e) => {
     e.stopPropagation();
-    this.props.onDirCollapse(e, this.props.node);
+    this.props.onDirCollapse(this.props.node);
   }
 
   onDragStart = (e) => {
@@ -121,7 +121,7 @@ class TreeNodeView extends React.Component {
                 paddingLeft={this.props.paddingLeft}
                 treeView={this.props.treeView}
                 isNodeItemFrezee={this.props.isNodeItemFrezee}
-                currentFilePath={this.props.currentFilePath}
+                currentPath={this.props.currentPath}
                 onDirCollapse={this.props.onDirCollapse}
               />
             );
@@ -138,7 +138,7 @@ class TreeNodeView extends React.Component {
       let isShow = (this.props.node.path === this.props.currentFilePath);
       return (
         <div className="right-icon">
-          <MenuControl 
+          <MenuControl
             isShow={this.state.isMenuIconShow || isShow}
             onClick={this.onMenuControlClick}
           />
@@ -186,11 +186,11 @@ class TreeNodeView extends React.Component {
 
     return (
       <div type={type} className="tree-node" style={styles}>
-        <div 
-          onMouseLeave={this.onMouseLeave} 
+        <div
+          onMouseLeave={this.onMouseLeave}
           onMouseEnter={this.onMouseEnter}
           onClick={this.onClick}
-          type={type} 
+          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>

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

@@ -6,7 +6,7 @@ import editorUtilities from '../../utils/editor-utilties';
 const propTypes = {
   permission: PropTypes.string,
   isNodeItemFrezee: PropTypes.bool.isRequired,
-  currentFilePath: PropTypes.string.isRequired,
+  currentPath: PropTypes.string.isRequired,
   treeData: PropTypes.object.isRequired,
   onShowContextMenu: PropTypes.func.isRequired,
   onNodeClick: PropTypes.func.isRequired,
@@ -22,18 +22,14 @@ class TreeView extends React.PureComponent {
     */
   }
 
-  toggleCollapse = (e, node) => {
-    this.props.onDirCollapse(e, node);
-  }
-
   onDragStart = (e, node) => {
     const url = editorUtilities.getFileURL(node);
     e.dataTransfer.setData('text/uri-list', url);
     e.dataTransfer.setData('text/plain', url);
   }
 
-  onNodeClick = (e, node) => {
-    this.props.onNodeClick(e, node);
+  onNodeClick = (node) => {
+    this.props.onNodeClick(node);
   }
 
   onShowContextMenu = (e, node) => {
@@ -53,7 +49,7 @@ class TreeView extends React.PureComponent {
           node={this.props.treeData.root}
           isNodeItemFrezee={this.props.isNodeItemFrezee}
           permission={this.props.permission}
-          currentFilePath={this.props.currentFilePath}
+          currentPath={this.props.currentPath}
           onShowContextMenu={this.props.onShowContextMenu}
           onDirCollapse={this.props.onDirCollapse}
         />

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

@@ -62,6 +62,25 @@ class Tree {
     return false;
   }
 
+  deleteNodeByPath(path) {
+    let node = this.getNodeByPath(path);
+    this.deleteNode(node);
+  }
+
+  moveNode(node, moveToNode, isDestroy) {
+    let moveNode = node.clone();
+    this.addNodeToParent(moveNode, moveToNode);
+    if (isDestroy) {
+      this.deleteNode(node);
+    }
+  }
+
+  moveNodeByPath(path, moveToPath, isDestroy) {
+    let node = this.getNodeByPath(path);
+    let moveToNode = this.getNodeByPath(moveToPath);
+    this.moveNode(node, moveToNode, isDestroy);
+  }
+
   updateNodeParam(node, param, newValue) {
     let treeNode = this.findNodeFromTree(node);
     if (treeNode && treeNode[param]) {
@@ -71,6 +90,11 @@ class Tree {
     return false;
   }
 
+  updateNodeParamByPath(path, param, newValue) {
+    let node = this.getNodeByPath(path);
+    this.updateNodeParam(node, param, newValue);
+  }
+
   findNode(node) {
     return this.findNodeFromTree(node);
   }