chore(dialogs): replaced type with enum and improved conditional render

Author: computools-anastasiia-nahaiska

README.md

@@ -402,7 +402,7 @@ export const YourComponent = () => {
 
 | name | description | type | default |
 | ------ | ------ | ------ | ----|
-| animationType | - | 'slide', 'fade', 'zoom' | 'slide' |
+| animationType | - | AnimationType | AnimationType.SLIDE |
 | animationDuration | - | number | 330 |
 
 ![full screen dialog gif](https://ik.imagekit.io/Computools/rn-material-components/full-screen-dialog.gif?updatedAt=1729261989519)

…gs/basic-dialog/BasicDialog.compoent.tsx …s/basic-dialog/BasicDialog.component.tsxsrc/dialogs/basic-dialog/BasicDialog.compoent.tsx renamed to src/dialogs/basic-dialog/BasicDialog.component.tsx src/dialogs/basic-dialog/BasicDialog.compoent.tsx renamed to src/dialogs/basic-dialog/BasicDialog.component.tsx

@@ -49,8 +49,8 @@ export const BasicDialog = forwardRef<DialogRef, BasicDialogProps>(
     return (
       <Dialog ref={ref} style={[style]} {...props}>
         {prepend}
-        {title && <Text style={[headlineSmall, styles.title, {color: surfaceContainer.text}, titleStyle]}>{title}</Text>}
-        {subtitle && <Text style={[bodyMedium, {color: surfaceContainer.textVariant}, subtitleStyle]}>{subtitle}</Text>}
+        {title ? <Text style={[headlineSmall, styles.title, {color: surfaceContainer.text}, titleStyle]}>{title}</Text> : null}
+        {subtitle ? <Text style={[bodyMedium, {color: surfaceContainer.textVariant}, subtitleStyle]}>{subtitle}</Text> : null}
         {append}
         {firstActionTitle && (
           <View style={styles.actions}>

src/dialogs/full-screen-dialog/FullScreenDialog.component.tsx

@@ -8,7 +8,11 @@ import {useTheme} from '../../theme/useTheme.hook';
 import {styles} from './full-screen-dialog.styles';
 import {ModalBackdropWrapper} from '../../modal-backdrop-wrapper/ModalBackdropWrapper.component';
 
-type AnimationType = 'slide' | 'fade' | 'zoom';
+export enum AnimationType {
+  SLIDE = 'SLIDE',
+  FADE = 'FADE',
+  ZOOM = 'ZOOM',
+}
 
 interface Props extends ViewProps {
   animationDuration?: number;
@@ -24,7 +28,7 @@ export interface FullScreenDialogRef {
 const ANIMATION_DURATION = 330;
 
 export const FullScreenDialog = forwardRef<FullScreenDialogRef, PropsWithChildren<Props>>(
-  ({children, animationType = 'slide', animationDuration = ANIMATION_DURATION, style, ...props}, ref) => {
+  ({children, animationType = AnimationType.SLIDE, animationDuration = ANIMATION_DURATION, style, ...props}, ref) => {
     const [isVisible, setIsVisible] = useState(false);
     const [isClosing, setIsClosing] = useState(false);
 
@@ -46,7 +50,7 @@ export const FullScreenDialog = forwardRef<FullScreenDialogRef, PropsWithChildre
           visibility.value = withTiming(1, {duration: animationDuration});
         },
         close() {
-          if (animationType === 'zoom') {
+          if (animationType === AnimationType.ZOOM) {
             setIsClosing(true);
           }
 
@@ -66,14 +70,14 @@ export const FullScreenDialog = forwardRef<FullScreenDialogRef, PropsWithChildre
       };
 
       switch (animationType) {
-        case 'slide':
+        case AnimationType.SLIDE:
           return slideAnimStyle;
-        case 'fade': {
+        case AnimationType.FADE: {
           return {
             opacity: visibility.value,
           };
         }
-        case 'zoom': {
+        case AnimationType.ZOOM: {
           return isClosing
             ? slideAnimStyle
             : {

src/index.tsx

@@ -12,8 +12,8 @@ export {OutlinedCard} from './cards/outlined-card/OutlinedCard.component';
 export {ElevatedCard} from './cards/elevated-card/ElevatedCard.cpmponent';
 
 export {Dialog, type DialogRef, type DialogProps} from './dialogs/dialog/Dialog.component';
-export {BasicDialog, type BasicDialogProps} from './dialogs/basic-dialog/BasicDialog.compoent';
-export {FullScreenDialog, type FullScreenDialogRef} from './dialogs/full-screen-dialog/FullScreenDialog.component';
+export {BasicDialog, type BasicDialogProps} from './dialogs/basic-dialog/BasicDialog.component';
+export {FullScreenDialog, AnimationType, type FullScreenDialogRef} from './dialogs/full-screen-dialog/FullScreenDialog.component';
 
 export {Snackbar, type SnackbarProps, type SnackbarRef} from './snackbar/Snackbar.component';