feat: drawer loading prop

README.md

@@ -51,6 +51,7 @@ ReactDom.render(
 | height             | string \| number                                                            | null                                   | drawer content wrapper height, drawer level transition height                 |
 | open               | boolean                                                                     | false                                  | open or close menu                                                            |
 | defaultOpen        | boolean                                                                     | false                                  | default open menu                                                             |
+| loading            | HTMLElement \| null                                                         | null                                   | loading element                                                               |
 | placement          | string                                                                      | `left`                                 | `left` `top` `right` `bottom`                                                 |
 | level              | string \| array                                                             | `all`                                  | With the drawer level element. `all`/ null / className / id / tagName / array |
 | levelMove          | number \| array \| func                                                     | null                                   | level move value. default is drawer width                                     |

docs/demo/loading.md

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

docs/examples/loading.tsx

@@ -0,0 +1,39 @@
+/* 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}
+        // defaultOpen
+        onClose={onTouchEnd}
+        afterOpenChange={(c: boolean) => {
+          console.log('transitionEnd: ', c);
+        }}
+        placement="right"
+        // width={400}
+        width="60%"
+        //loading
+        loading={<div>Loading...</div>}
+        // Motion
+        {...motionProps}
+      >
+        content
+      </Drawer>
+      <div>
+        <button onClick={onSwitch}>打开</button>
+      </div>
+    </div>
+  );
+};
+export default Demo;

src/Drawer.tsx

@@ -26,6 +26,7 @@ export interface DrawerProps
   panelRef?: React.Ref<HTMLDivElement>;
   classNames?: DrawerClassNames;
   styles?: DrawerStyles;
+  loading?: React.ReactNode;
 }
 
 const Drawer: React.FC<DrawerProps> = props => {

src/DrawerPopup.tsx

@@ -38,6 +38,7 @@ export interface DrawerPopupProps
   forceRender?: boolean;
   autoFocus?: boolean;
   keyboard?: boolean;
+  loading?: React.ReactNode;
 
   // Root
   rootClassName?: string;
@@ -86,6 +87,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     forceRender,
     autoFocus,
     keyboard,
+    loading,
 
     // classNames
     classNames: drawerClassNames,
@@ -317,7 +319,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
               {...pickAttrs(props, { aria: true })}
               {...eventHandlers}
             >
-              {children}
+              {loading ? loading : children}
             </DrawerPanel>
           </div>
         );