feat: support drawerRender

.gitignore

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

docs/demo/drawerRender.md

@@ -0,0 +1,8 @@
+---
+title: drawerRender
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/drawerRender.tsx"></code>

docs/examples/drawerRender.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from 'react';
+import Drawer from 'rc-drawer';
+import motionProps from './motion';
+
+const Demo = () => {
+  const [open, setOpen] = useState(false);
+  const onTouchEnd = () => {
+    setOpen(false);
+  };
+  const onSwitch = () => {
+    setOpen(c => !c);
+  };
+  return (
+    <div>
+      <Drawer
+        open={open}
+        onClose={onTouchEnd}
+        afterOpenChange={(c: boolean) => {
+          console.log('transitionEnd: ', c);
+        }}
+        placement="right"
+        // width={400}
+        width="60%"
+        // Motion
+        drawerRender={dom => (
+          <div id="test" style={{ height: '100%' }}>
+            {dom}
+          </div>
+        )}
+      >
+        content
+      </Drawer>
+      <div>
+        <button onClick={onSwitch}>打开</button>
+      </div>
+    </div>
+  );
+};
+export default Demo;

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('#id')).toBeTruthy();
+    unmount();
+  });
 });

tsconfig.json

@@ -13,5 +13,5 @@
       "rc-drawer": ["src/index.ts"]
     }
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"]
+  "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
 }