chore: refactor enums to types

gunnartorfis · Sep 5, 2024 · 0656fb1 · 0656fb1
1 parent d574658
commit 0656fb1
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 76 deletions.
diff --git a/docs/docs/Toaster.md b/docs/docs/Toaster.md
@@ -28,12 +28,12 @@ export default function App() {
 
 ## Props
 
-| Prop                     | Type                  | Default                    | Description                                                 |
-| ------------------------ | --------------------- | -------------------------- | ----------------------------------------------------------- |
-| `duration`               | `number`              | `3000` (ms)                | Duration each toast is visible before auto-dismissal.       |
-| `position`               | `ToastPosition`       | `ToastPosition.TOP_CENTER` | The position of the toasts (`top-center`, `bottom-center`). |
-| `maxToasts`              | `number`              | `3`                        | Maximum number of toasts to show at once.                   |
-| `swipToDismissDirection` | `ToastSwipeDirection` | `ToastSwipeDirection.UP    | Swipe direction to dismiss (`left`, `up`).                  |
+| Prop                     | Type                  | Default      | Description                                                 |
+| ------------------------ | --------------------- | ------------ | ----------------------------------------------------------- |
+| `duration`               | `number`              | `3000` (ms)  | Duration each toast is visible before auto-dismissal.       |
+| `position`               | `ToastPosition`       | `top-center` | The position of the toasts (`top-center`, `bottom-center`). |
+| `maxToasts`              | `number`              | `3`          | Maximum number of toasts to show at once.                   |
+| `swipToDismissDirection` | `ToastSwipeDirection` | `up`         | Swipe direction to dismiss (`left`, `up`).                  |
 
 ### Style related props
 

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -4,11 +4,7 @@ import { ToastDemoModal } from 'example/src/ToastDemoModal';
 import { ToastDemoScreen } from 'example/src/ToastDemoScreen';
 import * as React from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import {
-  Toaster,
-  ToastPosition,
-  ToastSwipeDirection,
-} from 'react-native-reanimated-toasts';
+import { Toaster } from 'react-native-reanimated-toasts';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import '../global.css';
 
@@ -31,9 +27,9 @@ const App: React.FC = () => {
           </Stack.Navigator>
         </NavigationContainer>
         <Toaster
-          position={ToastPosition.TOP_CENTER}
+          position="top-center"
           duration={3000}
-          swipToDismissDirection={ToastSwipeDirection.UP}
+          swipToDismissDirection="up"
           maxToasts={4}
         />
       </GestureHandlerRootView>

diff --git a/example/src/ToastDemo.tsx b/example/src/ToastDemo.tsx
@@ -1,22 +1,21 @@
 import { Button, Pressable, Text, View } from 'react-native';
 import * as React from 'react';
-import { toast, ToastVariant } from 'react-native-reanimated-toasts';
+import { toast } from 'react-native-reanimated-toasts';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 export const ToastDemo: React.FC = () => {
-  const [variant, setVariant] = React.useState<ToastVariant>(ToastVariant.INFO);
+  const [variant, setVariant] = React.useState<'success' | 'error' | 'info'>(
+    'info'
+  );
   const [toastId, setToastId] = React.useState<string | null>(null);
 
   return (
     <SafeAreaView>
       <Text>Selected variant: {variant}</Text>
       <View className="flex flex-row items-center justify-between mb-12">
-        <Button
-          title="Success"
-          onPress={() => setVariant(ToastVariant.SUCCESS)}
-        />
-        <Button title="Info" onPress={() => setVariant(ToastVariant.INFO)} />
-        <Button title="Error" onPress={() => setVariant(ToastVariant.ERROR)} />
+        <Button title="Success" onPress={() => setVariant('success')} />
+        <Button title="Info" onPress={() => setVariant('info')} />
+        <Button title="Error" onPress={() => setVariant('error')} />
       </View>
       <Button
         title={toastId ? 'Update toast' : 'Show toast'}
@@ -139,6 +138,6 @@ export const ToastDemo: React.FC = () => {
 
 const handleToast = () => {
   toast('I am outside!', {
-    variant: ToastVariant.SUCCESS,
+    variant: 'success',
   });
 };
diff --git a/src/animations.ts b/src/animations.ts
@@ -2,7 +2,7 @@ import React from 'react';
 import { withTiming } from 'react-native-reanimated';
 import { easeInOutCubic, easeOutCirc } from 'src/easings';
 import { useToastContext } from './context';
-import { ToastPosition } from './types';
+import type { ToastPosition } from './types';
 
 export const ANIMATION_DURATION = 300;
 
@@ -46,7 +46,7 @@ export const getToastEntering = ({ position }: GetToastAnimationParams) => {
     transform: [
       { scale: 0 },
       {
-        translateY: position === ToastPosition.TOP_CENTER ? -50 : 50,
+        translateY: position === 'top-center' ? -50 : 50,
       },
     ],
   };
@@ -64,10 +64,9 @@ export const getToastExiting = ({ position }: GetToastAnimationParams) => {
     opacity: withTiming(0, { easing: easeInOutCubic }),
     transform: [
       {
-        translateY: withTiming(
-          position === ToastPosition.TOP_CENTER ? -150 : 150,
-          { easing: easeInOutCubic }
-        ),
+        translateY: withTiming(position === 'top-center' ? -150 : 150, {
+          easing: easeInOutCubic,
+        }),
       },
     ],
   };

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,8 +1,13 @@
-import { ToastPosition, ToastSwipeDirection, ToastVariant } from './types';
+import type { ToastPosition, ToastSwipeDirection, ToastVariant } from './types';
 
-export const toastDefaultValues = {
+export const toastDefaultValues: {
+  duration: number;
+  position: ToastPosition;
+  swipeToDismissDirection: ToastSwipeDirection;
+  variant: ToastVariant;
+} = {
   duration: 3000,
-  position: ToastPosition.TOP_CENTER,
-  swipeToDismissDirection: ToastSwipeDirection.UP,
-  variant: ToastVariant.INFO,
+  position: 'top-center',
+  swipeToDismissDirection: 'up',
+  variant: 'info',
 };
diff --git a/src/gestures.tsx b/src/gestures.tsx
@@ -12,9 +12,6 @@ import Animated, {
 } from 'react-native-reanimated';
 import { easeInOutCircFn } from 'src/easings';
 import { useToastContext } from './context';
-import { ToastSwipeDirection } from './types';
-
-const { LEFT, UP } = ToastSwipeDirection;
 
 const { width: WINDOW_WIDTH } = Dimensions.get('window');
 
@@ -53,9 +50,9 @@ export const ToastSwipeHandler: React.FC<
         return;
       }
 
-      if (direction === LEFT && event.translationX < 0) {
+      if (direction === 'left' && event.translationX < 0) {
         translate.value = event.translationX;
-      } else if (direction === UP) {
+      } else if (direction === 'up') {
         translate.value = event.translationY;
       }
     })
@@ -64,7 +61,7 @@ export const ToastSwipeHandler: React.FC<
         return;
       }
 
-      const threshold = direction === LEFT ? -WINDOW_WIDTH * 0.25 : -16;
+      const threshold = direction === 'left' ? -WINDOW_WIDTH * 0.25 : -16;
       const shouldDismiss = translate.value < threshold;
 
       if (shouldDismiss) {
@@ -90,13 +87,13 @@ export const ToastSwipeHandler: React.FC<
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
-        direction === LEFT
+        direction === 'left'
           ? { translateX: translate.value }
           : { translateY: translate.value },
       ],
       opacity: interpolate(
         translate.value,
-        [0, direction === LEFT ? -WINDOW_WIDTH : -60],
+        [0, direction === 'left' ? -WINDOW_WIDTH : -60],
         [1, 0]
       ),
     };

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,3 +1,2 @@
 export { Toaster } from './toaster';
 export { toast } from './toast-fns';
-export { ToastVariant, ToastPosition, ToastSwipeDirection } from './types';
diff --git a/src/toast-fns.ts b/src/toast-fns.ts
@@ -1,5 +1,5 @@
 import { getToastContext } from './toaster';
-import { ToastVariant, type ToastFunction } from './types';
+import { type ToastFunction } from './types';
 
 export const toast: ToastFunction = (title, options) => {
   return getToastContext().addToast(title, options);
@@ -8,28 +8,28 @@ export const toast: ToastFunction = (title, options) => {
 toast.success = (title, options = {}) => {
   return getToastContext().addToast(title, {
     ...options,
-    variant: ToastVariant.SUCCESS,
+    variant: 'success',
   });
 };
 
 toast.error = (title: string, options = {}) => {
   return getToastContext().addToast(title, {
     ...options,
-    variant: ToastVariant.ERROR,
+    variant: 'error',
   });
 };
 
 toast.info = (title: string, options = {}) => {
   return getToastContext().addToast(title, {
     ...options,
-    variant: ToastVariant.INFO,
+    variant: 'info',
   });
 };
 
 toast.promise = (promise, options) => {
   return getToastContext().addToast(options.loading, {
     ...options,
-    variant: ToastVariant.INFO,
+    variant: 'info',
     promiseOptions: {
       promise,
       ...options,

diff --git a/src/toast.tsx b/src/toast.tsx
@@ -5,7 +5,7 @@ import Animated from 'react-native-reanimated';
 import { ANIMATION_DURATION, useToastLayoutAnimations } from './animations';
 import { useToastContext } from './context';
 import { ToastSwipeHandler } from './gestures';
-import { ToastVariant, type ToastProps } from './types';
+import { type ToastProps } from './types';
 import { useColors } from './use-colors';
 
 export const Toast: React.FC<ToastProps> = ({
@@ -55,15 +55,15 @@ export const Toast: React.FC<ToastProps> = ({
         promiseOptions.promise.then((data) => {
           addToast(promiseOptions.success(data) ?? 'Success', {
             id,
-            variant: ToastVariant.SUCCESS,
+            variant: 'success',
             promiseOptions: undefined,
           });
           isResolvingPromise.current = false;
         });
       } catch (error) {
         addToast(promiseOptions.error ?? 'Error', {
           id,
-          variant: ToastVariant.ERROR,
+          variant: 'error',
           promiseOptions: undefined,
         });
         isResolvingPromise.current = false;
@@ -244,24 +244,22 @@ export const ToastIcon: React.FC<
       return (
         <CircleCheck
           size={20}
-          color={
-            getIconColorForVariant?.(ToastVariant.SUCCESS) ?? colors.success
-          }
+          color={getIconColorForVariant?.(variant) ?? colors.success}
         />
       );
     case 'error':
       return (
         <CircleX
           size={20}
-          color={getIconColorForVariant?.(ToastVariant.SUCCESS) ?? colors.error}
+          color={getIconColorForVariant?.(variant) ?? colors.error}
         />
       );
     default:
     case 'info':
       return (
         <Info
           size={20}
-          color={getIconColorForVariant?.(ToastVariant.INFO) ?? colors.info}
+          color={getIconColorForVariant?.('info') ?? colors.info}
         />
       );
   }

diff --git a/src/toaster.tsx b/src/toaster.tsx
@@ -7,7 +7,6 @@ import { toastDefaultValues } from './constants';
 import { ToastContext } from './context';
 import { Toast } from './toast';
 import {
-  ToastPosition,
   type ToastFunctionBase,
   type ToastFunctionOptions,
   type ToastProps,
@@ -16,8 +15,6 @@ import {
 
 let addToastHandler: ToastFunctionBase;
 
-const { TOP_CENTER, BOTTOM_CENTER } = ToastPosition;
-
 export const Toaster: React.FC<ToastProviderProps> = (props) => {
   return (
     <FullWindowOverlay>
@@ -102,20 +99,18 @@ export const ToasterUI: React.FC<ToastProviderProps> = ({
   );
 
   const positionedToasts = React.useMemo(() => {
-    return position === ToastPosition.BOTTOM_CENTER
-      ? toasts
-      : toasts.slice().reverse();
+    return position === 'bottom-center' ? toasts : toasts.slice().reverse();
   }, [position, toasts]);
 
   const insetValues = React.useMemo(() => {
-    if (position === BOTTOM_CENTER) {
+    if (position === 'bottom-center') {
       if (bottom > 0) {
         return { bottom };
       }
       return { bottom: 40 };
     }
 
-    if (position === TOP_CENTER) {
+    if (position === 'top-center') {
       if (top > 0) {
         return { top };
       }

diff --git a/src/types.ts b/src/types.ts
@@ -26,15 +26,9 @@ export type ToastProps = {
   promiseOptions?: PromiseOptions;
 };
 
-export enum ToastPosition {
-  TOP_CENTER = 'top-center',
-  BOTTOM_CENTER = 'bottom-center',
-}
+export type ToastPosition = 'top-center' | 'bottom-center';
 
-export enum ToastSwipeDirection {
-  LEFT = 'left',
-  UP = 'up',
-}
+export type ToastSwipeDirection = 'left' | 'up';
 
 export type ToastProviderProps = {
   duration?: number;
@@ -68,11 +62,7 @@ export type ToastContextType = {
   swipToDismissDirection: ToastSwipeDirection;
 };
 
-export enum ToastVariant {
-  SUCCESS = 'success',
-  ERROR = 'error',
-  INFO = 'info',
-}
+export type ToastVariant = 'success' | 'error' | 'info';
 
 export type ToastAction = {
   label: string;