fix: loading replace drawer content while true

ant-design · Apr 25, 2024 · 1f7693d · 1f7693d
1 parent 36187ac
commit 1f7693d
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 319 deletions.
diff --git a/components/drawer/DrawerPanel.tsx b/components/drawer/DrawerPanel.tsx
@@ -8,21 +8,6 @@ import { ConfigContext } from '../config-provider';
 import Spin from '../spin';
 import type { SpinProps } from '../spin';
 
-interface PanelNodeProps {
-  children: React.ReactNode;
-  spinProps?: SpinProps;
-}
-const PanelNode: React.FC<PanelNodeProps> = ({ children, spinProps }) => {
-  if (!spinProps) {
-    return children;
-  }
-  return (
-    <Spin spinning={false} {...spinProps}>
-      {children}
-    </Spin>
-  );
-};
-
 export interface DrawerClassNames extends NonNullable<RCDrawerProps['classNames']> {
   header?: string;
   body?: string;
@@ -55,7 +40,7 @@ export interface DrawerPanelProps {
   children?: React.ReactNode;
   classNames?: DrawerClassNames;
   styles?: DrawerStyles;
-  loading?: boolean | Omit<SpinProps, 'fullscreen'>;
+  loading?: boolean | Omit<SpinProps, 'fullscreen' | 'tip'>;
 
   /** @deprecated Please use `styles.header` instead */
   headerStyle?: React.CSSProperties;
@@ -171,8 +156,23 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
     );
   }, [footer, footerStyle, prefixCls]);
 
+  if (spinProps?.spinning) {
+    return (
+      <Spin
+        spinning={false}
+        style={{
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        {...spinProps}
+      />
+    );
+  }
+
   return (
-    <PanelNode spinProps={spinProps}>
+    <>
       {headerNode}
       <div
         className={classNames(
@@ -189,7 +189,7 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
         {children}
       </div>
       {footerNode}
-    </PanelNode>
+    </>
   );
 };
 

diff --git a/components/drawer/__tests__/Drawer.test.tsx b/components/drawer/__tests__/Drawer.test.tsx
@@ -179,7 +179,7 @@ describe('Drawer', () => {
     expect(baseElement.querySelectorAll('button.forceRender').length).toBe(1);
   });
 
-  describe('Drawer spinner', () => {
+  describe('Drawer loading', () => {
     it('have a spinner', () => {
       const { container: wrapper } = render(
         <Drawer open loading getContainer={false}>
@@ -190,17 +190,6 @@ describe('Drawer', () => {
       triggerMotion();
       expect(wrapper.firstChild).toMatchSnapshot();
     });
-    it('have a spinner with custom text', () => {
-      const tip = 'Loading...';
-      const { getByText } = render(
-        <Drawer open loading={{ tip }} getContainer={false}>
-          Here is content of Drawer
-        </Drawer>,
-      );
-
-      triggerMotion();
-      expect(getByText(tip)).toBeInTheDocument();
-    });
   });
 
   it('support closeIcon', () => {