Skip to content

Commit 0ee9b25

Browse files
author
Konstantin Marushchak
committed
chore(example): drop the portal wrapper around dialogs
Every dialog now hides the content behind it, so the dedicated "Inert background" example no longer has anything of its own to show.
1 parent a7c3b51 commit 0ee9b25

11 files changed

Lines changed: 218 additions & 280 deletions

‎example/src/DrawerItems.tsx‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
Dialog,
1111
Drawer,
1212
Palette,
13-
Portal,
1413
Switch,
1514
Text,
1615
TouchableRipple,
@@ -240,24 +239,22 @@ function DrawerItems() {
240239
</Text>
241240
</>
242241
)}
243-
<Portal>
244-
<Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
245-
<Dialog.Title>Changing to RTL</Dialog.Title>
246-
<Dialog.Content>
247-
<Text variant="bodyMedium">
248-
Due to Expo Go limitations it is impossible to change RTL
249-
dynamically. To do so, you need to create a development build of
250-
Example app or change it statically by setting{' '}
251-
<Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
252-
<Text variant="labelMedium">app.json</Text> within{' '}
253-
<Text variant="labelMedium">example</Text> directory.
254-
</Text>
255-
<Dialog.Actions>
256-
<Button onPress={_handleDismissRTLDialog}>Ok</Button>
257-
</Dialog.Actions>
258-
</Dialog.Content>
259-
</Dialog>
260-
</Portal>
242+
<Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
243+
<Dialog.Title>Changing to RTL</Dialog.Title>
244+
<Dialog.Content>
245+
<Text variant="bodyMedium">
246+
Due to Expo Go limitations it is impossible to change RTL
247+
dynamically. To do so, you need to create a development build of
248+
Example app or change it statically by setting{' '}
249+
<Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
250+
<Text variant="labelMedium">app.json</Text> within{' '}
251+
<Text variant="labelMedium">example</Text> directory.
252+
</Text>
253+
<Dialog.Actions>
254+
<Button onPress={_handleDismissRTLDialog}>Ok</Button>
255+
</Dialog.Actions>
256+
</Dialog.Content>
257+
</Dialog>
261258
</DrawerContentScrollView>
262259
);
263260
}

‎example/src/Examples/DialogExample.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
DialogWithIcon,
1010
DialogWithLoadingIndicator,
1111
DialogWithLongText,
12-
DialogWithOverlay,
1312
DialogWithRadioBtns,
1413
UndismissableDialog,
1514
} from './Dialogs';
@@ -80,13 +79,6 @@ const DialogExample = () => {
8079
Dismissable back button
8180
</Button>
8281
)}
83-
<Button
84-
mode="outlined"
85-
onPress={_toggleDialog('dialog8')}
86-
style={styles.button}
87-
>
88-
Inert background
89-
</Button>
9082
<DialogWithLongText
9183
visible={_getVisible('dialog1')}
9284
close={_toggleDialog('dialog1')}
@@ -115,10 +107,6 @@ const DialogExample = () => {
115107
visible={_getVisible('dialog7')}
116108
close={_toggleDialog('dialog7')}
117109
/>
118-
<DialogWithOverlay
119-
visible={_getVisible('dialog8')}
120-
close={_toggleDialog('dialog8')}
121-
/>
122110
</ScreenWrapper>
123111
);
124112
};

‎example/src/Examples/Dialogs/DialogWithCustomColors.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Portal, Dialog, Palette } from 'react-native-paper';
1+
import { Button, Dialog, Palette } from 'react-native-paper';
22

33
import { TextComponent } from './DialogTextComponent';
44

@@ -10,29 +10,27 @@ const DialogWithCustomColors = ({
1010
close: () => void;
1111
}) => {
1212
return (
13-
<Portal>
14-
<Dialog
15-
onDismiss={close}
16-
theme={{
17-
colors: {
18-
surfaceContainerHigh: Palette.primary10,
19-
},
20-
}}
21-
visible={visible}
22-
>
23-
<Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
24-
<Dialog.Content>
25-
<TextComponent style={{ color: Palette.primary95 }}>
26-
This is a dialog with custom colors
27-
</TextComponent>
28-
</Dialog.Content>
29-
<Dialog.Actions>
30-
<Button textColor={Palette.primary95} onPress={close}>
31-
Ok
32-
</Button>
33-
</Dialog.Actions>
34-
</Dialog>
35-
</Portal>
13+
<Dialog
14+
onDismiss={close}
15+
theme={{
16+
colors: {
17+
surfaceContainerHigh: Palette.primary10,
18+
},
19+
}}
20+
visible={visible}
21+
>
22+
<Dialog.Title style={{ color: Palette.primary95 }}>Alert</Dialog.Title>
23+
<Dialog.Content>
24+
<TextComponent style={{ color: Palette.primary95 }}>
25+
This is a dialog with custom colors
26+
</TextComponent>
27+
</Dialog.Content>
28+
<Dialog.Actions>
29+
<Button textColor={Palette.primary95} onPress={close}>
30+
Ok
31+
</Button>
32+
</Dialog.Actions>
33+
</Dialog>
3634
);
3735
};
3836

‎example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Portal, Dialog, Palette } from 'react-native-paper';
1+
import { Button, Dialog, Palette } from 'react-native-paper';
22

33
import { TextComponent } from './DialogTextComponent';
44

@@ -9,28 +9,26 @@ const DialogWithDismissableBackButton = ({
99
visible: boolean;
1010
close: () => void;
1111
}) => (
12-
<Portal>
13-
<Dialog
14-
onDismiss={close}
15-
visible={visible}
16-
dismissable={false}
17-
dismissableBackButton
18-
>
19-
<Dialog.Title>Alert</Dialog.Title>
20-
<Dialog.Content>
21-
<TextComponent>
22-
This is an undismissable dialog, however you can use hardware back
23-
button to close it!
24-
</TextComponent>
25-
</Dialog.Content>
26-
<Dialog.Actions>
27-
<Button textColor={Palette.tertiary50} disabled>
28-
Disagree
29-
</Button>
30-
<Button onPress={close}>Agree</Button>
31-
</Dialog.Actions>
32-
</Dialog>
33-
</Portal>
12+
<Dialog
13+
onDismiss={close}
14+
visible={visible}
15+
dismissable={false}
16+
dismissableBackButton
17+
>
18+
<Dialog.Title>Alert</Dialog.Title>
19+
<Dialog.Content>
20+
<TextComponent>
21+
This is an undismissable dialog, however you can use hardware back
22+
button to close it!
23+
</TextComponent>
24+
</Dialog.Content>
25+
<Dialog.Actions>
26+
<Button textColor={Palette.tertiary50} disabled>
27+
Disagree
28+
</Button>
29+
<Button onPress={close}>Agree</Button>
30+
</Dialog.Actions>
31+
</Dialog>
3432
);
3533

3634
export default DialogWithDismissableBackButton;

‎example/src/Examples/Dialogs/DialogWithIcon.tsx‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { StyleSheet } from 'react-native';
22

3-
import { Button, Portal, Dialog, Palette } from 'react-native-paper';
3+
import { Button, Dialog, Palette } from 'react-native-paper';
44

55
import { TextComponent } from './DialogTextComponent';
66

@@ -12,24 +12,22 @@ const DialogWithIcon = ({
1212
close: () => void;
1313
}) => {
1414
return (
15-
<Portal>
16-
<Dialog onDismiss={close} visible={visible}>
17-
<Dialog.Icon icon="alert" />
18-
<Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
19-
<Dialog.Content>
20-
<TextComponent>
21-
This is a dialog with new component called DialogIcon. When icon is
22-
displayed you should center the header.
23-
</TextComponent>
24-
</Dialog.Content>
25-
<Dialog.Actions>
26-
<Button onPress={close} textColor={Palette.error50}>
27-
Disagree
28-
</Button>
29-
<Button onPress={close}>Agree</Button>
30-
</Dialog.Actions>
31-
</Dialog>
32-
</Portal>
15+
<Dialog onDismiss={close} visible={visible}>
16+
<Dialog.Icon icon="alert" />
17+
<Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
18+
<Dialog.Content>
19+
<TextComponent>
20+
This is a dialog with new component called DialogIcon. When icon is
21+
displayed you should center the header.
22+
</TextComponent>
23+
</Dialog.Content>
24+
<Dialog.Actions>
25+
<Button onPress={close} textColor={Palette.error50}>
26+
Disagree
27+
</Button>
28+
<Button onPress={close}>Agree</Button>
29+
</Dialog.Actions>
30+
</Dialog>
3331
);
3432
};
3533

‎example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
22

3-
import { Dialog, Palette, Portal } from 'react-native-paper';
3+
import { Dialog, Palette } from 'react-native-paper';
44

55
import { TextComponent } from './DialogTextComponent';
66

@@ -12,21 +12,19 @@ const DialogWithLoadingIndicator = ({
1212
close: () => void;
1313
}) => {
1414
return (
15-
<Portal>
16-
<Dialog onDismiss={close} visible={visible}>
17-
<Dialog.Title>Progress Dialog</Dialog.Title>
18-
<Dialog.Content>
19-
<View style={styles.flexing}>
20-
<ActivityIndicator
21-
color={Palette.tertiary30}
22-
size={Platform.OS === 'ios' ? 'large' : 48}
23-
style={styles.marginRight}
24-
/>
25-
<TextComponent>Loading.....</TextComponent>
26-
</View>
27-
</Dialog.Content>
28-
</Dialog>
29-
</Portal>
15+
<Dialog onDismiss={close} visible={visible}>
16+
<Dialog.Title>Progress Dialog</Dialog.Title>
17+
<Dialog.Content>
18+
<View style={styles.flexing}>
19+
<ActivityIndicator
20+
color={Palette.tertiary30}
21+
size={Platform.OS === 'ios' ? 'large' : 48}
22+
style={styles.marginRight}
23+
/>
24+
<TextComponent>Loading.....</TextComponent>
25+
</View>
26+
</Dialog.Content>
27+
</Dialog>
3028
);
3129
};
3230

0 commit comments

Comments
 (0)