Merge two components into one component (#3188)

* Merge two components into one component * Simplified code * Delete the use of setTimeout
2025-09-03 16:10:26 +00:00 · 2019-03-29 10:36:34 +08:00
parent a13e2a3519
commit 5b27dcc9a5
5 changed files with 156 additions and 215 deletions
--- a/frontend/src/components/dialog/related-file-dialogs.js
+++ b/frontend/src/components/dialog/related-file-dialogs.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'reactstrap';
+import AddRelatedFileDialog from './add-related-file-dialog';
+import ListRelatedFileDialog from './list-related-file-dialog';
+import ModalPortal from '../modal-portal';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  toggleCancel: PropTypes.func.isRequired,
+  onRelatedFileChange: PropTypes.func.isRequired,
+  dirent: PropTypes.object.isRequired,
+  relatedFiles: PropTypes.array,
+  viewMode: PropTypes.oneOf(['list_related_file','add_related_file']).isRequired,
+};
+
+class RelatedFileDialogs extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showListRelatedFileDialog: props.viewMode === 'list_related_file',
+    };
+  }
+
+  onAddRelatedFileToggle = () => {
+    this.setState({
+      showListRelatedFileDialog: false,
+    });
+  }
+
+  onCloseAddRelatedFileDialog = () => {
+    this.setState({
+      showListRelatedFileDialog: true,
+    });
+  }
+
+  render() {
+    return (
+      <ModalPortal>
+        <Modal isOpen={true} toggle={this.props.toggleCancel} size='lg' style={{width:'650px'}}>
+          {this.state.showListRelatedFileDialog && 
+            <ListRelatedFileDialog
+              filePath={this.props.filePath}
+              relatedFiles={this.props.relatedFiles}
+              repoID={this.props.repoID}
+              toggleCancel={this.props.toggleCancel}
+              addRelatedFileToggle={this.onAddRelatedFileToggle}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+            />
+          }
+          {!this.state.showListRelatedFileDialog && 
+            <AddRelatedFileDialog
+              filePath={this.props.filePath}
+              repoID={this.props.repoID}
+              toggleCancel={this.onCloseAddRelatedFileDialog}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+              dirent={this.props.dirent}
+              onClose={this.props.toggleCancel}
+            />
+          }
+        </Modal>
+      </ModalPortal>
+    )
+  }
+}
+
+RelatedFileDialogs.propTypes = propTypes;
+
+export default RelatedFileDialogs
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -4,10 +4,8 @@ import moment from 'moment';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
-import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
-import { Modal } from 'reactstrap';
 import ModalPortal from '../modal-portal';
-import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
+import RelatedFileDialogs from '../dialog/related-file-dialogs';

 const propTypes = {
  repoInfo: PropTypes.object.isRequired,
@@ -28,9 +26,7 @@ class DetailListView extends React.Component {
    super(props);
    this.state = {
      isEditFileTagShow: false,
-      isListRelatedFileShow: false,
-      isAddRelatedFileShow: false,
-      isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
    };
  }

@@ -64,30 +60,13 @@ class DetailListView extends React.Component {

  onListRelatedFileToggle = () => {
    this.setState({
-      isListRelatedFileShow: true,
-      isRelatedFileDialogShow: true,
+      showRelatedFileDialog: true,
    });
  }

  toggleCancel = () => {
    this.setState({
-      isListRelatedFileShow: false,
-      isAddRelatedFileShow: false,
-      isRelatedFileDialogShow: false,
-    });
-  }
-
-  onCloseAddRelatedFileDialog = () => {
-    this.setState({
-      isListRelatedFileShow: true,
-      isAddRelatedFileShow: false,
-    });
-  }
-
-  onAddRelatedFileToggle = () => {
-    this.setState({
-      isListRelatedFileShow: false,
-      isAddRelatedFileShow: true
+      showRelatedFileDialog: false,
    });
  }
  
@@ -152,34 +131,19 @@ class DetailListView extends React.Component {
              </tr>
            </tbody>
          </table>
-          { this.state.isRelatedFileDialogShow && (
+          {this.state.showRelatedFileDialog &&
              <ModalPortal>
-              <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-                {
-                  this.state.isAddRelatedFileShow &&
-                  <AddRelatedFileDialog
-                    filePath={direntPath}
+                <RelatedFileDialogs
                  repoID={this.props.repoID}
-                    toggleCancel={this.onCloseAddRelatedFileDialog}
+                  filePath={direntPath}
+                  relatedFiles={relatedFiles}
+                  toggleCancel={this.toggleCancel}
                  onRelatedFileChange={this.props.onRelatedFileChange}
                  dirent={this.props.dirent}
-                    onClose={this.toggleCancel}
+                  viewMode="list_related_file"
                />
-                }
-                {
-                  this.state.isListRelatedFileShow &&
-                  <ListRelatedFileDialog
-                    relatedFiles={relatedFiles}
-                    repoID={this.props.repoID}
-                    filePath={direntPath}
-                    toggleCancel={this.toggleCancel}
-                    addRelatedFileToggle={this.onAddRelatedFileToggle}
-                    onRelatedFileChange={this.props.onRelatedFileChange}
-                  />
-                }
-              </Modal>
              </ModalPortal>
-          )}
+            }
          {
            this.state.isEditFileTagShow &&
            <EditFileTagDialog
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
@@ -10,8 +10,7 @@ import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import DirentsMenu from '../dirent-list-view/dirents-menu';
 import ShareDialog from '../dialog/share-dialog';
-import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
-import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
+import RelatedFileDialogs from '../dialog/related-file-dialogs';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import toaster from '../toast';
 import ModalPortal from '../modal-portal';
@@ -46,11 +45,10 @@ class MutipleDirOperationToolbar extends React.Component {
      showLibContentViewDialogs: false,
      showShareDialog: false,
      showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
-      showListRelatedFileDialog: false,
      fileTagList: [],
      multiFileTagList: [],
-      isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
+      viewMode: 'list_related_file',     
    };
    this.zipToken = null;
  }
@@ -198,19 +196,20 @@ class MutipleDirOperationToolbar extends React.Component {
  openRelatedFilesDialog = (dirent) => {
    let filePath = this.getDirentPath(dirent);
    seafileAPI.listRelatedFiles(this.props.repoID, filePath).then(res => {
+      let relatedFiles = res.data.related_files;
+      if (relatedFiles.length > 0) {
        this.setState({
-        relatedFiles: res.data.related_files,
+          relatedFiles: relatedFiles,
          showLibContentViewDialogs: true,
-      });
-      if (res.data.related_files.length > 0) {
-        this.setState({
-          isRelatedFileDialogShow: true,
-          showListRelatedFileDialog: true,
+          showRelatedFileDialog: true,
+          viewMode: 'list_related_file',
        });
      } else {
        this.setState({
-          isRelatedFileDialogShow: true,
-          showAddRelatedFileDialog: true,
+          relatedFiles: relatedFiles,
+          showLibContentViewDialogs: true,
+          showRelatedFileDialog: true,
+          viewMode: 'add_related_file',
        });
      }
    });
@@ -221,25 +220,7 @@ class MutipleDirOperationToolbar extends React.Component {
      showLibContentViewDialogs: false,
      showShareDialog: false,
      showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
-      showListRelatedFileDialog: false,
-      isRelatedFileDialogShow: false,
-    });
-  }
-
-  closeAddRelatedFileDialog = () => {
-    this.setState({
-      showLibContentViewDialogs: true,
-      showAddRelatedFileDialog: false,
-      showListRelatedFileDialog: true,
-    });
-  }
-
-  addRelatedFileToggle = () => {
-    this.setState({
-      showLibContentViewDialogs: true,
-      showAddRelatedFileDialog: true,
-      showListRelatedFileDialog: false,
+      showRelatedFileDialog: false,
    });
  }

@@ -359,32 +340,19 @@ class MutipleDirOperationToolbar extends React.Component {
                />
              </ModalPortal>
            }
-            {this.state.isRelatedFileDialogShow && (
+            {this.state.showRelatedFileDialog &&
              <ModalPortal>
-                <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-                  {this.state.showListRelatedFileDialog &&
-                    <ListRelatedFileDialog
+                <RelatedFileDialogs
                  repoID={repoID}
                  filePath={direntPath}
                  relatedFiles={this.state.relatedFiles}
                  toggleCancel={this.toggleCancel}
-                      addRelatedFileToggle={this.addRelatedFileToggle}
                  onRelatedFileChange={this.onRelatedFileChange}
-                    />
-                  }
-                  {this.state.showAddRelatedFileDialog &&
-                    <AddRelatedFileDialog
-                      repoID={repoID}
-                      filePath={direntPath}
-                      toggleCancel={this.closeAddRelatedFileDialog}
-                      onClose={this.toggleCancel}
                  dirent={this.props.selectedDirentList[0]}
-                      onRelatedFileChange={this.onRelatedFileChange}
+                  viewMode={this.state.viewMode}
                />
-                  }
-                </Modal>
              </ModalPortal>
-            )}
+            }
          </Fragment>
        )}
      </Fragment>
--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -1,14 +1,13 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip, Modal } from 'reactstrap';
+import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip} from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import ModalPotal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
-import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
-import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
+import RelatedFileDialogs from '../dialog/related-file-dialogs';

 const propTypes = {
  path: PropTypes.string.isRequired,
@@ -35,9 +34,8 @@ class ViewFileToolbar extends React.Component {
      isMoreMenuShow: false,
      isShareDialogShow: false,
      isEditTagDialogShow: false,
-      isListRelatedFileDialogShow: false,
-      isAddRelatedFileDialogShow: false,
      isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
    };
  }

@@ -74,33 +72,18 @@ class ViewFileToolbar extends React.Component {

  onListRelatedFileToggle = () => {
    this.setState({
-      isListRelatedFileDialogShow: true,
      isRelatedFileDialogShow: true,
+      showRelatedFileDialog: true,
    });
  }

  toggleCancel = () => {
    this.setState({
-      isListRelatedFileDialogShow: false,
-      isAddRelatedFileDialogShow: false,
      isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
    })
  }

-  onCloseAddRelatedFileDialog = () => {
-    this.setState({
-      isListRelatedFileDialogShow: true,
-      isAddRelatedFileDialogShow: false,
-    });
-  }
-
-  onAddRelatedFileToggle = () => {
-    this.setState({
-      isListRelatedFileDialogShow: false,
-      isAddRelatedFileDialogShow: true,
-    });
-  }
-
  render() {

    let name = Utils.getFileName(this.props.path);
@@ -160,32 +143,19 @@ class ViewFileToolbar extends React.Component {
            />
          </ModalPotal>
        )}
-        {this.state.isRelatedFileDialogShow && (
+        {this.state.showRelatedFileDialog &&
          <ModalPotal>
-            <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-              {this.state.isListRelatedFileDialogShow &&
-                <ListRelatedFileDialog
+            <RelatedFileDialogs
              repoID={this.props.repoID}
              filePath={this.props.path}
              relatedFiles={this.props.relatedFiles}
              toggleCancel={this.toggleCancel}
-                  addRelatedFileToggle={this.onAddRelatedFileToggle}
              onRelatedFileChange={this.props.onRelatedFileChange}
-                />
-              }
-              {this.state.isAddRelatedFileDialogShow && 
-                <AddRelatedFileDialog
              dirent={dirent}
-                  repoID={this.props.repoID}
-                  filePath={this.props.path}
-                  onRelatedFileChange={this.props.onRelatedFileChange}
-                  toggleCancel={this.onCloseAddRelatedFileDialog}
-                  onClose={this.toggleCancel}
+              viewMode="list_related_file"
            />
-              }
-            </Modal>
          </ModalPotal>
-        )}
+        }
      </Fragment>
    );
  }
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -9,8 +9,7 @@ import io from 'socket.io-client';
 import toaster from './components/toast';
 import ModalPortal from './components/modal-portal';
 import EditFileTagDialog from './components/dialog/edit-filetag-dialog';
-import ListRelatedFileDialog from './components/dialog/list-related-file-dialog';
-import AddRelatedFileDialog from './components/dialog/add-related-file-dialog';
+import RelatedFileDialogs from './components/dialog/related-file-dialogs';
 import ShareDialog from './components/dialog/share-dialog';
 import CommentDialog from './components/markdown-view/comment-dialog';
 import InsertFileDialog from './components/dialog/insert-file-dialog';
@@ -23,7 +22,6 @@ import HistoryList from './components/markdown-view/history-list';
 import CommentPanel from './components/file-view/comment-panel';
 import OutlineView from './components/markdown-view/outline';
 import Loading from './components/loading';
-import { Modal } from 'reactstrap';
 import { findRange } from '@seafile/slate-react';

 import './css/markdown-viewer/markdown-editor.css';
@@ -297,7 +295,6 @@ class MarkdownEditor extends React.Component {
      localDraftDialog: false,
      showRelatedFileDialog: false,
      showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
      showMarkdownEditorDialog: false,
      showShareLinkDialog: false,
      showCommentDialog: false,
@@ -311,7 +308,7 @@ class MarkdownEditor extends React.Component {
      isShowComments: false,
      isShowHistory: false,
      isShowOutline: true,
-      isRelatedFileDialogShow: false,
+      viewMode:'list_related_file',
    };

    if (this.state.collabServer) {
@@ -394,12 +391,10 @@ class MarkdownEditor extends React.Component {
    this.setState({
      showRelatedFileDialog: false,
      showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
      showMarkdownEditorDialog: false,
      showShareLinkDialog: false,
      showCommentDialog: false,
      showInsertFileDialog: false,
-      isRelatedFileDialogShow: false,
    });
  }

@@ -471,20 +466,6 @@ class MarkdownEditor extends React.Component {
    this.timer = null;
  }

-  closeAddRelatedFileDialog = () => {
-    this.setState({
-      showAddRelatedFileDialog: false,
-      showRelatedFileDialog: true,
-    });
-  }
-
-  addRelatedFileToggle = () => {
-    this.setState({
-      showRelatedFileDialog: false,
-      showAddRelatedFileDialog: true,
-    });
-  }
-
  openDialogs = (option) => {
    switch(option)
    {
@@ -493,14 +474,14 @@ class MarkdownEditor extends React.Component {
            this.setState({
              showRelatedFileDialog: true,
              showMarkdownEditorDialog: true,
-            isRelatedFileDialogShow: true,
+              viewMode: 'list_related_file',
            });
          }
          else {
            this.setState({
-            showAddRelatedFileDialog: true,
+              showRelatedFileDialog: true,
              showMarkdownEditorDialog: true,
-            isRelatedFileDialogShow: true,
+              viewMode: 'add_related_file',
            });
          }
        break;
@@ -1116,32 +1097,19 @@ class MarkdownEditor extends React.Component {
                  />
                </ModalPortal>
              }
-              {this.state.isRelatedFileDialogShow && (
-                <ModalPortal>
-                  <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
              {this.state.showRelatedFileDialog &&
-                      <ListRelatedFileDialog
+                <ModalPortal>
+                  <RelatedFileDialogs
                    repoID={repoID}
                    filePath={filePath}
                    relatedFiles={this.state.relatedFiles}
                    toggleCancel={this.toggleCancel}
-                        addRelatedFileToggle={this.addRelatedFileToggle}
                    onRelatedFileChange={this.onRelatedFileChange}
-                      />
-                    }
-                    {this.state.showAddRelatedFileDialog &&
-                      <AddRelatedFileDialog
-                        repoID={repoID}
-                        filePath={filePath}
-                        toggleCancel={this.closeAddRelatedFileDialog}
-                        onClose={this.toggleCancel}
                    dirent={this.state.fileInfo}
-                        onRelatedFileChange={this.onRelatedFileChange}
+                    viewMode={this.state.viewMode}
                  />
-                    }
-                  </Modal>
                </ModalPortal>
-              )}
+              }
              {this.state.showInsertFileDialog &&
                <ModalPortal>
                  <InsertFileDialog