update modal and drawer protal

2025-08-05 23:46:28 +08:00 · 2019-07-11 21:22:27 +08:00 · 2019-07-11 21:22:27 +08:00 · 786bde9ca1
commit 786bde9ca1
parent 491e38838b
10 changed files with 149 additions and 158 deletions
--- a/components/config-provider/tests/components.test.js
+++ b/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>
--- a/components/drawer/index.en-US.md
+++ b/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 |
--- a/components/drawer/index.tsx
+++ b/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()}
--- a/components/drawer/index.zh-CN.md
+++ b/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 |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | 3.7.0 |
-| mask | 是否展示遮罩 | Boolean | true |
+| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' | 3.7.0 |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | 
+| mask | 是否展示遮罩 | Boolean | true | 3.7.0 |
 | maskStyle | 遮罩样式 | object | {} | 3.7.0 |
 | style | 可用于设置 Drawer 最外层容器的样式 | object | - | 3.7.0 |
 | bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - | 3.12.0 |
--- a/components/locale-provider/tests/index.test.js
+++ b/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>
--- a/components/modal/Modal.tsx
+++ b/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}
--- a/components/modal/tests/snapshots/Modal.test.js.snap
+++ b/components/modal/tests/snapshots/Modal.test.js.snap
@ -2,91 +2,94 @@

 exports[`Modal render correctly 1`] = `
 <div>
-  <div />
  <div>
-    <div
-      class="ant-modal-mask fade-appear"
-    />
-    <div
-      class="ant-modal-wrap "
-      role="dialog"
-      tabindex="-1"
-    >
-      <div
-        class="ant-modal zoom-appear"
-        role="document"
-        style="width: 520px;"
-      >
+    <div>
+      <div>
        <div
-          aria-hidden="true"
-          style="width: 0px; height: 0px; overflow: hidden;"
-          tabindex="0"
+          class="ant-modal-mask fade-appear"
        />
        <div
-          class="ant-modal-content"
+          class="ant-modal-wrap "
+          role="dialog"
+          tabindex="-1"
        >
-          <button
-            aria-label="Close"
-            class="ant-modal-close"
-            type="button"
+          <div
+            class="ant-modal zoom-appear"
+            role="document"
+            style="width: 520px;"
          >
-            <span
-              class="ant-modal-close-x"
+            <div
+              aria-hidden="true"
+              style="width: 0px; height: 0px; overflow: hidden;"
+              tabindex="0"
+            />
+            <div
+              class="ant-modal-content"
            >
-              <i
-                aria-label="icon: close"
-                class="anticon anticon-close ant-modal-close-icon"
+              <button
+                aria-label="Close"
+                class="ant-modal-close"
+                type="button"
              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="close"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  class="ant-modal-close-x"
                >
-                  <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
-            class="ant-modal-footer"
-          >
-            <div>
-              <button
-                class="ant-btn"
-                type="button"
-              >
-                <span>
-                  Cancel
+                  <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>
-              <button
-                class="ant-btn ant-btn-primary"
-                type="button"
+              <div
+                class="ant-modal-body"
              >
-                <span>
-                  OK
-                </span>
-              </button>
+                Here is content of Modal
+              </div>
+              <div
+                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
-      class="ant-modal-mask fade-appear"
-    />
-    <div
-      class="ant-modal-wrap "
-      role="dialog"
-      tabindex="-1"
-    >
-      <div
-        class="ant-modal zoom-appear"
-        role="document"
-        style="width: 520px;"
-      >
+    <div>
+      <div>
        <div
-          aria-hidden="true"
-          style="width: 0px; height: 0px; overflow: hidden;"
-          tabindex="0"
+          class="ant-modal-mask fade-appear"
        />
        <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>
--- a/components/modal/index.en-US.md
+++ b/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 | {} |  |
--- a/components/modal/index.zh-CN.md
+++ b/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 |  |
--- a/package.json
+++ b/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-drawer": "~1.10.1",
+    "rc-dialog": "7.5.1",
+    "rc-drawer": "~2.0.0",
    "rc-dropdown": "~2.4.1",
    "rc-editor-mention": "^1.1.13",
    "rc-form": "^2.4.5",