taosts-in-caisy-cy-2875

package.json

@@ -74,7 +74,8 @@
     "react-chartjs-2": "^5.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sonner": "^1.4.0"
   },
   "files": [
     "dist",

src/components/message/Message.tsx

@@ -1,16 +1,14 @@
-import React, { useState } from "react";
-import { createRoot }  from 'react-dom/client';
+import React from "react";
 import { NotificationSnackbar } from "../notification-snackbar/NotificationSnackbar";
-import { GSMessage } from "./styles/GSMessage";
 import { IMessageConfig } from "./types";
+import { toast } from "sonner";
 
 export enum EMessageType {
   Success = "success",
   Error = "error",
   Info = "info",
 }
 
-
 // I created the Message and MessageWrapper components in this file,
 // because we don't use it anywhere else,
 // and we don't want to accidentally import "Message" instead of "message" on our app
@@ -19,17 +17,12 @@ export interface IMessage {
   type?: string;
   content: string;
   id: number;
-  duration: number;
   icon?: React.ReactNode;
   actionClick?: () => void;
 }
 
 const Message: React.FC<IMessage> = (msgConfig: IMessage) => {
-  const [exit, setExit] = useState(false);
-
-  setTimeout(() => {
-    setExit(true);
-  }, msgConfig.duration);
+  // const [exit, setExit] = useState(false);
 
   // const handleCloseMessage = () => {
   //   setExit(true);
@@ -40,7 +33,6 @@ const Message: React.FC<IMessage> = (msgConfig: IMessage) => {
 
   return (
     <NotificationSnackbar
-      exit={exit}
       content={msgConfig.content}
       success={msgConfig.type == "success"}
       error={msgConfig.type == "error"}
@@ -69,43 +61,52 @@ const renderMessage = (children: any, config?: any, type?: EMessageType) => {
   const msgConfig = {
     type,
     content: children,
-    duration,
     id: Date.now(),
     icon,
     action,
   };
 
-  const nextDiv = config?.rootElementId ? document.getElementById(config.rootElementId) : document.getElementById("root") || document.getElementById("__next");
-
-  if (!nextDiv) {
-    console.warn("no root div found for message");
-    return;
-  }
-
-  let msgWrapper = document.querySelector(".caisy-message-wrapper");
-  if (!msgWrapper) {
-    msgWrapper = document.createElement("div");
-    msgWrapper.classList.add("caisy-message-wrapper");
-    nextDiv.append(msgWrapper);
-
-    const msgWrapperStyles = document.createElement("div");
-    nextDiv.append(msgWrapperStyles);
-    const root = createRoot(msgWrapperStyles as any);
-    root.render(<GSMessage />);
-  }
-
-  if (msgWrapper) {
-    const msgContainer = document.createElement("div");
-    const msgContainerId = `caisy-message-container-${msgConfig.id}`;
-    msgContainer.id = msgContainerId;
-
-    msgWrapper.prepend(msgContainer);
-    const root = createRoot(msgContainer);
-    root.render(<Message {...msgConfig} />);
+  return toast.custom((t) => {
     setTimeout(() => {
-      msgContainer?.remove();
-    }, msgConfig?.duration + 350);
-  }
+      toast.dismiss(t);
+    }, duration);
+
+    return <Message {...msgConfig} />;
+  });
+
+  // const nextDiv = config?.rootElementId
+  //   ? document.getElementById(config.rootElementId)
+  //   : document.getElementById("root") || document.getElementById("__next");
+
+  // if (!nextDiv) {
+  //   console.warn("no root div found for message");
+  //   return;
+  // }
+
+  // let msgWrapper = document.querySelector(".caisy-message-wrapper");
+  // if (!msgWrapper) {
+  //   msgWrapper = document.createElement("div");
+  //   msgWrapper.classList.add("caisy-message-wrapper");
+  //   nextDiv.append(msgWrapper);
+
+  //   const msgWrapperStyles = document.createElement("div");
+  //   nextDiv.append(msgWrapperStyles);
+  //   const root = createRoot(msgWrapperStyles as any);
+  //   root.render(<GSMessage />);
+  // }
+
+  // if (msgWrapper) {
+  //   const msgContainer = document.createElement("div");
+  //   const msgContainerId = `caisy-message-container-${msgConfig.id}`;
+  //   msgContainer.id = msgContainerId;
+
+  //   msgWrapper.prepend(msgContainer);
+  //   const root = createRoot(msgContainer);
+  //   root.render(<Message {...msgConfig} />);
+  //   setTimeout(() => {
+  //     msgContainer?.remove();
+  //   }, msgConfig?.duration + 350);
+  // }
 };
 
 message.success = function MessageSuccess(children: any, config?: IMessageConfig) {

src/components/message/index.ts

@@ -1 +1,2 @@
 export { message } from "./Message";
+export { Toaster } from "sonner";

src/components/notification-snackbar/NotificationSnackbar.tsx

@@ -10,7 +10,6 @@ import { SNotificationSnackbarAction } from "./styles/SNotificationSnackbarActio
 import { SNotificationSnackbarLabel } from "./styles/SNotificationSnackbarLabel";
 
 export interface INotificationSnackbarProps {
-  exit: boolean;
   icon?: ReactNode;
   action?: (() => void) | React.ReactNode;
   content: string;
@@ -20,7 +19,6 @@ export interface INotificationSnackbarProps {
 }
 
 export const NotificationSnackbar: React.FC<INotificationSnackbarProps> = ({
-  exit,
   icon,
   action,
   content,
@@ -29,7 +27,7 @@ export const NotificationSnackbar: React.FC<INotificationSnackbarProps> = ({
   styleOverwrite,
 }) => {
   return (
-    <SNotificationSnackbar exit={exit} error={error} styleOverwrite={styleOverwrite}>
+    <SNotificationSnackbar error={error} styleOverwrite={styleOverwrite}>
       <SFlex>
         <SIcon icon={icon} error={error} success={success}>
           {icon}

src/components/notification-snackbar/styles/SNotificationSnackbar.tsx

@@ -5,14 +5,14 @@ const CSSError = css`
   background-color: var(--ui-supportive-01);
 `;
 
-const Bronze = css<{styleOverwrite?: any; exit?:boolean; error?: any}>`
+const Bronze = css<{ styleOverwrite?: any; exit?: boolean; error?: any }>`
   background-color: rgba(0, 0, 0, 0.74);
   border-radius: 0.25rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 2.5rem;
-  width: 28.375rem;
+  width: 356px;
   padding: 0.75rem;
   box-sizing: border-box;
   margin-top: 1.25rem;
@@ -27,29 +27,6 @@ const Bronze = css<{styleOverwrite?: any; exit?:boolean; error?: any}>`
   }
 
   ${(props) => (props.error ? CSSError : "")};
-  animation: ${(props) => (props.exit ? "SlideRight 1000ms forwards" : "SlideTop 350ms forwards")};
-
-  @keyframes SlideTop {
-    0% {
-      transform: translateY(110%);
-    }
-
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes SlideRight {
-    0% {
-      transform: translateX(0);
-      opacity: 1;
-    }
-
-    100% {
-      transform: translateX(30%);
-      opacity: 0;
-    }
-  }
 
   ${({ styleOverwrite }) => (styleOverwrite ? styleOverwrite : "")};
 `;
@@ -62,7 +39,7 @@ const Platinum = css``;
 
 const Diamond = css``;
 
-export const SNotificationSnackbar = styled.div<{styleOverwrite?: any; exit?:boolean; error?: any}>`
+export const SNotificationSnackbar = styled.div<{ styleOverwrite?: any; exit?: boolean; error?: any }>`
   ${Bronze}
   ${MIN_SILVER`${Silver}`};
   ${MIN_GOLD`${Gold}`};