✨ Adding icon to popup.

ZeroGachis · Dec 1, 2023 · fa86551 · fa86551
1 parent 34e2fba
commit fa86551
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 9 deletions.
diff --git 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 (
                 <View style={styles.container}>
@@ -70,9 +76,10 @@ const InsideDialog = ({ variantBody }: { variantBody?: 'left' | 'center' }) => {
         },
     });
     return (
-        <Body style={styles.content} size="B2">
-            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.
+        <Body style={styles.content} size='B2'>
+            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.
         </Body>
     );
 };

diff --git 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,16 +82,24 @@ export const Dialog = (props: DialogProps) => {
                 dismissable={props.dismissable}
                 style={styles.dialog}
             >
+                {props.iconName && (
+                    <DialogIcon
+                        iconName={props.iconName}
+                        iconColor={
+                            props.iconColor ? props.iconColor : undefined
+                        }
+                    />
+                )}
                 <BaseDialog.Title testID={'PopupTitle'}>
-                    <Headline size="h4" style={titleStyle}>
+                    <Headline size='h4' style={titleStyle}>
                         {props.title}
                     </Headline>
                 </BaseDialog.Title>
                 <BaseDialog.Content>{props.children}</BaseDialog.Content>
                 <View style={styles.actions}>
                     {props.actions.cancel && (
                         <Button
-                            variant="text"
+                            variant='text'
                             onPress={props.actions.cancel.onPress}
                             testID={'PopupDismissButton'}
                             style={styles.leftOption}
@@ -90,7 +108,7 @@ export const Dialog = (props: DialogProps) => {
                         </Button>
                     )}
                     <Button
-                        variant="filled"
+                        variant='filled'
                         status={'primary'}
                         onPress={props.actions.confirm.onPress}
                         testID={'PopupConfirmButton'}

diff --git a/src/components/dialogs/DialogIcon.tsx b/src/components/dialogs/DialogIcon.tsx
@@ -0,0 +1,46 @@
+import { View } from 'react-native';
+import { IconName } from '../icons/IconProps';
+import { PropsWithChildren } from 'react';
+import React from 'react';
+import { useTheme } from '../../styles/themes';
+import { Icon } from '../icons/Icon';
+
+export interface DialogIconProps extends PropsWithChildren {
+    iconName: IconName;
+    iconColor?: string;
+}
+
+export const DialogIcon = (props: DialogIconProps) => {
+    const theme = useTheme();
+    return (
+        <View
+            style={{
+                alignSelf: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 4,
+                borderStyle: 'solid',
+                borderColor: theme.sw.colors.neutral[200],
+                width: 100,
+                height: 100,
+                borderRadius: 50,
+                marginBottom: theme.sw.spacing.m,
+            }}
+        >
+            <View
+                style={{
+                    alignItems: 'center',
+                    marginVertical: 'auto',
+                    justifyContent: 'center',
+                    width: 100,
+                }}
+            >
+                <Icon
+                    name={props.iconName}
+                    size={42}
+                    color={props.iconColor ?? theme.sw.colors.neutral[600]}
+                />
+            </View>
+        </View>
+    );
+};