diff --git a/examples/draggable.tsx b/examples/draggable.tsx
new file mode 100644
index 00000000..92cbc10c
--- /dev/null
+++ b/examples/draggable.tsx
@@ -0,0 +1,64 @@
+import 'bootstrap/dist/css/bootstrap.css';
+import '../assets/bootstrap.less';
+import * as React from 'react';
+import Draggable from 'react-draggable';
+import Dialog from '../src/DialogWrap';
+
+const MyControl = () => {
+ const [visible, setVisible] = React.useState(false);
+ const [disabled, setDisabled] = React.useState(true);
+ const onClick = () => {
+ setVisible(true);
+ }
+
+ const onClose = () => {
+ setVisible(false);
+ }
+
+ return (
+
+
+
+
+
+ )}
+ modalRender={modal => {modal}}
+ >
+
+ Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.
+
+
+
+ );
+};
+
+export default MyControl;
diff --git a/package.json b/package.json
index 52da4122..e967978b 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
"rc-drawer": "4.1.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
+ "react-draggable": "^4.4.3",
"typescript": "^4.0.2"
},
"typings": "./lib/DialogWrap.d.ts"
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
index 485c77d3..d9576df2 100644
--- a/src/Dialog.tsx
+++ b/src/Dialog.tsx
@@ -233,6 +233,7 @@ export default class Dialog extends React.Component {
bodyProps,
children,
destroyOnClose,
+ modalRender,
} = 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 ? modalRender(content) : 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..7f2917ee 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';
@@ -425,4 +425,16 @@ describe('dialog', () => {
d.update();
expect(d.find('.rc-dialog-wrap').props().style.display).toEqual(null);
});
+
+ it('modalRender', () => {
+ const modalRender = mount(
+ cloneElement(node, { ...node.props, style: { background: '#1890ff' }})}>
+
+ );
+ modalRender.setState({ visible: true });
+ jest.runAllTimers();
+ modalRender.update();
+ expect(modalRender.find('.rc-dialog-content').props().style.background).toEqual('#1890ff');
+ modalRender.unmount();
+ });
});