✨ Adding icon to popup.

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

Hide file tree

Showing 3 changed files with 85 additions and 9 deletions.
diff --git a/Storybook/components/Dialog/Dialog.stories.tsx b/Storybook/components/Dialog/Dialog.stories.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { Body, Dialog, useTheme } from 'smartway-react-native-ui';
+import { IconsName } from '../config/IconList';
 
 type DialogPropsAndCustomArgs = React.ComponentProps<typeof Dialog> & {
     haveSecondButton?: boolean;
@@ -15,6 +16,8 @@ export default {
         variant: 'left',
         haveSecondButton: false,
         title: 'Headline',
+        name: undefined,
+        color: 'red',
     },
     argTypes: {
         variant: {
@@ -24,11 +27,17 @@ export default {
         haveSecondButton: {
             control: { type: 'boolean' },
         },
+        name: { control: { type: 'select' }, options: IconsName },
+        color: { control: { type: 'color' } },
     },
     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,17 +79,23 @@ 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>
     );
 };
 
 export const Default: Story = {
     render: (args) => {
+        const iconprops = args.name !== undefined && {
+            name: args.name,
+            color: args.color ?? undefined,
+        };
         return (
             <Dialog
+                icon={iconprops ?? undefined}
                 {...args}
                 visible={true}
                 actions={{

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, DialogIconProps } from './DialogIcon';
+import { useTheme } from '../../styles/themes';
+import { IconName } from '../icons/IconProps';
 
 interface Action {
     label: string;
@@ -21,6 +29,7 @@ export interface DialogProps extends PropsWithChildren {
     titleStyle?: TextStyle;
     actionsStyle?: ViewStyle;
     title?: string;
+    icon?: DialogIconProps;
     variant?: 'left' | 'center';
     dismissable?: boolean;
     onDismiss?: () => void;
@@ -72,16 +81,22 @@ export const Dialog = (props: DialogProps) => {
                 dismissable={props.dismissable}
                 style={styles.dialog}
             >
+                {props.icon && (
+                    <DialogIcon
+                        name={props.icon.name}
+                        color={props.icon.color ? props.icon.color : 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 +105,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 {
+    name: IconName;
+    color?: 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.name}
+                    size={42}
+                    color={props.color ?? theme.sw.colors.neutral[600]}
+                />
+            </View>
+        </View>
+    );
+};