fix:useMessage() should use getPopupContainer from <ConfigProvider /> a…

…nt-design#31841
DaoxingHuang · Aug 27, 2021 · a82054b · a82054b
1 parent 3cc2050
commit a82054b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/components/message/hooks/useMessage.tsx b/components/message/hooks/useMessage.tsx
@@ -24,6 +24,7 @@ export default function createUseMessage(
   const useMessage = (): [MessageInstance, React.ReactElement] => {
     // We can only get content by render
     let getPrefixCls: ConfigConsumerProps['getPrefixCls'];
+    let getPopupContainer: ConfigConsumerProps['getPopupContainer'];
 
     // We create a proxy to handle delay created instance
     let innerInstance: RCNotificationInstance | null = null;
@@ -52,6 +53,7 @@ export default function createUseMessage(
             ...args,
             prefixCls: mergedPrefixCls,
             rootPrefixCls,
+            getPopupContainer,
           },
           ({ prefixCls, instance }) => {
             innerInstance = instance;
@@ -83,7 +85,7 @@ export default function createUseMessage(
       hookApiRef.current,
       <ConfigConsumer key="holder">
         {(context: ConfigConsumerProps) => {
-          ({ getPrefixCls } = context);
+          ({ getPrefixCls, getPopupContainer } = context);
           return holder;
         }}
       </ConfigConsumer>,

diff --git a/components/message/index.tsx b/components/message/index.tsx
@@ -77,7 +77,7 @@ function getRCNotificationInstance(
     instance: RCNotificationInstance;
   }) => void,
 ) {
-  const { prefixCls: customizePrefixCls } = args;
+  const { prefixCls: customizePrefixCls, getPopupContainer: getContextPopupContainer } = args;
   const { getPrefixCls, getRootPrefixCls } = globalConfig();
   const prefixCls = getPrefixCls('message', customizePrefixCls || localPrefixCls);
   const rootPrefixCls = getRootPrefixCls(args.rootPrefixCls, prefixCls);
@@ -91,7 +91,7 @@ function getRCNotificationInstance(
     prefixCls,
     transitionName: hasTransitionName ? transitionName : `${rootPrefixCls}-${transitionName}`,
     style: { top: defaultTop }, // 覆盖原来的样式
-    getContainer,
+    getContainer: getContainer || getContextPopupContainer,
     maxCount,
   };
 
@@ -131,6 +131,7 @@ export interface ArgsProps {
   type: NoticeType;
   prefixCls?: string;
   rootPrefixCls?: string;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   onClose?: () => void;
   icon?: React.ReactNode;
   key?: string | number;