Skip to content

Commit 9b4baf9

Browse files
author
Konstantin Marushchak
committed
docs(dialog): drop the portal wrapper from the usage examples
`Dialog` renders itself in a `Portal`, so the examples no longer need to wrap it in one.
1 parent 0ee9b25 commit 9b4baf9

6 files changed

Lines changed: 46 additions & 59 deletions

File tree

‎src/components/Dialog/Dialog.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,12 @@ const DIALOG_ELEVATION: Elevation = 3;
5555

5656
/**
5757
* Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
58-
* To render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../Portal) component.
5958
*
6059
* ## Usage
6160
* ```js
6261
* import * as React from 'react';
6362
* import { View } from 'react-native';
64-
* import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';
63+
* import { Button, Dialog, PaperProvider, Text } from 'react-native-paper';
6564
*
6665
* const MyComponent = () => {
6766
* const [visible, setVisible] = React.useState(false);
@@ -74,17 +73,15 @@ const DIALOG_ELEVATION: Elevation = 3;
7473
* <PaperProvider>
7574
* <View>
7675
* <Button onPress={showDialog}>Show Dialog</Button>
77-
* <Portal>
78-
* <Dialog visible={visible} onDismiss={hideDialog}>
79-
* <Dialog.Title>Alert</Dialog.Title>
80-
* <Dialog.Content>
81-
* <Text variant="bodyMedium">This is simple dialog</Text>
82-
* </Dialog.Content>
83-
* <Dialog.Actions>
84-
* <Button onPress={hideDialog}>Done</Button>
85-
* </Dialog.Actions>
86-
* </Dialog>
87-
* </Portal>
76+
* <Dialog visible={visible} onDismiss={hideDialog}>
77+
* <Dialog.Title>Alert</Dialog.Title>
78+
* <Dialog.Content>
79+
* <Text variant="bodyMedium">This is simple dialog</Text>
80+
* </Dialog.Content>
81+
* <Dialog.Actions>
82+
* <Button onPress={hideDialog}>Done</Button>
83+
* </Dialog.Actions>
84+
* </Dialog>
8885
* </View>
8986
* </PaperProvider>
9087
* );

‎src/components/Dialog/DialogActions.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,20 @@ export type Props = ViewProps & {
2424
* ## Usage
2525
* ```js
2626
* import * as React from 'react';
27-
* import { Button, Dialog, Portal } from 'react-native-paper';
27+
* import { Button, Dialog } from 'react-native-paper';
2828
*
2929
* const MyComponent = () => {
3030
* const [visible, setVisible] = React.useState(false);
3131
*
3232
* const hideDialog = () => setVisible(false);
3333
*
3434
* return (
35-
* <Portal>
36-
* <Dialog visible={visible} onDismiss={hideDialog}>
37-
* <Dialog.Actions>
38-
* <Button onPress={() => console.log('Cancel')}>Cancel</Button>
39-
* <Button onPress={() => console.log('Ok')}>Ok</Button>
40-
* </Dialog.Actions>
41-
* </Dialog>
42-
* </Portal>
35+
* <Dialog visible={visible} onDismiss={hideDialog}>
36+
* <Dialog.Actions>
37+
* <Button onPress={() => console.log('Cancel')}>Cancel</Button>
38+
* <Button onPress={() => console.log('Ok')}>Ok</Button>
39+
* </Dialog.Actions>
40+
* </Dialog>
4341
* );
4442
* };
4543
*

‎src/components/Dialog/DialogContent.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,19 @@ export type Props = ViewProps & {
1616
* ## Usage
1717
* ```js
1818
* import * as React from 'react';
19-
* import { Dialog, Portal, Text } from 'react-native-paper';
19+
* import { Dialog, Text } from 'react-native-paper';
2020
*
2121
* const MyComponent = () => {
2222
* const [visible, setVisible] = React.useState(false);
2323
*
2424
* const hideDialog = () => setVisible(false);
2525
*
2626
* return (
27-
* <Portal>
28-
* <Dialog visible={visible} onDismiss={hideDialog}>
29-
* <Dialog.Content>
30-
* <Text variant="bodyMedium">This is simple dialog</Text>
31-
* </Dialog.Content>
32-
* </Dialog>
33-
* </Portal>
27+
* <Dialog visible={visible} onDismiss={hideDialog}>
28+
* <Dialog.Content>
29+
* <Text variant="bodyMedium">This is simple dialog</Text>
30+
* </Dialog.Content>
31+
* </Dialog>
3432
* );
3533
* };
3634
*

‎src/components/Dialog/DialogIcon.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,21 @@ export type Props = {
3333
* ```js
3434
* import * as React from 'react';
3535
* import { StyleSheet } from 'react-native';
36-
* import { Dialog, Portal, Text } from 'react-native-paper';
36+
* import { Dialog, Text } from 'react-native-paper';
3737
*
3838
* const MyComponent = () => {
3939
* const [visible, setVisible] = React.useState(false);
4040
*
4141
* const hideDialog = () => setVisible(false);
4242
*
4343
* return (
44-
* <Portal>
45-
* <Dialog visible={visible} onDismiss={hideDialog}>
46-
* <Dialog.Icon icon="alert" />
47-
* <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
48-
* <Dialog.Content>
49-
* <Text variant="bodyMedium">This is simple dialog</Text>
50-
* </Dialog.Content>
51-
* </Dialog>
52-
* </Portal>
44+
* <Dialog visible={visible} onDismiss={hideDialog}>
45+
* <Dialog.Icon icon="alert" />
46+
* <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
47+
* <Dialog.Content>
48+
* <Text variant="bodyMedium">This is simple dialog</Text>
49+
* </Dialog.Content>
50+
* </Dialog>
5351
* );
5452
* };
5553
*

‎src/components/Dialog/DialogScrollArea.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,21 @@ export type Props = ViewProps & {
2525
* ```js
2626
* import * as React from 'react';
2727
* import { ScrollView } from 'react-native';
28-
* import { Dialog, Portal, Text } from 'react-native-paper';
28+
* import { Dialog, Text } from 'react-native-paper';
2929
*
3030
* const MyComponent = () => {
3131
* const [visible, setVisible] = React.useState(false);
3232
*
3333
* const hideDialog = () => setVisible(false);
3434
*
3535
* return (
36-
* <Portal>
37-
* <Dialog visible={visible} onDismiss={hideDialog}>
38-
* <Dialog.ScrollArea>
39-
* <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>
40-
* <Text>This is a scrollable area</Text>
41-
* </ScrollView>
42-
* </Dialog.ScrollArea>
43-
* </Dialog>
44-
* </Portal>
36+
* <Dialog visible={visible} onDismiss={hideDialog}>
37+
* <Dialog.ScrollArea>
38+
* <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>
39+
* <Text>This is a scrollable area</Text>
40+
* </ScrollView>
41+
* </Dialog.ScrollArea>
42+
* </Dialog>
4543
* );
4644
* };
4745
*

‎src/components/Dialog/DialogTitle.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,20 @@ export type Props = React.ComponentPropsWithRef<typeof Text> & {
2424
* ## Usage
2525
* ```js
2626
* import * as React from 'react';
27-
* import { Dialog, Portal, Text } from 'react-native-paper';
27+
* import { Dialog, Text } from 'react-native-paper';
2828
*
2929
* const MyComponent = () => {
3030
* const [visible, setVisible] = React.useState(false);
3131
*
3232
* const hideDialog = () => setVisible(false);
3333
*
3434
* return (
35-
* <Portal>
36-
* <Dialog visible={visible} onDismiss={hideDialog}>
37-
* <Dialog.Title>This is a title</Dialog.Title>
38-
* <Dialog.Content>
39-
* <Text variant="bodyMedium">This is simple dialog</Text>
40-
* </Dialog.Content>
41-
* </Dialog>
42-
* </Portal>
35+
* <Dialog visible={visible} onDismiss={hideDialog}>
36+
* <Dialog.Title>This is a title</Dialog.Title>
37+
* <Dialog.Content>
38+
* <Text variant="bodyMedium">This is simple dialog</Text>
39+
* </Dialog.Content>
40+
* </Dialog>
4341
* );
4442
* };
4543
*

0 commit comments

Comments
 (0)