feat: HoverPopover done
This commit is contained in:
butterfly
parent
9569888b0e
commit
9f4813326c
|
|
@ -0,0 +1,37 @@
|
|||
import * as HoverCard from "@radix-ui/react-hover-card";
|
||||
import { ComponentProps } from "react";
|
||||
|
||||
export interface PopoverProps {
|
||||
content?: JSX.Element | string;
|
||||
children?: JSX.Element;
|
||||
arrowClassName?: string;
|
||||
popoverClassName?: string;
|
||||
noArrow?: boolean;
|
||||
align?: ComponentProps<typeof HoverCard.Content>["align"];
|
||||
}
|
||||
|
||||
export default function HoverPopover(props: PopoverProps) {
|
||||
const {
|
||||
content,
|
||||
children,
|
||||
arrowClassName,
|
||||
popoverClassName,
|
||||
noArrow = false,
|
||||
align,
|
||||
} = props;
|
||||
return (
|
||||
<HoverCard.Root>
|
||||
<HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
|
||||
<HoverCard.Portal>
|
||||
<HoverCard.Content
|
||||
className={`${popoverClassName}`}
|
||||
sideOffset={5}
|
||||
align={align}
|
||||
>
|
||||
{content}
|
||||
{!noArrow && <HoverCard.Arrow className={`${arrowClassName}`} />}
|
||||
</HoverCard.Content>
|
||||
</HoverCard.Portal>
|
||||
</HoverCard.Root>
|
||||
);
|
||||
}
|
||||
|
|
@ -54,6 +54,7 @@ export interface PopoverProps {
|
|||
placement?: "t" | "lt" | "rt" | "lb" | "rb" | "b" | "l" | "r";
|
||||
noArrow?: boolean;
|
||||
delayClose?: number;
|
||||
useGlobalRoot?: boolean;
|
||||
}
|
||||
|
||||
export default function Popover(props: PopoverProps) {
|
||||
|
|
@ -68,6 +69,7 @@ export default function Popover(props: PopoverProps) {
|
|||
placement = "t",
|
||||
noArrow = false,
|
||||
delayClose = 0,
|
||||
useGlobalRoot,
|
||||
} = props;
|
||||
|
||||
const [internalShow, setShow] = useState(false);
|
||||
|
|
@ -244,62 +246,66 @@ export default function Popover(props: PopoverProps) {
|
|||
);
|
||||
}
|
||||
|
||||
// return (
|
||||
// <div
|
||||
// className={`relative ${className}`}
|
||||
// onPointerEnter={(e) => {
|
||||
// e.preventDefault();
|
||||
// clearTimeout(closeTimer.current);
|
||||
// onShow?.(true);
|
||||
// setShow(true);
|
||||
// getRelativePosition(e.currentTarget, "");
|
||||
// window.document.documentElement.style.overflow = "hidden";
|
||||
// }}
|
||||
// onPointerLeave={(e) => {
|
||||
// e.preventDefault();
|
||||
// if (delayClose) {
|
||||
// closeTimer.current = window.setTimeout(() => {
|
||||
// onShow?.(false);
|
||||
// setShow(false);
|
||||
// }, delayClose);
|
||||
// } else {
|
||||
// onShow?.(false);
|
||||
// setShow(false);
|
||||
// }
|
||||
// window.document.documentElement.style.overflow = "auto";
|
||||
// }}
|
||||
// >
|
||||
// {children}
|
||||
// {mergedShow && (
|
||||
// <>
|
||||
// <div
|
||||
// className={`${
|
||||
// noArrow ? "opacity-0" : ""
|
||||
// } bg-inherit ${arrowClassName}`}
|
||||
// style={{ zIndex: baseZIndex + 1 }}
|
||||
// >
|
||||
// <ArrowIcon sibling={popoverRef} />
|
||||
// </div>
|
||||
// {createPortal(
|
||||
// <div
|
||||
// className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
|
||||
// style={{ zIndex: baseZIndex + 1, ...placementStyle }}
|
||||
// ref={popoverRef}
|
||||
// >
|
||||
// {content}
|
||||
// </div>,
|
||||
// popoverRoot,
|
||||
// )}
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
if (useGlobalRoot) {
|
||||
return (
|
||||
<div
|
||||
className={`relative ${className}`}
|
||||
onPointerEnter={(e) => {
|
||||
e.preventDefault();
|
||||
clearTimeout(closeTimer.current);
|
||||
onShow?.(true);
|
||||
setShow(true);
|
||||
getRelativePosition(e.currentTarget, "");
|
||||
window.document.documentElement.style.overflow = "hidden";
|
||||
}}
|
||||
onPointerLeave={(e) => {
|
||||
e.preventDefault();
|
||||
if (delayClose) {
|
||||
closeTimer.current = window.setTimeout(() => {
|
||||
onShow?.(false);
|
||||
setShow(false);
|
||||
}, delayClose);
|
||||
} else {
|
||||
onShow?.(false);
|
||||
setShow(false);
|
||||
}
|
||||
window.document.documentElement.style.overflow = "auto";
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
{mergedShow && (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
noArrow ? "opacity-0" : ""
|
||||
} bg-inherit ${arrowClassName}`}
|
||||
style={{ zIndex: baseZIndex + 1 }}
|
||||
>
|
||||
<ArrowIcon sibling={popoverRef} />
|
||||
</div>
|
||||
{createPortal(
|
||||
<div
|
||||
className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
|
||||
style={{ zIndex: baseZIndex + 1, ...placementStyle }}
|
||||
ref={popoverRef}
|
||||
>
|
||||
{content}
|
||||
</div>,
|
||||
popoverRoot,
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative ${className}`}
|
||||
onPointerEnter={(e) => {
|
||||
getRelativePosition(e.currentTarget, "");
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@ import { showToast } from "@/app/components/ui-lib";
|
|||
import Locale from "@/app/locales";
|
||||
import { Path } from "@/app/constant";
|
||||
|
||||
import LightIcon from "@/app/icons/light.svg";
|
||||
import DarkIcon from "@/app/icons/dark.svg";
|
||||
import AutoIcon from "@/app/icons/auto.svg";
|
||||
import BottomIcon from "@/app/icons/bottom.svg";
|
||||
import StopIcon from "@/app/icons/pause.svg";
|
||||
import RobotIcon from "@/app/icons/robot.svg";
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ import LogIcon from "@/app/icons/logIcon.svg";
|
|||
|
||||
import MenuLayout from "@/app/components/MenuLayout";
|
||||
import Panel from "./ChatPanel";
|
||||
import Popover, { PopoverProps } from "@/app/components/Popover";
|
||||
import Confirm from "@/app/components/Confirm";
|
||||
import HoverPopover from "@/app/components/HoverPopover";
|
||||
|
||||
export function SessionItem(props: {
|
||||
onClick?: () => void;
|
||||
|
|
@ -96,7 +96,7 @@ export function SessionItem(props: {
|
|||
{Locale.ChatItem.ChatItemCount(props.count)}
|
||||
</div>
|
||||
</div>
|
||||
<Popover
|
||||
<HoverPopover
|
||||
content={
|
||||
<div
|
||||
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
|
||||
|
|
@ -116,17 +116,14 @@ export function SessionItem(props: {
|
|||
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
|
||||
`}
|
||||
noArrow
|
||||
placement={props.isMobileScreen ? "r" : "l"}
|
||||
className="!absolute top-[50%] translate-y-[-50%] right-3"
|
||||
trigger={props.isMobileScreen ? "click" : "hover"}
|
||||
delayClose={100}
|
||||
align={props.isMobileScreen ? "end" : "start"}
|
||||
>
|
||||
<div
|
||||
className={` pointer-events-none opacity-0 group-hover/chat-menu-list:pointer-events-auto group-hover/chat-menu-list:opacity-100`}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</div>
|
||||
</Popover>
|
||||
</HoverPopover>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
|
|
@ -175,7 +172,6 @@ export default MenuLayout(function SessionList(props) {
|
|||
<div
|
||||
className={`
|
||||
h-[100%] flex flex-col
|
||||
max-md:pb-chat-panel-mobile
|
||||
md:px-0
|
||||
`}
|
||||
>
|
||||
|
|
@ -213,7 +209,7 @@ export default MenuLayout(function SessionList(props) {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className={`flex-1 overflow-y-auto`}
|
||||
className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}
|
||||
// onClick={(e) => {
|
||||
// if (e.target === e.currentTarget) {
|
||||
// navigate(Path.Home);
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"@hello-pangea/dnd": "^16.5.0",
|
||||
"@next/third-parties": "^14.1.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.0.5",
|
||||
"@radix-ui/react-hover-card": "^1.0.7",
|
||||
"@radix-ui/react-switch": "^1.0.3",
|
||||
"@svgr/webpack": "^6.5.1",
|
||||
"@vercel/analytics": "^0.1.11",
|
||||
|
|
|
|||
83
yarn.lock
83
yarn.lock
|
|
@ -1136,6 +1136,33 @@
|
|||
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333"
|
||||
integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==
|
||||
|
||||
"@floating-ui/core@^1.0.0":
|
||||
version "1.6.0"
|
||||
resolved "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
|
||||
integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
|
||||
dependencies:
|
||||
"@floating-ui/utils" "^0.2.1"
|
||||
|
||||
"@floating-ui/dom@^1.6.1":
|
||||
version "1.6.3"
|
||||
resolved "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
|
||||
integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
|
||||
dependencies:
|
||||
"@floating-ui/core" "^1.0.0"
|
||||
"@floating-ui/utils" "^0.2.0"
|
||||
|
||||
"@floating-ui/react-dom@^2.0.0":
|
||||
version "2.0.8"
|
||||
resolved "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d"
|
||||
integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
|
||||
dependencies:
|
||||
"@floating-ui/dom" "^1.6.1"
|
||||
|
||||
"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
|
||||
version "0.2.1"
|
||||
resolved "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
|
||||
integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
|
||||
|
||||
"@fortaine/fetch-event-source@^3.0.6":
|
||||
version "3.0.6"
|
||||
resolved "https://registry.npmmirror.com/@fortaine/fetch-event-source/-/fetch-event-source-3.0.6.tgz#b8552a2ca2c5202f5699b93a92be0188d422b06e"
|
||||
|
|
@ -1357,6 +1384,14 @@
|
|||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-slot" "1.0.2"
|
||||
|
||||
"@radix-ui/react-arrow@1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
|
||||
integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
|
||||
"@radix-ui/react-compose-refs@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
|
||||
|
|
@ -1421,6 +1456,22 @@
|
|||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
|
||||
"@radix-ui/react-hover-card@^1.0.7":
|
||||
version "1.0.7"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
|
||||
integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "1.0.1"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-context" "1.0.1"
|
||||
"@radix-ui/react-dismissable-layer" "1.0.5"
|
||||
"@radix-ui/react-popper" "1.1.3"
|
||||
"@radix-ui/react-portal" "1.0.4"
|
||||
"@radix-ui/react-presence" "1.0.1"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-use-controllable-state" "1.0.1"
|
||||
|
||||
"@radix-ui/react-id@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
|
||||
|
|
@ -1429,6 +1480,23 @@
|
|||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-layout-effect" "1.0.1"
|
||||
|
||||
"@radix-ui/react-popper@1.1.3":
|
||||
version "1.1.3"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
|
||||
integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@floating-ui/react-dom" "^2.0.0"
|
||||
"@radix-ui/react-arrow" "1.0.3"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-context" "1.0.1"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
"@radix-ui/react-use-layout-effect" "1.0.1"
|
||||
"@radix-ui/react-use-rect" "1.0.1"
|
||||
"@radix-ui/react-use-size" "1.0.1"
|
||||
"@radix-ui/rect" "1.0.1"
|
||||
|
||||
"@radix-ui/react-portal@1.0.4":
|
||||
version "1.0.4"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
|
||||
|
|
@ -1513,6 +1581,14 @@
|
|||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-rect@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
|
||||
integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/rect" "1.0.1"
|
||||
|
||||
"@radix-ui/react-use-size@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
|
||||
|
|
@ -1521,6 +1597,13 @@
|
|||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-layout-effect" "1.0.1"
|
||||
|
||||
"@radix-ui/rect@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
|
||||
integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@remix-run/router@1.8.0":
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"
|
||||
|
|
|
|||
Loading…
Reference in New Issue