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

…>… (#31939)

* fix:useMessage() should use getPopupContainer from <ConfigProvider /> #31841

* fix: useMessage() should use getPopupContainer from <ConfigProvider /> #31841

* add test case for useMessage hook

* restore some changes

* try to restore files agains

* restore and keep the same as upstream master

* restore files

* restore some definition

components/message/__tests__/hooks.test.js

@@ -192,4 +192,40 @@ describe('message.hooks', () => {
 
     mount(<Demo />);
   });
+
+  it("should  use ConfigProvider's getPopupContainer as message container", () => {
+    const containerId = 'container';
+    const getPopupContainer = () => {
+      const div = document.createElement('div');
+      div.id = containerId;
+      document.body.appendChild(div);
+      return div;
+    };
+    const Demo = () => {
+      const [api, holder] = message.useMessage();
+      return (
+        <ConfigProvider getPopupContainer={getPopupContainer} prefixCls="my-test">
+          {holder}
+          <button
+            type="button"
+            onClick={() => {
+              api.success({
+                content: <span className="hook-content">happy</span>,
+                duration: 0,
+              });
+            }}
+          />
+        </ConfigProvider>
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+
+    wrapper.find('button').simulate('click');
+    expect(document.querySelectorAll('.my-test-message-notice').length).toBe(1);
+    expect(document.querySelectorAll('.anticon-check-circle').length).toBe(1);
+    expect(document.querySelector('.hook-content').innerHTML).toEqual('happy');
+    expect(document.querySelectorAll(`#${containerId}`).length).toBe(1);
+    expect(wrapper.find(`#${containerId}`).children.length).toBe(1);
+  });
 });

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>,

components/message/index.tsx

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