7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: HoverPopover done

This commit is contained in:
butterfly 2024-04-28 14:10:58 +08:00
parent 9569888b0e
commit 9f4813326c
6 changed files with 183 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/components/HoverPopover/index.tsx Normal file
View File

@ -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>
);
}

106
app/components/Popover/index.tsx
View File

@ -54,6 +54,7 @@ export interface PopoverProps {
placement?: "t" | "lt" | "rt" | "lb" | "rb" | "b" | "l" | "r"; placement?: "t" | "lt" | "rt" | "lb" | "rb" | "b" | "l" | "r";
noArrow?: boolean; noArrow?: boolean;
delayClose?: number; delayClose?: number;
useGlobalRoot?: boolean;
} }
export default function Popover(props: PopoverProps) { export default function Popover(props: PopoverProps) {
@ -68,6 +69,7 @@ export default function Popover(props: PopoverProps) {
placement = "t", placement = "t",
noArrow = false, noArrow = false,
delayClose = 0, delayClose = 0,
useGlobalRoot,
} = props; } = props;
const [internalShow, setShow] = useState(false); const [internalShow, setShow] = useState(false);
@ -244,62 +246,66 @@ export default function Popover(props: PopoverProps) {
); );
} }
// return ( if (useGlobalRoot) {
// <div return (
// className={`relative ${className}`} <div
// onPointerEnter={(e) => { className={`relative ${className}`}
// e.preventDefault(); onPointerEnter={(e) => {
// clearTimeout(closeTimer.current); e.preventDefault();
// onShow?.(true); clearTimeout(closeTimer.current);
// setShow(true); onShow?.(true);
// getRelativePosition(e.currentTarget, ""); setShow(true);
// window.document.documentElement.style.overflow = "hidden"; getRelativePosition(e.currentTarget, "");
// }} window.document.documentElement.style.overflow = "hidden";
// onPointerLeave={(e) => { }}
// e.preventDefault(); onPointerLeave={(e) => {
// if (delayClose) { e.preventDefault();
// closeTimer.current = window.setTimeout(() => { if (delayClose) {
// onShow?.(false); closeTimer.current = window.setTimeout(() => {
// setShow(false); onShow?.(false);
// }, delayClose); setShow(false);
// } else { }, delayClose);
// onShow?.(false); } else {
// setShow(false); onShow?.(false);
// } setShow(false);
// window.document.documentElement.style.overflow = "auto"; }
// }} window.document.documentElement.style.overflow = "auto";
// > }}
// {children} >
// {mergedShow && ( {children}
// <> {mergedShow && (
// <div <>
// className={`${ <div
// noArrow ? "opacity-0" : "" className={`${
// } bg-inherit ${arrowClassName}`} noArrow ? "opacity-0" : ""
// style={{ zIndex: baseZIndex + 1 }} } bg-inherit ${arrowClassName}`}
// > style={{ zIndex: baseZIndex + 1 }}
// <ArrowIcon sibling={popoverRef} /> >
// </div> <ArrowIcon sibling={popoverRef} />
// {createPortal( </div>
// <div {createPortal(
// className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`} <div
// style={{ zIndex: baseZIndex + 1, ...placementStyle }} className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
// ref={popoverRef} style={{ zIndex: baseZIndex + 1, ...placementStyle }}
// > ref={popoverRef}
// {content} >
// </div>, {content}
// popoverRoot, </div>,
// )} popoverRoot,
// </> )}
// )} </>
// </div> )}
// ); </div>
);
}
return ( return (
<div <div
className={`group relative ${className}`} className={`group relative ${className}`}
onPointerEnter={(e) => { onPointerEnter={(e) => {
getRelativePosition(e.currentTarget, ""); getRelativePosition(e.currentTarget, "");
e.preventDefault();
e.stopPropagation();
}} }}
> >
{children} {children}

3
app/containers/Chat/components/ChatActions.tsx
View File

@ -10,9 +10,6 @@ import { showToast } from "@/app/components/ui-lib";
import Locale from "@/app/locales"; import Locale from "@/app/locales";
import { Path } from "@/app/constant"; 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 BottomIcon from "@/app/icons/bottom.svg";
import StopIcon from "@/app/icons/pause.svg"; import StopIcon from "@/app/icons/pause.svg";
import RobotIcon from "@/app/icons/robot.svg"; import RobotIcon from "@/app/icons/robot.svg";

16
app/containers/Chat/index.tsx
View File

@ -23,8 +23,8 @@ import LogIcon from "@/app/icons/logIcon.svg";
import MenuLayout from "@/app/components/MenuLayout"; import MenuLayout from "@/app/components/MenuLayout";
import Panel from "./ChatPanel"; import Panel from "./ChatPanel";
import Popover, { PopoverProps } from "@/app/components/Popover";
import Confirm from "@/app/components/Confirm"; import Confirm from "@/app/components/Confirm";
import HoverPopover from "@/app/components/HoverPopover";
export function SessionItem(props: { export function SessionItem(props: {
onClick?: () => void; onClick?: () => void;
@ -96,7 +96,7 @@ export function SessionItem(props: {
{Locale.ChatItem.ChatItemCount(props.count)} {Locale.ChatItem.ChatItemCount(props.count)}
</div> </div>
</div> </div>
<Popover <HoverPopover
content={ content={
<div <div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`} className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
@ -113,20 +113,17 @@ export function SessionItem(props: {
</div> </div>
} }
popoverClassName={` popoverClassName={`
px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
`} `}
noArrow noArrow
placement={props.isMobileScreen ? "r" : "l"} align={props.isMobileScreen ? "end" : "start"}
className="!absolute top-[50%] translate-y-[-50%] right-3"
trigger={props.isMobileScreen ? "click" : "hover"}
delayClose={100}
> >
<div <div
className={` pointer-events-none opacity-0 group-hover/chat-menu-list:pointer-events-auto group-hover/chat-menu-list:opacity-100`} className={` pointer-events-none opacity-0 group-hover/chat-menu-list:pointer-events-auto group-hover/chat-menu-list:opacity-100`}
> >
<DeleteIcon /> <DeleteIcon />
</div> </div>
</Popover> </HoverPopover>
</div> </div>
)} )}
</Draggable> </Draggable>
@ -175,7 +172,6 @@ export default MenuLayout(function SessionList(props) {
<div <div
className={` className={`
h-[100%] flex flex-col h-[100%] flex flex-col
max-md:pb-chat-panel-mobile
md:px-0 md:px-0
`} `}
> >
@ -213,7 +209,7 @@ export default MenuLayout(function SessionList(props) {
</div> </div>
<div <div
className={`flex-1 overflow-y-auto`} className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}
// onClick={(e) => { // onClick={(e) => {
// if (e.target === e.currentTarget) { // if (e.target === e.currentTarget) {
// navigate(Path.Home); // navigate(Path.Home);

1
package.json
View File

@ -20,6 +20,7 @@
"@hello-pangea/dnd": "^16.5.0", "@hello-pangea/dnd": "^16.5.0",
"@next/third-parties": "^14.1.0", "@next/third-parties": "^14.1.0",
"@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-switch": "^1.0.3",
"@svgr/webpack": "^6.5.1", "@svgr/webpack": "^6.5.1",
"@vercel/analytics": "^0.1.11", "@vercel/analytics": "^0.1.11",

83
yarn.lock
View File

@ -1136,6 +1136,33 @@
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333" resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333"
integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w== 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": "@fortaine/fetch-event-source@^3.0.6":
version "3.0.6" version "3.0.6"
resolved "https://registry.npmmirror.com/@fortaine/fetch-event-source/-/fetch-event-source-3.0.6.tgz#b8552a2ca2c5202f5699b93a92be0188d422b06e" 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-primitive" "1.0.3"
"@radix-ui/react-slot" "1.0.2" "@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": "@radix-ui/react-compose-refs@1.0.1":
version "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" 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-primitive" "1.0.3"
"@radix-ui/react-use-callback-ref" "1.0.1" "@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": "@radix-ui/react-id@1.0.1":
version "1.0.1" version "1.0.1"
resolved "https://registry.npmmirror.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0" 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" "@babel/runtime" "^7.13.10"
"@radix-ui/react-use-layout-effect" "1.0.1" "@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": "@radix-ui/react-portal@1.0.4":
version "1.0.4" version "1.0.4"
resolved "https://registry.npmmirror.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15" resolved "https://registry.npmmirror.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
@ -1513,6 +1581,14 @@
dependencies: dependencies:
"@babel/runtime" "^7.13.10" "@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": "@radix-ui/react-use-size@1.0.1":
version "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" 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" "@babel/runtime" "^7.13.10"
"@radix-ui/react-use-layout-effect" "1.0.1" "@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": "@remix-run/router@1.8.0":
version "1.8.0" version "1.8.0"
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc" resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"