update modal and drawer protal

components/config-provider/__tests__/components.test.js

@@ -354,7 +354,7 @@ describe('ConfigProvider', () => {
     // Modal
     testPair('Modal', props => (
       <div>
-        <Modal {...props} visible>
+        <Modal {...props} visible getContainer={false}>
           Bamboo is Little Light
         </Modal>
       </div>

components/drawer/index.en-US.md

@@ -21,7 +21,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | --- | --- | --- | --- | --- |
 | closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true | 3.7.0 |
 | destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false | 3.7.0 |
-| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | 3.7.0 |
+| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' | 3.7.0 |
 | mask | Whether to show mask or not. | Boolean | true | 3.7.0 |
 | maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true | 3.7.0 |
 | maskStyle | Style for Drawer's mask element. | object | {} | 3.7.0 |

components/drawer/index.tsx

@@ -20,7 +20,7 @@ type placementType = (typeof PlacementTypes)[number];
 export interface DrawerProps {
   closable?: boolean;
   destroyOnClose?: boolean;
-  getContainer?: string | HTMLElement | getContainerFunc;
+  getContainer?: string | HTMLElement | getContainerFunc | false;
   maskClosable?: boolean;
   mask?: boolean;
   maskStyle?: React.CSSProperties;
@@ -77,20 +77,6 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     }
   }
 
-  close = (e: EventType) => {
-    const { visible, onClose } = this.props;
-    if (visible !== undefined && onClose) {
-      onClose(e);
-    }
-  };
-
-  onMaskClick = (e: EventType) => {
-    if (!this.props.maskClosable && !(e.nativeEvent instanceof KeyboardEvent)) {
-      return;
-    }
-    this.close(e);
-  };
-
   push = () => {
     this.setState({
       push: true,
@@ -116,7 +102,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
 
   getDestroyOnClose = () => this.props.destroyOnClose && !this.props.visible;
 
-  // get drawar push width or height
+  // get drawer push width or height
   getPushTransform = (placement?: placementType) => {
     if (placement === 'left' || placement === 'right') {
       return `translateX(${placement === 'left' ? 180 : -180}px)`;
@@ -152,10 +138,10 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   }
 
   renderCloseIcon() {
-    const { closable, prefixCls } = this.props;
+    const { closable, prefixCls, onClose } = this.props;
     return (
       closable && (
-        <button onClick={this.close} aria-label="Close" className={`${prefixCls}-close`}>
+        <button onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
           <Icon type="close" />
         </button>
       )
@@ -214,11 +200,9 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
       closable,
       destroyOnClose,
       mask,
-      maskClosable,
       bodyStyle,
       title,
       push,
-      onClose,
       visible,
       // ConfigConsumerProps
       getPopupContainer,
@@ -250,7 +234,6 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
           {...offsetStyle}
           prefixCls={prefixCls}
           open={this.props.visible}
-          onMaskClick={this.onMaskClick}
           showMask={mask}
           placement={placement}
           style={this.getRcDrawerStyle()}

components/drawer/index.zh-CN.md

@@ -20,9 +20,9 @@ title: Drawer
 | --- | --- | --- | --- | --- |
 | closable | 是否显示右上角的关闭按钮 | boolean | true | 3.7.0 |
 | destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false | 3.7.0 |
-| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | 3.7.0 |
+| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' | 3.7.0 |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | 3.7.0 |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | 
-| mask | 是否展示遮罩 | Boolean | true |
+| mask | 是否展示遮罩 | Boolean | true | 3.7.0 |
 | maskStyle | 遮罩样式 | object | {} | 3.7.0 |
 | style | 可用于设置 Drawer 最外层容器的样式 | object | - | 3.7.0 |
 | bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - | 3.12.0 |

components/locale-provider/__tests__/index.test.js

@@ -145,7 +145,7 @@ const App = () => (
     <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
     <Calendar fullscreen={false} value={moment()} />
     <Table dataSource={[]} columns={columns} />
-    <Modal title="Locale Modal" visible>
+    <Modal title="Locale Modal" visible getContainer={false}>
       <p>Locale Modal</p>
     </Modal>
   </div>

components/modal/Modal.tsx

@@ -68,7 +68,7 @@ export interface ModalProps {
   maskTransitionName?: string;
   transitionName?: string;
   className?: string;
-  getContainer?: (instance: React.ReactInstance) => HTMLElement;
+  getContainer?: string | HTMLElement | getContainerFunc | false | null;
   zIndex?: number;
   bodyStyle?: React.CSSProperties;
   maskStyle?: React.CSSProperties;
@@ -78,6 +78,8 @@ export interface ModalProps {
   prefixCls?: string;
 }
 
+type getContainerFunc = () => HTMLElement;
+
 export interface ModalFuncProps {
   prefixCls?: string;
   className?: string;
@@ -106,7 +108,7 @@ export interface ModalFuncProps {
   maskStyle?: React.CSSProperties;
   type?: string;
   keyboard?: boolean;
-  getContainer?: (instance: React.ReactInstance) => HTMLElement;
+  getContainer?: string | HTMLElement | getContainerFunc | false | null;
   autoFocusButton?: null | 'ok' | 'cancel';
   transitionName?: string;
   maskTransitionName?: string;
@@ -221,7 +223,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
     return (
       <Dialog
         {...restProps}
-        getContainer={getContainer || getContextPopupContainer}
+        getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
         prefixCls={prefixCls}
         wrapClassName={classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName)}
         footer={footer === undefined ? defaultFooter : footer}

components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -2,91 +2,94 @@
 
 exports[`Modal render correctly 1`] = `
 <div>
-  <div />
   <div>
-    <div
+    <div>
-      class="ant-modal-mask fade-appear"
+      <div>
-    />
-    <div
-      class="ant-modal-wrap "
-      role="dialog"
-      tabindex="-1"
-    >
-      <div
-        class="ant-modal zoom-appear"
-        role="document"
-        style="width: 520px;"
-      >
         <div
-          aria-hidden="true"
+          class="ant-modal-mask fade-appear"
-          style="width: 0px; height: 0px; overflow: hidden;"
-          tabindex="0"
         />
         <div
-          class="ant-modal-content"
+          class="ant-modal-wrap "
+          role="dialog"
+          tabindex="-1"
         >
-          <button
+          <div
-            aria-label="Close"
+            class="ant-modal zoom-appear"
-            class="ant-modal-close"
+            role="document"
-            type="button"
+            style="width: 520px;"
           >
-            <span
+            <div
-              class="ant-modal-close-x"
+              aria-hidden="true"
+              style="width: 0px; height: 0px; overflow: hidden;"
+              tabindex="0"
+            />
+            <div
+              class="ant-modal-content"
             >
-              <i
+              <button
-                aria-label="icon: close"
+                aria-label="Close"
-                class="anticon anticon-close ant-modal-close-icon"
+                class="ant-modal-close"
+                type="button"
               >
-                <svg
+                <span
-                  aria-hidden="true"
+                  class="ant-modal-close-x"
-                  class=""
-                  data-icon="close"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
                 >
-                  <path
+                  <i
-                    d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                    aria-label="icon: close"
-                  />
+                    class="anticon anticon-close ant-modal-close-icon"
-                </svg>
+                  >
-              </i>
+                    <svg
-            </span>
+                      aria-hidden="true"
-          </button>
+                      class=""
-          <div
+                      data-icon="close"
-            class="ant-modal-body"
+                      fill="currentColor"
-          >
+                      focusable="false"
-            Here is content of Modal
+                      height="1em"
-          </div>
+                      viewBox="64 64 896 896"
-          <div
+                      width="1em"
-            class="ant-modal-footer"
+                    >
-          >
+                      <path
-            <div>
+                        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-              <button
+                      />
-                class="ant-btn"
+                    </svg>
-                type="button"
+                  </i>
-              >
-                <span>
-                  Cancel
                 </span>
               </button>
-              <button
+              <div
-                class="ant-btn ant-btn-primary"
+                class="ant-modal-body"
-                type="button"
               >
-                <span>
+                Here is content of Modal
-                  OK
+              </div>
-                </span>
+              <div
-              </button>
+                class="ant-modal-footer"
+              >
+                <div>
+                  <button
+                    class="ant-btn"
+                    type="button"
+                  >
+                    <span>
+                      Cancel
+                    </span>
+                  </button>
+                  <button
+                    class="ant-btn ant-btn-primary"
+                    type="button"
+                  >
+                    <span>
+                      OK
+                    </span>
+                  </button>
+                </div>
+              </div>
             </div>
+            <div
+              aria-hidden="true"
+              style="width: 0px; height: 0px; overflow: hidden;"
+              tabindex="0"
+            />
           </div>
         </div>
-        <div
-          aria-hidden="true"
-          style="width: 0px; height: 0px; overflow: hidden;"
-          tabindex="0"
-        />
       </div>
     </div>
   </div>
@@ -95,69 +98,72 @@ exports[`Modal render correctly 1`] = `
 
 exports[`Modal render without footer 1`] = `
 <div>
-  <div />
   <div>
-    <div
+    <div>
-      class="ant-modal-mask fade-appear"
+      <div>
-    />
-    <div
-      class="ant-modal-wrap "
-      role="dialog"
-      tabindex="-1"
-    >
-      <div
-        class="ant-modal zoom-appear"
-        role="document"
-        style="width: 520px;"
-      >
         <div
-          aria-hidden="true"
+          class="ant-modal-mask fade-appear"
-          style="width: 0px; height: 0px; overflow: hidden;"
-          tabindex="0"
         />
         <div
-          class="ant-modal-content"
+          class="ant-modal-wrap "
+          role="dialog"
+          tabindex="-1"
         >
-          <button
-            aria-label="Close"
-            class="ant-modal-close"
-            type="button"
-          >
-            <span
-              class="ant-modal-close-x"
-            >
-              <i
-                aria-label="icon: close"
-                class="anticon anticon-close ant-modal-close-icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="close"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                  />
-                </svg>
-              </i>
-            </span>
-          </button>
           <div
-            class="ant-modal-body"
+            class="ant-modal zoom-appear"
+            role="document"
+            style="width: 520px;"
           >
-            Here is content of Modal
+            <div
+              aria-hidden="true"
+              style="width: 0px; height: 0px; overflow: hidden;"
+              tabindex="0"
+            />
+            <div
+              class="ant-modal-content"
+            >
+              <button
+                aria-label="Close"
+                class="ant-modal-close"
+                type="button"
+              >
+                <span
+                  class="ant-modal-close-x"
+                >
+                  <i
+                    aria-label="icon: close"
+                    class="anticon anticon-close ant-modal-close-icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class=""
+                      data-icon="close"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                      />
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="ant-modal-body"
+              >
+                Here is content of Modal
+              </div>
+            </div>
+            <div
+              aria-hidden="true"
+              style="width: 0px; height: 0px; overflow: hidden;"
+              tabindex="0"
+            />
           </div>
         </div>
-        <div
-          aria-hidden="true"
-          style="width: 0px; height: 0px; overflow: hidden;"
-          tabindex="0"
-        />
       </div>
     </div>
   </div>

components/modal/index.en-US.md

@@ -23,7 +23,7 @@ When requiring users to interact with the application, but without jumping to a
 | destroyOnClose | Whether to unmount child components on onClose | boolean | false | 3.1.0 |
 | footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons |  |
 | forceRender | Force render Modal | boolean | false | 3.12.0 |
-| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body |  |
+| getContainer | Return the mount node for Modal | HTMLElement \| `() => HTMLElement` \| Selectors \| false | document.body | 3.20.2 |
 | 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 | {} |  |

components/modal/index.zh-CN.md

@@ -26,7 +26,7 @@ title: Modal
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | 3.1.0 |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |  |
 | forceRender | 强制渲染 Modal | boolean | false | 3.12.0 |
-| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |  |
+| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | document.body | 3.20.2 |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true | 3.4.2 |
 | mask | 是否展示遮罩 | Boolean | true |  |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |

package.json

@@ -63,8 +63,8 @@
     "rc-cascader": "~0.17.4",
     "rc-checkbox": "~2.1.6",
     "rc-collapse": "~1.11.3",
-    "rc-dialog": "~7.4.0",
+    "rc-dialog": "7.5.1",
-    "rc-drawer": "~1.10.1",
+    "rc-drawer": "~2.0.0",
     "rc-dropdown": "~2.4.1",
     "rc-editor-mention": "^1.1.13",
     "rc-form": "^2.4.5",