Feat/Action + Close Button (#16)

RockiRider · Feb 26, 2024 · c53dd1c · c53dd1c
1 parent 9e0b577
commit c53dd1c
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 82 deletions.
diff --git a/apps/example-vite/package.json b/apps/example-vite/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.6",
     "mui-sonner": "*",
     "react": "^18.2.0",

diff --git a/apps/example-vite/src/App.tsx b/apps/example-vite/src/App.tsx
@@ -1,4 +1,5 @@
 import "./App.css";
+
 import { toast } from "mui-sonner";
 import { Button, CssBaseline, Stack, ThemeProvider } from "@mui/material";
 import { appTheme } from "./assets/theme";
@@ -7,49 +8,66 @@ function App() {
   return (
     <ThemeProvider theme={appTheme}>
       <CssBaseline />
-      <h1>Vite + React</h1>
-      <Stack className="card">
-        <Button
-          onClick={() =>
-            toast.success("Save Successful", {
-              description: "Your item has been saved.",
-            })
-          }
-        >
-          Success
-        </Button>
-        <Button
-          onClick={() => {
-            const prom = new Promise((resolve) => {
-              setTimeout(() => {
-                resolve("Success");
-              }, 3000);
-            });
+      <Stack gap={2} alignItems="center" width={1}>
+        <h1>Vite + React</h1>
+        <Stack className="card" gap={2}>
+          <Button
+            onClick={() => {
+              toast("Update something", {
+                closeButton: true,
+                action: {
+                  label: "Update",
+                  onClick: () => {
+                    alert("Updating...");
+                  },
+                },
+              });
+            }}
+          >
+            Action + Close
+          </Button>
+          <Button
+            onClick={() =>
+              toast.success("Save Successful", {
+                description: "Your item has been saved.",
+              })
+            }
+          >
+            Success
+          </Button>
+          <Button
+            onClick={() => {
+              const prom = new Promise((resolve) => {
+                setTimeout(() => {
+                  resolve("Success");
+                }, 3000);
+              });
 
-            toast.promise(prom, {
-              loading: "Saving...",
-              success: "Save Successful",
-            });
-          }}
-        >
-          Promise Success
-        </Button>
-        <Button
-          onClick={() => {
-            const prom = new Promise((_resolve, reject) => {
-              setTimeout(() => {
-                reject("Error");
-              }, 3000);
-            });
+              toast.promise(prom, {
+                loading: "Saving...",
+                success: "Save Successful",
+              });
+            }}
+          >
+            Promise Success
+          </Button>
+          <Button
+            onClick={() => {
+              const prom = new Promise((_resolve, reject) => {
+                setTimeout(() => {
+                  reject("Error");
+                }, 3000);
+              });
 
-            toast.promise(prom, {
-              loading: "Saving...",
-              error: "Save Failed",
-            });
-          }}
-        >
-          Promise Error
-        </Button>
+              toast.promise(prom, {
+                loading: "Saving...",
+                error: "Save Failed",
+              });
+            }}
+          >
+            Promise Error
+          </Button>
+        </Stack>
       </Stack>
     </ThemeProvider>
   );

diff --git a/apps/example-vite/src/index.css b/apps/example-vite/src/index.css
@@ -35,34 +35,5 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+
diff --git a/apps/example-vite/src/main.tsx b/apps/example-vite/src/main.tsx
@@ -3,10 +3,23 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { Toaster } from "mui-sonner";
+import { CircularProgress, Icon } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <Toaster />
+    <Toaster
+      toastOptions={{
+        closeIcon: (
+          <Icon sx={{ width: 24, height: 24 }}>
+            <CloseIcon />
+          </Icon>
+        ),
+        loading: {
+          icon: <CircularProgress size={20} color="secondary" />,
+        },
+      }}
+    />
     <App />
   </React.StrictMode>
 );
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mui-sonner/src/AlertAction.tsx b/packages/mui-sonner/src/AlertAction.tsx
@@ -1,4 +1,4 @@
-import { Button, SxProps, IconButton, Theme } from "@mui/material";
+import { Button, SxProps, IconButton, Theme, Stack } from "@mui/material";
 import React, { ReactNode } from "react";
 import { ToastT } from ".";
 import { ToastAction } from "./types";
@@ -76,7 +76,23 @@ const AlertAction = ({
   defaultCloseButtonSx,
   defaultActionButtonSx,
 }: AlertActionProps) => {
-  if (toast.action) {
+  if (toast.action && toast.closeButton) {
+    return (
+      <Stack direction="row" gap={1}>
+        <ActionButton
+          action={toast.action}
+          deleteToast={deleteToast}
+          actionButtonSx={defaultActionButtonSx}
+        />
+        <CloseButton
+          closeButtonAriaLabel={closeButtonAriaLabel}
+          deleteToast={deleteToast}
+          closeIcon={closeIcon}
+          closeButtonSx={defaultCloseButtonSx}
+        />
+      </Stack>
+    );
+  } else if (toast.action) {
     return (
       <ActionButton
         action={toast.action}