fix: invalid useApp warning (ant-design#50829)

* fix: invalid warning * docs: back of demo
Rain120 · Sep 12, 2024 · 22fb6f6 · 22fb6f6
1 parent 7bf6d60
commit 22fb6f6
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx
@@ -1,8 +1,11 @@
 import type { PropsWithChildren } from 'react';
 import React, { useEffect } from 'react';
 import { render } from '@testing-library/react';
-import type { ImageProps, MenuProps } from 'antd';
+
+import { waitFakeTimer } from '../../../tests/utils';
+import type { ImageProps, MenuProps } from '../../index';
 import {
+  App,
   AutoComplete,
   Cascader,
   ColorPicker,
@@ -18,11 +21,10 @@ import {
   Tooltip,
   Tour,
   TreeSelect,
-} from 'antd';
-
-import { waitFakeTimer } from '../../../tests/utils';
+} from '../../index';
 import type { ZIndexConsumer, ZIndexContainer } from '../hooks/useZIndex';
 import { consumerBaseZIndexOffset, containerBaseZIndexOffset, useZIndex } from '../hooks/useZIndex';
+import { resetWarned } from '../warning';
 import zIndexContext from '../zindexContext';
 
 const WrapWithProvider: React.FC<PropsWithChildren<{ containerType: ZIndexContainer }>> = ({
@@ -229,6 +231,7 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st
 
 describe('Test useZIndex hooks', () => {
   beforeEach(() => {
+    resetWarned();
     jest.useFakeTimers();
   });
   afterEach(() => {
@@ -250,7 +253,7 @@ describe('Test useZIndex hooks', () => {
             return <div>Child</div>;
           };
 
-          const App = () => (
+          const Demo = () => (
             <WrapWithProvider containerType={containerKey as ZIndexContainer}>
               <WrapWithProvider containerType={containerKey as ZIndexContainer}>
                 <WrapWithProvider containerType={containerKey as ZIndexContainer}>
@@ -259,7 +262,7 @@ describe('Test useZIndex hooks', () => {
               </WrapWithProvider>
             </WrapWithProvider>
           );
-          render(<App />);
+          render(<Demo />);
           expect(fn).toHaveBeenLastCalledWith(
             1000 +
               containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
@@ -271,7 +274,7 @@ describe('Test useZIndex hooks', () => {
           const Container = containerComponent[containerKey as ZIndexContainer];
           const Consumer = consumerComponent[key as ZIndexConsumer];
 
-          const App = () => (
+          const Demo = () => (
             <>
               <Consumer rootClassName="consumer1" />
               <Container rootClassName="container1">
@@ -283,7 +286,7 @@ describe('Test useZIndex hooks', () => {
             </>
           );
 
-          const { unmount } = render(<App />);
+          const { unmount } = render(<Demo />);
 
           await waitFakeTimer(1000);
 
@@ -409,5 +412,31 @@ describe('Test useZIndex hooks', () => {
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Tooltip] `zIndex` is over design token `zIndexPopupBase` too much. It may cause unexpected override.',
     );
+
+    errorSpy.mockRestore();
+  });
+
+  it('not warning for static func', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const Demo = () => {
+      const { modal } = App.useApp();
+
+      React.useEffect(() => {
+        modal.confirm({ content: <Select open /> });
+      }, []);
+
+      return null;
+    };
+
+    render(
+      <App>
+        <Demo />
+      </App>,
+    );
+
+    expect(errorSpy).not.toHaveBeenCalled();
+
+    errorSpy.mockRestore();
   });
 });
diff --git a/components/_util/hooks/useZIndex.ts b/components/_util/hooks/useZIndex.ts
@@ -18,6 +18,13 @@ const CONTAINER_OFFSET_MAX_COUNT = 10;
 
 export const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;
 
+/**
+ * Static function will default be the `CONTAINER_MAX_OFFSET`.
+ * But it still may have children component like Select, Dropdown.
+ * So the warning zIndex should exceed the `CONTAINER_MAX_OFFSET`.
+ */
+const CONTAINER_MAX_OFFSET_WITH_CHILDREN = CONTAINER_MAX_OFFSET + CONTAINER_OFFSET;
+
 export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
   Modal: CONTAINER_OFFSET,
   Drawer: CONTAINER_OFFSET,
@@ -70,7 +77,7 @@ export function useZIndex(
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning(componentType);
 
-    const maxZIndex = token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
+    const maxZIndex = token.zIndexPopupBase + CONTAINER_MAX_OFFSET_WITH_CHILDREN;
     const currentZIndex = result[0] || 0;
 
     warning(