Skip to content

Commit

Permalink
Revert "🦄 refactor(toast): use createRoot replace with simple js"
Browse files Browse the repository at this point in the history
This reverts commit 630adcf.
  • Loading branch information
summerscar committed Nov 22, 2024
1 parent 961c505 commit 3b4b7f2
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 19 deletions.
28 changes: 10 additions & 18 deletions app/hooks/use-toast.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
"use client";
import { createCallable } from "@/utils/callable";
import { useMemoizedFn } from "ahooks";
import clsx from "clsx";
import type { ReactNode } from "react";
import { createRoot } from "react-dom/client";
import { type ReactNode, useEffect } from "react";
import { createPortal } from "react-dom";
import { renderToString } from "react-dom/server";

const createToast = ({
type,
Expand All @@ -14,22 +15,13 @@ const createToast = ({
delay?: number;
}) => {
const toastWrapper = getToastWrapper();
const root = createRoot(toastWrapper);
root.render(
<div
className={clsx("alert !text-white", {
"alert-success": type === "success",
"alert-error": type === "error",
"alert-info": type === "info",
"alert-warning": type === "warning",
})}
>
{message}
</div>,
);
const toastEl = document.createElement("div");
toastEl.className = `alert alert-${type} !text-white`;

toastEl.innerHTML = renderToString(message);
toastWrapper?.appendChild(toastEl);
let unmount = () => {
root.render(null);
root.unmount();
toastWrapper?.removeChild(toastEl);
unmount = () => {};
};
const timeout = setTimeout(() => unmount(), delay);
Expand Down
13 changes: 12 additions & 1 deletion tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,17 @@ const config: Config = {
themeRoot: ":root", // The element that receives theme color CSS variables
},
// https://medium.com/@achronus/solving-a-niche-frontend-problem-dynamic-tailwind-css-classes-in-react-da5f513ecf6a
safelist: ["toast", "toast-top", "toast-center", "z-50"],
safelist: [
"toast",
"toast-top",
"toast-center",
"alert",
"alert-error",
"alert-success",
"alert-warning",
"alert-info",
"z-50",
"text-white",
],
};
export default config;

0 comments on commit 3b4b7f2

Please sign in to comment.