feat: Update rc-dialog to 8.3.0, support Modal drag and drop. (#26507)

* feat: 更新到rc-dialog@8.3.0 添加Modal组件对拖拽的支持。 * fix: test case * Update components/drawer/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * fix: 修复文档版本修改为4.7.0, 文档的order改为13最后一个，指针改为move * fix: 修改API的顺序，按照字母顺序进行排列 * fix: 修复一些讨论的问题 * fix: test case * fix: 修改Demo的Modal的Button的显示方式，进行竖着排列 * docs: 去掉多余的demo Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
ant-design · Sep 3, 2020 · 0c52196 · 0c52196
1 parent 09e19b7
commit 0c52196
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 1 deletion.
diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap
@@ -283,6 +283,17 @@ exports[`renders ./components/modal/demo/manual.md correctly 1`] = `
 </button>
 `;
 
+exports[`renders ./components/modal/demo/modal-render.md correctly 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    Open Draggable Modal
+  </span>
+</button>
+`;
+
 exports[`renders ./components/modal/demo/position.md correctly 1`] = `
 Array [
   <button

diff --git a/components/modal/demo/modal-render.md b/components/modal/demo/modal-render.md
@@ -0,0 +1,98 @@
+---
+order: 13
+title:
+  zh-CN: 自定义渲染对话框
+  en-US: Custom modal content render
+---
+
+## zh-CN
+
+自定义渲染对话框, 可通过 `react-draggable` 来实现拖拽。
+
+## en-US
+
+Custom modal content render. use `react-draggable` implements draggable.
+
+```jsx
+import { Modal, Button } from 'antd';
+import Draggable from 'react-draggable';
+
+class App extends React.Component {
+  state = {
+    visible: false,
+    disabled: true,
+  };
+
+  showModal = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  handleOk = e => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleCancel = e => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <Button onClick={this.showModal}>
+          Open Draggable Modal
+        </Button>
+        <Modal
+          title={
+            <div
+              style={{
+                width: '100%',
+                cursor: 'move',
+              }}
+              onMouseOver={() => {
+                if (this.state.disabled) {
+                  this.setState({
+                    disabled: true,
+                  });
+                }
+              }}
+              onMouseOut={() => {
+                this.setState({
+                  disabled: false,
+                });
+              }}
+              // 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
+            >
+              Draggable Modal
+            </div>
+          }
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          modalRender={modal => <Draggable disabled={this.state.disabled}>{modal}</Draggable>}
+        >
+          <p>
+            Just don&apos;t learn physics at school and your life will be full of magic and
+            miracles.
+          </p>
+          <br />
+          <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
+        </Modal>
+      </>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
@@ -31,6 +31,7 @@ When requiring users to interact with the application, but without jumping to a
 | mask | Whether show mask or not | boolean | true |
 | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
 | maskStyle | Style for modal's mask element | object | {} |
+| modalRender | Custom modal content render | (node: ReactNode) => ReactNode | - | 4.7.0 |
 | okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |
 | okText | Text of the OK button | string \| ReactNode | `OK` |
 | okType | Button `type` of the OK button | string | `primary` |

diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
@@ -34,6 +34,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | mask | 是否展示遮罩 | boolean | true |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |
 | maskStyle | 遮罩样式 | object | {} |
+| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
 | okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
 | okText | 确认按钮文字 | string \| ReactNode | `确定` |
 | okType | 确认按钮类型 | string | `primary` |

diff --git a/package.json b/package.json
@@ -121,7 +121,7 @@
     "rc-cascader": "~1.3.0",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~2.0.0",
-    "rc-dialog": "~8.2.1",
+    "rc-dialog": "~8.3.0",
     "rc-drawer": "~4.1.0",
     "rc-dropdown": "~3.1.2",
     "rc-field-form": "~1.10.0",
@@ -249,6 +249,7 @@
     "react-dnd": "^11.1.1",
     "react-dnd-html5-backend": "^11.1.1",
     "react-dom": "^16.9.0",
+    "react-draggable": "^4.4.3",
     "react-github-button": "^0.1.11",
     "react-helmet-async": "^1.0.4",
     "react-highlight-words": "^0.16.0",