feat: support drawerRender (#471)

* feat: support drawerRender

* feat: test

* feat: test

* feat: test

* feat: review

Author: crazyair

.gitignore

@@ -38,4 +38,5 @@ storybook
 
 # dumi
 .dumi/tmp
-.dumi/tmp-production
+.dumi/tmp-production
+pnpm-lock.yaml

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>
         );
       }}

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();
+  });
 });