feat: config-provider getPopupContainer add dialogContext

Author: tangjinzhou

components/config-provider/index.en-US.md

@@ -3,9 +3,24 @@
 This component provides a configuration to all Vue components underneath itself via the [provide / inject](https://vuejs.org/v2/api/#provide-inject), In the render tree all components will have access to the provided config.
 
 ```html
-<a-config-provider :getPopupContainer="getPopupContainer">
-  <app />
-</a-config-provider>
+<template>
+  <a-config-provider :getPopupContainer="getPopupContainer">
+    <app />
+  </a-config-provider>
+</template>
+<script>
+  export default {
+    methods: {
+      getPopupContainer(el, dialogContext) {
+        if(dialogContext) {
+          return dialogContext.$refs.wrap;
+        } else {
+          return document.body;
+        }
+      },
+    },
+  };
+</script>
 ```
 
 ### Content Security Policy
@@ -25,5 +40,5 @@ Some component use dynamic style to support wave effect. You can config `csp` pr
 | autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | true |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |
 | renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | slot-scope \| Function(componentName: string): ReactNode | - |
-| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` |
+| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode, dialogContext) | `() => document.body` |
 | prefixCls | set prefix class | string | ant |

components/config-provider/index.zh-CN.md

@@ -3,9 +3,24 @@
 ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provide-inject) 特性，只需在应用外围包裹一次即可全局生效。
 
 ```html
-<a-config-provider :getPopupContainer="getPopupContainer">
-  <app />
-</a-config-provider>
+<template>
+  <a-config-provider :getPopupContainer="getPopupContainer">
+    <app />
+  </a-config-provider>
+</template>
+<script>
+  export default {
+    methods: {
+      getPopupContainer(el, dialogContext) {
+        if(dialogContext) {
+          return dialogContext.$refs.wrap;
+        } else {
+          return document.body;
+        }
+      },
+    },
+  };
+</script>
 ```
 
 ### Content Security Policy
@@ -25,5 +40,5 @@ ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provi
 | autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |
 | renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | slot-scope \| Function(componentName: string): VNode | - |
-| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body |
+| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode, dialogContext) | () => document.body |
 | prefixCls | 设置统一样式前缀 | string | ant |

components/vc-dialog/Dialog.jsx

@@ -64,6 +64,12 @@ export default {
     };
   },
 
+  provide() {
+    return {
+      dialogContext: this,
+    };
+  },
+
   watch: {
     visible(val) {
       if (val) {

components/vc-trigger/Trigger.jsx

@@ -78,6 +78,7 @@ export default {
   inject: {
     vcTriggerContext: { default: () => ({}) },
     savePopupRef: { default: () => noop },
+    dialogContext: { default: () => null },
   },
   data() {
     const props = this.$props;
@@ -420,7 +421,7 @@ export default {
     },
 
     getContainer() {
-      const { $props: props } = this;
+      const { $props: props, dialogContext } = this;
       const popupContainer = document.createElement('div');
       // Make sure default popup container will never cause scrollbar appearing
       // https://github.com/react-component/trigger/issues/41
@@ -429,7 +430,7 @@ export default {
       popupContainer.style.left = '0';
       popupContainer.style.width = '100%';
       const mountNode = props.getPopupContainer
-        ? props.getPopupContainer(this.$el)
+        ? props.getPopupContainer(this.$el, dialogContext)
         : props.getDocument().body;
       mountNode.appendChild(popupContainer);
       this.popupContainer = popupContainer;

types/config-provider.d.ts

@@ -1,4 +1,5 @@
 import { AntdComponent } from './component';
+import Vue from 'vue';
 
 import { Locale } from './locale-provider';
 
@@ -7,7 +8,7 @@ export interface CSPConfig {
 }
 
 export declare class ConfigProvider extends AntdComponent {
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement, dialogContext?: Vue | null) => HTMLElement;
   getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
   renderEmpty: Function;
   csp?: CSPConfig;