add forceRender props for Dialog component.

README.md

@@ -203,6 +203,12 @@ ReactDOM.render(
           <td></td>
           <td>specific the close icon.</td>
       </tr>
+      <tr>
+          <td>forceRender</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>Create dialog dom node before dialog first show </td>
+      </tr>
     </tbody>
 </table>
 

examples/ant-design.tsx

@@ -36,6 +36,7 @@ class MyControl extends React.Component {
     center: false,
     mousePosition: {},
     useIcon: false,
+    forceRender: false,
   };
 
   onClick = e => {
@@ -49,7 +50,6 @@ class MyControl extends React.Component {
   }
 
   onClose = e => {
-    // console.log(e);
     this.setState({
       visible: false,
     });
@@ -61,6 +61,12 @@ class MyControl extends React.Component {
     });
   }
 
+  onForceRenderChange = e => {
+    this.setState({
+      forceRender: e.target.checked,
+    });
+  }
+
   changeWidth = () => {
     this.setState({
       width: this.state.width === 600 ? 800 : 600,
@@ -98,6 +104,7 @@ class MyControl extends React.Component {
         mousePosition={this.state.mousePosition}
         destroyOnClose={this.state.destroyOnClose}
         closeIcon={this.state.useIcon ? getSvg(clearPath, {}, true) : undefined}
+        forceRender={this.state.forceRender}
       >
         <input autoFocus />
         <p>basic modal</p>
@@ -141,6 +148,15 @@ class MyControl extends React.Component {
               onChange={this.center}
             />
           </label>
+          &nbsp;
+          <label>
+            force render
+            <input
+              type="checkbox"
+              checked={this.state.forceRender}
+              onChange={this.onForceRenderChange}
+            />
+          </label>
         </p>
         {dialog}
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-dialog",
-  "version": "7.2.1",
+  "version": "7.2.2",
   "description": "dialog ui component for react",
   "keywords": [
     "react",

src/Dialog.tsx

@@ -75,6 +75,10 @@ export default class Dialog extends React.Component<IDialogPropTypes, any> {
   }
   componentDidMount() {
     this.componentDidUpdate({});
+    // if forceRender is true, set element style display to be none;
+    if (this.props.forceRender && this.wrap) {
+      this.wrap.style.display = 'none';
+    }
   }
   componentDidUpdate(prevProps: IDialogPropTypes) {
     const props = this.props;
@@ -207,7 +211,7 @@ export default class Dialog extends React.Component<IDialogPropTypes, any> {
         </button>);
     }
 
-    const style = { ... props.style, ...dest };
+    const style = { ...props.style, ...dest };
     const sentinelStyle = { width: 0, height: 0, overflow: 'hidden' };
     const transitionName = this.getTransitionName();
     const dialogElement = (
@@ -261,7 +265,7 @@ export default class Dialog extends React.Component<IDialogPropTypes, any> {
     }
     return style;
   }
-  getWrapStyle = () : any => {
+  getWrapStyle = (): any => {
     return { ...this.getZIndexStyle(), ...this.props.wrapStyle };
   }
   getMaskStyle = () => {

src/DialogWrap.tsx

@@ -8,8 +8,9 @@ import IDialogPropTypes from './IDialogPropTypes';
 const IS_REACT_16 = 'createPortal' in ReactDOM;
 
 class DialogWrap extends React.Component<IDialogPropTypes, any> {
-  static defaultProps  = {
+  static defaultProps = {
     visible: false,
+    forceRender: false,
   };
 
   _component: React.ReactElement<any>;
@@ -18,8 +19,8 @@ class DialogWrap extends React.Component<IDialogPropTypes, any> {
 
   removeContainer: () => void;
 
-  shouldComponentUpdate({ visible }: { visible: boolean }) {
-    return !!(this.props.visible || visible);
+  shouldComponentUpdate({ visible, forceRender }: { visible: boolean, forceRender: boolean }) {
+    return !!(this.props.visible || visible) || (this.props.forceRender || forceRender);
   }
 
   componentWillUnmount() {
@@ -40,7 +41,7 @@ class DialogWrap extends React.Component<IDialogPropTypes, any> {
 
   saveDialog = (node: any) => {
     this._component = node;
- }
+  }
 
   getComponent = (extra = {}) => {
     return (
@@ -71,7 +72,7 @@ class DialogWrap extends React.Component<IDialogPropTypes, any> {
   }
 
   render() {
-    const { visible } = this.props;
+    const { visible, forceRender } = this.props;
 
     let portal: any = null;
 
@@ -83,6 +84,7 @@ class DialogWrap extends React.Component<IDialogPropTypes, any> {
           autoDestroy={false}
           getComponent={this.getComponent}
           getContainer={this.getContainer}
+          forceRender={forceRender}
         >
           {({ renderComponent, removeContainer }: { renderComponent: any, removeContainer: any }) => {
             this.renderComponent = renderComponent;
@@ -93,7 +95,7 @@ class DialogWrap extends React.Component<IDialogPropTypes, any> {
       );
     }
 
-    if (visible || this._component) {
+    if (visible || forceRender || this._component) {
       portal = (
         <Portal getContainer={this.getContainer}>
           {this.getComponent()}

src/IDialogPropTypes.tsx

@@ -35,6 +35,7 @@ interface IDialogPropTypes {
   wrapProps?: any;
   getContainer?: () => HTMLElement;
   closeIcon?: ReactNode;
+  forceRender?: boolean;
 }
 
 export default IDialogPropTypes;

tests/index.js

@@ -267,4 +267,15 @@ describe('dialog', () => {
       </Dialog>), container);
     expect($('.rc-dialog').css('transform-origin')).to.not.be.empty();
   });
+
+  it('can get dom element before dialog first show when forceRender is set true ',()=>{
+    const d = ReactDOM.render((
+      <Dialog
+        forceRender
+      >
+        <div>forceRender element</div>
+      </Dialog>
+    ),container)
+    expect($('.rc-dialog-body > div').text()).to.be('forceRender element')
+  })
 });