feat: 添加modalRender的属性

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

Hide file tree

Showing 3 changed files with 28 additions and 14 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';
@@ -22,6 +22,7 @@ describe('dialog', () => {
         <Dialog
           {...this.props}
           visible={this.state.visible}
+          modalRender={node => 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();