diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 485c77d3..df1b12f6 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -233,6 +233,7 @@ export default class Dialog extends React.Component { bodyProps, children, destroyOnClose, + modalRender = modalNode => modalNode, } = this.props; const dest: any = {}; if (width !== undefined) { @@ -276,6 +277,22 @@ export default class Dialog extends React.Component { ); } + const content = ( +
+ {closer} + {headerNode} +
+ {children} +
+ {footerNode} +
+ ) + const styleBox = { ...style, ...dest }; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }; const transitionName = this.getTransitionName(); @@ -296,19 +313,7 @@ export default class Dialog extends React.Component { style={sentinelStyle} aria-hidden="true" /> -
- {closer} - {headerNode} -
- {children} -
- {footerNode} -
+ {modalRender(content)}
IStringOrHtmlElement) | false; closeIcon?: ReactNode; + modalRender?: (node: ReactNode) => ReactNode; forceRender?: boolean; // https://github.com/ant-design/ant-design/issues/19771 // https://github.com/react-component/dialog/issues/95 diff --git a/tests/index.spec.js b/tests/index.spec.js index 7374756b..c5b0fe27 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -1,6 +1,6 @@ /* eslint-disable react/no-render-return-value */ /* eslint-disable func-names */ -import React from 'react'; +import React, { cloneElement } from 'react'; import { mount } from 'enzyme'; import KeyCode from 'rc-util/lib/KeyCode'; @@ -22,6 +22,7 @@ describe('dialog', () => { cloneElement(node, { style: { background: '#1890ff' }})} maskClosable={this.state.maskClosable} /> ); @@ -51,6 +52,13 @@ describe('dialog', () => { jest.useRealTimers(); }); + it('modalRender', () => { + dialog.setState({ visible: true }); + jest.runAllTimers(); + dialog.update(); + expect(dialog.find('.rc-dialog-content').props().style.background).toEqual('#1890ff'); + }); + it('show', () => { dialog.setState({ visible: true }); jest.runAllTimers();