From 7d28d42b368fd65f02d1d903c673111f3a430701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ph=C3=A1t?= <tienphat1501@gmail.com>
Date: Thu, 23 May 2024 14:33:34 +0700
Subject: [PATCH] feat: updates toast action/cancel property type/handlers
 (#398)

* feat: update action `type` and helper function

* feat: handle action/cancel optional onClick property
---
 src/index.tsx | 7 ++++---
 src/types.ts  | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 9a2adc5..fa76ce3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -424,8 +424,8 @@ const Toast = (props: ToastProps) => {
                 // We need to check twice because typescript
                 if (!isAction(toast.cancel)) return;
                 if (!dismissible) return;
+                toast.cancel.onClick?.(event);
                 deleteToast();
-                toast.cancel.onClick(event);
               }}
               className={cn(classNames?.cancelButton, toast?.classNames?.cancelButton)}
             >
@@ -436,13 +436,14 @@ const Toast = (props: ToastProps) => {
             toast.action
           ) : toast.action && isAction(toast.action) ? (
             <button
-              data-button=""
+              data-button
+							data-action
               style={toast.actionButtonStyle || actionButtonStyle}
               onClick={(event) => {
                 // We need to check twice because typescript
                 if (!isAction(toast.action)) return;
-                toast.action.onClick(event);
                 if (event.defaultPrevented) return;
+                toast.action.onClick?.(event);
                 deleteToast();
               }}
               className={cn(classNames?.actionButton, toast?.classNames?.actionButton)}
diff --git a/src/types.ts b/src/types.ts
index a4ac7a0..4d7d216 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -41,7 +41,7 @@ export interface ToastIcons {
 }
 
 interface Action {
-  label: string;
+  label: React.ReactNode;
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   actionButtonStyle?: React.CSSProperties;
 }
@@ -76,7 +76,7 @@ export interface ToastT {
 }
 
 export function isAction(action: Action | React.ReactNode): action is Action {
-  return (action as Action).label !== undefined && typeof (action as Action).onClick === 'function';
+  return (action as Action).label !== undefined;
 }
 
 export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';