fate: add modalRender (#195)

* feat: 添加modalRender的属性

test: 添加的测试用例

fix

* fix: 删除多余的空格

* feat: 添加拖拽modal的例子。

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 (
+    <div style={{ margin: 20 }}>
+      <p>
+        <button type="button" className="btn btn-primary" onClick={onClick}>show dialog</button>
+      </p>
+      <Dialog
+        visible={visible}
+        animation="slide-fade"
+        maskAnimation="fade"
+        onClose={onClose}
+        style={{ width: 600 }}
+        title={(
+            <div
+                style={{
+                    width: '100%',
+                    cursor: 'pointer',
+                }}
+                onMouseOver={() => {
+                    if (disabled){
+                        setDisabled(false)
+                    }
+                }}
+                onMouseOut={() => {
+                    setDisabled(true)
+                }}
+                // fix eslintjsx-a11y/mouse-events-have-key-events
+                // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
+                onFocus={ () => {} }
+                onBlur={ () => {}} 
+                // end 
+            >modal</div>
+        )}
+        modalRender={modal => <Draggable disabled={disabled}>{modal}</Draggable>}
+      >
+          <div
+            style={{
+                height: 200,
+            }}
+          >
+              Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.
+          </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default MyControl;

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"

src/Dialog.tsx

@@ -233,6 +233,7 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
       bodyProps,
       children,
       destroyOnClose,
+      modalRender,
     } = 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 ? modalRender(content) : content }
         <div
           tabIndex={0}
           ref={this.saveRef('sentinelEnd')}

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

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(
+      <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();
+  });
 });