Skip to content

Commit 5a9f816

Browse files
zombieJzombieJ
committed
chore: getContainer support false
1 parent fc859b3 commit 5a9f816

File tree

6 files changed

+209
-97
lines changed

6 files changed

+209
-97
lines changed

‎assets/index.less‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,26 @@
55

66
.@{prefixCls} {
77
position: fixed;
8-
inset: 0;
98
z-index: @zIndex;
109
pointer-events: none;
10+
inset: 0;
11+
12+
&-inline {
13+
position: absolute;
14+
}
1115

1216
&-mask {
1317
position: absolute;
1418
z-index: @zIndex;
1519
background: rgba(0, 0, 0, 0.5);
16-
inset: 0;
1720
pointer-events: auto;
21+
inset: 0;
1822
}
1923

2024
&-panel-wrapper {
2125
position: absolute;
2226
z-index: @zIndex;
27+
overflow: hidden;
2328

2429
&-hidden {
2530
display: none;
@@ -44,6 +49,7 @@
4449
height: 100%;
4550
background: #fff;
4651
pointer-events: auto;
52+
overflow: auto;
4753
}
4854
}
4955

‎docs/demo/getContainer.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
## getContainer
22

33
<code src="../examples/getContainer.tsx">
4+
<code src="../examples/getContainer-false.tsx">

‎docs/examples/getContainer-false.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import {
2+
AppstoreOutlined,
3+
MailOutlined,
4+
SettingOutlined,
5+
} from '@ant-design/icons';
6+
import { Menu } from 'antd';
7+
import * as React from 'react';
8+
9+
import Drawer from 'rc-drawer';
10+
11+
import 'antd/lib/menu/style';
12+
import 'antd/lib/style';
13+
14+
import '../../assets/index.less';
15+
import './assets/index.less';
16+
import motionProps from './motion';
17+
18+
const { SubMenu } = Menu;
19+
const MenuItemGroup = Menu.ItemGroup;
20+
21+
export default () => {
22+
const [open, setOpen] = React.useState(false);
23+
24+
return (
25+
<div style={{ position: 'relative' }}>
26+
<div
27+
id="container"
28+
style={{
29+
height: 300,
30+
background: 'rgba(0,0,0,0.05)',
31+
overflow: 'auto',
32+
position: 'relative',
33+
}}
34+
>
35+
<div
36+
style={{
37+
display: 'inline-block',
38+
height: 1000,
39+
boxShadow: `0 0 1px red`,
40+
}}
41+
>
42+
<button onClick={() => setOpen(true)} style={{ height: 100 }}>
43+
Open
44+
</button>
45+
</div>
46+
</div>
47+
48+
<Drawer
49+
width="20vw"
50+
getContainer={false}
51+
placement="right"
52+
open={open}
53+
onClose={() => setOpen(false)}
54+
{...motionProps}
55+
>
56+
<Menu
57+
defaultSelectedKeys={['1']}
58+
defaultOpenKeys={['sub1']}
59+
mode="inline"
60+
>
61+
<SubMenu
62+
key="sub1"
63+
title={
64+
<span>
65+
<MailOutlined />
66+
<span>Navigation One</span>
67+
</span>
68+
}
69+
>
70+
<MenuItemGroup key="g1" title="Item 1">
71+
<Menu.Item key="1">Option 1</Menu.Item>
72+
<Menu.Item key="2">Option 2</Menu.Item>
73+
</MenuItemGroup>
74+
<MenuItemGroup key="g2" title="Item 2">
75+
<Menu.Item key="3">Option 3</Menu.Item>
76+
<Menu.Item key="4">Option 4</Menu.Item>
77+
</MenuItemGroup>
78+
</SubMenu>
79+
<SubMenu
80+
key="sub2"
81+
title={
82+
<span>
83+
<AppstoreOutlined />
84+
<span>Navigation Two</span>
85+
</span>
86+
}
87+
>
88+
<Menu.Item key="5">Option 5</Menu.Item>
89+
<Menu.Item key="6">Option 6</Menu.Item>
90+
<SubMenu key="sub3" title="Submenu">
91+
<Menu.Item key="7">Option 7</Menu.Item>
92+
<Menu.Item key="8">Option 8</Menu.Item>
93+
</SubMenu>
94+
</SubMenu>
95+
<SubMenu
96+
key="sub4"
97+
title={
98+
<span>
99+
<SettingOutlined />
100+
<span>Navigation Three</span>
101+
</span>
102+
}
103+
>
104+
<Menu.Item key="9">Option 9</Menu.Item>
105+
<Menu.Item key="10">Option 10</Menu.Item>
106+
<Menu.Item key="11">Option 11</Menu.Item>
107+
<Menu.Item key="12">Option 12</Menu.Item>
108+
</SubMenu>
109+
</Menu>
110+
</Drawer>
111+
</div>
112+
);
113+
};

‎docs/examples/getContainer.tsx‎

Lines changed: 70 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -13,100 +13,82 @@ import 'antd/lib/style';
1313

1414
import '../../assets/index.less';
1515
import './assets/index.less';
16+
import motionProps from './motion';
1617

1718
const { SubMenu } = Menu;
1819
const MenuItemGroup = Menu.ItemGroup;
1920

20-
class DrawerTester extends React.Component {
21-
private container: HTMLDivElement;
21+
export default () => {
22+
const containerRef = React.useRef<HTMLDivElement>();
23+
const [open, setOpen] = React.useState(false);
2224

23-
public getContainer = () => {
24-
return this.container;
25-
};
26-
public saveContainer = (container: HTMLDivElement) => {
27-
this.container = container;
28-
};
29-
30-
public render() {
31-
return (
32-
<div>
33-
<div
34-
ref={this.saveContainer}
35-
id="container"
36-
style={{
37-
height: 300,
38-
background: 'rgba(0,0,0,0.05)',
39-
overflow: 'auto',
40-
}}
25+
return (
26+
<div>
27+
<div ref={containerRef} id="container">
28+
<button onClick={() => setOpen(true)}>Open</button>
29+
</div>
30+
<Drawer
31+
width="20vw"
32+
getContainer={() => containerRef.current}
33+
open={open}
34+
onClose={() => setOpen(false)}
35+
{...motionProps}
36+
>
37+
<Menu
38+
defaultSelectedKeys={['1']}
39+
defaultOpenKeys={['sub1']}
40+
mode="inline"
4141
>
42-
<div
43-
style={{
44-
display: 'inline-block',
45-
height: 1000,
46-
boxShadow: `0 0 1px red`,
47-
}}
42+
<SubMenu
43+
key="sub1"
44+
title={
45+
<span>
46+
<MailOutlined />
47+
<span>Navigation One</span>
48+
</span>
49+
}
4850
>
49-
Hello World
50-
</div>
51-
</div>
52-
<Drawer width="20vw" getContainer={this.getContainer} open>
53-
<Menu
54-
defaultSelectedKeys={['1']}
55-
defaultOpenKeys={['sub1']}
56-
mode="inline"
51+
<MenuItemGroup key="g1" title="Item 1">
52+
<Menu.Item key="1">Option 1</Menu.Item>
53+
<Menu.Item key="2">Option 2</Menu.Item>
54+
</MenuItemGroup>
55+
<MenuItemGroup key="g2" title="Item 2">
56+
<Menu.Item key="3">Option 3</Menu.Item>
57+
<Menu.Item key="4">Option 4</Menu.Item>
58+
</MenuItemGroup>
59+
</SubMenu>
60+
<SubMenu
61+
key="sub2"
62+
title={
63+
<span>
64+
<AppstoreOutlined />
65+
<span>Navigation Two</span>
66+
</span>
67+
}
5768
>
58-
<SubMenu
59-
key="sub1"
60-
title={
61-
<span>
62-
<MailOutlined />
63-
<span>Navigation One</span>
64-
</span>
65-
}
66-
>
67-
<MenuItemGroup key="g1" title="Item 1">
68-
<Menu.Item key="1">Option 1</Menu.Item>
69-
<Menu.Item key="2">Option 2</Menu.Item>
70-
</MenuItemGroup>
71-
<MenuItemGroup key="g2" title="Item 2">
72-
<Menu.Item key="3">Option 3</Menu.Item>
73-
<Menu.Item key="4">Option 4</Menu.Item>
74-
</MenuItemGroup>
75-
</SubMenu>
76-
<SubMenu
77-
key="sub2"
78-
title={
79-
<span>
80-
<AppstoreOutlined />
81-
<span>Navigation Two</span>
82-
</span>
83-
}
84-
>
85-
<Menu.Item key="5">Option 5</Menu.Item>
86-
<Menu.Item key="6">Option 6</Menu.Item>
87-
<SubMenu key="sub3" title="Submenu">
88-
<Menu.Item key="7">Option 7</Menu.Item>
89-
<Menu.Item key="8">Option 8</Menu.Item>
90-
</SubMenu>
69+
<Menu.Item key="5">Option 5</Menu.Item>
70+
<Menu.Item key="6">Option 6</Menu.Item>
71+
<SubMenu key="sub3" title="Submenu">
72+
<Menu.Item key="7">Option 7</Menu.Item>
73+
<Menu.Item key="8">Option 8</Menu.Item>
9174
</SubMenu>
92-
<SubMenu
93-
key="sub4"
94-
title={
95-
<span>
96-
<SettingOutlined />
97-
<span>Navigation Three</span>
98-
</span>
99-
}
100-
>
101-
<Menu.Item key="9">Option 9</Menu.Item>
102-
<Menu.Item key="10">Option 10</Menu.Item>
103-
<Menu.Item key="11">Option 11</Menu.Item>
104-
<Menu.Item key="12">Option 12</Menu.Item>
105-
</SubMenu>
106-
</Menu>
107-
</Drawer>
108-
</div>
109-
);
110-
}
111-
}
112-
export default DrawerTester;
75+
</SubMenu>
76+
<SubMenu
77+
key="sub4"
78+
title={
79+
<span>
80+
<SettingOutlined />
81+
<span>Navigation Three</span>
82+
</span>
83+
}
84+
>
85+
<Menu.Item key="9">Option 9</Menu.Item>
86+
<Menu.Item key="10">Option 10</Menu.Item>
87+
<Menu.Item key="11">Option 11</Menu.Item>
88+
<Menu.Item key="12">Option 12</Menu.Item>
89+
</SubMenu>
90+
</Menu>
91+
</Drawer>
92+
</div>
93+
);
94+
};

‎src/Drawer.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls'> {
3131
autoFocus?: boolean;
3232
wrapperClassName?: string;
3333
forceRender?: boolean;
34-
getContainer?: GetContainer;
34+
getContainer?: GetContainer | false;
3535
}
3636

3737
const defaultGetContainer = () => document.body;
@@ -45,6 +45,15 @@ export default function Drawer(props: DrawerProps) {
4545
prefixCls = 'rc-drawer',
4646
} = props;
4747

48+
const sharedDrawerProps = {
49+
...props,
50+
prefixCls,
51+
};
52+
53+
if (getContainer === false) {
54+
return <DrawerPopup {...sharedDrawerProps} inline />;
55+
}
56+
4857
return (
4958
<Portal
5059
visible={open}
@@ -53,11 +62,7 @@ export default function Drawer(props: DrawerProps) {
5362
wrapperClassName={wrapperClassName}
5463
>
5564
{({ scrollLocker }) => (
56-
<DrawerPopup
57-
{...props}
58-
prefixCls={prefixCls}
59-
scrollLocker={scrollLocker}
60-
/>
65+
<DrawerPopup {...sharedDrawerProps} scrollLocker={scrollLocker} />
6166
)}
6267
</Portal>
6368
);

‎src/DrawerPopup.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface DrawerPopupProps {
1111
prefixCls: string;
1212
open?: boolean;
1313
placement?: Placement;
14+
inline?: boolean;
1415

1516
// MISC
1617
scrollLocker?: ScrollLocker;
@@ -45,6 +46,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
4546
prefixCls,
4647
open,
4748
placement = 'left',
49+
inline,
4850

4951
// MISC
5052
scrollLocker,
@@ -112,7 +114,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
112114
const motionProps = typeof motion === 'function' ? motion(placement) : motion;
113115

114116
const panelNode: React.ReactNode = (
115-
<div className={`${prefixCls}-panel-wrapper`}>
117+
<div className={classNames(`${prefixCls}-panel-wrapper`)}>
116118
<CSSMotion
117119
key="panel"
118120
{...motionProps}
@@ -153,6 +155,9 @@ export default function DrawerPopup(props: DrawerPopupProps) {
153155
prefixCls,
154156
`${prefixCls}-${placement}`,
155157
rootClassName,
158+
{
159+
[`${prefixCls}-inline`]: inline,
160+
},
156161
)}
157162
style={rootStyle}
158163
>

0 commit comments

Comments
 (0)