feat: updates toast action/cancel property type/handlers (#398)

* feat: update action `type` and helper function * feat: handle action/cancel optional onClick property
emilkowalski · May 23, 2024 · 7d28d42 · 7d28d42
1 parent 35610be
commit 7d28d42
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git 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
@@ -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';