From 1737bacc1863cccbbe40852fd5a333ec551cfbf0 Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github>
Date: Tue, 26 Dec 2023 17:15:49 +0330
Subject: [PATCH] feat: add `icons` prop to `<Toaster />`

---
 src/index.tsx                 | 22 ++++++++++++++--------
 src/types.ts                  | 18 ++++++++++++++++++
 website/src/pages/styling.mdx | 24 ++++++++++++++++++++++++
 website/src/pages/toaster.mdx |  2 +-
 4 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 397e3e9..b41cce6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -56,6 +56,7 @@ const Toast = (props: ToastProps) => {
     loadingIcon: loadingIconProp,
     expandByDefault,
     classNames,
+    icons,
     closeButtonAriaLabel = 'Close toast',
   } = props;
   const [mounted, setMounted] = React.useState(false);
@@ -194,6 +195,13 @@ const Toast = (props: ToastProps) => {
   }, [deleteToast, toast.delete]);
 
   function getLoadingIcon() {
+    if (icons.loading) {
+      return (
+        <div className="loader" data-visible={toastType === 'loading'}>
+          {icons.loading}
+        </div>
+      );
+    }
     if (loadingIconProp) {
       return (
         <div className="loader" data-visible={toastType === 'loading'}>
@@ -333,8 +341,9 @@ const Toast = (props: ToastProps) => {
         <>
           {toastType || toast.icon || toast.promise ? (
             <div data-icon="">
-              {(toast.promise || toast.type === 'loading') && !toast.icon ? getLoadingIcon() : null}
-              {toast.icon || getAsset(toastType)}
+              {toast.promise || toastType === 'loading'
+                ? toast.icon || icons.loading || getLoadingIcon()
+                : toast.icon || icons[toastType] || getAsset(toastType)}
             </div>
           ) : null}
 
@@ -424,6 +433,7 @@ const Toaster = (props: ToasterProps) => {
     dir = getDocumentDirection(),
     gap,
     loadingIcon,
+    icons,
     containerAriaLabel = 'Notifications',
   } = props;
   const [toasts, setToasts] = React.useState<ToastT[]>([]);
@@ -644,6 +654,7 @@ const Toaster = (props: ToasterProps) => {
                   expandByDefault={expand}
                   gap={gap}
                   loadingIcon={loadingIcon}
+                  icons={icons}
                   expanded={expanded}
                 />
               ))}
@@ -653,9 +664,4 @@ const Toaster = (props: ToasterProps) => {
     </section>
   );
 };
-export {
-  toast,
-  Toaster,
-  type ToastT,
-  type ExternalToast
-};
+export { toast, Toaster, type ToastT, type ExternalToast };
diff --git a/src/types.ts b/src/types.ts
index 407a1e5..c7455ee 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -26,6 +26,14 @@ export interface ToastClassnames {
   default?: string;
 }
 
+export interface ToastIcons {
+  success?: React.ReactNode;
+  info?: React.ReactNode;
+  warning?: React.ReactNode;
+  error?: React.ReactNode;
+  loading?: React.ReactNode;
+}
+
 export interface ToastT {
   id: number | string;
   title?: string | React.ReactNode;
@@ -92,8 +100,17 @@ export interface ToasterProps {
   style?: React.CSSProperties;
   offset?: string | number;
   dir?: 'rtl' | 'ltr' | 'auto';
+  /**
+   * @deprecated Please use the `icons` prop instead:
+   * ```jsx
+   * <Toaster
+   *   icons={{ loading: <LoadingIcon /> }}
+   * />
+   * ```
+   */
   loadingIcon?: React.ReactNode;
   containerAriaLabel?: string;
+  icons?: ToastIcons;
 }
 
 export interface ToastProps {
@@ -120,6 +137,7 @@ export interface ToastProps {
   descriptionClassName?: string;
   loadingIcon?: React.ReactNode;
   classNames?: ToastClassnames;
+  icons?: ToastIcons;
   closeButtonAriaLabel?: string;
 }
 
diff --git a/website/src/pages/styling.mdx b/website/src/pages/styling.mdx
index c5427d2..3482bb9 100644
--- a/website/src/pages/styling.mdx
+++ b/website/src/pages/styling.mdx
@@ -75,3 +75,27 @@ Styling per toast type is also possible.
   }}
 />
 ```
+
+## Changing Icons
+
+You can change the default icons using the `icons` prop:
+
+```jsx
+<Toaster
+  icons={{
+    success: <SuccessIcon />,
+    info: <InfoIcon />,
+    warning: <WarningIcon />,
+    error: <ErrorIcon />,
+    loading: <LoadingIcon />,
+  }}
+/>
+```
+
+You can also set an icon for each toast:
+
+```jsx
+toast('Hello World', {
+  icon: <Icon />
+});
+```
diff --git a/website/src/pages/toaster.mdx b/website/src/pages/toaster.mdx
index 7a7323f..d9e6f53 100644
--- a/website/src/pages/toaster.mdx
+++ b/website/src/pages/toaster.mdx
@@ -63,4 +63,4 @@ Changes the directionality of the toast's text.
 | invert        |                             Dark toasts in light mode and vice versa.                              |        `false` |
 | toastOptions  | These will act as default options for all toasts. See [toast()](/toast) for all available options. |         `4000` |
 | gap           |                                  Gap between toasts when expanded                                  |           `14` |
-| loadingIcon   |                                  Changes the default loading icon                                  |            `-` |
+| icons         |                                     Changes the default icons                                      |            `-` |