From 1531fe190c713359535ede760260e79e5e2ca114 Mon Sep 17 00:00:00 2001
From: LiJiahao <lijiahao_shandong@163.com>
Date: Wed, 19 Aug 2020 18:50:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20dialog=20is=20not=20visible,=20when=20in?=
 =?UTF-8?q?itialize=20dialog=20with=20forceRender=20a=E2=80=A6=20(#194)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: dialog is not visible, when initialize dialog with forceRender and visible is true

* Update .travis.yml

Co-authored-by: 偏右 <afc163@gmail.com>
---
 .travis.yml             |  2 +-
 examples/ant-design.tsx | 34 ++++++++++++++++++++++++++++++++++
 src/Dialog.tsx          |  3 +++
 tests/index.js          | 30 ++++++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 1d853fc2..313a4cbc 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -8,7 +8,7 @@ notifications:
   - hust2012jiangkai@gmail.com
 
 node_js:
-- 6.9.1
+- 10
 
 before_install:
 - |
diff --git a/examples/ant-design.tsx b/examples/ant-design.tsx
index 466a9f39..c74dd3a7 100644
--- a/examples/ant-design.tsx
+++ b/examples/ant-design.tsx
@@ -31,6 +31,7 @@ class MyControl extends React.Component<any, any> {
   state = {
     visible: false,
     visible2: false,
+    visible3: true,
     width: 600,
     destroyOnClose: false,
     center: false,
@@ -62,6 +63,10 @@ class MyControl extends React.Component<any, any> {
     });
   }
 
+  onClose3 = (e: React.SyntheticEvent) => {
+    this.setState({ visible3: false });
+  }
+
   onDestroyOnCloseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({
       destroyOnClose: e.target.checked,
@@ -143,6 +148,13 @@ class MyControl extends React.Component<any, any> {
       >
         <input autoFocus />
         <p>basic modal</p>
+        <button onClick={() => {
+          this.setState({
+            visible: true,
+            visible2: true,
+            visible3: true,
+          });
+        }}>打开第三个</button>
         <button onClick={() => {
           this.setState({
             visible2: false,
@@ -157,6 +169,27 @@ class MyControl extends React.Component<any, any> {
       </Dialog>
     );
 
+    const dialog3 = (
+      <Dialog
+        forceRender
+        visible={this.state.visible3}
+        onClose={this.onClose3}
+      >
+        <p>initialized with forceRender and visbile true</p>
+        <button onClick={() => {
+          this.setState({
+            visible3: false,
+          });
+        }}>关闭当前</button>
+        <button onClick={this.onClose2}>关闭所有</button>
+        <button onClick={this.changeWidth}>change width</button>
+        <button onClick={this.toggleCloseIcon}>
+          use custom icon, is using icon: {this.state.useIcon && 'true' || 'false'}.
+        </button>
+        <div style={{ height: 200 }} />
+      </Dialog>
+    );
+
     return (
       <div style={{ width: '90%', margin: '0 auto' }}>
         <style>
@@ -202,6 +235,7 @@ class MyControl extends React.Component<any, any> {
         </p>
         {dialog}
         {dialog2}
+        {dialog3}
       </div>
     );
   }
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
index 7d824b9b..f3611ec3 100644
--- a/src/Dialog.tsx
+++ b/src/Dialog.tsx
@@ -83,6 +83,9 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
   componentDidMount() {
     this.componentDidUpdate({});
     // if forceRender is true, set element style display to be none;
+    if (this.props.forceRender && this.props.visible) {
+      return;
+    }
     if (
       (this.props.forceRender || (this.props.getContainer === false && !this.props.visible)) &&
       this.wrap
diff --git a/tests/index.js b/tests/index.js
index 13fb4cae..8f115c3e 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -432,4 +432,34 @@ describe('dialog', () => {
     expect($('.rc-dialog-wrap').css("zIndex")).to.be('1000');
 
   });
+
+  it('should show dialog when initialize dialog, given forceRender and visible is true', () => {
+    class DialogWrap extends React.Component {
+      state = {
+        visible: true,
+        forceRender: true,
+      };
+      render() {
+        return (
+          <Dialog
+            forceRender={this.state.forceRender}
+            visible={this.state.visible}
+          />
+        );
+      }
+    }
+    ReactDOM.render((
+      <DialogWrap
+        visible
+        forceRender
+      >
+        <div>Show dialog with forceRender and visible is true</div>
+      </DialogWrap>
+    ),container);
+    setTimeout(() => {
+      expect($('.rc-dialog-wrap').css('display'))
+        .to.be('block');
+      done();
+    }, 10);
+  });
 });