feat: support drawerRender (#471)

* feat: support drawerRender * feat: test * feat: test * feat: test * feat: review
react-component · May 30, 2024 · 22618e8 · 22618e8
1 parent 469280c
commit 22618e8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -38,4 +38,5 @@ storybook
 
 # dumi
 .dumi/tmp
-.dumi/tmp-production
+.dumi/tmp-production
+pnpm-lock.yaml
diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
@@ -74,6 +74,7 @@ export interface DrawerPopupProps
 
   // styles
   styles?: DrawerStyles;
+  drawerRender?: (node: React.ReactNode) => React.ReactNode;
 }
 
 function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
@@ -121,6 +122,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     onKeyUp,
 
     styles,
+    drawerRender,
   } = props;
 
   // ================================ Refs ================================
@@ -291,6 +293,22 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
       leavedClassName={`${prefixCls}-content-wrapper-hidden`}
     >
       {({ className: motionClassName, style: motionStyle }, motionRef) => {
+        const content = (
+          <DrawerPanel
+            id={id}
+            containerRef={motionRef}
+            prefixCls={prefixCls}
+            className={classNames(className, drawerClassNames?.content)}
+            style={{
+              ...style,
+              ...styles?.content,
+            }}
+            {...pickAttrs(props, { aria: true })}
+            {...eventHandlers}
+          >
+            {children}
+          </DrawerPanel>
+        );
         return (
           <div
             className={classNames(
@@ -305,20 +323,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
             }}
             {...pickAttrs(props, { data: true })}
           >
-            <DrawerPanel
-              id={id}
-              containerRef={motionRef}
-              prefixCls={prefixCls}
-              className={classNames(className, drawerClassNames?.content)}
-              style={{
-                ...style,
-                ...styles?.content,
-              }}
-              {...pickAttrs(props, { aria: true })}
-              {...eventHandlers}
-            >
-              {children}
-            </DrawerPanel>
+            {drawerRender ? drawerRender(content) : content}
           </div>
         );
       }}

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -467,4 +467,11 @@ describe('rc-drawer-menu', () => {
     );
     unmount();
   });
+  it('should support drawerRender', () => {
+    const { unmount } = render(
+      <Drawer drawerRender={dom => <div id="test">{dom}</div>} open />,
+    );
+    expect(document.querySelector('#test')).toBeTruthy();
+    unmount();
+  });
 });