Merge branch 'master' into dependabot/npm_and_yarn/eslint-8.35.0

.dumirc.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'dumi';
+import path from 'path';
+
+export default defineConfig({
+  alias: {
+    'rc-drawer$': path.resolve('src'),
+    'rc-drawer/es': path.resolve('src'),
+  },
+  mfsu: false,
+  favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
+  themeConfig: {
+    name: 'Drawer',
+    logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
+  },
+});

.fatherrc.js

@@ -1,9 +1,5 @@
-export default {
-  cjs: 'babel',
-  esm: { type: 'babel', importLibToEs: true },
-  preCommit: {
-    eslint: true,
-    prettier: true,
-  },
-  runtimeHelpers: true,
-};
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

.gitignore

@@ -35,3 +35,7 @@ storybook
 .umi-production
 .umi-test
 .env.local
+
+# dumi
+.dumi/tmp
+.dumi/tmp-production

README.md

@@ -44,8 +44,9 @@ ReactDom.render(
 | props      | type           | default | description    |
 |------------|----------------|---------|----------------|
 | className       | string | null | - |
+| classNames       | { mask?: string; wrapper?: string; } | - | pass className to target area |
+| styles       | { mask?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area |
 | prefixCls     |  string  | 'drawer' | prefix class |
-| wrapperClassName | string | null | wrapper class name |
 | width       |  string \| number  |  null  | drawer content wrapper width, drawer level transition width  |
 | height      |  string \| number  |  null  | drawer content wrapper height, drawer level transition height  |
 | open        | boolean  | false |  open or close menu  |
@@ -59,12 +60,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

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

docs/demo/base.md

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

docs/demo/bodyProps.md

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

docs/demo/change-remove.md

@@ -1,3 +1,9 @@
-## change-remove
+---
+title: change-remove
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/change-remove.tsx">
+
+<code src="../examples/change-remove.tsx"></code>

docs/demo/change.md

@@ -1,3 +1,9 @@
-## change
+---
+title: change
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/change.tsx">
+
+<code src="../examples/change.tsx"></code>

docs/demo/forceRender.md

@@ -1,3 +1,9 @@
-## Force Render
+---
+title: Force Render
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/forceRender.tsx">
+
+<code src="../examples/forceRender.tsx"></code>

docs/demo/getContainer.md

@@ -1,4 +1,10 @@
-## getContainer
+---
+title: getContainer
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/getContainer.tsx">
-<code src="../examples/getContainer-false.tsx">
+
+<code src="../examples/getContainer.tsx"></code>
+<code src="../examples/getContainer-false.tsx"></code>

docs/demo/multiple.md

@@ -1,3 +1,9 @@
-## multiple
+---
+title: multiple
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/multiple.tsx">
+
+<code src="../examples/multiple.tsx"></code>

docs/demo/no-mask.md

@@ -1,3 +1,9 @@
-## no-mask
+---
+title: no-mask
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/no-mask.tsx">
+
+<code src="../examples/no-mask.tsx"></code>

docs/demo/placement.md

@@ -1,3 +1,9 @@
-## placement
+---
+title: placement
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/placement.tsx">
+
+<code src="../examples/placement.tsx"></code>

docs/examples/base.tsx

@@ -5,9 +5,6 @@ import motionProps from './motion';
 
 const Demo = () => {
   const [open, setOpen] = useState(false);
-  const onChange = (bool: boolean) => {
-    // console.log('change: ', bool);
-  };
   const onTouchEnd = () => {
     setOpen(false);
   };
@@ -17,12 +14,9 @@ const Demo = () => {
   return (
     <div>
       <Drawer
-        onChange={onChange}
         open={open}
         // defaultOpen
         onClose={onTouchEnd}
-        handler={false}
-        level={null}
         afterOpenChange={(c: boolean) => {
           console.log('transitionEnd: ', c);
         }}

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;