Skip to content

Commit c5ff642

Browse files
committed
add multiple portal
1 parent f6cb31a commit c5ff642

File tree

3 files changed

+58
-28
lines changed

3 files changed

+58
-28
lines changed

examples/ant-design.tsx

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
/* eslint no-console:0 */
2-
import Drawer from 'rc-drawer';
3-
import 'rc-drawer/assets/index.css';
42
import 'rc-dialog/assets/index.less';
53
import * as React from 'react';
64
import * as ReactDOM from 'react-dom';
@@ -38,7 +36,6 @@ class MyControl extends React.Component<any, any> {
3836
mousePosition: undefined,
3937
useIcon: false,
4038
forceRender: false,
41-
visibleDrawer: false,
4239
};
4340

4441
onClick = (e: React.MouseEvent) => {
@@ -69,18 +66,6 @@ class MyControl extends React.Component<any, any> {
6966
});
7067
}
7168

72-
onShowDrawer = () => {
73-
this.setState({
74-
visibleDrawer: true,
75-
});
76-
}
77-
78-
onCloseDrawer = () => {
79-
this.setState({
80-
visibleDrawer: false,
81-
});
82-
}
83-
8469
changeWidth = () => {
8570
this.setState({
8671
width: this.state.width === 600 ? 800 : 600,
@@ -126,20 +111,10 @@ class MyControl extends React.Component<any, any> {
126111
<button onClick={this.toggleCloseIcon}>
127112
use custom icon, is using icon: {this.state.useIcon && 'true' || 'false'}.
128113
</button>
129-
<p><button onClick={this.onShowDrawer}>show drawer</button></p>
130114
<div style={{ height: 200 }} />
131115
</Dialog>
132116
);
133-
const drawer = (
134-
<Drawer
135-
open={this.state.visibleDrawer}
136-
handler={false}
137-
onClose={this.onCloseDrawer}
138-
level={null}
139-
>
140-
<button onClick={this.onCloseDrawer}>close drawer</button>
141-
</Drawer>
142-
);
117+
143118
return (
144119
<div style={{ width: '90%', margin: '0 auto' }}>
145120
<style>
@@ -183,9 +158,7 @@ class MyControl extends React.Component<any, any> {
183158
/>
184159
</label>
185160
</p>
186-
187161
{dialog}
188-
{drawer}
189162
</div>
190163
);
191164
}

examples/multiple-Portal.html

Whitespace-only changes.

examples/multiple-Portal.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useState } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Dialog from '../src/DialogWrap';
4+
import Drawer from 'rc-drawer';
5+
import 'rc-drawer/assets/index.css';
6+
import 'rc-dialog/assets/index.less';
7+
8+
const Demo = () => {
9+
const [showDialog, setShowDialog] = useState(false);
10+
const [showDrawer, setShowDrawer] = useState(false);
11+
12+
const onToggleDrawer = () => {
13+
setShowDrawer(value => !value);
14+
};
15+
16+
const onToggleDialog = () => {
17+
setShowDialog(value => !value);
18+
};
19+
20+
const dialog = (
21+
<Dialog
22+
visible={showDialog}
23+
animation="zoom"
24+
maskAnimation="fade"
25+
onClose={onToggleDialog}
26+
>
27+
<p>basic modal</p>
28+
<p><button onClick={onToggleDrawer}>show drawer</button></p>
29+
<div style={{ height: 200 }} />
30+
</Dialog>
31+
);
32+
const drawer = (
33+
<Drawer
34+
open={showDrawer}
35+
handler={false}
36+
onClose={onToggleDrawer}
37+
level={null}
38+
>
39+
<button onClick={onToggleDrawer}>close drawer</button>
40+
</Drawer>
41+
);
42+
return (
43+
<div>
44+
<button onClick={onToggleDialog}>open dialog</button>
45+
{dialog}
46+
{drawer}
47+
</div>
48+
);
49+
};
50+
51+
ReactDOM.render(
52+
<div>
53+
<h2>multiple dialog</h2>
54+
<Demo />
55+
</div>,
56+
document.getElementById('__react-content'),
57+
);

0 commit comments

Comments
 (0)