Feature - add more operation button on sidebar (#6372)

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -11,6 +11,7 @@ import CreateFile from '../../components/dialog/create-file-dialog';
 import ImageDialog from '../../components/dialog/image-dialog';
 import { gettext, siteRoot, thumbnailSizeForOriginal } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import TextTranslation from '../../utils/text-translation';
 import TreeSection from '../../components/tree-section';
 import DirViews from './dir-views';
 import DirOthers from './dir-others';
@@ -56,10 +57,27 @@ class DirColumnNav extends React.Component {
       isCopyDialogShow: false,
       isMoveDialogShow: false,
       isMutipleOperation: false,
+      operationList: [],
     };
     this.isNodeMenuShow = true;
   }
 
+  componentDidMount() {
+    this.initMenuList();
+  }
+
+  initMenuList = () => {
+    const menuList = this.getMenuList();
+    this.setState({ operationList: menuList });
+  };
+
+  getMenuList = () => {
+    let menuList = [];
+    menuList.push(TextTranslation.NEW_FOLDER);
+    menuList.push(TextTranslation.NEW_FILE);
+    return menuList;
+  };
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({ opNode: nextProps.currentNode });
   }
@@ -73,6 +91,10 @@ class DirColumnNav extends React.Component {
     this.props.onNodeClick(node);
   };
 
+  onMoreOperationClick = (operation) => {
+    this.onMenuItemClick(operation);
+  };
+
   onMenuItemClick = (operation, node) => {
     this.setState({ opNode: node });
     switch (operation) {
@@ -249,41 +271,60 @@ class DirColumnNav extends React.Component {
   };
 
   renderContent = () => {
-    if (this.props.isTreeDataLoading) return (<Loading/>);
+    const {
+      isTreeDataLoading,
+      userPerm,
+      treeData,
+      currentPath,
+      onNodeExpanded,
+      onNodeCollapse,
+      onItemMove,
+      onItemsMove,
+      currentRepoInfo,
+      selectedDirentList,
+      repoID,
+      getMenuContainerSize,
+    } = this.props;
+
     return (
       <>
-        <TreeSection title={gettext('Files')}>
+        {isTreeDataLoading ? (
+          <Loading />
+        ) : (
+          <>
+            <TreeSection title={gettext('Files')} moreKey={{ name: 'files' }} moreOperations={this.state.operationList} moreOperationClick={this.onMoreOperationClick}>
               <TreeView
-            userPerm={this.props.userPerm}
+                userPerm={userPerm}
                 isNodeMenuShow={this.isNodeMenuShow}
-            treeData={this.props.treeData}
+                treeData={treeData}
-            currentPath={this.props.currentPath}
+                currentPath={currentPath}
                 onNodeClick={this.onNodeClick}
-            onNodeExpanded={this.props.onNodeExpanded}
+                onNodeExpanded={onNodeExpanded}
-            onNodeCollapse={this.props.onNodeCollapse}
+                onNodeCollapse={onNodeCollapse}
                 onMenuItemClick={this.onMenuItemClick}
                 onFreezedItem={this.onFreezedItem}
                 onUnFreezedItem={this.onUnFreezedItem}
-            onItemMove={this.props.onItemMove}
+                onItemMove={onItemMove}
-            currentRepoInfo={this.props.currentRepoInfo}
+                currentRepoInfo={currentRepoInfo}
-            selectedDirentList={this.props.selectedDirentList}
+                selectedDirentList={selectedDirentList}
-            onItemsMove={this.props.onItemsMove}
+                onItemsMove={onItemsMove}
-            repoID={this.props.repoID}
+                repoID={repoID}
-            getMenuContainerSize={this.props.getMenuContainerSize}
+                getMenuContainerSize={getMenuContainerSize}
               />
             </TreeSection>
             <DirViews
-          repoID={this.props.repoID}
+              repoID={repoID}
-          currentPath={this.props.currentPath}
+              currentPath={currentPath}
-          userPerm={this.props.userPerm}
+              userPerm={userPerm}
               onNodeClick={this.onNodeClick}
             />
             <DirOthers
-          repoID={this.props.repoID}
+              repoID={repoID}
-          userPerm={this.props.userPerm}
+              userPerm={userPerm}
-          currentRepoInfo={this.props.currentRepoInfo}
             />
           </>
+        )}
+      </>
     );
   };