[dir view] added 'creating different types of file' options to the co… (#5653)

* [dir view] added 'creating different types of file' options to the context menu

* [dir view] update for 'New SeaDoc File' in the context menu

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, username } from '../../utils/constants';
+import { siteRoot, username, enableSeadoc } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@@ -68,6 +68,7 @@ class DirentGridView extends React.Component {
       isRenameDialogShow: false,
       isCreateFolderDialogShow: false,
       isCreateFileDialogShow: false,
+      fileType: '',
       isPermissionDialogOpen: false,
 
       isMutipleOperation: false,
@@ -77,9 +78,10 @@ class DirentGridView extends React.Component {
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
   }
 
-  onCreateFileToggle = () => {
+  onCreateFileToggle = (fileType) => {
     this.setState({
       isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
+      fileType: fileType || ''
     });
   };
 
@@ -173,7 +175,22 @@ class DirentGridView extends React.Component {
         this.onCreateFolderToggle(currentObject);
         break;
       case 'New File':
-        this.onCreateFileToggle();
+        this.onCreateFileToggle('');
+        break;
+      case 'New Markdown File':
+        this.onCreateFileToggle('.md');
+        break;
+      case 'New Excel File':
+        this.onCreateFileToggle('.xlsx');
+        break;
+      case 'New PowerPoint File':
+        this.onCreateFileToggle('.pptx');
+        break;
+      case 'New Word File':
+        this.onCreateFileToggle('.docx');
+        break;
+      case 'New SeaDoc File':
+        this.onCreateFileToggle('.sdoc');
         break;
       case 'Access Log':
         this.onAccessLog(currentObject);
@@ -407,7 +424,25 @@ class DirentGridView extends React.Component {
       return;
     }
     let id = 'dirent-grid-container-menu';
-    let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
+    const {
+      NEW_FOLDER, NEW_FILE,
+      NEW_MARKDOWN_FILE,
+      NEW_EXCEL_FILE,
+      NEW_POWERPOINT_FILE,
+      NEW_WORD_FILE,
+      NEW_SEADOC_FILE
+    } = TextTranslation;
+
+    const menuList = [
+      NEW_FOLDER, NEW_FILE, 'Divider',
+      NEW_MARKDOWN_FILE,
+      NEW_EXCEL_FILE,
+      NEW_POWERPOINT_FILE,
+      NEW_WORD_FILE
+    ];
+    if (enableSeadoc) {
+      menuList.push(NEW_SEADOC_FILE);
+    }
     this.handleContextClick(event, id, menuList);
   };
 
@@ -513,6 +548,7 @@ class DirentGridView extends React.Component {
           <ModalPortal>
             <CreateFile
               parentPath={this.props.path}
+              fileType={this.state.fileType}
               onAddFile={this.props.onAddFile}
               checkDuplicatedName={this.checkDuplicatedName}
               toggleDialog={this.onCreateFileToggle}

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, gettext, username } from '../../utils/constants';
+import { siteRoot, gettext, username, enableSeadoc } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TextTranslation from '../../utils/text-translation';
 import URLDecorator from '../../utils/url-decorator';
@@ -205,8 +205,11 @@ class DirentListView extends React.Component {
     this.setState({isImagePopupOpen: false});
   };
 
-  onCreateFileToggle = () => {
+  onCreateFileToggle = (fileType) => {
-    this.setState({isCreateFileDialogShow: !this.state.isCreateFileDialogShow});
+    this.setState({
+      isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
+      fileType: fileType || ''
+    });
   };
 
   onCreateFolderToggle = () => {
@@ -320,6 +323,26 @@ class DirentListView extends React.Component {
       return;
     }
 
+    const {
+      NEW_FOLDER, NEW_FILE,
+      NEW_MARKDOWN_FILE,
+      NEW_EXCEL_FILE,
+      NEW_POWERPOINT_FILE,
+      NEW_WORD_FILE,
+      NEW_SEADOC_FILE
+    } = TextTranslation;
+
+    const direntsContainerMenuList = [
+      NEW_FOLDER, NEW_FILE, 'Divider',
+      NEW_MARKDOWN_FILE,
+      NEW_EXCEL_FILE,
+      NEW_POWERPOINT_FILE,
+      NEW_WORD_FILE
+    ];
+    if (enableSeadoc) {
+      direntsContainerMenuList.push(NEW_SEADOC_FILE);
+    }
+
     if (this.props.selectedDirentList.length === 0) {
       let id = 'dirent-container-menu';
 
@@ -329,7 +352,7 @@ class DirentListView extends React.Component {
         if (!canCreate) return;
       }
 
-      let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
+      let menuList = direntsContainerMenuList;
       this.handleContextClick(event, id, menuList);
     } else {
       if (this.props.selectedDirentList.length === 1) {
@@ -351,7 +374,8 @@ class DirentListView extends React.Component {
 
           setTimeout(() => {
             let id = 'dirent-container-menu';
-            let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
+
+            let menuList = direntsContainerMenuList;
             this.handleContextClick(event, id, menuList);
           }, 0);
         }
@@ -381,6 +405,21 @@ class DirentListView extends React.Component {
       case 'New File':
         this.onCreateFileToggle();
         break;
+      case 'New Markdown File':
+        this.onCreateFileToggle('.md');
+        break;
+      case 'New Excel File':
+        this.onCreateFileToggle('.xlsx');
+        break;
+      case 'New PowerPoint File':
+        this.onCreateFileToggle('.pptx');
+        break;
+      case 'New Word File':
+        this.onCreateFileToggle('.docx');
+        break;
+      case 'New SeaDoc File':
+        this.onCreateFileToggle('.sdoc');
+        break;
       default:
         break;
     }

frontend/src/utils/text-translation.js

@@ -5,6 +5,12 @@ const TextTranslation = {
   // app-menu
   'NEW_FOLDER' : {key : 'New Folder', value : gettext('New Folder')},
   'NEW_FILE' : {key : 'New File', value : gettext('New File')},
+  'NEW_MARKDOWN_FILE' : {key : 'New Markdown File', value : gettext('New Markdown File')},
+  'NEW_EXCEL_FILE' : {key : 'New Excel File', value : gettext('New Excel File')},
+  'NEW_POWERPOINT_FILE' : {key : 'New PowerPoint File', value : gettext('New PowerPoint File')},
+  'NEW_WORD_FILE' : {key : 'New Word File', value : gettext('New Word File')},
+  'NEW_SEADOC_FILE' : {key : 'New SeaDoc File', value : gettext('New SeaDoc File') + ' (beta)'},
+
   'SHARE' : {key : 'Share', value : gettext('Share')},
   'DOWNLOAD' : {key : 'Download', value : gettext('Download')},
   'DELETE' : {key : 'Delete', value : gettext('Delete')},