refactor: init switching to nextjs router

This commit is contained in:
Fred
2024-05-10 14:57:55 +08:00
parent 00b1a9781d
commit 0c53579996
25 changed files with 473 additions and 123 deletions

View File

@@ -1,3 +1,4 @@
"use client";
import useRelativePosition from "@/app/hooks/useRelativePosition";
import {
RefObject,
@@ -36,19 +37,6 @@ const ArrowIcon = ({ sibling }: { sibling: RefObject<HTMLDivElement> }) => {
const baseZIndex = 100;
const popoverRootName = "popoverRoot";
let popoverRoot = document.querySelector(
`#${popoverRootName}`,
) as HTMLDivElement;
if (!popoverRoot) {
popoverRoot = document.createElement("div");
document.body.appendChild(popoverRoot);
popoverRoot.style.height = "0px";
popoverRoot.style.width = "100%";
popoverRoot.style.position = "fixed";
popoverRoot.style.bottom = "0";
popoverRoot.style.zIndex = "10000";
popoverRoot.id = "popover-root";
}
export interface PopoverProps {
content?: JSX.Element | string;
@@ -65,6 +53,8 @@ export interface PopoverProps {
getPopoverPanelRef?: (ref: RefObject<HTMLDivElement>) => void;
}
let popoverRoot: HTMLDivElement;
export default function Popover(props: PopoverProps) {
const {
content,
@@ -184,6 +174,26 @@ export default function Popover(props: PopoverProps) {
const popoverRef = useRef<HTMLDivElement>(null);
const closeTimer = useRef<number>(0);
useLayoutEffect(() => {
if (popoverRoot) {
return;
}
popoverRoot = document.querySelector(
`#${popoverRootName}`,
) as HTMLDivElement;
if (!popoverRoot) {
popoverRoot = document.createElement("div");
document.body.appendChild(popoverRoot);
popoverRoot.style.height = "0px";
popoverRoot.style.width = "100%";
popoverRoot.style.position = "fixed";
popoverRoot.style.bottom = "0";
popoverRoot.style.zIndex = "10000";
popoverRoot.id = "popover-root";
}
}, []);
useLayoutEffect(() => {
getPopoverPanelRef?.(popoverRef);
onShow?.(internalShow);
@@ -207,6 +217,10 @@ export default function Popover(props: PopoverProps) {
window.document.documentElement.style.overflow = "auto";
};
if (mergedShow) {
return null;
}
return (
<div
className={`relative ${className}`}