Skip to content

Commit 2e8b67a

Browse files
kiner-tangkiner-tang
authored
feat: Support body props (#419)
* feat: support bodyProps * feat: support bodyProps * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code
1 parent 3ec3caf commit 2e8b67a

16 files changed

+367
-263
lines changed

‎.dumirc.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default defineConfig({
99
mfsu: false,
1010
favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
1111
themeConfig: {
12-
name: 'Image',
12+
name: 'Drawer',
1313
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
1414
},
1515
});

‎README.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,17 @@ ReactDom.render(
5959
| showMask | boolean | true | mask is show |
6060
| maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
6161
| maskStyle | CSSProperties | null | mask style |
62-
| onChange | func | null | change callback(open) |
6362
| afterVisibleChange | func | null | transition end callback(open) |
6463
| onClose | func | null | close click function |
65-
| keyboard | Boolean | true | Whether support press esc to close |
64+
| keyboard | boolean | true | Whether support press esc to close |
6665
| contentWrapperStyle | CSSProperties | null | content wrapper style |
67-
| autoFocus | Boolean | true | Whether focusing on the drawer after it opened |
66+
| autoFocus | boolean | true | Whether focusing on the drawer after it opened |
67+
| onMouseEnter | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse enter drawer panel |
68+
| onMouseOver | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse over drawer panel |
69+
| onMouseLeave | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse leave drawer panel |
70+
| onClick | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse click drawer panel |
71+
| onKeyDown | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keydown on drawer panel |
72+
| onKeyUp | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keyup on drawer panel |
6873

6974
> 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`.
7075

‎docs/changelog.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# ChangeLog
22

3-
<embed src="../ChangeLog.md"></embed>
3+
<embed src="../CHANGELOG.md"></embed>

‎docs/demo/bodyProps.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: bodyProps
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/bodyProps.tsx"></code>

‎docs/examples/bodyProps.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* eslint-disable @typescript-eslint/no-unused-vars */
2+
import React, { useState } from 'react';
3+
import Drawer from 'rc-drawer';
4+
import motionProps from './motion';
5+
6+
const Demo = () => {
7+
const [open, setOpen] = useState(false);
8+
const onTouchEnd = () => {
9+
setOpen(false);
10+
};
11+
const onSwitch = () => {
12+
setOpen(c => !c);
13+
};
14+
return (
15+
<div>
16+
<Drawer
17+
open={open}
18+
// defaultOpen
19+
onClose={onTouchEnd}
20+
afterOpenChange={(c: boolean) => {
21+
console.log('transitionEnd: ', c);
22+
}}
23+
placement="right"
24+
// width={400}
25+
width="60%"
26+
// Motion
27+
{...motionProps}
28+
onMouseEnter={() => {
29+
console.log('mouseEnter');
30+
}}
31+
onMouseLeave={() => {
32+
console.log('mouseLeave');
33+
}}
34+
>
35+
content
36+
</Drawer>
37+
<div>
38+
<button onClick={onSwitch}>打开</button>
39+
</div>
40+
</div>
41+
);
42+
};
43+
export default Demo;

‎docs/examples/change-remove.tsx

Lines changed: 82 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -14,97 +14,93 @@ import motionProps from './motion';
1414

1515
const SubMenu = Menu.SubMenu;
1616
const MenuItemGroup = Menu.ItemGroup;
17-
class Demo extends React.Component<any, { show: boolean }> {
18-
public state = {
19-
show: true,
20-
};
21-
public componentDidMount() {
17+
18+
function Demo() {
19+
const [show, setShow] = React.useState(true);
20+
React.useEffect(() => {
2221
setTimeout(() => {
23-
this.setState({
24-
show: false,
25-
});
22+
setShow(false);
2623
}, 2000);
27-
}
28-
public render() {
29-
return (
30-
<div>
31-
{this.state.show && (
32-
<Drawer
33-
wrapperClassName="drawer-wrapper"
34-
width="20vw"
35-
open
36-
{...motionProps}
24+
}, []);
25+
return (
26+
<div>
27+
{show && (
28+
<Drawer
29+
rootClassName="drawer-wrapper"
30+
width="20vw"
31+
open
32+
{...motionProps}
33+
>
34+
<Menu
35+
defaultSelectedKeys={['1']}
36+
defaultOpenKeys={['sub1']}
37+
mode="inline"
3738
>
38-
<Menu
39-
defaultSelectedKeys={['1']}
40-
defaultOpenKeys={['sub1']}
41-
mode="inline"
39+
<SubMenu
40+
key="sub1"
41+
title={
42+
<span>
43+
<MailOutlined />
44+
<span>Navigation One</span>
45+
</span>
46+
}
4247
>
43-
<SubMenu
44-
key="sub1"
45-
title={
46-
<span>
47-
<MailOutlined />
48-
<span>Navigation One</span>
49-
</span>
50-
}
51-
>
52-
<MenuItemGroup key="g1" title="Item 1">
53-
<Menu.Item key="1">Option 1</Menu.Item>
54-
<Menu.Item key="2">Option 2</Menu.Item>
55-
</MenuItemGroup>
56-
<MenuItemGroup key="g2" title="Item 2">
57-
<Menu.Item key="3">Option 3</Menu.Item>
58-
<Menu.Item key="4">Option 4</Menu.Item>
59-
</MenuItemGroup>
60-
</SubMenu>
61-
<SubMenu
62-
key="sub2"
63-
title={
64-
<span>
65-
<AppstoreOutlined />
66-
<span>Navigation Two</span>
67-
</span>
68-
}
69-
>
70-
<Menu.Item key="5">Option 5</Menu.Item>
71-
<Menu.Item key="6">Option 6</Menu.Item>
72-
<SubMenu key="sub3" title="Submenu">
73-
<Menu.Item key="7">Option 7</Menu.Item>
74-
<Menu.Item key="8">Option 8</Menu.Item>
75-
</SubMenu>
76-
</SubMenu>
77-
<SubMenu
78-
key="sub4"
79-
title={
80-
<span>
81-
<SettingOutlined />
82-
<span>Navigation Three</span>
83-
</span>
84-
}
85-
>
86-
<Menu.Item key="9">Option 9</Menu.Item>
87-
<Menu.Item key="10">Option 10</Menu.Item>
88-
<Menu.Item key="11">Option 11</Menu.Item>
89-
<Menu.Item key="12">Option 12</Menu.Item>
48+
<MenuItemGroup key="g1" title="Item 1">
49+
<Menu.Item key="1">Option 1</Menu.Item>
50+
<Menu.Item key="2">Option 2</Menu.Item>
51+
</MenuItemGroup>
52+
<MenuItemGroup key="g2" title="Item 2">
53+
<Menu.Item key="3">Option 3</Menu.Item>
54+
<Menu.Item key="4">Option 4</Menu.Item>
55+
</MenuItemGroup>
56+
</SubMenu>
57+
<SubMenu
58+
key="sub2"
59+
title={
60+
<span>
61+
<AppstoreOutlined />
62+
<span>Navigation Two</span>
63+
</span>
64+
}
65+
>
66+
<Menu.Item key="5">Option 5</Menu.Item>
67+
<Menu.Item key="6">Option 6</Menu.Item>
68+
<SubMenu key="sub3" title="Submenu">
69+
<Menu.Item key="7">Option 7</Menu.Item>
70+
<Menu.Item key="8">Option 8</Menu.Item>
9071
</SubMenu>
91-
</Menu>
92-
</Drawer>
93-
)}
94-
<div
95-
style={{
96-
width: '100%',
97-
height: 667,
98-
background: '#fff000',
99-
color: '#fff',
100-
textAlign: 'center',
101-
lineHeight: '667px',
102-
}}
103-
>
104-
内容区块
105-
</div>
72+
</SubMenu>
73+
<SubMenu
74+
key="sub4"
75+
title={
76+
<span>
77+
<SettingOutlined />
78+
<span>Navigation Three</span>
79+
</span>
80+
}
81+
>
82+
<Menu.Item key="9">Option 9</Menu.Item>
83+
<Menu.Item key="10">Option 10</Menu.Item>
84+
<Menu.Item key="11">Option 11</Menu.Item>
85+
<Menu.Item key="12">Option 12</Menu.Item>
86+
</SubMenu>
87+
</Menu>
88+
</Drawer>
89+
)}
90+
<div
91+
style={{
92+
width: '100%',
93+
height: 667,
94+
background: '#fff000',
95+
color: '#fff',
96+
textAlign: 'center',
97+
lineHeight: '667px',
98+
}}
99+
>
100+
内容区块
106101
</div>
107-
);
108-
}
102+
</div>
103+
);
109104
}
105+
110106
export default Demo;

‎docs/examples/change.tsx

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -17,40 +17,30 @@ import motionProps from './motion';
1717

1818
const SubMenu = Menu.SubMenu;
1919
const MenuItemGroup = Menu.ItemGroup;
20-
class Demo extends React.Component {
21-
public state = {
22-
open: true,
23-
};
24-
public componentDidMount() {
20+
21+
function Demo() {
22+
const [open, setOpen] = React.useState(true);
23+
24+
React.useEffect(() => {
2525
setTimeout(() => {
26-
this.setState({
27-
open: false,
28-
});
26+
setOpen(false);
2927
}, 2000);
30-
}
31-
public onChange = (bool: boolean) => {
32-
console.log('change: ', bool);
33-
};
34-
public onTouchEnd = () => {
35-
this.setState({
36-
open: false,
37-
});
38-
};
39-
public onSwitch = () => {
40-
this.setState({
41-
open: !this.state.open,
42-
});
28+
}, []);
29+
30+
const onTouchEnd = () => {
31+
setOpen(false);
4332
};
44-
public render() {
45-
return (
46-
<div>
33+
34+
const onSwitch = () => {
35+
this.setState(p => !p);
36+
}
37+
38+
return (
39+
<div>
4740
<Drawer
48-
onChange={this.onChange}
49-
open={this.state.open}
50-
onClose={this.onTouchEnd}
51-
handler={false}
52-
level={null}
53-
afterVisibleChange={(c: boolean) => {
41+
open={open}
42+
onClose={onTouchEnd}
43+
afterOpenChange={(c: boolean) => {
5444
console.log('transitionEnd: ', c);
5545
}}
5646
width="20vw"
@@ -124,7 +114,7 @@ class Demo extends React.Component {
124114
>
125115
内容区块
126116
<button
127-
onClick={this.onSwitch}
117+
onClick={onSwitch}
128118
style={{
129119
height: 24,
130120
width: 100,
@@ -137,7 +127,7 @@ class Demo extends React.Component {
137127
</button>
138128
</div>
139129
</div>
140-
);
141-
}
130+
);
142131
}
132+
143133
export default Demo;

‎docs/examples/motion.tsx renamed to ‎docs/examples/motion.ts

File renamed without changes.

0 commit comments

Comments
 (0)