wip: update

cdsctf · Jan 16, 2025 · 27f90f4 · 27f90f4
1 parent 8125b4d
commit 27f90f4
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 61 deletions.
diff --git a/src/components/core/Dialog/Dialog.tsx b/src/components/core/Dialog/Dialog.tsx
@@ -1,7 +1,6 @@
 import styles from "./Dialog.module.scss";
-import React, { ComponentProps, useEffect, useRef } from "react";
+import React, { ComponentProps, useRef } from "react";
 import { Dialog as ArkDialog, Portal } from "@ark-ui/react";
-import { nanoid } from "nanoid";
 
 export interface DialogProps extends ComponentProps<"dialog"> {
     open: boolean;
@@ -11,28 +10,16 @@ export interface DialogProps extends ComponentProps<"dialog"> {
 
 export function Dialog(props: DialogProps) {
     const { children, open, onClose } = props;
-    const portal = useRef<HTMLElement | null>(null);
-
-    useEffect(() => {
-        const ctn = document.createElement("div");
-        ctn.id = `dialog-portal-${nanoid()}`;
-        document.getElementById("portals")!.appendChild(ctn);
-        portal.current = ctn;
-
-        return () => {
-            if (portal.current) {
-                document.getElementById("portals")!.removeChild(portal.current);
-                portal.current = null;
-            }
-        };
-    }, []);
-
-    if (!portal.current) {
-        return;
-    }
+    const portal = useRef<HTMLElement | null>(
+        document.getElementById("portals")
+    );
 
     return (
-        <ArkDialog.Root open={open} onOpenChange={(details) => onClose()}>
+        <ArkDialog.Root
+            open={open}
+            onOpenChange={(details) => onClose()}
+            lazyMount
+        >
             <Portal container={portal}>
                 <ArkDialog.Backdrop className={styles["backdrop"]} />
                 <ArkDialog.Positioner className={styles["positioner"]}>

diff --git a/src/components/core/Popover/Popover.tsx b/src/components/core/Popover/Popover.tsx
@@ -45,25 +45,9 @@ export function Popover(props: PopoverProps) {
         }
     }
 
-    const portal = useRef<HTMLElement | null>(null);
-
-    useEffect(() => {
-        const ctn = document.createElement("div");
-        ctn.id = `popover-portal-${nanoid()}`;
-        document.getElementById("portals")!.appendChild(ctn);
-        portal.current = ctn;
-
-        return () => {
-            if (portal.current) {
-                document.getElementById("portals")!.removeChild(portal.current);
-                portal.current = null;
-            }
-        };
-    }, []);
-
-    if (!portal.current) {
-        return;
-    }
+    const portal = useRef<HTMLElement | null>(
+        document.getElementById("portals")
+    );
 
     return (
         <ArkPopover.Root
@@ -81,6 +65,7 @@ export function Popover(props: PopoverProps) {
             onOpenChange={(v) => {
                 handleOpenChange(v.open);
             }}
+            lazyMount
         >
             <ArkPopover.Trigger asChild>{children}</ArkPopover.Trigger>
             <Portal container={portal}>

diff --git a/src/components/core/Tooltip/Tooltip.tsx b/src/components/core/Tooltip/Tooltip.tsx
@@ -26,25 +26,9 @@ export function Tooltip(props: TooltipProps) {
         children,
     } = props;
 
-    const portal = useRef<HTMLElement | null>(null);
-
-    useEffect(() => {
-        const ctn = document.createElement("div");
-        ctn.id = `tooltip-portal-${nanoid()}`;
-        document.getElementById("portals")!.appendChild(ctn);
-        portal.current = ctn;
-
-        return () => {
-            if (portal.current) {
-                document.getElementById("portals")!.removeChild(portal.current);
-                portal.current = null;
-            }
-        };
-    }, []);
-
-    if (!portal.current) {
-        return;
-    }
+    const portal = useRef<HTMLElement | null>(
+        document.getElementById("portals")
+    );
 
     return (
         <ArkTooltip.Root
@@ -54,6 +38,7 @@ export function Tooltip(props: TooltipProps) {
                 placement: placement,
                 offset: offset,
             }}
+            lazyMount
         >
             <ArkTooltip.Trigger asChild>{children}</ArkTooltip.Trigger>
             <Portal container={portal}>

diff --git a/src/pages/settings/challenges/_blocks/ChallengeDeleteModal/ChallengeDeleteModal.tsx b/src/pages/settings/challenges/_blocks/ChallengeDeleteModal/ChallengeDeleteModal.tsx
@@ -1,10 +1,11 @@
-import { Box, Button, Flex, Stack } from "@/components/core";
+import { Box, Button, Dialog, Flex, Stack } from "@/components/core";
 import { Challenge } from "@/models/challenge";
 import TrashBinTrashBold from "~icons/solar/trash-bin-trash-bold";
 import styles from "./ChallengeDeleteModal.module.scss";
 import { deleteChallenge } from "@/api/challenge";
 import { useToastStore } from "@/stores/toast";
 import { useSharedStore } from "@/stores/shared";
+import { useState } from "react";
 
 export interface ChallengeDeleteModalProps {
     challenge?: Challenge;
@@ -16,6 +17,8 @@ export function ChallengeDeleteModal(props: ChallengeDeleteModalProps) {
     const toastStore = useToastStore();
     const sharedStore = useSharedStore();
 
+    const [open2, setOpen2] = useState(false);
+
     function handleChallengeDelete() {
         deleteChallenge({
             id: challenge?.id,
@@ -58,7 +61,26 @@ export function ChallengeDeleteModal(props: ChallengeDeleteModalProps) {
             <span>
                 将从题库中软删除，但无法恢复。所有与之相关的数据会得到保留。请问你确定要删除这道题目吗？
             </span>
+            <Dialog open={open2} onClose={() => setOpen2(false)}>
+                <Box
+                    style={{
+                        padding: "1rem",
+                        fontSize: "1.25rem",
+                        fontWeight: 600,
+                        backgroundColor: "#000",
+                    }}
+                >
+                    test
+                </Box>
+            </Dialog>
             <Flex width={"100%"} justify={"flex-end"}>
+                <Button
+                    variant={"solid"}
+                    color={"primary"}
+                    onClick={() => setOpen2(true)}
+                >
+                    确定
+                </Button>
                 <Button
                     variant={"solid"}
                     color={"error"}