feat: Support body props

.dumirc.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   mfsu: false,
   favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
   themeConfig: {
-    name: 'Image',
+    name: 'Drawer',
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
 });

README.md

@@ -59,12 +59,17 @@ ReactDom.render(
 | showMask    |  boolean  | true | mask is show |
 | maskClosable | boolean  | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
 | maskStyle | CSSProperties | null | mask style |
-| onChange  | func | null | change callback(open) |
 | afterVisibleChange  | func | null | transition end callback(open) |
 | onClose | func | null | close click function |
-| keyboard | Boolean | true |  Whether support press esc to close |
+| keyboard | boolean | true |  Whether support press esc to close |
 | contentWrapperStyle | CSSProperties | null |  content wrapper style |
-| autoFocus | Boolean | true |  Whether focusing on the drawer after it opened |
+| autoFocus | boolean | true |  Whether focusing on the drawer after it opened |
+| onMouseEnter | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse enter drawer panel |
+| onMouseOver | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse over drawer panel |
+| onMouseLeave | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse leave drawer panel |
+| onClick | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse click drawer panel |
+| onKeyDown | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keydown on drawer panel |
+| onKeyUp | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keyup on drawer panel |
 
 > 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`.
 

docs/changelog.md

@@ -1,3 +1,3 @@
 # ChangeLog
 
-<embed src="../ChangeLog.md"></embed>
+<embed src="../CHANGELOG.md"></embed>

docs/demo/bodyProps.md

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

docs/examples/bodyProps.tsx

@@ -0,0 +1,43 @@
+/* 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%"
+        // Motion
+        {...motionProps}
+        onMouseEnter={() => {
+          console.log('mouseEnter');
+        }}
+        onMouseLeave={() => {
+          console.log('mouseLeave');
+        }}
+      >
+        content
+      </Drawer>
+      <div>
+        <button onClick={onSwitch}>打开</button>
+      </div>
+    </div>
+  );
+};
+export default Demo;

docs/examples/change-remove.tsx

@@ -14,97 +14,93 @@ import motionProps from './motion';
 
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
-class Demo extends React.Component<any, { show: boolean }> {
-  public state = {
-    show: true,
-  };
-  public componentDidMount() {
+
+function Demo() {
+  const [show, setShow] = React.useState(true);
+  React.useEffect(() => {
     setTimeout(() => {
-      this.setState({
-        show: false,
-      });
+      setShow(false);
     }, 2000);
-  }
-  public render() {
-    return (
-      <div>
-        {this.state.show && (
-          <Drawer
-            wrapperClassName="drawer-wrapper"
-            width="20vw"
-            open
-            {...motionProps}
+  }, []);
+  return (
+    <div>
+      {show && (
+        <Drawer
+          rootClassName="drawer-wrapper"
+          width="20vw"
+          open
+          {...motionProps}
+        >
+          <Menu
+            defaultSelectedKeys={['1']}
+            defaultOpenKeys={['sub1']}
+            mode="inline"
           >
-            <Menu
-              defaultSelectedKeys={['1']}
-              defaultOpenKeys={['sub1']}
-              mode="inline"
+            <SubMenu
+              key="sub1"
+              title={
+                <span>
+                  <MailOutlined />
+                  <span>Navigation One</span>
+                </span>
+              }
             >
-              <SubMenu
-                key="sub1"
-                title={
-                  <span>
-                    <MailOutlined />
-                    <span>Navigation One</span>
-                  </span>
-                }
-              >
-                <MenuItemGroup key="g1" title="Item 1">
-                  <Menu.Item key="1">Option 1</Menu.Item>
-                  <Menu.Item key="2">Option 2</Menu.Item>
-                </MenuItemGroup>
-                <MenuItemGroup key="g2" title="Item 2">
-                  <Menu.Item key="3">Option 3</Menu.Item>
-                  <Menu.Item key="4">Option 4</Menu.Item>
-                </MenuItemGroup>
-              </SubMenu>
-              <SubMenu
-                key="sub2"
-                title={
-                  <span>
-                    <AppstoreOutlined />
-                    <span>Navigation Two</span>
-                  </span>
-                }
-              >
-                <Menu.Item key="5">Option 5</Menu.Item>
-                <Menu.Item key="6">Option 6</Menu.Item>
-                <SubMenu key="sub3" title="Submenu">
-                  <Menu.Item key="7">Option 7</Menu.Item>
-                  <Menu.Item key="8">Option 8</Menu.Item>
-                </SubMenu>
-              </SubMenu>
-              <SubMenu
-                key="sub4"
-                title={
-                  <span>
-                    <SettingOutlined />
-                    <span>Navigation Three</span>
-                  </span>
-                }
-              >
-                <Menu.Item key="9">Option 9</Menu.Item>
-                <Menu.Item key="10">Option 10</Menu.Item>
-                <Menu.Item key="11">Option 11</Menu.Item>
-                <Menu.Item key="12">Option 12</Menu.Item>
+              <MenuItemGroup key="g1" title="Item 1">
+                <Menu.Item key="1">Option 1</Menu.Item>
+                <Menu.Item key="2">Option 2</Menu.Item>
+              </MenuItemGroup>
+              <MenuItemGroup key="g2" title="Item 2">
+                <Menu.Item key="3">Option 3</Menu.Item>
+                <Menu.Item key="4">Option 4</Menu.Item>
+              </MenuItemGroup>
+            </SubMenu>
+            <SubMenu
+              key="sub2"
+              title={
+                <span>
+                  <AppstoreOutlined />
+                  <span>Navigation Two</span>
+                </span>
+              }
+            >
+              <Menu.Item key="5">Option 5</Menu.Item>
+              <Menu.Item key="6">Option 6</Menu.Item>
+              <SubMenu key="sub3" title="Submenu">
+                <Menu.Item key="7">Option 7</Menu.Item>
+                <Menu.Item key="8">Option 8</Menu.Item>
               </SubMenu>
-            </Menu>
-          </Drawer>
-        )}
-        <div
-          style={{
-            width: '100%',
-            height: 667,
-            background: '#fff000',
-            color: '#fff',
-            textAlign: 'center',
-            lineHeight: '667px',
-          }}
-        >
-          内容区块
-        </div>
+            </SubMenu>
+            <SubMenu
+              key="sub4"
+              title={
+                <span>
+                  <SettingOutlined />
+                  <span>Navigation Three</span>
+                </span>
+              }
+            >
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <Menu.Item key="11">Option 11</Menu.Item>
+              <Menu.Item key="12">Option 12</Menu.Item>
+            </SubMenu>
+          </Menu>
+        </Drawer>
+      )}
+      <div
+        style={{
+          width: '100%',
+          height: 667,
+          background: '#fff000',
+          color: '#fff',
+          textAlign: 'center',
+          lineHeight: '667px',
+        }}
+      >
+        内容区块
       </div>
-    );
-  }
+    </div>
+  );
 }
+
 export default Demo;

docs/examples/change.tsx

@@ -17,40 +17,30 @@ import motionProps from './motion';
 
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
-class Demo extends React.Component {
-  public state = {
-    open: true,
-  };
-  public componentDidMount() {
+
+function Demo() {
+  const [open, setOpen] = React.useState(true);
+
+  React.useEffect(() => {
     setTimeout(() => {
-      this.setState({
-        open: false,
-      });
+      setOpen(false);
     }, 2000);
-  }
-  public onChange = (bool: boolean) => {
-    console.log('change: ', bool);
-  };
-  public onTouchEnd = () => {
-    this.setState({
-      open: false,
-    });
-  };
-  public onSwitch = () => {
-    this.setState({
-      open: !this.state.open,
-    });
+  }, []);
+
+  const onTouchEnd = () => {
+    setOpen(false);
   };
-  public render() {
-    return (
-      <div>
+
+  const onSwitch = () => {
+    this.setState(p => !p);
+  }
+
+  return (
+    <div>
         <Drawer
-          onChange={this.onChange}
-          open={this.state.open}
-          onClose={this.onTouchEnd}
-          handler={false}
-          level={null}
-          afterVisibleChange={(c: boolean) => {
+          open={open}
+          onClose={onTouchEnd}
+          afterOpenChange={(c: boolean) => {
             console.log('transitionEnd: ', c);
           }}
           width="20vw"
@@ -124,7 +114,7 @@ class Demo extends React.Component {
         >
           内容区块
           <button
-            onClick={this.onSwitch}
+            onClick={onSwitch}
             style={{
               height: 24,
               width: 100,
@@ -137,7 +127,7 @@ class Demo extends React.Component {
           </button>
         </div>
       </div>
-    );
-  }
+  );
 }
+
 export default Demo;