From a307764676f261c2a5c9778e4b4ebd0fb0b5551d Mon Sep 17 00:00:00 2001 From: EscapeB <463355954@qq.com> Date: Wed, 5 Dec 2018 13:39:04 +0800 Subject: [PATCH 1/3] add forceRender props for Dialog component. --- README.md | 6 ++++++ package.json | 2 +- src/Dialog.tsx | 5 ++++- src/DialogWrap.tsx | 10 ++++++---- src/IDialogPropTypes.tsx | 1 + tests/index.js | 11 +++++++++++ 6 files changed, 29 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 08f03d1f..e109c2db 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,12 @@ ReactDOM.render( specific the close icon. + + forceRender + Boolean + false + Create dialog dom node before dialog first show + diff --git a/package.json b/package.json index 372225fb..9b870c55 100644 --- a/package.json +++ b/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", diff --git a/src/Dialog.tsx b/src/Dialog.tsx index c298e60a..25452875 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -387,7 +387,10 @@ export default class Dialog extends React.Component { const style = this.getWrapStyle(); // clear hide display // and only set display after async anim, not here for hide - if (props.visible) { + // if the forceRender is true, change display value to none + if (props.forceRender && !props.visible) { + style.display = 'none'; + } else if (props.visible) { style.display = null; } return ( diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx index 64b41f2c..e9ea7f45 100644 --- a/src/DialogWrap.tsx +++ b/src/DialogWrap.tsx @@ -8,8 +8,9 @@ import IDialogPropTypes from './IDialogPropTypes'; const IS_REACT_16 = 'createPortal' in ReactDOM; class DialogWrap extends React.Component { - static defaultProps = { + static defaultProps = { visible: false, + forceRender: false, }; _component: React.ReactElement; @@ -40,7 +41,7 @@ class DialogWrap extends React.Component { saveDialog = (node: any) => { this._component = node; - } + } getComponent = (extra = {}) => { return ( @@ -71,7 +72,7 @@ class DialogWrap extends React.Component { } render() { - const { visible } = this.props; + const { visible, forceRender } = this.props; let portal: any = null; @@ -83,6 +84,7 @@ class DialogWrap extends React.Component { 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 { ); } - if (visible || this._component) { + if (visible || forceRender || this._component) { portal = ( {this.getComponent()} diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index aa999ae9..f73a20c1 100644 --- a/src/IDialogPropTypes.tsx +++ b/src/IDialogPropTypes.tsx @@ -35,6 +35,7 @@ interface IDialogPropTypes { wrapProps?: any; getContainer?: () => HTMLElement; closeIcon?: ReactNode; + forceRender?: boolean; } export default IDialogPropTypes; diff --git a/tests/index.js b/tests/index.js index ce569bf8..fc79cfe2 100644 --- a/tests/index.js +++ b/tests/index.js @@ -267,4 +267,15 @@ describe('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(( + +
forceRender element
+ + ),container) + expect($('.rc-dialog-body > div').text()).to.be('forceRender element') + }) }); From f43c96f9883a420c8411b152435871bd56903f45 Mon Sep 17 00:00:00 2001 From: EscapeB <463355954@qq.com> Date: Wed, 5 Dec 2018 13:39:04 +0800 Subject: [PATCH 2/3] add forceRender props for Dialog component. --- README.md | 6 ++++++ examples/ant-design.tsx | 18 +++++++++++++++++- package.json | 2 +- src/Dialog.tsx | 8 ++++++-- src/DialogWrap.tsx | 14 ++++++++------ src/IDialogPropTypes.tsx | 1 + tests/index.js | 11 +++++++++++ 7 files changed, 50 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 08f03d1f..e109c2db 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,12 @@ ReactDOM.render( specific the close icon. + + forceRender + Boolean + false + Create dialog dom node before dialog first show + diff --git a/examples/ant-design.tsx b/examples/ant-design.tsx index ed519326..1b4ba5fe 100644 --- a/examples/ant-design.tsx +++ b/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} >

basic modal

@@ -141,6 +148,15 @@ class MyControl extends React.Component { onChange={this.center} /> +   +

{dialog} diff --git a/package.json b/package.json index 372225fb..9b870c55 100644 --- a/package.json +++ b/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", diff --git a/src/Dialog.tsx b/src/Dialog.tsx index c298e60a..b244afbf 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -75,6 +75,10 @@ export default class Dialog extends React.Component { } 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 { ); } - 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 { } return style; } - getWrapStyle = () : any => { + getWrapStyle = (): any => { return { ...this.getZIndexStyle(), ...this.props.wrapStyle }; } getMaskStyle = () => { diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx index 64b41f2c..65b06f9f 100644 --- a/src/DialogWrap.tsx +++ b/src/DialogWrap.tsx @@ -8,8 +8,9 @@ import IDialogPropTypes from './IDialogPropTypes'; const IS_REACT_16 = 'createPortal' in ReactDOM; class DialogWrap extends React.Component { - static defaultProps = { + static defaultProps = { visible: false, + forceRender: false, }; _component: React.ReactElement; @@ -18,8 +19,8 @@ class DialogWrap extends React.Component { 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 { saveDialog = (node: any) => { this._component = node; - } + } getComponent = (extra = {}) => { return ( @@ -71,7 +72,7 @@ class DialogWrap extends React.Component { } render() { - const { visible } = this.props; + const { visible, forceRender } = this.props; let portal: any = null; @@ -83,6 +84,7 @@ class DialogWrap extends React.Component { 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 { ); } - if (visible || this._component) { + if (visible || forceRender || this._component) { portal = ( {this.getComponent()} diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index aa999ae9..f73a20c1 100644 --- a/src/IDialogPropTypes.tsx +++ b/src/IDialogPropTypes.tsx @@ -35,6 +35,7 @@ interface IDialogPropTypes { wrapProps?: any; getContainer?: () => HTMLElement; closeIcon?: ReactNode; + forceRender?: boolean; } export default IDialogPropTypes; diff --git a/tests/index.js b/tests/index.js index ce569bf8..fc79cfe2 100644 --- a/tests/index.js +++ b/tests/index.js @@ -267,4 +267,15 @@ describe('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(( + +
forceRender element
+ + ),container) + expect($('.rc-dialog-body > div').text()).to.be('forceRender element') + }) }); From a2d04d4a4c0d68390cc78e99cdfb6c78a4a19899 Mon Sep 17 00:00:00 2001 From: EscapeB <463355954@qq.com> Date: Thu, 6 Dec 2018 12:44:32 +0800 Subject: [PATCH 3/3] delete wrong merge commit. --- src/Dialog.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 7628aa95..b244afbf 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -391,10 +391,7 @@ export default class Dialog extends React.Component { const style = this.getWrapStyle(); // clear hide display // and only set display after async anim, not here for hide - // if the forceRender is true, change display value to none - if (props.forceRender && !props.visible) { - style.display = 'none'; - } else if (props.visible) { + if (props.visible) { style.display = null; } return (