Skip to content

Commit

Permalink
feat: Support body props (#419)
Browse files Browse the repository at this point in the history 
* feat: support bodyProps

* feat: support bodyProps

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code
  • Loading branch information
@kiner-tang
kiner-tang authored May 30, 2023
1 parent 3ec3caf commit 2e8b67a
Show file tree
Hide file tree
Showing 16 changed files with 367 additions and 263 deletions.
2 changes: 1 addition & 1 deletion .dumirc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
11 changes: 8 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
2 changes: 1 addition & 1 deletion docs/changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# ChangeLog

<embed src="../ChangeLog.md"></embed>
<embed src="../CHANGELOG.md"></embed>
8 changes: 8 additions & 0 deletions docs/demo/bodyProps.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: bodyProps
nav:
title: Demo
path: /demo
---

<code src="../examples/bodyProps.tsx"></code>
43 changes: 43 additions & 0 deletions docs/examples/bodyProps.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
168 changes: 82 additions & 86 deletions docs/examples/change-remove.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
56 changes: 23 additions & 33 deletions docs/examples/change.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -124,7 +114,7 @@ class Demo extends React.Component {
>
内容区块
<button
onClick={this.onSwitch}
onClick={onSwitch}
style={{
height: 24,
width: 100,
Expand All @@ -137,7 +127,7 @@ class Demo extends React.Component {
</button>
</div>
</div>
);
}
);
}

export default Demo;
0 docs/examples/motion.tsx → docs/examples/motion.ts
View file
File renamed without changes.
Loading

1 comment on commit 2e8b67a

@vercel
Copy link

@vercel vercel bot commented on 2e8b67a May 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

drawer – ./

drawer.vercel.app
drawer-react-component.vercel.app
drawer-git-master-react-component.vercel.app

Please sign in to comment.