fix: dialog is not visible, when initialize dialog with forceRender a… (#194)

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

* Update .travis.yml

Co-authored-by: 偏右 <[email protected]>

Author: LiJiahaoCoder

.travis.yml

@@ -8,7 +8,7 @@ notifications:
   - [email protected]
 
 node_js:
-- 6.9.1
+- 10
 
 before_install:
 - |

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>
     );
   }

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

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);
+  });
 });