feat(layout): Add drawerProps for SettingDrawer (#8953)

junyiz · Junyi · web-flow · commit 2e7e5adc0c33 · 2025-01-06T17:39:58.000+08:00
* feat(layout): Add drawerExtra makes settingDrawer support extra

* fix: drawerExtra -&gt; drawerProps

* test: Add test case for SettingDrawer

---------

Co-authored-by: Junyi &lt;zjy220124@alibaba-inc.com&gt;
diff --git a/packages/layout/src/components/SettingDrawer/index.tsx b/packages/layout/src/components/SettingDrawer/index.tsx
@@ -17,6 +17,7 @@ import {
   Button,
   Divider,
   Drawer,
+  DrawerProps,
   List,
   Switch,
   message,
@@ -79,6 +80,7 @@ export type SettingDrawerProps = {
   pathname?: string;
   disableUrlParams?: boolean;
   themeOnly?: boolean;
+  drawerProps?: DrawerProps;
 };
 
 export type SettingDrawerState = {
@@ -219,6 +221,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
     pathname = window.location.pathname,
     disableUrlParams = true,
     themeOnly,
+    drawerProps,
   } = props;
   const firstRender = useRef<boolean>(true);
 
@@ -386,6 +389,7 @@ export const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
         style={{
           zIndex: 999,
         }}
+        {...drawerProps}
       >
         <div className={`${baseClassName}-drawer-content ${hashId}`.trim()}>
           <Body
diff --git a/tests/layout/settingDrawer.test.tsx b/tests/layout/settingDrawer.test.tsx
@@ -496,4 +496,33 @@ describe('settingDrawer.test', () => {
 
     window.localStorage.setItem('umi_locale', 'zh-CN');
   });
+
+  it('🌺 drawerProps = undefined', async () => {
+    const html = render(
+      <SettingDrawer
+        disableUrlParams
+        collapse
+        getContainer={false}
+        drawerProps={undefined as any}
+      />,
+    );
+
+    expect(html.asFragment()).toMatchSnapshot();
+  });
+
+  it('🌺 drawerProps has extra', async () => {
+    const { container } = render(
+      <SettingDrawer
+        disableUrlParams
+        collapse
+        getContainer={false}
+        drawerProps={{
+          closable: true,
+          extra: 'extra'
+        }}
+      />,
+    );
+
+    expect(container.querySelectorAll('div.ant-drawer-extra')[0].innerHTML).toEqual('extra');
+  });
 });
