diff --git a/components/drawer/DrawerPanel.tsx b/components/drawer/DrawerPanel.tsx index 31ccb78e338d..92f72b6b4ef5 100644 --- a/components/drawer/DrawerPanel.tsx +++ b/components/drawer/DrawerPanel.tsx @@ -5,6 +5,23 @@ import type { DrawerProps as RCDrawerProps } from 'rc-drawer'; import useClosable, { pickClosable } from '../_util/hooks/useClosable'; import type { ClosableType } from '../_util/hooks/useClosable'; 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 = ({ children, spinProps }) => { + if (!spinProps) { + return children; + } + return ( + + {children} + + ); +}; export interface DrawerClassNames extends NonNullable { header?: string; @@ -38,6 +55,7 @@ export interface DrawerPanelProps { children?: React.ReactNode; classNames?: DrawerClassNames; styles?: DrawerStyles; + loading?: boolean | Omit; /** @deprecated Please use `styles.header` instead */ headerStyle?: React.CSSProperties; @@ -59,6 +77,7 @@ const DrawerPanel: React.FC = (props) => { title, footer, extra, + loading, onClose, headerStyle, bodyStyle, @@ -87,6 +106,19 @@ const DrawerPanel: React.FC = (props) => { }, ); + // >>>>>>>>> Spinning + let spinProps: SpinProps | undefined; + if (typeof loading === 'boolean') { + spinProps = { + spinning: loading, + }; + } else if (typeof loading === 'object') { + spinProps = { + spinning: true, + ...loading, + }; + } + const headerNode = React.useMemo(() => { if (!title && !mergedClosable) { return null; @@ -140,7 +172,7 @@ const DrawerPanel: React.FC = (props) => { }, [footer, footerStyle, prefixCls]); return ( - <> + {headerNode}
= (props) => { {children}
{footerNode} - + ); }; diff --git a/components/drawer/__tests__/Drawer.test.tsx b/components/drawer/__tests__/Drawer.test.tsx index b81c530ba471..385a37641860 100644 --- a/components/drawer/__tests__/Drawer.test.tsx +++ b/components/drawer/__tests__/Drawer.test.tsx @@ -179,6 +179,30 @@ describe('Drawer', () => { expect(baseElement.querySelectorAll('button.forceRender').length).toBe(1); }); + describe('Drawer spinner', () => { + it('have a spinner', () => { + const { container: wrapper } = render( + + Here is content of Drawer + , + ); + + triggerMotion(); + expect(wrapper.firstChild).toMatchSnapshot(); + }); + it('have a spinner with custom text', () => { + const tip = 'Loading...'; + const { getByText } = render( + + Here is content of Drawer + , + ); + + triggerMotion(); + expect(getByText(tip)).toBeInTheDocument(); + }); + }); + it('support closeIcon', () => { const { container: wrapper } = render( close} width={400} getContainer={false}> diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 3593c5e35d00..907696aa21be 100644 --- a/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -1,5 +1,220 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Drawer Drawer spinner have a spinner 1`] = ` +
+
+