Item right menu (#3203)

* Add item right menu

* Add item right menu

* Pass value bug

* Add item right menu

* modify style problem

* Add some style

* Modifying naming issues

* Modify Priority

* Add showShare jurisdiction and modify priority

* Modify subscript to itemIndex

* Communication between sibling components

* Improve interaction

* modify style problem

* Promotion isItemFreezed  and onUnfreezedItem level

* modify bugs

* have tree-node bug

* Solve tree-node item-click  bug

* Complete right click menu

* modify style

* modify style

* item-right-menu finash

* modify style to dirent-=list-item

* modify some style problem

* modify styles

* stop thead contextmenu

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

@@ -1,7 +1,11 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import RepoInfoBar from '../../components/repo-info-bar';
+import ModalPortal from '../modal-portal';
 import DirentListView from '../../components/dirent-list-view/dirent-list-view';
+import CreateFile from '../../components/dialog/create-file-dialog';
+import CreateFolder from '../../components/dialog/create-folder-dialog';
+import DirentListMenu from '../dirent-list-view/dirent-right-menu';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -31,9 +35,94 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
   isAllItemSelected: PropTypes.bool.isRequired,
   onAllItemSelected: PropTypes.func.isRequired,
+  switchAnotherMenuToShow: PropTypes.func,
+  appMenuType: PropTypes.oneOf(['list_view_contextmenu', 'item_contextmenu', 'tree_contextmenu', 'item_op_menu']),
+  onAddFolder: PropTypes.func,
 };
 
 class DirListView extends React.Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {
+      isCreateFileDialogShow: false,
+      fileType: '',
+      isContainerContextmenuShow: false,
+      isCreateFolderDialogShow: false,
+      itemMousePosition: {clientX: '', clientY: ''},
+    }
+  }
+
+  componentDidUpdate() {
+    this.registerTableContainerContextmenuHandler();
+  }
+
+  componentWillUnmount() {
+    this.unregisterTableContainerContextmenuHandler();
+  }
+
+  registerTableContainerContextmenuHandler = () => {
+    let tableContainer = document.querySelector('.table-container');
+    if (tableContainer) {
+      tableContainer.addEventListener('contextmenu', this.tableContainerContextmenuHandler);
+    }
+  }
+
+  unregisterTableContainerContextmenuHandler = () => {
+    let tableContainer = document.querySelector('.table-container');
+    tableContainer.removeEventListener('contextmenu', this.tableContainerContextmenuHandler);
+  }
+
+  tableContainerContextmenuHandler = (e) => {
+    e.preventDefault();
+    
+    this.props.switchAnotherMenuToShow('list_view_contextmenu');
+
+    this.setState({isContainerContextmenuShow: false}, () => {
+      this.setState({
+        isContainerContextmenuShow: true,
+        itemMousePosition: {clientX: e.clientX, clientY: e.clientY}
+      })
+    });
+  }
+
+  closeTableContainerRightMenu = () => {
+    this.setState({
+      isContainerContextmenuShow: false,
+    });
+    this.props.switchAnotherMenuToShow('item_op_menu');
+  }
+
+  onCreateFolderToggle = () => {
+    this.setState({
+      isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow,
+    });
+  }
+
+  onCreateFileToggle = () => {
+    this.setState({
+      isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
+      fileType: ''
+    });
+  }
+
+  onAddFile = (filePath, isDraft) => {
+    this.setState({isCreateFileDialogShow: false});
+    this.props.onAddFile(filePath, isDraft);
+  }
+
+  onAddFolder = (dirPath) => {
+    this.setState({isCreateFolderDialogShow: false});
+    this.props.onAddFolder(dirPath);
+  }
+
+  checkDuplicatedName = (newName) => {
+    let direntList = this.props.direntList;
+    let isDuplicated = direntList.some(object => {
+      return object.name === newName;
+    });
+    return isDuplicated;
+  }
 
   render() {
     return (
@@ -48,30 +137,65 @@ class DirListView extends React.Component {
             updateUsedRepoTags={this.props.updateUsedRepoTags}
           />
         )}
-        <DirentListView
-          path={this.props.path}
-          currentRepoInfo={this.props.currentRepoInfo}
-          repoID={this.props.repoID}
-          isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-          enableDirPrivateShare={this.props.enableDirPrivateShare}
-          direntList={this.props.direntList}
-          sortBy={this.props.sortBy}
-          sortOrder={this.props.sortOrder}
-          sortItems={this.props.sortItems}
-          onAddFile={this.props.onAddFile}
-          onItemClick={this.props.onItemClick}
-          onItemSelected={this.props.onItemSelected}
-          onItemDelete={this.props.onItemDelete}
-          onItemRename={this.props.onItemRename}
-          onItemMove={this.props.onItemMove}
-          onItemCopy={this.props.onItemCopy}
-          onDirentClick={this.props.onDirentClick}
-          onItemDetails={this.props.onItemDetails}
-          isDirentListLoading={this.props.isDirentListLoading}
-          updateDirent={this.props.updateDirent}
-          isAllItemSelected={this.props.isAllItemSelected}
-          onAllItemSelected={this.props.onAllItemSelected}
-        />
+        <div className="table-container">
+          <DirentListView
+            path={this.props.path}
+            currentRepoInfo={this.props.currentRepoInfo}
+            repoID={this.props.repoID}
+            isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+            enableDirPrivateShare={this.props.enableDirPrivateShare}
+            direntList={this.props.direntList}
+            sortBy={this.props.sortBy}
+            sortOrder={this.props.sortOrder}
+            sortItems={this.props.sortItems}
+            onAddFile={this.props.onAddFile}
+            onItemClick={this.props.onItemClick}
+            onItemSelected={this.props.onItemSelected}
+            onItemDelete={this.props.onItemDelete}
+            onItemRename={this.props.onItemRename}
+            onItemMove={this.props.onItemMove}
+            onItemCopy={this.props.onItemCopy}
+            onDirentClick={this.props.onDirentClick}
+            onItemDetails={this.props.onItemDetails}
+            isDirentListLoading={this.props.isDirentListLoading}
+            updateDirent={this.props.updateDirent}
+            isAllItemSelected={this.props.isAllItemSelected}
+            onAllItemSelected={this.props.onAllItemSelected}
+            switchAnotherMenuToShow={this.props.switchAnotherMenuToShow}
+            appMenuType={this.props.appMenuType}
+          />
+        </div>
+        {this.state.isContainerContextmenuShow && this.props.appMenuType === 'list_view_contextmenu' && (
+          <DirentListMenu 
+            mousePosition={this.state.itemMousePosition}
+            itemUnregisterHandlers={this.unregisterTableContainerContextmenuHandler}
+            itemRegisterHandlers={this.registerTableContainerContextmenuHandler}
+            closeRightMenu={this.closeTableContainerRightMenu}
+            onCreateFolderToggle={this.onCreateFolderToggle}
+            onCreateFileToggle={this.onCreateFileToggle}
+          />
+        )}
+        {this.state.isCreateFolderDialogShow && (
+          <ModalPortal>
+            <CreateFolder
+              parentPath={this.props.path}
+              onAddFolder={this.onAddFolder}
+              checkDuplicatedName={this.checkDuplicatedName}
+              addFolderCancel={this.onCreateFolderToggle}
+            />
+          </ModalPortal>
+        )} 
+        {this.state.isCreateFileDialogShow && (
+          <ModalPortal>
+            <CreateFile
+              parentPath={this.props.path}
+              fileType={this.state.fileType}
+              onAddFile={this.onAddFile}
+              checkDuplicatedName={this.checkDuplicatedName}
+              addFileCancel={this.onCreateFileToggle}
+            />
+          </ModalPortal>
+        )}
       </Fragment>
     );
   }