From fa86551ffaa751182f07930821578f427b9e3685 Mon Sep 17 00:00:00 2001 From: Nicolas Pieuchot Date: Fri, 1 Dec 2023 18:04:41 +0100 Subject: [PATCH] :sparkles: Adding icon to popup. --- .../components/Dialog/Dialog.stories.tsx | 15 ++++-- src/components/dialogs/Dialog.tsx | 28 +++++++++-- src/components/dialogs/DialogIcon.tsx | 46 +++++++++++++++++++ 3 files changed, 80 insertions(+), 9 deletions(-) create mode 100644 src/components/dialogs/DialogIcon.tsx diff --git a/Storybook/components/Dialog/Dialog.stories.tsx b/Storybook/components/Dialog/Dialog.stories.tsx index 8d1e85a8..60275a95 100644 --- a/Storybook/components/Dialog/Dialog.stories.tsx +++ b/Storybook/components/Dialog/Dialog.stories.tsx @@ -15,6 +15,8 @@ export default { variant: 'left', haveSecondButton: false, title: 'Headline', + iconName: '', + iconColor: '', }, argTypes: { variant: { @@ -28,7 +30,11 @@ export default { decorators: [ (Story) => { const styles = StyleSheet.create({ - container: { alignItems: 'center', justifyContent: 'center', flex: 1 }, + container: { + alignItems: 'center', + justifyContent: 'center', + flex: 1, + }, }); return ( @@ -70,9 +76,10 @@ const InsideDialog = ({ variantBody }: { variantBody?: 'left' | 'center' }) => { }, }); return ( - - A dialog is a type of modal window that appears in front of app content to provide - critical information. This is a dialog content example. + + A dialog is a type of modal window that appears in front of app + content to provide critical information. This is a dialog content + example. ); }; diff --git a/src/components/dialogs/Dialog.tsx b/src/components/dialogs/Dialog.tsx index d138ca8b..d0a66bff 100644 --- a/src/components/dialogs/Dialog.tsx +++ b/src/components/dialogs/Dialog.tsx @@ -1,9 +1,17 @@ import React, { PropsWithChildren } from 'react'; -import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'; +import { + StyleProp, + StyleSheet, + TextStyle, + View, + ViewStyle, +} from 'react-native'; import { Dialog as BaseDialog, Portal } from 'react-native-paper'; -import { useTheme } from '../../styles/themes'; import { Button } from '../buttons/Button'; import { Headline } from '../typography/Headline'; +import { DialogIcon } from './DialogIcon'; +import { useTheme } from '../../styles/themes'; +import { IconName } from '../icons/IconProps'; interface Action { label: string; @@ -21,6 +29,8 @@ export interface DialogProps extends PropsWithChildren { titleStyle?: TextStyle; actionsStyle?: ViewStyle; title?: string; + iconName?: IconName; + iconColor?: string; variant?: 'left' | 'center'; dismissable?: boolean; onDismiss?: () => void; @@ -72,8 +82,16 @@ export const Dialog = (props: DialogProps) => { dismissable={props.dismissable} style={styles.dialog} > + {props.iconName && ( + + )} - + {props.title} @@ -81,7 +99,7 @@ export const Dialog = (props: DialogProps) => { {props.actions.cancel && ( )}