feat(components): add Itoast component

promonkeyli · Aug 5, 2024 · 41b403b · 41b403b
1 parent a58f0e3
commit 41b403b
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 3 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "@/styles/common.css";
+import { IToastProvider } from "@/components/toast";
 import type React from "react";
 
 export const metadata: Metadata = {
@@ -14,7 +15,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <IToastProvider>{children}</IToastProvider>
+      </body>
     </html>
   );
 }
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { postLogin } from "@/api/api0";
 import Footer from "@/components/footer";
+import { showToast } from "@/components/toast";
 import { SYSTEM_ROLE } from "@/constants";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -59,8 +60,8 @@ function useLogin() {
       username: role,
       password: pwd,
     };
-    const res = await postLogin(user);
-    console.log(res);
+    // const res = await postLogin(user);
+    showToast("12121212121");
     // if (role === SYSTEM_ROLE.ADMIN) {
     //   router.push("/admin/index");
     // } else {

diff --git a/src/components/toast/index.tsx b/src/components/toast/index.tsx
@@ -0,0 +1,98 @@
+"use client";
+import type React from "react";
+import {
+  type ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export interface IToastProps {
+  /* toast 持续时间 ms为单位，默认500ms */
+  duration?: number;
+  /* 显示与否 */
+  show: boolean;
+  /* 提示的内容 */
+  message: ReactNode;
+  /* toast类别：成功/失败/信息 */
+  type?: "success" | "error" | "info" | "warning";
+  /* 关闭的钩子 */
+  onClose?: () => void;
+}
+export default function IToast(props: IToastProps) {
+  const { duration = 500, message, show, type = "success", onClose } = props;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (show) {
+        const timer = setTimeout(() => {
+          onClose?.();
+        }, duration);
+        return () => clearTimeout(timer);
+      }
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, show, onClose]);
+
+  return (
+    <div
+      className={`toast toast-top toast-center transition-transform transform ${
+        show ? "translate-y-5" : "invisible translate-y-8"
+      }`}
+    >
+      <div className={`alert alert-${type}`}>{message}</div>
+    </div>
+  );
+}
+
+export interface IToastContextType {
+  showToast: (msg: ReactNode) => void;
+}
+
+const IToastContext = createContext<IToastContextType | null>(null);
+
+// 非组件中调用
+let globalShowToast: (message: ReactNode) => void;
+
+export const IToastProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [toast, setToast] = useState<{ message: ReactNode; show: boolean }>({
+    message: "",
+    show: false,
+  });
+
+  const showToast = (message: ReactNode) => {
+    setToast({ message, show: true });
+  };
+
+  const closeToast = () => {
+    setToast({ message: "", show: false });
+  };
+
+  globalShowToast = showToast; // 设置全局 showToast 方法
+
+  return (
+    <IToastContext.Provider value={{ showToast }}>
+      {children}
+      <IToast message={toast.message} show={toast.show} onClose={closeToast} />
+    </IToastContext.Provider>
+  );
+};
+export const useToast = (): IToastContextType => {
+  const context = useContext(IToastContext);
+  if (context === null) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+
+export const showToast = (message: ReactNode) => {
+  if (globalShowToast) {
+    globalShowToast(message);
+  } else {
+    console.error("showToast function is not initialized");
+  }
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -19,6 +19,23 @@ const config: Config = {
       },
     },
   },
+  daisyui: {
+    themes: [
+      {
+        mytheme: {
+          primary: "#00a0ff",
+          secondary: "#96da00",
+          accent: "#00aeff",
+          neutral: "#1e1100",
+          "base-100": "#fdfeff",
+          info: "#00aef5",
+          success: "#008500",
+          warning: "#ba4f00",
+          error: "#ffa0b5",
+        },
+      },
+    ],
+  },
   plugins: [daisyui],
 };
 export default config;