Merge pull request #130 from ljukas/ll/customizeable-close-button

feat: added customizeable close button
gunnartorfis · Oct 4, 2024 · 2c68249 · 2c68249
2 parents f6d86b4 + 8dc3666
commit 2c68249
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 24 deletions.
diff --git a/example/src/ToastDemo.tsx b/example/src/ToastDemo.tsx
@@ -428,6 +428,16 @@ export const ToastDemo: React.FC = () => {
           setToastId(id);
         }}
       />
+
+      <Button
+        title="Custom close button"
+        onPress={() => {
+          const id = toast.success('Custom close button', {
+            close: <Button title="close" onPress={() => toast.dismiss(id)} />,
+            closeButton: undefined,
+          });
+        }}
+      />
     </ScrollView>
   );
 };

diff --git a/src/gestures.tsx b/src/gestures.tsx
@@ -10,8 +10,8 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { easeInOutCircFn } from './easings';
 import { useToastContext } from './context';
+import { easeInOutCircFn } from './easings';
 import type { ToastPosition, ToastProps } from './types';
 
 const { width: WINDOW_WIDTH } = Dimensions.get('window');
@@ -113,7 +113,6 @@ export const ToastSwipeHandler: React.FC<
 
   const tap = Gesture.Tap().onEnd(() => {
     'worklet';
-
     if (onPress) {
       runOnJS(onPress)();
     }

diff --git a/src/toast.tsx b/src/toast.tsx
@@ -27,6 +27,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
       variant,
       action,
       cancel,
+      close,
       onDismiss,
       onAutoClose,
       dismissible = toastDefaultValues.dismissible,
@@ -263,6 +264,52 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
       variant,
     });
 
+    const renderCloseButton = React.useMemo(() => {
+      if (!dismissible) {
+        return null;
+      }
+      if (close) {
+        return close;
+      }
+      if (closeButton) {
+        return (
+          <Pressable
+            onPress={() => onDismiss?.(id)}
+            hitSlop={10}
+            style={[closeButtonStyleCtx, styles?.closeButton]}
+            className={cn(classNamesCtx?.closeButton, classNames?.closeButton)}
+          >
+            <X
+              size={20}
+              color={defaultStyles.closeButtonColor}
+              style={[closeButtonIconStyleCtx, styles?.closeButtonIcon]}
+              className={cn(
+                classNamesCtx?.closeButtonIcon,
+                classNames?.closeButtonIcon
+              )}
+            />
+          </Pressable>
+        );
+      }
+      return null;
+    }, [
+      classNames?.closeButton,
+      classNames?.closeButtonIcon,
+      classNamesCtx?.closeButton,
+      classNamesCtx?.closeButtonIcon,
+      close,
+      closeButton,
+      closeButtonIconStyleCtx,
+      closeButtonStyleCtx,
+      cn,
+      defaultStyles?.closeButtonColor,
+      dismissible,
+      id,
+      onDismiss,
+      styles?.closeButton,
+      styles?.closeButtonIcon,
+    ]);
+
     if (jsx) {
       return jsx;
     }
@@ -426,27 +473,7 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
                 )}
               </View>
             </View>
-            {closeButton && dismissible ? (
-              <Pressable
-                onPress={() => onDismiss?.(id)}
-                hitSlop={10}
-                style={[closeButtonStyleCtx, styles?.closeButton]}
-                className={cn(
-                  classNamesCtx?.closeButton,
-                  classNames?.closeButton
-                )}
-              >
-                <X
-                  size={20}
-                  color={defaultStyles.closeButtonColor}
-                  style={[closeButtonIconStyleCtx, styles?.closeButtonIcon]}
-                  className={cn(
-                    classNamesCtx?.closeButtonIcon,
-                    classNames?.closeButtonIcon
-                  )}
-                />
-              </Pressable>
-            ) : null}
+            {renderCloseButton}
           </View>
         </Animated.View>
       </ToastSwipeHandler>

diff --git a/src/types.ts b/src/types.ts
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { TextStyle, ViewStyle } from 'react-native';
 
 type StyleProps = {
@@ -54,7 +55,6 @@ export type ToastProps = StyleProps & {
   variant: ToastVariant;
   jsx?: React.ReactNode;
   description?: string;
-  closeButton?: boolean;
   invert?: boolean;
   important?: boolean;
   duration?: number;
@@ -63,6 +63,8 @@ export type ToastProps = StyleProps & {
   icon?: React.ReactNode;
   action?: ToastAction | React.ReactNode;
   cancel?: ToastAction | React.ReactNode;
+  close?: React.ReactNode;
+  closeButton?: boolean;
   richColors?: boolean;
   onDismiss?: (id: string | number) => void;
   onAutoClose?: (id: string | number) => void;