wip: update

cdsctf · Jan 15, 2025 · b9754b0 · b9754b0
1 parent 3a01e87
commit b9754b0
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 72 deletions.
diff --git a/index.html b/index.html
@@ -8,10 +8,9 @@
     </head>
     <body>
         <div id="root"></div>
-        <div id="portals">
-            <div id="dialog-portal"></div>
-            <div id="tooltip-portal"></div>
-        </div>
+        <div id="dialog-portal"></div>
+        <div id="popover-portal"></div>
+        <div id="tooltip-portal"></div>
         <script type="module" src="/src/main.tsx"></script>
     </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useThemeStore } from "@/stores/theme";
 import { RouterProvider } from "react-router";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { router } from "@/routers";
 import { useSharedStore } from "./stores/shared";
 import { get } from "./api/config";

diff --git a/src/components/core/Dialog/Dialog.module.scss b/src/components/core/Dialog/Dialog.module.scss
@@ -1,5 +1,4 @@
 .backdrop {
-    z-index: 3;
     width: 100vw;
     height: 100vh;
     position: fixed;
@@ -18,7 +17,6 @@
 }
 
 .positioner {
-    z-index: 4;
     position: fixed;
     width: 100vw;
     height: 100vh;

diff --git a/src/components/core/Dialog/Dialog.tsx b/src/components/core/Dialog/Dialog.tsx
@@ -1,5 +1,5 @@
 import styles from "./Dialog.module.scss";
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, useRef } from "react";
 import { Dialog as ArkDialog, Portal } from "@ark-ui/react";
 
 export interface DialogProps extends ComponentProps<"dialog"> {
@@ -10,10 +10,13 @@ export interface DialogProps extends ComponentProps<"dialog"> {
 
 export function Dialog(props: DialogProps) {
     const { children, open, onClose } = props;
+    const portal = useRef<HTMLElement | null>(
+        document.getElementById("dialog-portal")!
+    );
 
     return (
         <ArkDialog.Root open={open} onOpenChange={(details) => onClose()}>
-            <Portal>
+            <Portal container={portal}>
                 <ArkDialog.Backdrop className={styles["backdrop"]} />
                 <ArkDialog.Positioner className={styles["positioner"]}>
                     <ArkDialog.Content className={styles["content"]}>

diff --git a/src/components/core/Pagination/Pagination.tsx b/src/components/core/Pagination/Pagination.tsx
@@ -23,7 +23,7 @@ export function Pagination(props: PaginationProps) {
             onPageChange={(details) => onChange(details.page)}
             className={styles["root"]}
         >
-            <ArkPagination.PrevTrigger>
+            <ArkPagination.PrevTrigger asChild>
                 <IconButton
                     onClick={() => onChange(value > 1 ? value - 1 : 1)}
                     disabled={value === 1}
@@ -35,7 +35,7 @@ export function Pagination(props: PaginationProps) {
                 {(pagination) =>
                     pagination.pages.map((page, index) =>
                         page.type === "page" ? (
-                            <ArkPagination.Item key={index} {...page}>
+                            <ArkPagination.Item key={index} {...page} asChild>
                                 <IconButton
                                     variant={
                                         value === page.value
@@ -54,39 +54,11 @@ export function Pagination(props: PaginationProps) {
                     )
                 }
             </ArkPagination.Context>
-            <ArkPagination.NextTrigger>
+            <ArkPagination.NextTrigger asChild>
                 <IconButton disabled={value === total}>
                     <AltArrowRightBold />
                 </IconButton>
             </ArkPagination.NextTrigger>
         </ArkPagination.Root>
-        // <Flex className={styles["root"]} gap={"5px"} align={"center"}>
-        //     <IconButton
-        //         onClick={() => onChange(value > 1 ? value - 1 : 1)}
-        //         disabled={value === 1}
-        //     >
-        //         <AltArrowLeftBold />
-        //     </IconButton>
-        //     {pages.map((page) => (
-        //         <React.Fragment key={page}>
-        //             {page === -1 ? (
-        //                 <Box className={styles["separator"]}>...</Box>
-        //             ) : (
-        // <IconButton
-        //     variant={value === page ? "solid" : "outlined"}
-        //     onClick={() => onChange(page)}
-        // >
-        //     {page}
-        // </IconButton>
-        //             )}
-        //         </React.Fragment>
-        //     ))}
-        // <IconButton
-        //     onClick={() => onChange(value < total ? value + 1 : total)}
-        //     disabled={value === total}
-        // >
-        //     <AltArrowRightBold />
-        // </IconButton>
-        // </Flex>
     );
 }
diff --git a/src/components/core/Popover/Popover.module.scss b/src/components/core/Popover/Popover.module.scss
@@ -1,4 +1,6 @@
-.root {
+.content {
+    z-index: inherit;
+
     &:is([open], [data-open], [data-state="open"]) {
         animation: fade-in 0.2s ease-out;
     }

diff --git a/src/components/core/Popover/Popover.tsx b/src/components/core/Popover/Popover.tsx
@@ -1,11 +1,7 @@
-import { cloneElement, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import styles from "./Popover.module.scss";
-import { CSSTransition } from "react-transition-group";
-import { Box } from "../Box";
 import clsx from "clsx";
-import { useSharedStore } from "@/stores/shared";
 import { Popover as ArkPopover, Portal } from "@ark-ui/react";
-import { createPortal } from "react-dom";
 
 export interface PopoverProps {
     children: React.ReactElement;
@@ -20,6 +16,10 @@ export function Popover(props: PopoverProps) {
 
     const [isOpen, setIsOpen] = useState(false);
 
+    const portal = useRef<HTMLElement | null>(
+        document.getElementById("popover-portal")!
+    );
+
     return (
         <ArkPopover.Root
             positioning={{
@@ -32,13 +32,13 @@ export function Popover(props: PopoverProps) {
             open={isOpen}
             onOpenChange={(v) => setIsOpen(v.open)}
         >
-            <ArkPopover.Trigger onClick={() => setIsOpen(true)}>
+            <ArkPopover.Trigger onClick={() => setIsOpen(true)} asChild>
                 {children}
             </ArkPopover.Trigger>
-            <Portal>
-                <ArkPopover.Positioner>
+            <Portal container={portal}>
+                <ArkPopover.Positioner className={styles["positioner"]}>
                     <ArkPopover.Content
-                        className={clsx(styles["root"], className)}
+                        className={clsx(styles["content"], className)}
                     >
                         {content}
                     </ArkPopover.Content>

diff --git a/src/components/core/Tooltip/Tooltip.module.scss b/src/components/core/Tooltip/Tooltip.module.scss
@@ -1,7 +1,3 @@
-.positioner {
-    z-index: 5;
-}
-
 .content {
     z-index: inherit;
     background: #333;

diff --git a/src/components/core/Tooltip/Tooltip.tsx b/src/components/core/Tooltip/Tooltip.tsx
@@ -1,5 +1,6 @@
 import styles from "./Tooltip.module.scss";
 import { Tooltip as ArkTooltip, Portal } from "@ark-ui/react";
+import { useRef } from "react";
 
 export interface TooltipProps {
     content?: React.ReactNode;
@@ -24,6 +25,10 @@ export function Tooltip(props: TooltipProps) {
         children,
     } = props;
 
+    const portal = useRef<HTMLElement | null>(
+        document.getElementById("tooltip-portal")!
+    );
+
     return (
         <ArkTooltip.Root
             closeDelay={100}
@@ -34,7 +39,7 @@ export function Tooltip(props: TooltipProps) {
             }}
         >
             <ArkTooltip.Trigger asChild>{children}</ArkTooltip.Trigger>
-            <Portal>
+            <Portal container={portal}>
                 <ArkTooltip.Positioner className={styles["positioner"]}>
                     <ArkTooltip.Content className={styles["content"]}>
                         {hasArrow && (

diff --git a/src/layouts/Base/Base.module.scss b/src/layouts/Base/Base.module.scss
@@ -5,6 +5,10 @@
     flex-direction: column;
 }
 
+.portal {
+    z-index: 9999;
+}
+
 .overlay-scrollbars {
     position: relative;
     width: 100vw;

diff --git a/src/layouts/Base/Base.tsx b/src/layouts/Base/Base.tsx
@@ -9,23 +9,13 @@ import { Box } from "@/components/core";
 import { useThemeStore } from "@/stores/theme";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import "overlayscrollbars/overlayscrollbars.css";
-import { useSharedStore } from "@/stores/shared";
 
 export function Base() {
     const themeStore = useThemeStore();
 
     const navigate = useNavigate();
     globalRouter.navigate = navigate;
 
-    const sharedStore = useSharedStore();
-    const ref = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        if (ref.current) {
-            sharedStore.setPortal(ref.current);
-        }
-    }, [ref.current]);
-
     return (
         <>
             <ErrorBoundary FallbackComponent={ErrorFallback}>
@@ -39,7 +29,7 @@ export function Base() {
                     }}
                     defer
                 >
-                    <Box className={styles["root"]} ref={ref}>
+                    <Box className={styles["root"]}>
                         <Outlet />
                     </Box>
                     <Toaster />

diff --git a/src/stores/shared.ts b/src/stores/shared.ts
@@ -5,9 +5,6 @@ interface SharedState {
     refresh: number;
     setRefresh: () => void;
 
-    portal?: HTMLDivElement;
-    setPortal: (el: HTMLDivElement) => void;
-
     config?: Config;
     setConfig: (config?: Config) => void;
 }
@@ -16,9 +13,6 @@ export const useSharedStore = create<SharedState>()((set, get) => ({
     refresh: 0,
     setRefresh: () => set({ refresh: get().refresh + 1 }),
 
-    portal: undefined,
-    setPortal: (el) => set({ portal: el }),
-
     config: undefined,
     setConfig: (config) => set({ config }),
 }));