From 4b45da628d8e5c20a096a215fe422ddf9fc1310a Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Thu, 28 Feb 2019 07:57:47 +0800
Subject: [PATCH] [add] draft modalPortal (#3009)

---
 frontend/src/draft-review.js | 41 +++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/src/draft-review.js b/frontend/src/draft-review.js
index 6ba3919f00..4595a23d51 100644
--- a/frontend/src/draft-review.js
+++ b/frontend/src/draft-review.js
@@ -23,6 +23,7 @@ import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 import classnames from 'classnames';
 import HistoryList from './pages/review/history-list';
 import { Value, Document, Block } from 'slate';
+import ModalPortal from './components/modal-portal';
 
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
@@ -58,6 +59,7 @@ class DraftReview extends React.Component {
       isShowCommentDialog: false,
       activeItem: null,
       originRepoName: '',
+      showDraftReviewDialog: false,
     };
     this.quote = '';
     this.newIndex = null;
@@ -313,7 +315,8 @@ class DraftReview extends React.Component {
       this.listReviewers();
     }
     this.setState({
-      showReviewerDialog: !this.state.showReviewerDialog
+      showReviewerDialog: !this.state.showReviewerDialog,
+      showDraftReviewDialog: !this.state.showDraftReviewDialog,
     });
   }
 
@@ -920,22 +923,30 @@ class DraftReview extends React.Component {
             </div>
           </div>
         </div>
-        { this.state.showReviewerDialog &&
-          <AddReviewerDialog
-            showReviewerDialog={this.state.showReviewerDialog}
-            toggleAddReviewerDialog={this.toggleAddReviewerDialog}
-            reviewID={reviewID}
-            reviewers={this.state.reviewers}
-          />
+        {this.state.showDraftReviewDialog &&
+          <React.Fragment>
+            {this.state.showReviewerDialog &&
+              <ModalPortal>
+                <AddReviewerDialog
+                  showReviewerDialog={this.state.showReviewerDialog}
+                  toggleAddReviewerDialog={this.toggleAddReviewerDialog}
+                  reviewID={reviewID}
+                  reviewers={this.state.reviewers}
+                />
+              </ModalPortal>
+            }
+          </React.Fragment>
         }
         {this.state.isShowCommentDialog &&
-          <ReviewCommentDialog
-            toggleCommentDialog={this.toggleCommentDialog}
-            onCommentAdded={this.onCommentAdded}
-            quote={this.quote}
-            newIndex={this.newIndex}
-            oldIndex={this.oldIndex}
-          />
+          <ModalPortal>
+            <ReviewCommentDialog
+              toggleCommentDialog={this.toggleCommentDialog}
+              onCommentAdded={this.onCommentAdded}
+              quote={this.quote}
+              newIndex={this.newIndex}
+              oldIndex={this.oldIndex}
+            />
+          </ModalPortal>
         }
       </div>
     );