feat: 添加modalRender的属性

test: 添加的测试用例 fix
react-component · Aug 29, 2020 · e0feade · e0feade
1 parent 13e4afb
commit e0feade
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
@@ -233,6 +233,7 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
       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<IDialogChildProps, any> {
       );
     }
 
+    const content = (
+      <div className={`${prefixCls}-content`}>
+        {closer}
+        {headerNode}
+        <div
+          className={`${prefixCls}-body`}
+          style={bodyStyle}
+          ref={this.saveRef('body')}
+          {...bodyProps}
+        >
+          {children}
+        </div>
+        {footerNode}
+      </div>
+    )
+
     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<IDialogChildProps, any> {
           style={sentinelStyle}
           aria-hidden="true"
         />
-        <div className={`${prefixCls}-content`}>
-          {closer}
-          {headerNode}
-          <div
-            className={`${prefixCls}-body`}
-            style={bodyStyle}
-            ref={this.saveRef('body')}
-            {...bodyProps}
-          >
-            {children}
-          </div>
-          {footerNode}
-        </div>
+        {modalRender(content)}
         <div
           tabIndex={0}
           ref={this.saveRef('sentinelEnd')}

diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
@@ -37,6 +37,7 @@ export interface IDialogPropTypes {
   wrapProps?: any;
   getContainer?: IStringOrHtmlElement | (() => 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
@@ -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';
@@ -50,7 +50,7 @@ describe('dialog', () => {
     dialog.unmount();
     jest.useRealTimers();
   });
-
+  
   it('show', () => {
     dialog.setState({ visible: true });
     jest.runAllTimers();
@@ -425,4 +425,16 @@ describe('dialog', () => {
     d.update();
     expect(d.find('.rc-dialog-wrap').props().style.display).toEqual(null);
   });
+
+  it('modalRender', () => {
+    const modalRender = mount(
+      <DialogWrap modalRender={node => cloneElement(node, { ...node.props, style: { background: '#1890ff' }})}>
+      </DialogWrap>
+    );
+    modalRender.setState({ visible: true });
+    jest.runAllTimers();
+    modalRender.update();
+    expect(modalRender.find('.rc-dialog-content').props().style.background).toEqual('#1890ff');
+    modalRender.unmount();
+  });
 });